add form edit

src/views/SimproV2/CreatedProyek/DialogFormGantt.js

@@ -2,11 +2,11 @@ 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 { 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 }) => {
+const DialogFormGantt = ({ openDialog, closeDialog, toggleDialog, idTask, parentId, dataEdit, typeDialog}) => {
   const token = localStorage.getItem("token")
   const HEADER = {
     headers: {
@@ -23,15 +23,43 @@ const DialogFormGantt = ({ openDialog, closeDialog, toggleDialog, idTask, parent
     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()
-  }, [openDialog])
+    }
+
+  }, [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 () => {
 
@@ -49,7 +77,29 @@ const DialogFormGantt = ({ openDialog, closeDialog, toggleDialog, idTask, parent
       .catch((error) => error.response);
 
     if (result && result.status == 200) {
-      closeDialog('success')
+      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')
     }
@@ -65,17 +115,18 @@ const DialogFormGantt = ({ openDialog, closeDialog, toggleDialog, idTask, parent
       <Form>
         <FormGroup>
           <Label className="capitalize">Nama <span style={{ color: "red" }}>*</span> </Label>
-          <Input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder='' />
+          <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)} placeholder='' />
+          <Input type="textarea" value={description} onChange={(e) => setDesctription(e.target.value)}/>
         </FormGroup>
         <FormGroup>
           <Label className="capitalize">Tipe Kalkulasi </Label>
           <div>
             <Select
-              defaultValue="detail"
+              value={calculationType}
+              defaultValue={calculationType}
               style={{
                 width: 120,
               }}
@@ -106,12 +157,12 @@ const DialogFormGantt = ({ openDialog, closeDialog, toggleDialog, idTask, parent
   return (
     <>
       <Modal isOpen={openDialog} toggle={toggleDialog}>
-        <ModalHeader className="capitalize" toggle={closeDialog}>Add Gantt Project</ModalHeader>
+        <ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Edit" ? "Edit" :"Tambah"} Gantt Project</ModalHeader>
         <ModalBody>
           {renderForm()}
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" onClick={() => handleSave()}>Save</Button>{' '}
+          <Button color="primary" onClick={() => handleSave()}>{typeDialog == "Edit" ? "Update" :"Save"}</Button>{' '}
           <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Cancel</Button>
         </ModalFooter>
       </Modal>