update draggable dan visualisasi

package-lock.json

@@ -7281,6 +7281,11 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz",
       "integrity": "sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg=="
     },
+    "immutability-helper": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-3.1.1.tgz",
+      "integrity": "sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ=="
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -11906,6 +11911,18 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-draggable-list": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/react-draggable-list/-/react-draggable-list-4.0.3.tgz",
+      "integrity": "sha512-+6v+5ZrkaSeGlEMyFnVoWt/n3ANhQstsfV3RnFUbEI5DS2q/YwRbEbVlgq9bUQ4kn06MJ1PBCPEJpqq/VobAqA==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "immutability-helper": "^3.0.0",
+        "prop-types": "^15.6.0",
+        "react-motion": "^0.5.2",
+        "react-multi-ref": "^1.0.0"
+      }
+    },
     "react-dropzone": {
       "version": "11.0.2",
       "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.0.2.tgz",
@@ -11941,6 +11958,31 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-motion": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
+      "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
+      "requires": {
+        "performance-now": "^0.2.0",
+        "prop-types": "^15.5.8",
+        "raf": "^3.1.0"
+      },
+      "dependencies": {
+        "performance-now": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
+          "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU="
+        }
+      }
+    },
+    "react-multi-ref": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-multi-ref/-/react-multi-ref-1.0.0.tgz",
+      "integrity": "sha512-LJuQXEabnv8JLcvcWeJcTogxG4eXVFiPfQ9CECuwWUbfJdrVpPf13m9RxmImyJS0J99BWokGn7dlR1dR06XPDw==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "react-number-format": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-4.4.1.tgz",

package.json

@@ -25,6 +25,7 @@
     "react-bootstrap": "^1.3.0",
     "react-d3-donut": "^1.1.2",
     "react-dom": "^16.13.1",
+    "react-draggable-list": "^4.0.3",
     "react-dropzone": "^11.0.2",
     "react-excel-renderer": "^1.1.0",
     "react-number-format": "^4.4.1",

src/container/ApprovalMatrix/ApprovalMatrix.js

@@ -73,6 +73,7 @@ export default class ApprovalMatrix extends Component {
 
     componentDidMount() {
         this.getData()
+        console.log(this.props.height)
     }
 
     getData() {
@@ -330,6 +331,12 @@ export default class ApprovalMatrix extends Component {
                         </div>
                     </div>
                     :
+                    this.state.visibleVisual == true ?
+                    <VisualisasiAM
+                        onClickClose={() => this.setState({ visibleVisual: false, visibleAM: true })}
+                        height= {this.props.height}
+                    />
+                    :
                     <div style={{ height: this.props.height }}>
                         <div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
                         <div> 
@@ -367,6 +374,7 @@ export default class ApprovalMatrix extends Component {
                         </div>
                     </div>
                 }
+
                 {this.state.visibleCreate && (
                     <CreateApprovalMatrix
                         onClickClose={() => this.setState({ visibleCreate: false })}
@@ -381,11 +389,6 @@ export default class ApprovalMatrix extends Component {
                         data={this.state.listData[this.state.selectIndex]}
                     />
                 )}
-                {this.state.visibleVisual && (
-                    <VisualisasiAM
-                        onClickClose={() => this.setState({ visibleVisual: false })}
-                    />
-                )}
                 {this.state.visibleUpload && (
                     <div className="test app-popup-show">
                         <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>

src/container/ApprovalMatrix/VisualisasiAM.js

@@ -26,13 +26,38 @@ export default class PreviewAM extends Component {
         }
     }
 
+    state = {
+        tasks: [
+            {name:"Angular",type:"lvl1"},
+            {name:"Typescript",type:"lvl1"},
+            {name:"React", type:"lvl2"},
+            {name:"Vue", type:"lvl3"}
+          ]
+    }
+
     componentDidMount() {
+        console.log(this.props.height)
     }
 
     render() {
+        // var tasks = {
+        //   lvl1: [],
+        //   lvl2: [],
+        //   lvl3: []
+        // }
+
+        // this.state.tasks.forEach ((task) => {
+        //   tasks[task.type].push(
+        //     <div key={task.taskName} 
+        //       className="draggable"
+        //       style = {{backgroundColor: task.bgcolor}}>
+        //       {task.taskName}
+        //     </div>
+        //   );
+        // });
+
         return (
             <div>    
-            {this.state.visibleVisual === true ?
                 <div style={{ height: this.props.height }}>
                     <div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
                         <div>
@@ -119,7 +144,7 @@ export default class PreviewAM extends Component {
                                 </div>
                             </div>
                             <div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}>
-                            <div onClick={() => this.setState({ visibleVisual: false, visibleAM: true })} style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: 'dodgerblue', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
+                                <div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: 'dodgerblue', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
                                     <span style={{ color: '#fff', fontSize: 11 }}>Kembali</span>
                                 </div>
                                 <div className="row" style={{ float: 'right', marginRight: 25 }}>
@@ -133,13 +158,6 @@ export default class PreviewAM extends Component {
                             </div>
                         </div>
                     </div>
-                : false
-            }
-            {this.state.visibleAM && (
-                <ApprovalMatrix
-                    onClickClose={() => this.setState({ visibleAM: false })}
-                />
-            )}
             </div>
             
         );