From 4618751b1510a4e3a034ce9bdac978b7174ca635 Mon Sep 17 00:00:00 2001
From: wahyuun <wahyumind01@gmail.com>
Date: Tue, 19 Sep 2023 10:11:39 +0700
Subject: [PATCH] add button edit

---
 .../SimproV2/CreatedProyek/DialogGantt.js     | 569 +++++++++---------
 1 file changed, 293 insertions(+), 276 deletions(-)

diff --git a/src/views/SimproV2/CreatedProyek/DialogGantt.js b/src/views/SimproV2/CreatedProyek/DialogGantt.js
index 9d2f776..fdce115 100644
--- a/src/views/SimproV2/CreatedProyek/DialogGantt.js
+++ b/src/views/SimproV2/CreatedProyek/DialogGantt.js
@@ -1,276 +1,293 @@
-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 'antd/dist/antd.css';
-import moment from 'moment';
-import SweetAlert from 'react-bootstrap-sweetalert';
-import { VERSION_GANTT_DELETE, VERSION_GANTT_SEARCH, USER_LIST } from '../../../const/ApiConst';
-import axios from "../../../const/interceptorApi"
-import { NotificationContainer, NotificationManager } from 'react-notifications';
-import DialogForm from './DialogFormGantt';
-import DialogUserGantt from './DialogUserGantt';
-
-import { Link } from 'react-router-dom';
-
-const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName, hierarchyId, hierarchyName, openDialogHierarchy }) => {
-  const token = localStorage.getItem("token")
-  const HEADER = {
-    headers: {
-      "Content-Type": "application/json",
-      "Authorization": `Bearer ${token}`
-    }
-  }
-
-  const [openDialogForm, setOpenDialogForm] = useState(false)
-  const [openDialogUserGantt, setOpenDialogUserGantt] = useState(false)
-  const [dataGantt, setDataGantt] = useState([])
-  const [alertDelete, setAlertDelete] = useState(false)
-  const [idDelete, setIdDelete] = useState(0)
-  const [idGantt, setIdGantt] = useState(0)
-  const [humanResource, setHumanResource] = useState([])
-
-  useEffect(() => {
-    if (openDialog && hierarchyId > 0 || idTask > 0 && !openDialogHierarchy) {
-      getdataGantt();
-    }
-    if (!openDialog) {
-      setDataGantt([]);
-    }
-  }, [hierarchyId, idTask, openDialog])
-
-  const getDataHumanResource = async () => {
-    const result = await axios
-      .get(USER_LIST, HEADER)
-      .then(res => res)
-      .catch((error) => error.response);
-
-    if (result && result.status == 200) {
-      setTransferUser(result.data.data);
-    } else {
-
-    }
-  }
-
-  const setTransferUser = (data) => {
-    const finalData = []
-    data.map((val, index) => {
-      let data = {
-        key: val.id,
-        title: val.name
-      }
-      finalData.push(data)
-    });
-    setHumanResource(finalData)
-  }
-
-
-  const getdataGantt = async () => {
-    let payload;
-    if (hierarchyId) {
-      payload = {
-        "select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"],
-        "columns": [
-          { "name": "hierarchy_ftth_id", "logic_operator": "=", "value": hierarchyId, "operator": "AND" }
-        ]
-      }
-    } else {
-      payload = {
-        "select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"],
-        "columns": [
-          { "name": "proyek_id", "logic_operator": "=", "value": idTask, "operator": "AND" }
-        ]
-      }
-    }
-    const result = await axios
-      .post(VERSION_GANTT_SEARCH, payload, HEADER)
-      .then(res => res)
-      .catch((error) => error.response);
-
-    if (result && result.status == 200) {
-      setDataGantt(result.data.data);
-    } else {
-      NotificationManager.error(`Data gantt project gagal terload silahkan coba lagi!`, 'Failed!!');
-    }
-  }
-
-  const handleCancel = () => {
-    setDataGantt([]);
-    closeDialog('cancel', 'none')
-  }
-
-  const handleDelete = (id) => {
-    setIdDelete(id)
-    setAlertDelete(true)
-  }
-
-  const handleUserGant = (id) => {
-    setIdGantt(id)
-    setOpenDialogUserGantt(true)
-  }
-
-  const RenderTable = useMemo(() => {
-    const columns = [
-      {
-        title: 'Action',
-        dataIndex: '',
-        key: 'id',
-        className: "nowrap",
-        render: (text, record) =>
-          <>
-            <Tooltip title="Delete Gantt">
-              <Button size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
-            </Tooltip>{" "}
-            <Tooltip title="Gantt Permission">
-              <Button size={"sm"} color='success' onClick={() => handleUserGant(text.id)}><i className="fa fa-users"></i></Button>
-            </Tooltip>{" "}
-            <Link to={`/projects/${text.id}/${idTask}/import/activity`}>
-              {" "}<Tooltip title="Import Activity">
-                <Button size={"sm"} color='success'>
-                  <i className="fa fa-file-excel-o"></i>
-                </Button>
-              </Tooltip>{" "}
-            </Link>
-
-            <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_version', key: 'name_version' },
-      { 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' }
-
-    ];
-
-    return (
-      <Table
-        size="small"
-        columns={columns}
-        rowKey={"id"}
-        dataSource={dataGantt}
-        pagination={{ position: ["bottomLeft"] }}
-      />
-    )
-  }, [dataGantt])
-
-  const cancelDelete = () => {
-    setAlertDelete(false)
-    setIdDelete(0)
-  }
-
-  const onConfirmDelete = async () => {
-    let urlDel = VERSION_GANTT_DELETE(idDelete)
-    const result = await axios.delete(urlDel, HEADER)
-      .then(res => res)
-      .catch((error) => error.response);
-
-    if (result && result.data && result.data.code === 200) {
-      getdataGantt()
-      setIdDelete(0)
-      setAlertDelete(false)
-      NotificationManager.success(`Dokumen project berhasil dihapus`, 'Success!!');
-    } else {
-      setIdDelete(0)
-      setAlertDelete(false)
-      NotificationManager.error(`Dokumen project gagal dihapus`, 'Failed!!');
-    }
-  }
-
-  const handleOpenDialogForm = () => {
-    setOpenDialogForm(true)
-  }
-
-  const toggleDialogForm = () => {
-    setOpenDialogForm(!openDialogForm)
-  }
-
-  const closeDialogForm = (status) => {
-    if (status == "success") {
-      getdataGantt()
-      NotificationManager.success(`Gantt berhasil dibuat!`, 'Success!!');
-    } else if (status == "failed") {
-      NotificationManager.error(`Gantt gagal dibuat!`, 'Failed!!');
-    }
-    setOpenDialogForm(false)
-  }
-
-  const toggleDialogUser = () => {
-    if (openDialogUserGantt) {
-      setIdGantt(0)
-    }
-    setOpenDialogUserGantt(!openDialogUserGantt)
-  }
-
-  const closeDialogUser = (status) => {
-    if (status == "success") {
-      NotificationManager.success(`Gantt Permission berhasil disimpan!`, 'Success!!');
-    } else if (status == "failed") {
-      NotificationManager.error(`Gantt Permission gagal disimpan!`, 'Failed!!');
-    }
-    setOpenDialogUserGantt(false)
-    setIdGantt(0)
-  }
-
-  return (
-    <>
-      <Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
-        <ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}>
-          {hierarchyName ?
-            <Breadcrumb>
-              <BreadcrumbItem><a href="/projects">Project</a></BreadcrumbItem>
-              <BreadcrumbItem active>{hierarchyName}</BreadcrumbItem>
-            </Breadcrumb>
-          : 
-            <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" }}>
-            {RenderTable}
-          </div>
-        </ModalBody>
-        {/* <ModalFooter>
-          <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
-        </ModalFooter> */}
-      </Modal>
-      <NotificationContainer />
-      <SweetAlert
-        show={alertDelete}
-        warning
-        showCancel
-        confirmBtnText="Delete"
-        confirmBtnBsStyle="danger"
-        title={`Are you sure?`}
-        onConfirm={onConfirmDelete}
-        onCancel={() => cancelDelete()}
-        focusCancelBtn
-      >
-        Delete this data
-      </SweetAlert>
-      <DialogForm
-        idTask={idTask}
-        openDialog={openDialogForm}
-        toggleDialog={toggleDialogForm}
-        closeDialog={closeDialogForm}
-      />
-
-      <DialogUserGantt
-        idGantt={idGantt}
-        openDialog={openDialogUserGantt}
-        toggleDialog={toggleDialogUser}
-        closeDialog={closeDialogUser}
-      />
-    </>
-  )
-
-}
-
-export default DialogGantt;
+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 'antd/dist/antd.css';
+import moment from 'moment';
+import SweetAlert from 'react-bootstrap-sweetalert';
+import { VERSION_GANTT_DELETE, VERSION_GANTT_SEARCH, USER_LIST } from '../../../const/ApiConst';
+import axios from "../../../const/interceptorApi"
+import { NotificationContainer, NotificationManager } from 'react-notifications';
+import DialogForm from './DialogFormGantt';
+import DialogUserGantt from './DialogUserGantt';
+
+import { Link } from 'react-router-dom';
+
+const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName, hierarchyId, hierarchyName, openDialogHierarchy }) => {
+  const token = localStorage.getItem("token")
+  const HEADER = {
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer ${token}`
+    }
+  }
+
+  const [openDialogForm, setOpenDialogForm] = useState(false)
+  const [openDialogUserGantt, setOpenDialogUserGantt] = useState(false)
+  const [dataGantt, setDataGantt] = useState([])
+  const [alertDelete, setAlertDelete] = useState(false)
+  const [idDelete, setIdDelete] = useState(0)
+  const [idGantt, setIdGantt] = useState(0)
+  const [humanResource, setHumanResource] = useState([])
+  const [dataEdit, setDataEdit] = useState([])
+  const [typeDialog, setTypeDialog] = useState('')
+
+  useEffect(() => {
+    if (openDialog && hierarchyId > 0 || idTask > 0 && !openDialogHierarchy) {
+      getdataGantt();
+    }
+    if (!openDialog) {
+      setDataGantt([]);
+    }
+  }, [hierarchyId, idTask, openDialog])
+
+  const getDataHumanResource = async () => {
+    const result = await axios
+      .get(USER_LIST, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.status == 200) {
+      setTransferUser(result.data.data);
+    } else {
+
+    }
+  }
+
+  const setTransferUser = (data) => {
+    const finalData = []
+    data.map((val, index) => {
+      let data = {
+        key: val.id,
+        title: val.name
+      }
+      finalData.push(data)
+    });
+    setHumanResource(finalData)
+  }
+
+
+  const getdataGantt = async () => {
+    let payload;
+    if (hierarchyId) {
+      payload = {
+        "select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"],
+        "columns": [
+          { "name": "hierarchy_ftth_id", "logic_operator": "=", "value": hierarchyId, "operator": "AND" }
+        ]
+      }
+    } else {
+      payload = {
+        "select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"],
+        "columns": [
+          { "name": "proyek_id", "logic_operator": "=", "value": idTask, "operator": "AND" }
+        ]
+      }
+    }
+    const result = await axios
+      .post(VERSION_GANTT_SEARCH, payload, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.status == 200) {
+      setDataGantt(result.data.data);
+    } else {
+      NotificationManager.error(`Data gantt project gagal terload silahkan coba lagi!`, 'Failed!!');
+    }
+  }
+
+  const handleCancel = () => {
+    setDataGantt([]);
+    closeDialog('cancel', 'none')
+  }
+
+  const handleDelete = (id) => {
+    setIdDelete(id)
+    setAlertDelete(true)
+  }
+
+  const handleEdit = (data) => {
+    setDataEdit(data)
+    handleOpenDialogForm('Edit');
+  }
+
+  const handleUserGant = (id) => {
+    setIdGantt(id)
+    setOpenDialogUserGantt(true)
+  }
+
+  const RenderTable = useMemo(() => {
+    const columns = [
+      {
+        title: 'Action',
+        dataIndex: '',
+        key: 'id',
+        className: "nowrap",
+        render: (text, record) =>
+          <>
+            <Tooltip title="Delete Gantt">
+              <Button size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
+            </Tooltip>{" "}
+            <Tooltip title="Edit Gantt">
+              <Button size={"sm"} color='success' onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button>
+            </Tooltip>{" "}
+            <Tooltip title="Gantt Permission">
+              <Button size={"sm"} color='success' onClick={() => handleUserGant(text.id)}><i className="fa fa-users"></i></Button>
+            </Tooltip>{" "}
+            <Link to={`/projects/${text.id}/${idTask}/import/activity`}>
+              {" "}<Tooltip title="Import Activity">
+                <Button size={"sm"} color='success'>
+                  <i className="fa fa-file-excel-o"></i>
+                </Button>
+              </Tooltip>{" "}
+            </Link>
+
+            <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_version', key: 'name_version' },
+      { 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' }
+
+    ];
+
+    return (
+      <Table
+        size="small"
+        columns={columns}
+        rowKey={"id"}
+        dataSource={dataGantt}
+        pagination={{ position: ["bottomLeft"] }}
+      />
+    )
+  }, [dataGantt])
+
+  const cancelDelete = () => {
+    setAlertDelete(false)
+    setIdDelete(0)
+  }
+
+  const onConfirmDelete = async () => {
+    let urlDel = VERSION_GANTT_DELETE(idDelete)
+    const result = await axios.delete(urlDel, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code === 200) {
+      getdataGantt()
+      setIdDelete(0)
+      setAlertDelete(false)
+      NotificationManager.success(`Dokumen project berhasil dihapus`, 'Success!!');
+    } else {
+      setIdDelete(0)
+      setAlertDelete(false)
+      NotificationManager.error(`Dokumen project gagal dihapus`, 'Failed!!');
+    }
+  }
+
+  const handleOpenDialogForm = async (type) => {
+    await setTypeDialog(type);
+    setOpenDialogForm(true);
+  }
+
+  const toggleDialogForm = () => {
+    setOpenDialogForm(!openDialogForm)
+  }
+
+  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!!');
+    }
+    setDataEdit([])
+    setOpenDialogForm(false)
+  }
+
+  const toggleDialogUser = () => {
+    if (openDialogUserGantt) {
+      setIdGantt(0)
+    }
+    setOpenDialogUserGantt(!openDialogUserGantt)
+  }
+
+  const closeDialogUser = (status) => {
+    if (status == "success") {
+      NotificationManager.success(`Gantt Permission berhasil disimpan!`, 'Success!!');
+    } else if (status == "failed") {
+      NotificationManager.error(`Gantt Permission gagal disimpan!`, 'Failed!!');
+    }
+    setOpenDialogUserGantt(false)
+    setIdGantt(0)
+  }
+
+  return (
+    <>
+      <Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
+        <ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}>
+          {hierarchyName ?
+            <Breadcrumb>
+              <BreadcrumbItem><a href="/projects">Project</a></BreadcrumbItem>
+              <BreadcrumbItem active>{hierarchyName}</BreadcrumbItem>
+            </Breadcrumb>
+          :
+            <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" }}>
+            {RenderTable}
+          </div>
+        </ModalBody>
+        {/* <ModalFooter>
+          <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
+        </ModalFooter> */}
+      </Modal>
+      <NotificationContainer />
+      <SweetAlert
+        show={alertDelete}
+        warning
+        showCancel
+        confirmBtnText="Delete"
+        confirmBtnBsStyle="danger"
+        title={`Are you sure?`}
+        onConfirm={onConfirmDelete}
+        onCancel={() => cancelDelete()}
+        focusCancelBtn
+      >
+        Delete this data
+      </SweetAlert>
+      <DialogForm
+        idTask={idTask}
+        openDialog={openDialogForm}
+        toggleDialog={toggleDialogForm}
+        closeDialog={closeDialogForm}
+        typeDialog={typeDialog}
+        dataEdit={dataEdit}
+      />
+
+      <DialogUserGantt
+        idGantt={idGantt}
+        openDialog={openDialogUserGantt}
+        toggleDialog={toggleDialogUser}
+        closeDialog={closeDialogUser}
+      />
+    </>
+  )
+
+}
+
+export default DialogGantt;