add loader

src/views/SimproV2/CreatedProyek/AssignK3Project.js

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