Merge pull request 'dev-wahyu' (#145) from dev-wahyu into staging

Reviewed-on: ordo/adw-frontend#145

src/views/SimproV2/CreatedProyek/DialogFormAnalysis.js

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from "react";
+import { Modal, ModalHeader, ModalBody, ModalFooter, Card, CardBody } from "reactstrap";
+import { Button } from "reactstrap";
+import axios from "../../../const/interceptorApi";
+import {
+  NotificationManager,
+} from "react-notifications";
+import { BASE_SIMPRO_LUMEN } from "../../../const/ApiConst";
+import { Table } from 'antd';
+import "antd/dist/antd.css";
+
+const DialogFormAnalysis = ({
+	openDialog,
+	closeDialog,
+	toggleDialog,
+  dataDetail
+}) => {
+	const token = localStorage.getItem("token");
+  const [dataTable, setDatatable] = useState([]);
+	const HEADER = {
+		headers: {
+			"Content-Type": "application/json",
+			Authorization: `Bearer ${token}`,
+		},
+	};
+
+  useEffect(() => {
+    if (dataDetail) {
+      getReportActivityMaterial();
+    }
+  }, [openDialog]);
+
+  const columns = [
+    {title: "Human Resource", dataIndex: "join_first_name", key: "join_first_name"},
+    {title: "Report Date", dataIndex: "report_date", key: "report_date"},
+    {title: "Volume Plan", dataIndex: "join_second_qty_planning", key: "join_second_qty_planning"},
+    {title: "Volume Actual", dataIndex: "qty", key: "qty"},
+    {title: "Keterangan", dataIndex: "description", key: "description"},
+  ]
+
+  const getReportActivityMaterial = async () => {
+    const payload = {
+      columns: [
+        {
+          name: "assign_material_id",
+          logic_operator: "=",
+          value: dataDetail.join_third_id,
+          operator: "AND",
+        }
+      ],
+      joins: [
+        {
+          name: "m_users",
+          column_join: "user_id",
+          column_results: ["name"]
+        },
+        {
+          name: "assign_material_to_activity",
+          column_join: "assign_material_id",
+          column_results: ["qty_planning"]
+        },
+      ],
+      orders: { columns: ["id"], ascending: false },
+      paging: { start: 0, length: -1 },
+    };
+
+    const result = await axios
+      .post(`${BASE_SIMPRO_LUMEN}/report-activity-material/search`, payload, HEADER)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      let dataRes = result.data.data || [];
+      setDatatable(dataRes);
+    } else {
+      NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+    }
+  };
+
+	const handleCLearData = () => {
+
+	};
+
+	const handleCancel = () => {
+		closeDialog("cancel", "none");
+    console.log(dataDetail)
+		handleCLearData();
+	};
+
+	return (
+		<>
+			<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
+				<ModalHeader className="capitalize" toggle={closeDialog}>
+          Detail Report Analysis
+				</ModalHeader>
+				<ModalBody>
+          <Card>
+            <CardBody>
+                <Table
+                  size="small"
+                  columns={columns}
+                  dataSource={dataTable}
+                  pagination={false}
+                  rowKey={"id"}
+                />
+            </CardBody>
+          </Card>
+        </ModalBody>
+				<ModalFooter>
+					<Button
+						className="capitalize"
+						color="secondary"
+						onClick={() => handleCancel()}
+					>
+						Cancel
+					</Button>
+				</ModalFooter>
+			</Modal>
+		</>
+	);
+};
+
+export default DialogFormAnalysis;

src/views/SimproV2/CreatedProyek/ReportAnalysis.js

