Merge pull request 'set loading' (#182) from dev-wahyun into staging

Reviewed-on: ordo/adw-frontend#182

src/views/SimproV2/CreatedProyek/AsignCustProject.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react'
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { Button, Form } from 'reactstrap';
-import { Table, Tooltip } from 'antd';
+import { Table, Tooltip, Spin } from 'antd';
 import 'antd/dist/antd.css';
 import moment from 'moment';
 import {
@@ -25,9 +25,11 @@ const AssignCustProject = ({ openDialog, closeDialog, toggleDialog, idTask, proy
 	const [alertDelete, setAlertDelete] = useState(false)
 	const [idDelete, setIdDelete] = useState(0)
 	const [openDialogFormTools, setOpenDialogFormTools] = useState(false)
+  const [loading, setLoading] = useState(true);
 
 	useEffect(() => {
-		if (idTask > 0) {
+    if (idTask > 0) {
+      setLoading(true);
 			getDataAssignHr();
 		}
 	}, [openDialog]);
@@ -63,8 +65,10 @@ const AssignCustProject = ({ openDialog, closeDialog, toggleDialog, idTask, proy
 		if (result && result.data && result.data.code == 200) {
 			let dataRes = result.data.data || []
       const filteredData = dataRes.filter(item => item.is_customer === true);
-			setdataUserToProject(filteredData);
+      setdataUserToProject(filteredData);
+      setLoading(false);
 		} else {
+      setLoading(false);
 			NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
 		}
 	}
@@ -185,8 +189,10 @@ const AssignCustProject = ({ openDialog, closeDialog, toggleDialog, idTask, proy
 
 					<div>Assign Customer - {proyekName}</div> <Button onClick={handleOpenDialogFormTools} size='sm' color="primary"><i className='fa fa-plus'></i></Button>
 				</ModalHeader>
-				<ModalBody>
-					{renderForm()}
+        <ModalBody>
+          <Spin tip="Loading..." spinning={loading}>
+            {renderForm()}
+          </Spin>
 				</ModalBody>
 			</Modal>
 			<FormAsignCust

src/views/SimproV2/CreatedProyek/AsignHrProject.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react'
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { Button, Form } from 'reactstrap';
-import { Table, Tooltip } from 'antd';
+import { Table, Tooltip, Spin } from 'antd';
 import 'antd/dist/antd.css';
 import moment from 'moment';
 import { API_ADW, TOKEN_ADW, ASSIGN_HR_PROJECT_SEARCH, ASSIGN_HR_PROJECT_DELETE, USER_LIST, PROJECT_ROLE_SEARCH, ASSIGN_HR_PROJECT_ADD, ASSIGN_HR_PROJECT_EDIT } from '../../../const/ApiConst';
@@ -25,16 +25,18 @@ const AssignHrProject = ({ openDialog, closeDialog, toggleDialog, idTask, toolsR
 	const [openDialogFormTools, setOpenDialogFormTools] = useState(false)
 	const [dataEdit, setDataEdit] = useState(null)
 	const [listUser, setListUser] = useState([])
-	const [listRole, setListRole] = useState([])
+  const [listRole, setListRole] = useState([])
+  const [loading, setLoading] = useState(true);
 
 	useEffect(() => {
 		if (idTask > 0) {
+      setLoading(true);
 			getDataAssignHr();
 		}
 	}, [openDialog]);
 
 	useEffect(() => {
-		if (openDialog) {
+    if (openDialog) {
 			getDataProjectRole();
 			getDataUser();
 		}
@@ -70,9 +72,10 @@ const AssignHrProject = ({ openDialog, closeDialog, toggleDialog, idTask, toolsR
 
 		if (result && result.data && result.data.code == 200) {
 			let dataRes = result.data.data || []
-
-			setdataUserToProject(dataRes);
+      setdataUserToProject(dataRes);
+      setLoading(false);
 		} else {
+      setLoading(false);
 			NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
 		}
 	}
@@ -158,7 +161,7 @@ const AssignHrProject = ({ openDialog, closeDialog, toggleDialog, idTask, toolsR
 	}
 
 	const handleOpenDialogFormTools = () => {
-		setOpenDialogFormTools(true)
+    setOpenDialogFormTools(true)
 	}
 
 	const handleCancel = () => {
@@ -280,8 +283,10 @@ const AssignHrProject = ({ openDialog, closeDialog, toggleDialog, idTask, toolsR
 
 					<div>Assign Human Resource - {proyekName}</div> <Button onClick={handleOpenDialogFormTools} size='sm' color="primary"><i className='fa fa-plus'></i></Button>
 				</ModalHeader>
-				<ModalBody>
-					{renderForm()}
+        <ModalBody>
+          <Spin tip="Loading..." spinning={loading}>
+            {renderForm()}
+          </Spin>
 				</ModalBody>
 				{/* <ModalFooter>
 		  <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Close</Button>

src/views/SimproV2/CreatedProyek/AssignK3Project.js

@@ -3,11 +3,14 @@ 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 { 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",
@@ -30,7 +33,8 @@ const AssignK3Project = ({ openDialog, closeDialog, toggleDialog, idTask, dataK3
   }, [openDialog])
 
   useEffect(() => {
-    if(idTask && idTask > 0){
+    if (idTask && idTask > 0) {
+        setLoading(true);
         getK3toProject()
     }
   }, [idTask])
@@ -56,8 +60,10 @@ const AssignK3Project = ({ openDialog, closeDialog, toggleDialog, idTask, dataK3
             });
         }
         setTargetKeys(newTargetKeys)
+        setLoading(false);
     }else{
-        
+      setLoading(false);
+      NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
     }
   }
 
@@ -126,7 +132,9 @@ const AssignK3Project = ({ openDialog, closeDialog, toggleDialog, idTask, dataK3
       <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()}
+          <Spin tip="Loading..." spinning={loading}>
+            {renderForm()}
+          </Spin>
         </ModalBody>
         <ModalFooter>
           <Button color="primary" onClick={() => handleSave()}>Save</Button>{' '}

src/views/SimproV2/CreatedProyek/DialogDocument.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react'
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { Button } from 'reactstrap';
-import { Table, Tooltip, Popover } from 'antd';
+import { Table, Tooltip, Popover, Spin } from 'antd';
 import 'antd/dist/antd.css';
 import moment from 'moment';
 import SweetAlert from 'react-bootstrap-sweetalert';
@@ -33,9 +33,11 @@ const DialogDocument = ({ openDialog, closeDialog, toggleDialog, idTask, proyekN
   const [idDelete, setIdDelete] = useState(0)
   const [dataEdit, setDataEdit] = useState(null)
   const [parentIdNewFolder, setParentIdNewFolder] = useState(0)
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     if (idTask > 0) {
+      setLoading(true);
       getDataDocument();
     }
   }, [idTask, openDialog])
@@ -61,7 +63,9 @@ const DialogDocument = ({ openDialog, closeDialog, toggleDialog, idTask, proyekN
       .catch((error) => error.response);
     if (result && result.data && result.data.code == 200) {
       setDataDocument(result.data.data);
+      setLoading(false);
     } else {
+      setLoading(false);
       NotificationManager.error('Gagal mengambil data, Silahkan coba lagi!!', 'Failed');
     }
   }
@@ -279,9 +283,11 @@ const DialogDocument = ({ openDialog, closeDialog, toggleDialog, idTask, proyekN
           {/* <Button onClick={openDialogRequest} size='sm' color="primary"><i className='fa fa-folder'></i></Button> */}
         </ModalHeader>
         <ModalBody>
-          <div style={{ width: '100%', overflow: "auto" }}>
-            {RenderTable}
-          </div>
+          <Spin tip="Loading..." spinning={loading}>
+            <div style={{ width: '100%', overflow: "auto" }}>
+              {RenderTable}
+            </div>
+          </Spin>
         </ModalBody>
         {/* <ModalFooter>
           <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>

src/views/SimproV2/CreatedProyek/DialogGantt.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react'
 import { Modal, ModalHeader, ModalBody, ModalFooter, Breadcrumb, BreadcrumbItem} from 'reactstrap';
 import { Button } from 'reactstrap';
-import { Table, Tooltip } from 'antd';
+import { Table, Tooltip, Spin } from 'antd';
 import 'antd/dist/antd.css';
 import moment from 'moment';
 import SweetAlert from 'react-bootstrap-sweetalert';
@@ -31,6 +31,7 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
   const [humanResource, setHumanResource] = useState([])
   const [dataEdit, setDataEdit] = useState([])
   const [typeDialog, setTypeDialog] = useState('')
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     if (openDialog && hierarchyId > 0 || idTask > 0 && !openDialogHierarchy) {
@@ -96,7 +97,9 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
         return a.name_version.toLowerCase().localeCompare(b.name_version.toLowerCase());
       });
       setDataGantt(sortedData);
+      setLoading(false);
     } else {
+      setLoading(false);
       NotificationManager.error(`Data gantt project gagal terload silahkan coba lagi!`, 'Failed!!');
     }
   }
@@ -254,7 +257,9 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
         </ModalHeader>
         <ModalBody>
           <div style={{ width: '100%', overflow: "auto" }}>
-            {RenderTable}
+            <Spin tip="Loading..." spinning={loading}>
+              {RenderTable}
+            </Spin>
           </div>
         </ModalBody>
         {/* <ModalFooter>

src/views/SimproV2/CreatedProyek/ReportAnalysis.js

@@ -1,7 +1,21 @@
 import React, {useState, useEffect} from 'react'
-import { Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBody } from 'reactstrap';
-import { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col, Input } from 'reactstrap';
-import { Button } from 'reactstrap';
+import {
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Card,
+  CardHeader,
+  CardBody,
+  TabContent,
+  TabPane,
+  Nav,
+  NavItem,
+  NavLink,
+  Row,
+  Col,
+  Button
+} from 'reactstrap';
 import axios from "../../../const/interceptorApi";
 import {
   NotificationManager,
@@ -9,7 +23,7 @@ import {
 import { BASE_SIMPRO_LUMEN } from "../../../const/ApiConst";
 import 'antd/dist/antd.css';
 import './style.css'
-import { Select, Table, Tooltip } from 'antd';
+import { Select, Table, Tooltip, Spin } from 'antd';
 import DialogFormAnalysis from './DialogFormAnalysis';
 import moment from "moment";
 const { Option } = Select
@@ -29,6 +43,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
   const [hrList, setHrList] = useState([]);
   const [groupedActivity, setGroupedActivity] = useState([]);
   const [selectedHr, setSelectedHr] = useState(null);
+  const [loading, setLoading] = useState(false);
 
   const toggle = (tab) => {
     if (activeTab !== tab) {
@@ -235,12 +250,14 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
 
   useEffect(() => {
     if (search) {
+      setLoading(true);
       getDataActivity()
     }
   }, [search]);
 
   useEffect(() => {
     if (selectedHr) {
+      setLoading(true);
       getDataActivityToHr()
     }
   }, [selectedHr]);
@@ -398,7 +415,9 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
       });
       setAvgActivityHr(sum / dataRes.length);
       setDataTableActivityToHr(dataRes);
+      setLoading(false);
     } else {
+      setLoading(false);
       NotificationManager.error("Gagal Mengambil Data!!", "Failed");
     }
   };
@@ -474,7 +493,9 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
       setSumVolPlan(sumPlan);
       setSumVolAct(sumAct);
       setDatatable(dataRes);
+      setLoading(false);
     } else {
+      setLoading(false);
       NotificationManager.error("Gagal Mengambil Data!!", "Failed");
     }
   };
@@ -531,13 +552,15 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
                       </h1>
                     </div>
                     <div style={{ width: '100%', overflowX: 'auto' }}>
-                      <Table
-                        size="small"
-                        columns={columns}
-                        dataSource={dataTable}
-                        pagination={false}
-                        rowKey="id"
-                      />
+                      <Spin tip="Loading..." spinning={loading}>
+                        <Table
+                          size="small"
+                          columns={columns}
+                          dataSource={dataTable}
+                          pagination={false}
+                          rowKey="id"
+                        />
+                      </Spin>
                     </div>
                   </CardBody>
                 </Card>
@@ -559,13 +582,15 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
                   </CardHeader>
                   <CardBody style={{ width: '100%' }}>
                     <div style={{ width: '100%', overflowX: 'auto' }}>
-                      <Table
-                        size="small"
-                        columns={columnActivityToHr}
-                        dataSource={dataTableActivityToHr}
-                        pagination={false}
-                        rowKey={"id"}
-                      />
+                      <Spin tip="Loading..." spinning={loading}>
+                        <Table
+                          size="small"
+                          columns={columnActivityToHr}
+                          dataSource={dataTableActivityToHr}
+                          pagination={false}
+                          rowKey={"id"}
+                        />
+                      </Spin>
                     </div>
                   </CardBody>
                 </Card>

src/views/SimproV2/CreatedProyek/index.js

@@ -525,6 +525,7 @@ const CreatedProyek = ({ params, ...props }) => {
   };
 
   const handleOpenDialogViewDetail = async (data) => {
+    setLoading(true);
     setidTask(data.id);
     // setDataView(data)
     await getDataProject(data.id);
@@ -698,7 +699,10 @@ const CreatedProyek = ({ params, ...props }) => {
       .then((res) => res)
       .catch((err) => err.response);
     if (result && result.data && result.data.code === 200) {
+      setLoading(false)
       setProjectImage(result.data.data);
+    }else{
+      setLoading(false)
     }
   }
 

src/views/SimproV2/ResourceWorker/index.js

@@ -8,7 +8,7 @@ import moment from 'moment'
 import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
 import { DownloadOutlined } from '@ant-design/icons';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
-import { Pagination, Table, Button, Tooltip } from 'antd';
+import { Pagination, Table, Button, Tooltip, Spin } from 'antd';
 import {
   PROYEK_SEARCH, USER_ADD, USER_SEARCH, USER_EDIT, USER_DELETE, ROLE_SEARCH, DIVISI_SEARCH, USER_SHIFT_ADD, USER_SYNC
 } from '../../../const/ApiConst';
@@ -18,6 +18,7 @@ const proyek_id = localStorage.getItem('proyek_id');
 const role_id = localStorage.getItem('role_id');
 const format = "DD-MM-YYYY";
 const token = window.localStorage.getItem('token');
+
 const config = {
   headers:
   {
@@ -53,12 +54,15 @@ const ResourceWorker = ({ params }) => {
   const [typeDialogShift, setTypeDialogShift] = useState('Save')
   const pageName = params.name;
   const { t } = useTranslation();
+  const [loading, setLoading] = useState(true);
+
   useEffect(() => {
     getRoleList()
     getDivisiList()
   }, [])
 
   useEffect(() => {
+    setLoading(true);
     getDataUser()
   }, [search, rowsPerPage, currentPage])
 
@@ -206,7 +210,9 @@ const ResourceWorker = ({ params }) => {
     if (result && result.data && result.data.code == 200) {
       setDatatable(result.data.data);
       setTotalPage(result.data.totalRecord);
+      setLoading(false);
     } else {
+      setLoading(false);
       NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
     }
   }
@@ -571,7 +577,9 @@ const ResourceWorker = ({ params }) => {
           </Row>
         </CardHeader>
         <CardBody>
-          {RenderTable}
+          <Spin tip="Loading..." spinning={loading}>
+            {RenderTable}
+          </Spin>
           <Pagination
             style={{ marginTop: "25px" }}
             showSizeChanger