Hierarchy

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 }) => {
+    console.log('parentId', parentId);
+    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,
+            }
+            console.log('data', data);
+            closeDialog('save', data);
+        } else {
+            data = {
+                id,
+                name: nameDaerah,
+            }
+            closeDialog('edit', data);
+        }
+
+    }
+    const handleSaveArea = () => {
+        let data = '';
+        if (typeDialog === "SaveArea") {
+            data = {
+                project_id: idProject,
+                parent_id: parentId,
+                name: nameArea,
+            }
+            console.log('data', data);
+            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

@@ -5,11 +5,15 @@ import { 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_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 { 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,6 +23,9 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
     }
   }
 
+  const [id, setId] = useState(0)
+  const [parentId, setParentId] = useState(0)
+  const [typeDialog, setTypeDialog] = useState("add")
   const [openDialogForm, setOpenDialogForm] = useState(false)
   const [openDialogUserGantt, setOpenDialogUserGantt] = useState(false)
   const [dataHierarchy, setDataHierarchy] = useState([])
@@ -26,12 +33,12 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
   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 +50,7 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
     } else {
 
     }
-  }, [openDialog])
+  }, [openDialog, closeDialog])
 
   const getDataHumanResource = async () => {
     const result = await axios
@@ -70,7 +77,45 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
     setHumanResource(finalData)
   }
 
+  const handleAdd = async () => {
+    await setTypeDialog("Save")
+    setOpenDialogForm(true)
+  }
+  const handleAddArea = async (id) => {
+    setParentId(id)
+    await setTypeDialog("SaveArea")
+    setOpenDialogForm(true)
+  }
+
+
+  const closeDialogFromHierarchy = (type, data) => {
+    if (type == 'save') {
+      saveHierarchy(data)
+      setId(0);
+      setOpenDialogForm(false);
+    } 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 = {
@@ -114,14 +159,22 @@ 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 Area">
+              <Button size={"sm"} color='success' onClick={() => handleAddArea(text.id)}><i className="fa fa-plus"></i></Button>
             </Tooltip>{" "}
+            <Link to={`/projects/${text.id}/${idTask}/gantt`}>
+              <Tooltip title="Gantt">
+                <Button size={"sm"} color='primary'><i className="fa fa-gears"></i></Button>
+              </Tooltip></Link>{" "}
           </>
         ,
       },
       { 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: '-', key: '-' },
 
     ];
 
@@ -199,6 +252,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" }}>
@@ -223,6 +279,14 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
       >
         Delete this data
       </SweetAlert>
+      <DialogForm
+        openDialog={openDialogForm}
+        closeDialog={closeDialogFromHierarchy}
+        toggleDialog={toggleDialogForm}
+        typeDialog={typeDialog}
+        parentId={parentId}
+        idProject={idTask}
+      />
 
       <DialogUserGantt
         idGantt={idGantt}