add form edit

src/views/SimproV2/CreatedProyek/DialogFormGantt.js

@@ -1,123 +1,174 @@
-import React, { useEffect, useState } from 'react'
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap';
-import axios from "../../../const/interceptorApi";
-import { VERSION_GANTT_ADD } from '../../../const/ApiConst';
-import { Select } from 'antd';
-import 'antd/dist/antd.css';
-
-const DialogFormGantt = ({ openDialog, closeDialog, toggleDialog, idTask, parentId }) => {
-  const token = localStorage.getItem("token")
-  const HEADER = {
-    headers: {
-      "Content-Type": "application/json",
-      "Authorization": `Bearer ${token}`
-    }
-  }
-  const [id, setId] = useState(0)
-  const [name, setName] = useState("")
-  const [description, setDesctription] = useState("")
-  const [calculationType, setCalculationType] = useState("detail")
-  const handleCLearData = () => {
-    setId(0)
-    setName("")
-    setDesctription("")
-  }
-
-  useEffect(() => {
-    handleCLearData()
-  }, [openDialog])
-
-  const handleSave = () => {
-    saveVersionGantt()
-    handleCLearData()
-  }
-
-  const saveVersionGantt = async () => {
-
-    const formData = {
-      name_version: name,
-      description,
-      calculation_type: calculationType,
-      proyek_id: idTask,
-      hierarchy_ftth_id: parentId
-
-    }
-    const result = await axios
-      .post(VERSION_GANTT_ADD, formData, HEADER)
-      .then(res => res)
-      .catch((error) => error.response);
-
-    if (result && result.status == 200) {
-      closeDialog('success')
-    } else {
-      closeDialog('failed')
-    }
-  }
-
-  const handleCancel = () => {
-    closeDialog('cancel')
-    handleCLearData()
-  }
-
-  const renderForm = () => {
-    return (
-      <Form>
-        <FormGroup>
-          <Label className="capitalize">Nama <span style={{ color: "red" }}>*</span> </Label>
-          <Input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder='' />
-        </FormGroup>
-        <FormGroup>
-          <Label className="capitalize">Deskripsi </Label>
-          <Input type="textarea" value={description} onChange={(e) => setDesctription(e.target.value)} placeholder='' />
-        </FormGroup>
-        <FormGroup>
-          <Label className="capitalize">Tipe Kalkulasi </Label>
-          <div>
-            <Select
-              defaultValue="detail"
-              style={{
-                width: 120,
-              }}
-              onChange={(v) => setCalculationType(v)}
-              options={[
-                {
-                  value: 'detail',
-                  label: 'Detail',
-                },
-                {
-                  value: 'simple',
-                  label: 'Simple',
-                },
-              ]}
-            />
-          </div>
-        </FormGroup>
-        <FormGroup>
-          <div>
-            Notes:
-          </div>
-          <span style={{ color: "red" }}>*</span> Wajib diisi
-        </FormGroup>
-      </Form>
-    )
-  }
-
-  return (
-    <>
-      <Modal isOpen={openDialog} toggle={toggleDialog}>
-        <ModalHeader className="capitalize" toggle={closeDialog}>Add Gantt Project</ModalHeader>
-        <ModalBody>
-          {renderForm()}
-        </ModalBody>
-        <ModalFooter>
-          <Button color="primary" onClick={() => handleSave()}>Save</Button>{' '}
-          <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Cancel</Button>
-        </ModalFooter>
-      </Modal>
-    </>
-  )
-
-}
-
-export default DialogFormGantt;
+import React, { useEffect, useState } from 'react'
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap';
+import axios from "../../../const/interceptorApi";
+import { VERSION_GANTT_ADD, VERSION_GANTT_EDIT } from '../../../const/ApiConst';
+import { Select } from 'antd';
+import 'antd/dist/antd.css';
+
+const DialogFormGantt = ({ openDialog, closeDialog, toggleDialog, idTask, parentId, dataEdit, typeDialog}) => {
+  const token = localStorage.getItem("token")
+  const HEADER = {
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer ${token}`
+    }
+  }
+  const [id, setId] = useState(0)
+  const [name, setName] = useState("")
+  const [description, setDesctription] = useState("")
+  const [calculationType, setCalculationType] = useState("detail")
+  const handleCLearData = () => {
+    setId(0)
+    setName("")
+    setDesctription("")
+  }
+  const validation = () => {
+    if (!name || name === "") {
+      alert("Gantt Name cannot be empty!");
+      return true;
+    }
+  }
+  useEffect(() => {
+    if(typeDialog === "Edit")
+    {
+      setId(dataEdit.id);
+      setName(dataEdit.name_version);
+      setDesctription(dataEdit.description);
+      setCalculationType(dataEdit.calculation_type);
+    } else {
+      handleCLearData()
+    }
+
+  }, [dataEdit, openDialog])
+
+  const handleSave = () => {
+    let data = '';
+    const err = validation();
+    if (!err) {
+      if (typeDialog === "Edit") {
+        data = {
+          id,
+          name,
+          description,
+          calculationType
+        };
+        editVersionGantt(data)
+      } else {
+        saveVersionGantt()
+      }
+      handleCLearData()
+    }
+  }
+
+  const saveVersionGantt = async () => {
+
+    const formData = {
+      name_version: name,
+      description,
+      calculation_type: calculationType,
+      proyek_id: idTask,
+      hierarchy_ftth_id: parentId
+
+    }
+    const result = await axios
+      .post(VERSION_GANTT_ADD, formData, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.status == 200) {
+      closeDialog('Save')
+    } else {
+      closeDialog('failed')
+    }
+  }
+
+  const editVersionGantt = async (data) => {
+
+    const formData = {
+      name_version: data.name,
+      description:data.description,
+      calculation_type: data.calculationType,
+      proyek_id: idTask,
+      hierarchy_ftth_id: parentId
+
+    }
+    const url = VERSION_GANTT_EDIT(data.id);
+    const result = await axios.put(url, formData, HEADER)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.status == 200) {
+      closeDialog('Edit')
+    } else {
+      closeDialog('failed')
+    }
+  }
+
+  const handleCancel = () => {
+    closeDialog('cancel')
+    handleCLearData()
+  }
+
+  const renderForm = () => {
+    return (
+      <Form>
+        <FormGroup>
+          <Label className="capitalize">Nama <span style={{ color: "red" }}>*</span> </Label>
+          <Input type="text" value={name} onChange={(e) => setName(e.target.value)}/>
+        </FormGroup>
+        <FormGroup>
+          <Label className="capitalize">Deskripsi </Label>
+          <Input type="textarea" value={description} onChange={(e) => setDesctription(e.target.value)}/>
+        </FormGroup>
+        <FormGroup>
+          <Label className="capitalize">Tipe Kalkulasi </Label>
+          <div>
+            <Select
+              value={calculationType}
+              defaultValue={calculationType}
+              style={{
+                width: 120,
+              }}
+              onChange={(v) => setCalculationType(v)}
+              options={[
+                {
+                  value: 'detail',
+                  label: 'Detail',
+                },
+                {
+                  value: 'simple',
+                  label: 'Simple',
+                },
+              ]}
+            />
+          </div>
+        </FormGroup>
+        <FormGroup>
+          <div>
+            Notes:
+          </div>
+          <span style={{ color: "red" }}>*</span> Wajib diisi
+        </FormGroup>
+      </Form>
+    )
+  }
+
+  return (
+    <>
+      <Modal isOpen={openDialog} toggle={toggleDialog}>
+        <ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Edit" ? "Edit" :"Tambah"} Gantt Project</ModalHeader>
+        <ModalBody>
+          {renderForm()}
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={() => handleSave()}>{typeDialog == "Edit" ? "Update" :"Save"}</Button>{' '}
+          <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Cancel</Button>
+        </ModalFooter>
+      </Modal>
+    </>
+  )
+
+}
+
+export default DialogFormGantt;