Merge pull request 'Hierarchy Gantt' (#11) from Dev-Farhan into staging

Reviewed-on: ordo/adw-frontend#11
Reviewed-by: ibnu <ibnu@mail.com>

src/const/ApiConst.js

@@ -467,5 +467,5 @@ export const HIERARCHY_FTTH_SEARCH = `${BASE_SIMPRO_LUMEN}/hierarchy-ftths/searc
 export const HIERARCHY_FTTH_SHOW = (id) => { return `${BASE_SIMPRO_LUMEN}/hierarchy-ftths/${id}` }
 export const HIERARCHY_FTTH_UPDATE = (id) => { return `${BASE_SIMPRO_LUMEN}/hierarchy-ftths/${id}` }
 export const HIERARCHY_FTTH_DELETE = (id) => { return `${BASE_SIMPRO_LUMEN}/hierarchy-ftths/${id}` }
-
+export const HIERARCHY_FTTH_TREE = (id) => { return `${BASE_SIMPRO_LUMEN}/hierarchy-ftths/tree/${id}` }
 export const WAYPOINT_SEARCH = `${BASE_SIMPRO_LUMEN}/waypoint/search`

src/views/SimproV2/CreatedProyek/DIalogFormHierarchy.js

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from 'react'
+import {
+    Modal, ModalHeader, ModalBody, ModalFooter,
+    Button, Form, FormGroup, Label, Input, Col, Row
+} from 'reactstrap';
+import { DatePicker, Tooltip, Select } from 'antd';
+import { formatRupiah, formatNumber } from '../../../const/CustomFunc'
+import moment from 'moment';
+import 'antd/dist/antd.css';
+import { useTranslation } from 'react-i18next';
+
+const DialogFormHierarchy = ({ openDialog, closeDialog, toggleDialog, typeDialog, parentId, idProject }) => {
+    const [id, setId] = useState(0)
+    const [nameDaerah, setNameDaerah] = useState('')
+    const [nameArea, setNameArea] = useState('')
+    const { t } = useTranslation();
+    const handleSaveDaerah = () => {
+        let data = '';
+        if (typeDialog === "Save") {
+            data = {
+                project_id: idProject,
+                name: nameDaerah,
+            }
+            closeDialog('save', data);
+        } else {
+            data = {
+                id,
+                name: nameDaerah,
+            }
+            closeDialog('edit', data);
+        }
+
+    }
+    const handleSaveArea = () => {
+        let data = '';
+        if (typeDialog === "SaveArea") {
+            data = {
+                project_id: idProject,
+                name: nameArea,
+            }
+
+            if (parentId && parentId > 0) {
+                data['parent_id'] = parentId
+            }
+            closeDialog('save', data);
+        } else {
+            data = {
+                id,
+                project_id: idProject,
+                parent_id: parentId,
+                name: nameArea,
+            }
+            closeDialog('edit', data);
+        }
+
+    }
+
+    const handleCancel = () => {
+        closeDialog('cancel', 'none')
+    }
+    const renderFormDaerah = () => {
+        return (
+            <Form>
+                <Row>
+                    <Col>
+                        <FormGroup>
+                            <Label className="capitalize">Nama Daerah</Label>
+                            <Input type="text" value={nameDaerah} onChange={(e) => setNameDaerah(e.target.value)} placeholder={t('inputName')} />
+                        </FormGroup>
+                    </Col>
+                </Row>
+            </Form>
+        )
+    }
+    const renderFormArea = () => {
+        return (
+            <Form>
+                <Row>
+                    <Col>
+                        <FormGroup>
+                            <Label className="capitalize">Nama Area</Label>
+                            <Input type="text" value={nameArea} onChange={(e) => setNameArea(e.target.value)} placeholder={t('inputName')} />
+                        </FormGroup>
+                    </Col>
+                </Row>
+            </Form>
+        )
+    }
+    return (
+        <>
+            {typeDialog === "SaveArea" ? (
+                <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
+                    <ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "SaveArea" ? `Add` : "Edit"} Area</ModalHeader>
+                    <ModalBody>
+                        {renderFormArea()}
+                    </ModalBody>
+                    <ModalFooter>
+                        <Button color="primary" onClick={() => handleSaveArea()}>{typeDialog == "SaveArea" ? `Add` : "Edit"} </Button>{' '}
+                        <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button>
+                    </ModalFooter>
+                </Modal>
+            ) : (
+                <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
+                    <ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Daerah</ModalHeader>
+                    <ModalBody>
+                        {renderFormDaerah()}
+                    </ModalBody>
+                    <ModalFooter>
+                        <Button color="primary" onClick={() => handleSaveDaerah()}>{typeDialog}</Button>{' '}
+                        <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button>
+                    </ModalFooter>
+                </Modal>
+            )}
+        </>
+    )
+}
+export default DialogFormHierarchy;

src/views/SimproV2/CreatedProyek/DIalogHierarchy.js

@@ -1,15 +1,20 @@
 import React, { useEffect, useState, useMemo } from 'react'
 import { Modal, ModalHeader, ModalBody, } from 'reactstrap';
 import { Button } from 'reactstrap';
-import { Table, Tooltip } from 'antd';
+import { Space, Table, Tooltip } from 'antd';
 import 'antd/dist/antd.css';
 import moment from 'moment';
 import SweetAlert from 'react-bootstrap-sweetalert';
-import { HIERARCHY_FTTH_DELETE, HIERARCHY_FTTH_SEARCH, USER_LIST } from '../../../const/ApiConst';
+import { HIERARCHY_FTTH_DELETE, HIERARCHY_FTTH_TREE, VERSION_GANTT_SEARCH, HIERARCHY_FTTH_ADD, USER_LIST } from '../../../const/ApiConst';
 import axios from "../../../const/interceptorApi"
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import DialogUserGantt from './DialogUserGantt';
-
+import DialogForm from './DIalogFormHierarchy'
+import DialogFormGantt from './DialogFormGantt';
+import { useTranslation } from 'react-i18next';
+import { async } from '@dabeng/react-orgchart';
+import { Link } from 'react-router-dom';
+import { use } from 'i18next';
 const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName }) => {
   const token = localStorage.getItem("token")
   const HEADER = {
@@ -19,19 +24,24 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
     }
   }
 
+  const [id, setId] = useState(0)
+  const [parentId, setParentId] = useState(0)
+  const [dataGantt, setDataGantt] = useState([])
+  const [typeDialog, setTypeDialog] = useState("add")
   const [openDialogForm, setOpenDialogForm] = useState(false)
+  const [openDialogFormGantt, setOpenDialogFormGantt] = useState(false)
   const [openDialogUserGantt, setOpenDialogUserGantt] = useState(false)
   const [dataHierarchy, setDataHierarchy] = useState([])
   const [alertDelete, setAlertDelete] = useState(false)
   const [idDelete, setIdDelete] = useState(0)
   const [idGantt, setIdGantt] = useState(0)
   const [humanResource, setHumanResource] = useState([])
-
+  const { t } = useTranslation();
   useEffect(() => {
     if (idTask > 0) {
       getdataHierarchy();
     }
-  }, [idTask, openDialog])
+  }, [idTask, openDialog, closeDialog])
 
   useEffect(() => {
     getDataHumanResource();
@@ -43,7 +53,7 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
     } else {
 
     }
-  }, [openDialog])
+  }, [openDialog, closeDialog])
 
   const getDataHumanResource = async () => {
     const result = await axios
@@ -70,16 +80,72 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
     setHumanResource(finalData)
   }
 
+  const handleAdd = async () => {
+    await setTypeDialog("Save")
+    setOpenDialogForm(true)
+  }
+  const handleAddWithParent = async (id) => {
+    setParentId(id)
+    await setTypeDialog("SaveArea")
+    setOpenDialogForm(true)
+  }
+
+  const handleAddGant = (id) => {
+
+    setParentId(id)
+    setOpenDialogFormGantt(true)
+  }
+
+  const toggleDialogFormGantt = () => {
+    setOpenDialogFormGantt(!openDialogFormGantt)
+  }
+
+  const closeDialogFromGantt = (status) => {
+    if (status == "success") {
+      NotificationManager.success(`Gantt berhasil dibuat!`, 'Success!!');
+    } else if (status == "failed") {
+      NotificationManager.error(`Gantt gagal dibuat!`, 'Failed!!');
+    }
+    setOpenDialogFormGantt(false)
+  }
+
+  const closeDialogFromHierarchy = (type, data) => {
+    if (type == 'save') {
+      saveHierarchy(data)
+    } else {
+      updateHierarchy(data)
+    }
+    setId(0);
+    setOpenDialogForm(false);
+  }
+
+  const saveHierarchy = async (data) => {
+    const result = await axios.post(HIERARCHY_FTTH_ADD, data, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code === 200) {
+      getdataHierarchy()
+      NotificationManager.success(`${result.data.message}`, 'Success!!');
+    } else {
+      NotificationManager.error(`${result.data.message}`, 'Failed!!');
+    }
+  }
+
+  const updateHierarchy = async (data) => {
+
+  }
+
 
   const getdataHierarchy = async () => {
 
     const payload = {
-      "columns": [
+      "columns": [{ "name": "project_id", "logic_operator": "=", "value": idTask, "operator": "AND" }],
-        { "name": "project_id", "logic_operator": "=", "value": idTask, "operator": "AND" }
+      "joins": [{ "name": "m_version_gantt", "column_join": "hierarchy_ftth_id", "column_results": "progress" }],
-      ]
     }
+    const url = HIERARCHY_FTTH_TREE(idTask)
     const result = await axios
-      .post(HIERARCHY_FTTH_SEARCH, payload, HEADER)
+      .get(url, HEADER)
       .then(res => res)
       .catch((error) => error.response);
 
@@ -114,26 +180,50 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
         className: "nowrap",
         render: (text, record) =>
           <>
-            <Tooltip title="Delete Gantt">
+            <Tooltip title="Delete">
-              <Button size="small" size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
+              <Button size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
+            </Tooltip>{" "}
+            <Tooltip title="Tambah Data">
+              <Button size={"sm"} color='success' onClick={() => handleAddWithParent(text.id)}><i className="fa fa-plus"></i></Button>
             </Tooltip>{" "}
+            <Tooltip title="Gantt">
+              <Button size={"sm"} color='primary' onClick={() => handleAddGant(text.id)}><i className="fa fa-gears"></i></Button>
+            </Tooltip>
           </>
         ,
       },
-      { title: 'Nama', dataIndex: 'name', key: 'name' },
+      {
+        title: 'Nama', dataIndex: 'name', key: 'name'
+      },
       { title: 'Tanggal dibuat', dataIndex: 'created_at', key: 'created_at', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
+      { title: 'Progress', dataIndex: 'progress', key: 'progress' },
 
     ];
 
     return (
       <Table
         size="small"
-        columns={columns}
+        columns={[Table.EXPAND_COLUMN, ...columns]}
-        rowKey={"id"}
+        expandable={{
+          expandedRowRender: (record) => {
+            if (Array.isArray(record.dataGantt)) {
+              return record.dataGantt.map((data) => (
+                <Link to={`/projects/${data.id}/${idTask}/gantt`}>
+                  <Space align="center">
+                    <p style={{ marginLeft: 15, width: "100%" }}>{data.name_version}</p>
+                  </Space>
+                </Link>
+              ));
+            } else {
+              return null; // or some default content if dataGantt is not an array
+            }
+          },
+        }}
+        rowKey="id"
         dataSource={dataHierarchy}
         pagination={{ position: ["bottomLeft"] }}
       />
-    )
+    );
   }, [dataHierarchy])
 
   const cancelDelete = () => {
@@ -159,10 +249,6 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
     }
   }
 
-  const handleOpenDialogForm = () => {
-    setOpenDialogForm(true)
-  }
-
   const toggleDialogForm = () => {
     setOpenDialogForm(!openDialogForm)
   }
@@ -199,6 +285,9 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
       <Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
         <ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}>
           <div>Hierarchy Project {proyekName} </div>
+          <Tooltip title={t("add")}>
+            <Button onClick={handleAdd} size='sm' color="primary"><i className='fa fa-plus'></i></Button>
+          </Tooltip>
         </ModalHeader>
         <ModalBody>
           <div style={{ width: '100%', overflow: "auto" }}>
@@ -224,6 +313,22 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
         Delete this data
       </SweetAlert>
 
+      <DialogFormGantt
+        idTask={idTask}
+        openDialog={openDialogFormGantt}
+        toggleDialog={toggleDialogFormGantt}
+        closeDialog={closeDialogFromGantt}
+        parentId={parentId} />
+
+      <DialogForm
+        openDialog={openDialogForm}
+        closeDialog={closeDialogFromHierarchy}
+        toggleDialog={toggleDialogForm}
+        typeDialog={typeDialog}
+        parentId={parentId}
+        idProject={idTask}
+      />
+
       <DialogUserGantt
         idGantt={idGantt}
         humanResource={humanResource}

src/views/SimproV2/CreatedProyek/DialogFormGantt.js

@@ -6,7 +6,7 @@ import { VERSION_GANTT_ADD } from '../../../const/ApiConst';
 import { Select } from 'antd';
 import 'antd/dist/antd.css';
 
-const DialogFormGantt = ({ openDialog, closeDialog, toggleDialog, idTask }) => {
+const DialogFormGantt = ({ openDialog, closeDialog, toggleDialog, idTask, parentId }) => {
   const token = localStorage.getItem("token")
   const HEADER = {
     headers: {
@@ -18,7 +18,7 @@ const DialogFormGantt = ({ openDialog, closeDialog, toggleDialog, idTask }) => {
   const [name, setName] = useState("")
   const [description, setDesctription] = useState("")
   const [calculationType, setCalculationType] = useState("detail")
-
+  console.log('parentId', parentId);
   const handleCLearData = () => {
     setId(0)
     setName("")
@@ -40,9 +40,12 @@ const DialogFormGantt = ({ openDialog, closeDialog, toggleDialog, idTask }) => {
       name_version: name,
       description,
       calculation_type: calculationType,
-        proyek_id:idTask
+      proyek_id: idTask,
+      id_hierarcy_ftth: parentId
+
     }
 
+    console.log('formData', formData);
     const result = await axios
       .post(VERSION_GANTT_ADD, formData, HEADER)
       .then(res => res)

src/views/SimproV2/CreatedProyek/DialogGantt.js

@@ -13,7 +13,7 @@ import DialogUserGantt from './DialogUserGantt';
 
 import { Link } from 'react-router-dom';
 
-const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName }) => {
+const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName, hierarchyId }) => {
   const token = localStorage.getItem("token")
   const HEADER = {
     headers: {
@@ -34,7 +34,10 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
     if (idTask > 0) {
       getdataGantt();
     }
-  }, [idTask, openDialog])
+    if (hierarchyId > 0) {
+      getdataGantt();
+    }
+  }, [hierarchyId, idTask, openDialog])
 
   useEffect(() => {
     getDataHumanResource();
@@ -75,12 +78,20 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
 
 
   const getdataGantt = async () => {
-
+    let payload;
-    const payload = {
+    if (hierarchyId) {
+      payload = {
+        "columns": [
+          { "name": "hierarchy_ftth_id", "logic_operator": "=", "value": hierarchyId, "operator": "AND" }
+        ]
+      }
+    } else {
+      payload = {
         "columns": [
           { "name": "proyek_id", "logic_operator": "=", "value": idTask, "operator": "AND" }
         ]
       }
+    }
     const result = await axios
       .post(VERSION_GANTT_SEARCH, payload, HEADER)
       .then(res => res)
@@ -118,10 +129,10 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
         render: (text, record) =>
           <>
             <Tooltip title="Delete Gantt">
-              <Button size="small" size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
+              <Button size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
             </Tooltip>{" "}
             <Tooltip title="Gantt Permission">
-              <Button size="small" size={"sm"} color='success' onClick={() => handleUserGant(text.id)}><i className="fa fa-users"></i></Button>
+              <Button size={"sm"} color='success' onClick={() => handleUserGant(text.id)}><i className="fa fa-users"></i></Button>
             </Tooltip>{" "}
             <Link to={`/projects/${text.id}/import/activity`}>
               {" "}<Tooltip title="Import Activity">
@@ -130,9 +141,10 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
                 </Button>
               </Tooltip>{" "}
             </Link>
+
             <Link to={`/projects/${text.id}/${idTask}/gantt`}>
               <Tooltip title="Gantt">
-                <Button size="small" size={"sm"} color='primary'><i className="fa fa-gears"></i></Button>
+                <Button size={"sm"} color='primary'><i className="fa fa-gears"></i></Button>
               </Tooltip></Link>{" "}
           </>
         ,
@@ -141,6 +153,7 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
       { title: 'Tipe kalkulasi', dataIndex: 'calculation_type', key: 'calculation_type' },
       { title: 'Deskripsi', dataIndex: 'description', key: 'description' },
       { title: 'Tanggal dibuat', dataIndex: 'created_at', key: 'created_at', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY") : "-"}</div>) },
+      { title: 'Progress', dataIndex: 'progress', key: 'progress' }
 
     ];
 
@@ -217,7 +230,11 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName
     <>
       <Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
         <ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}>
-          <div>Gantt Project {proyekName} </div> <Button onClick={handleOpenDialogForm} size='sm' color="primary"><i className='fa fa-plus'></i></Button>
+
+
+          <div>Gantt Project {proyekName} </div> {!hierarchyId && (<> <Button onClick={handleOpenDialogForm} size='sm' color="primary"><i className='fa fa-plus'></i></Button>
+          </>
+          )}
         </ModalHeader>
         <ModalBody>
           <div style={{ width: '100%', overflow: "auto" }}>