add loader

src/views/SimproV2/CreatedProyek/AssignK3Project.js

@@ -1,141 +1,149 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { Button, Form } from 'reactstrap';
+import { Button, Form } from 'reactstrap';
-import axios from "../../../const/interceptorApi";
+import axios from "../../../const/interceptorApi";
-import { PROJECT_TO_CHECKLIST_K3_ADDS, PROJECT_TO_CHECKLIST_K3_SEARCH } from '../../../const/ApiConst';
+import { PROJECT_TO_CHECKLIST_K3_ADDS, PROJECT_TO_CHECKLIST_K3_SEARCH } from '../../../const/ApiConst';
-import { Transfer } from 'antd';
+import { Transfer, Spin } from 'antd';
-import 'antd/dist/antd.css';
+import 'antd/dist/antd.css';
-
+import { NotificationManager } from 'react-notifications';
-const AssignK3Project = ({ openDialog, closeDialog, toggleDialog, idTask, dataK3, proyekName }) => {
+
-  const token = localStorage.getItem("token")
+const AssignK3Project = ({ openDialog, closeDialog, toggleDialog, idTask, dataK3, proyekName }) => {
-  const HEADER = {
+  const token = localStorage.getItem("token")
-    headers: {
+  const [loading, setLoading] = useState(true);
-      "Content-Type": "application/json",
+
-      "Authorization": `Bearer ${token}`
+  const HEADER = {
-    }
+    headers: {
-  }
+      "Content-Type": "application/json",
-  const [id, setId] = useState(0)
+      "Authorization": `Bearer ${token}`
-  const [targetKeys, setTargetKeys] = useState([])
+    }
-  
+  }
-
+  const [id, setId] = useState(0)
-  const handleClearData = () => {
+  const [targetKeys, setTargetKeys] = useState([])
-    setId(0)
+
-    setTargetKeys([])
+
-  }
+  const handleClearData = () => {
-
+    setId(0)
-  useEffect(() => {
+    setTargetKeys([])
-    if(!openDialog){
+  }
-        handleClearData()
+
-    }
+  useEffect(() => {
-  }, [openDialog])
+    if(!openDialog){
-
+        handleClearData()
-  useEffect(() => {
+    }
-    if(idTask && idTask > 0){
+  }, [openDialog])
-        getK3toProject()
+
-    }
+  useEffect(() => {
-  }, [idTask])
+    if (idTask && idTask > 0) {
-
+        setLoading(true);
-  const getK3toProject = async () => {
+        getK3toProject()
-    const payload = {
+    }
-        "columns": [
+  }, [idTask])
-            { "name": "proyek_id", "logic_operator": "=", "value": idTask, "operator": "AND" }
+
-        ]
+  const getK3toProject = async () => {
-    }
+    const payload = {
-    const result = await axios
+        "columns": [
-      .post(PROJECT_TO_CHECKLIST_K3_SEARCH, payload, HEADER)
+            { "name": "proyek_id", "logic_operator": "=", "value": idTask, "operator": "AND" }
-      .then(res => res)
+        ]
-      .catch((error) => error.response);
+    }
-
+    const result = await axios
-    if(result && result.status==200){
+      .post(PROJECT_TO_CHECKLIST_K3_SEARCH, payload, HEADER)
-        console.log("cek get project to checklist k3",result.data.data)
+      .then(res => res)
-        let data = result.data.data || []
+      .catch((error) => error.response);
-        let newTargetKeys = []
+
-        if (data.length > 0) {
+    if(result && result.status==200){
-            data.map((val,index)=> {
+        console.log("cek get project to checklist k3",result.data.data)
-                newTargetKeys.push(val.checklist_k3_id)
+        let data = result.data.data || []
-            });
+        let newTargetKeys = []
-        }
+        if (data.length > 0) {
-        setTargetKeys(newTargetKeys)
+            data.map((val,index)=> {
-    }else{
+                newTargetKeys.push(val.checklist_k3_id)
-        
+            });
-    }
+        }
-  }
+        setTargetKeys(newTargetKeys)
-
+        setLoading(false);
-  const handleSave = async () => {
+    }else{
-    await saveAssign()
+      setLoading(false);
-    handleClearData()
+      NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
-  }
+    }
-
+  }
-  const saveAssign= async () => {
+
-
+  const handleSave = async () => {
-    const formData = {
+    await saveAssign()
-        checklist_k3_id:targetKeys,
+    handleClearData()
-        proyek_id:idTask
+  }
-    }
+
-
+  const saveAssign= async () => {
-    const result = await axios
+
-      .post(PROJECT_TO_CHECKLIST_K3_ADDS, formData, HEADER)
+    const formData = {
-      .then(res => res)
+        checklist_k3_id:targetKeys,
-      .catch((error) => error.response);
+        proyek_id:idTask
-
+    }
-
+
-    if(result && result.status==200){
+    const result = await axios
-      closeDialog('success')
+      .post(PROJECT_TO_CHECKLIST_K3_ADDS, formData, HEADER)
-    }else{
+      .then(res => res)
-      closeDialog('failed')
+      .catch((error) => error.response);
-    }
+
-  }
+
-
+    if(result && result.status==200){
-  const handleCancel = () => {
+      closeDialog('success')
-    closeDialog('cancel')
+    }else{
-    handleClearData()
+      closeDialog('failed')
-  }
+    }
-
+  }
-  const handleChange = targetKeys => {
+
-    setTargetKeys(targetKeys)
+  const handleCancel = () => {
-  };
+    closeDialog('cancel')
-
+    handleClearData()
-  const renderForm = () => {
+  }
-    return (
+
-      <div style={{
+  const handleChange = targetKeys => {
-        alignContent: "center",
+    setTargetKeys(targetKeys)
-        justifyContent: "center !imporant",
+  };
-        paddingLeft: 20,
+
-        paddingRight: 20,
+  const renderForm = () => {
-        overflow: "auto"
+    return (
-      }}>
+      <div style={{
-        <Transfer 
+        alignContent: "center",
-            showSearch
+        justifyContent: "center !imporant",
-            titles={['Available K3', 'Assigned to Project']}
+        paddingLeft: 20,
-            dataSource={dataK3}
+        paddingRight: 20,
-            targetKeys={targetKeys}
+        overflow: "auto"
-            onChange={handleChange}
+      }}>
-            render={item => item.title}
+        <Transfer
-            listStyle={{
+            showSearch
-              width: 250,
+            titles={['Available K3', 'Assigned to Project']}
-              height: 300,
+            dataSource={dataK3}
-            }}
+            targetKeys={targetKeys}
-        />
+            onChange={handleChange}
-      </div>
+            render={item => item.title}
-    )
+            listStyle={{
-  }
+              width: 250,
-
+              height: 300,
-
+            }}
-  return (
+        />
-    <>
+      </div>
-      <Modal size="lg" style={{maxWidth: '600px', width: '100%'}} isOpen={openDialog} toggle={toggleDialog}>
+    )
-        <ModalHeader className="capitalize" toggle={closeDialog}>Assign K3 to Project {proyekName !== '' ? `- ${proyekName}` : ''}</ModalHeader>
+  }
-        <ModalBody>
+
-          {renderForm()}
+
-        </ModalBody>
+  return (
-        <ModalFooter>
+    <>
-          <Button color="primary" onClick={() => handleSave()}>Save</Button>{' '}
+      <Modal size="lg" style={{maxWidth: '600px', width: '100%'}} isOpen={openDialog} toggle={toggleDialog}>
-          <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Cancel</Button>
+        <ModalHeader className="capitalize" toggle={closeDialog}>Assign K3 to Project {proyekName !== '' ? `- ${proyekName}` : ''}</ModalHeader>
-        </ModalFooter>
+        <ModalBody>
-      </Modal>
+          <Spin tip="Loading..." spinning={loading}>
-    </>
+            {renderForm()}
-  )
+          </Spin>
-
+        </ModalBody>
-}
+        <ModalFooter>
-
+          <Button color="primary" onClick={() => handleSave()}>Save</Button>{' '}
-export default AssignK3Project;
+          <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Cancel</Button>
+        </ModalFooter>
+      </Modal>
+    </>
+  )
+
+}
+
+export default AssignK3Project;