@@ -9,13 +9,17 @@ import {
 import { BASE_SIMPRO_LUMEN } from "../../../const/ApiConst";
 import 'antd/dist/antd.css';
 import './style.css'
-import { Select, Table } from 'antd';
+import { Select, Table, Tooltip } from 'antd';
+import DialogFormAnalysis from './DialogFormAnalysis';
 const { Option } = Select
 
 const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) => {
   const token = localStorage.getItem("token");
   const [activeTab, setActiveTab] = useState('1');
   const [search, setSearch] = useState('');
+  const [openDialogFormAnalysis, setOpenDialogFormAnalysis] = useState(false);
+  const [dataDetail, setDataDetail] = useState(null);
+  const [avgActivityHr, setAvgActivityHr] = useState(0);
   const [avgActivity, setAvgActivity] = useState(0);
   const [dataTable, setDatatable] = useState([]);
   const [dataTableActivityToHr, setDataTableActivityToHr] = useState([]);
@@ -26,6 +30,20 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
     if (activeTab !== tab) {
       setActiveTab(tab);
     }
+    switch (tab) {
+      case '1':
+        setAvgActivityHr(0);
+        setSelectedHr(null);
+        setDataTableActivityToHr([]);
+        break;
+      case '2':
+        setAvgActivity(0);
+        setSearch('');
+        setDatatable([])
+        break;
+      default:
+        break;
+    }
   };
 
   const HEADER = {
@@ -43,12 +61,29 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
   ]
 
   const columnActivityToHr = [
-    {title: "Activity", dataIndex: "join_third_name", key: "join_third_name"},
+    {title: "Activity", dataIndex: "join_second_name", key: "join_second_name"},
-    {title: "Human Resource", dataIndex: "join_second_name", key: "join_second_name"},
+    {title: "Gantt", dataIndex: "join_fourth_name_version", key: "join_fourth_name_version"},
-    {title: "Report Date", dataIndex: "report_date", key: "report_date"},
+    {title: "Assign HR", dataIndex: "join_first_name", key: "join_first_name"},
-    {title: "Volume Actual", dataIndex: "qty", key: "qty"},
+    {title: "Material Plan", dataIndex: "join_third_qty_planning", key: "join_third_qty_planning",
-    {title: "Volume Planned", dataIndex: "join_first_qty_planning", key: "join_first_qty_planning"},
+    render: (text, record) =>
-    {title: "Description", dataIndex: "description", key: "description"}
+          <>
+            {text ? text : 0}
+          </>
+    },
+    {title: "Progress (%)", dataIndex: "join_second_persentase_progress", key: "persentase_progress"},
+    {
+        title: 'Action',
+        dataIndex: '',
+        key: 'id',
+        className: "nowrap",
+        render: (text, record) =>
+          <>
+            <Tooltip title="Detail Activity">
+              <Button size={"sm"} color='primary' onClick={() => handleDetail(text)}><i className="fa fa-eye"></i></Button>
+            </Tooltip>{" "}
+          </>
+        ,
+      },
   ]
 
   useEffect(() => {
@@ -72,6 +107,29 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
     setSearch(value);
   };
 
+  const handleDetail = (data) => {
+    setOpenDialogFormAnalysis(true);
+    setDataDetail(data);
+  }
+
+  const closeDialogForm = (status) => {
+    if (status == "Save") {
+      // getdataGantt()
+      NotificationManager.success(`Gantt berhasil dibuat!`, 'Success!!');
+    }else if (status == "Edit") {
+      // getdataGantt()
+      NotificationManager.success(`Gantt berhasil dibubah!`, 'Failed!!');
+    }else if (status == "failed") {
+      NotificationManager.error(`Gantt gagal dibuat!`, 'Failed!!');
+    }
+    setDataDetail(null)
+    setOpenDialogFormAnalysis(false)
+  }
+
+  const toggleDialogForm = () => {
+    setOpenDialogFormAnalysis(!openDialogFormAnalysis)
+  }
+
   const getDataHr = async () => {
     const result = await axios
       .get(`${BASE_SIMPRO_LUMEN}/human-resource/list`, HEADER)
@@ -86,7 +144,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
     }
   }
   const getDataActivityToHr = async () => {
-    setAvgActivity(0);
+    setAvgActivityHr(0);
     let sum = 0;
     const payload = {
       columns: [
@@ -105,11 +163,6 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
         }
       ],
       joins: [
-        {
-          name: "assign_material_to_activity",
-          column_join: "assign_material_id",
-          column_results: ["qty_planning"]
-        },
         {
           name: "m_users",
           column_join: "user_id",
@@ -119,14 +172,28 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
           name: "m_activity",
           column_join: "activity_id",
           column_results: ["name", "persentase_progress"]
-        }
+        },
+        {
+          name1: "m_activity",
+          name: "assign_material_to_activity",
+          column_join: "id",
+          column_self:"activity_id",
+          column_results: ["id", "qty_planning"]
+        },
+        {
+          name1: "m_activity",
+          name: "m_version_gantt",
+          column_join: "version_gantt_id",
+          column_self:"id",
+          column_results: ["name_version"]
+        },
       ],
       orders: { columns: ["id"], ascending: false },
       paging: { start: 0, length: -1 },
     };
 
     const result = await axios
-      .post(`${BASE_SIMPRO_LUMEN}/report-activity-material/search`, payload, HEADER)
+      .post(`${BASE_SIMPRO_LUMEN}/user-to-activity/search-analysis`, payload, HEADER)
       .then((res) => res)
       .catch((error) => error.response);
 
@@ -135,7 +202,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
       dataRes.forEach(element => {
           element.join_third_persentase_progress ? sum += parseInt(element.join_third_persentase_progress) : sum += 0;
       });
-      setAvgActivity(sum / dataRes.length);
+      setAvgActivityHr(sum / dataRes.length);
       setDataTableActivityToHr(dataRes);
     } else {
       NotificationManager.error("Gagal Mengambil Data!!", "Failed");
@@ -184,7 +251,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
   return (
     <>
       <Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
-        <ModalHeader className="capitalize" toggle={closeDialog}>Project</ModalHeader>
+        <ModalHeader className="capitalize" toggle={closeDialog}>Report Analysis</ModalHeader>
         <ModalBody>
           <div>
             <Nav tabs>
@@ -252,7 +319,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
                       <Col>
                         <Select showSearch value={selectedHr} onChange={(val) => setSelectedHr(val)} placeholder="Select Human Resource" filterOption={(input, option) =>
                           option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                        } style={{ width: '100%' }}>
+                        } style={{ width: 200 }}>
                             {hrList && hrList.map(res => (
                             <Option key={res.id} value={res.id}>{`${res.name}`}</Option>
                             ))}
@@ -261,13 +328,6 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
                     </Row>
                   </CardHeader>
                   <CardBody>
-                    <div style={{ textAlign: 'center' }}>
-                      <h1>
-                        {
-                          selectedHr && avgActivity ? `Activity user ini adalah ${avgActivity.toFixed(2)} %` : null
-                        }
-                      </h1>
-                    </div>
                       <Table
                         size="small"
                         columns={columnActivityToHr}
@@ -285,6 +345,12 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
           <Button color="primary" onClick={closeDialog}>Close</Button>
         </ModalFooter>
       </Modal>
+      <DialogFormAnalysis
+        openDialog={openDialogFormAnalysis}
+        toggleDialog={toggleDialogForm}
+        closeDialog={closeDialogForm}
+        dataDetail={dataDetail}
+      />
     </>
   )