update payload

src/views/SimproV2/CreatedProyek/FormAsignHr.js

@@ -1,246 +1,216 @@
-import React, { useEffect, useState } from 'react'
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap';
-import { DatePicker, Select } from 'antd';
-import 'antd/dist/antd.css';
-import { formatNumber } from '../../../const/CustomFunc';
-const { Option } = Select
-
-const FormAsignHr = ({ openDialog, closeDialog, toggleDialog, idTask, dataEdit, dataHr, dataCurrentHr, dataRole }) => {
-  const [id, setId] = useState(null)
-  const [typeForm, setTypeForm] = useState('add')
-  const [user, setUser] = useState(null)
-  const [rbs, setRbs] = useState("")
-  const [projectRole, setProjectRole] = useState(null)
-  const [groupR, setGroupR] = useState("")
-  const [maxUsed, setMaxUsed] = useState("")
-  const [standartRate, setStandartRate] = useState("")
-  const [uomStandartRate, setUomStandartRate] = useState(null)
-  const [overTimeRate, setOverTimeRate] = useState("")
-  const [overTimeRateUom, setOverTimeRateUom] = useState(null)
-  const [costPerUsed, setCostPerUsed] = useState("")
-  const [accrue, setAccrue] = useState("")
-  const [baseCalender, setBaseCalender] = useState("")
-  const [listHr, setListHr] = useState([])
-  const [isCustomer, setIsCustomer] = useState(false)
-
-  const handleClearData = () => {
-    setUser(null)
-    setRbs("")
-    setProjectRole(null)
-    setGroupR("")
-    setMaxUsed("")
-    setIsCustomer(false)
-    setStandartRate("")
-    setUomStandartRate(null)
-    setOverTimeRate("")
-    setOverTimeRateUom(null)
-    setCostPerUsed("")
-    setAccrue("")
-    setBaseCalender("")
-  }
-
-  useEffect(() => {
-    let data = dataHr || []
-    let availableHr = []
-    data.map((val, index) => {
-      if(dataEdit && dataEdit.user_id){
-        if(parseInt(val.id)===parseInt(dataEdit.user_id)){
-          availableHr.push(val);
-        }
-      }
-      let check = dataCurrentHr.some(function (x) {
-        return parseInt(val.id)==parseInt(x.user_id)
-      });
-      if(!check){
-        availableHr.push(val);
-      }
-    });
-    setListHr(availableHr)
-  }, [dataHr, dataCurrentHr, dataEdit])
-
-  useEffect(() => {
-    if (idTask && idTask > 0) {
-      if(dataEdit && dataEdit!=""){
-        setTypeForm('edit')
-        setId(dataEdit.id)
-        setUser(dataEdit.user_id)
-        setRbs(dataEdit.rbs)
-        setProjectRole(dataEdit.project_role)
-        setGroupR(dataEdit.group_r)
-        setMaxUsed(dataEdit.max_used ? formatNumber(dataEdit.max_used.toString()) : '')
-        setIsCustomer(dataEdit.is_customer)
-        setStandartRate(dataEdit.standart_rate ? formatNumber(dataEdit.standart_rate.toString()) : '')
-        setUomStandartRate(dataEdit.uom_standart_rate)
-        setOverTimeRate(dataEdit.overtime_rate ? formatNumber(dataEdit.overtime_rate.toString()) : '')
-        setOverTimeRateUom(dataEdit.uom_overtime_rate)
-        setCostPerUsed(dataEdit.cost_per_used)
-        setAccrue(dataEdit.accrue_at)
-        setBaseCalender(dataEdit.base_calender)
-      }else{
-        handleClearData()
-        setTypeForm('add')
-      }
-    } else {
-      handleClearData()
-    }
-  }, [openDialog])
-
-  const handleSave = () => {
-    let data = '';
-    if (typeForm=="edit") {
-      data = {
-        id,
-        proyek_id: idTask,
-        user_id:user,
-        project_role:projectRole,
-        is_customer: isCustomer,
-        max_used:maxUsed.replaceAll(".", ""),
-        standart_rate:standartRate.replaceAll(".", ""),
-        uom_standart_rate:uomStandartRate,
-        overtime_rate:overTimeRate.replaceAll(".", ""),
-        uom_overtime_rate:overTimeRateUom,
-      }
-
-      closeDialog('edit', data);
-    } else {
-      data = {
-        proyek_id: idTask,
-        user_id:user,
-        project_role:projectRole,
-        is_customer: isCustomer,
-        max_used:maxUsed.replaceAll(".", ""),
-        standart_rate:standartRate.replaceAll(".", ""),
-        uom_standart_rate:uomStandartRate,
-        overtime_rate:overTimeRate.replaceAll(".", ""),
-        uom_overtime_rate:overTimeRateUom,
-      }
-      closeDialog('add', data);
-    }
-    handleClearData()
-  }
-
-  const handleCancel = () => {
-    closeDialog('cancel', 'none')
-    handleClearData()
-  }
-
-
-  const renderForm = () => {
-    return (
-      <Form>
-          <Row>
-              <Col>
-                <FormGroup>
-                    <Label>Human Resource</Label>
-                    <Select showSearch value={user} onChange={(val) => setUser(val)} placeholder="Select Human Resource" filterOption={(input, option) =>
-                      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                    } style={{ width: '100%' }}>
-                        {listHr && listHr.map(res => (
-                        <Option key={res.id} value={res.id}>{`${res.name}`}</Option>
-                        ))}
-                    </Select>
-                </FormGroup>
-              </Col>
-              <Col>
-                <FormGroup>
-                    <Label>Role Human Resource</Label>
-              <Select showSearch value={projectRole} onChange={(val) => setProjectRole(val)}
-                placeholder="Select Role Human Resource"
-                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
-                tyle={{ width: '100%' }}>
-                        {dataRole && dataRole.map(res => (
-                        <Option key={res.id} value={res.id}>{`${res.name}`}</Option>
-                        ))}
-                    </Select>
-                </FormGroup>
-              </Col>
-              <Col>
-                <FormGroup>
-                    <Label>Percentage Available User</Label>
-                    <Input type="text" onChange={(e) => setMaxUsed(formatNumber(e.target.value))} value={maxUsed} placeholder='' required/>
-                </FormGroup>
-              </Col>
-          </Row>
-        <Row>
-          <Col>
-            <FormGroup>
-              <Label>Customer</Label>
-              <div>
-                <Select
-                  value={isCustomer}
-                  defaultValue={false}
-                  style={{
-                    width: 235,
-                  }}
-                  onChange={(val) => setIsCustomer(val)}
-                  options={[
-                    {
-                      value: true,
-                      label: 'Yes',
-                    },
-                    {
-                      value: false,
-                      label: 'No',
-                    }
-                  ]}
-                />
-              </div>
-            </FormGroup>
-          </Col>
-        </Row>
-          <div style={{widht:"100%",display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}}>
-          <FormGroup style={{flexBasis:"49%"}}>
-              <Label>Standart Rate</Label>
-              <Input type="text" onChange={(e) => setStandartRate(formatNumber(e.target.value))} value={standartRate} placeholder='1.000...' />
-          </FormGroup>
-          <div style={{flexBasis:"2%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"}}>
-            /
-          </div>
-          <FormGroup style={{flexBasis:"49%"}}>
-              <Label>UOM Standart Rate</Label>
-              <Select value={uomStandartRate} onChange={(val) => setUomStandartRate(val)} style={{ width: '100%' }} placeholder="Select UOM">
-                <Option value={"Day"}>Day</Option>
-                <Option value={"Hour"}>Hour</Option>
-              </Select>
-          </FormGroup>
-          </div>
-
-          <div style={{widht:"100%",display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}}>
-          <FormGroup style={{flexBasis:"49%"}}>
-              <Label>Overtime Rate</Label>
-              <Input type="text" onChange={(e) => setOverTimeRate(formatNumber(e.target.value))} value={overTimeRate} placeholder='1.000...' />
-          </FormGroup>
-          <div style={{flexBasis:"2%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"}}>
-            /
-          </div>
-          <FormGroup style={{flexBasis:"49%"}}>
-              <Label>UOM Overtime Rate</Label>
-              <Select value={overTimeRateUom} onChange={(val) => setOverTimeRateUom(val)} style={{ width: '100%' }} placeholder="Select UOM">
-                <Option value={"Day"}>Day</Option>
-                <Option value={"Hour"}>Hour</Option>
-              </Select>
-          </FormGroup>
-          </div>
-      </Form>
-    )
-  }
-
-  return (
-    <>
-      <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
-        <ModalHeader className="capitalize" toggle={closeDialog}>{typeForm=="add" ? "Add" : "Edit" } Assign Human Resource</ModalHeader>
-        <ModalBody>
-          {renderForm()}
-        </ModalBody>
-        <ModalFooter>
-          <Button color="primary" onClick={() => handleSave()}>{typeForm=="add" ? "Add" : "Edit" }</Button>{' '}
-          <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Cancel</Button>
-        </ModalFooter>
-      </Modal>
-    </>
-  )
-
-}
-
-export default FormAsignHr;
+import React, { useEffect, useState } from 'react'
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap';
+import { DatePicker, Select } from 'antd';
+import 'antd/dist/antd.css';
+import { formatNumber } from '../../../const/CustomFunc';
+const { Option } = Select
+
+const FormAsignHr = ({ openDialog, closeDialog, toggleDialog, idTask, dataEdit, dataHr, dataCurrentHr, dataRole }) => {
+  const [id, setId] = useState(null)
+  const [typeForm, setTypeForm] = useState('add')
+  const [user, setUser] = useState(null)
+  const [rbs, setRbs] = useState("")
+  const [projectRole, setProjectRole] = useState(null)
+  const [groupR, setGroupR] = useState("")
+  const [maxUsed, setMaxUsed] = useState("")
+  const [standartRate, setStandartRate] = useState("")
+  const [uomStandartRate, setUomStandartRate] = useState(null)
+  const [overTimeRate, setOverTimeRate] = useState("")
+  const [overTimeRateUom, setOverTimeRateUom] = useState(null)
+  const [costPerUsed, setCostPerUsed] = useState("")
+  const [accrue, setAccrue] = useState("")
+  const [baseCalender, setBaseCalender] = useState("")
+  const [listHr, setListHr] = useState([])
+
+  const handleClearData = () => {
+    setUser(null)
+    setRbs("")
+    setProjectRole(null)
+    setGroupR("")
+    setMaxUsed("")
+    setStandartRate("")
+    setUomStandartRate(null)
+    setOverTimeRate("")
+    setOverTimeRateUom(null)
+    setCostPerUsed("")
+    setAccrue("")
+    setBaseCalender("")
+  }
+
+  useEffect(() => {
+    let data = dataHr || []
+    let availableHr = []
+    data.map((val, index) => {
+      if(dataEdit && dataEdit.user_id){
+        if(parseInt(val.id)===parseInt(dataEdit.user_id)){
+          availableHr.push(val);
+        }
+      }
+      let check = dataCurrentHr.some(function (x) {
+        return parseInt(val.id)==parseInt(x.user_id)
+      });
+      if(!check){
+        availableHr.push(val);
+      }
+    });
+    setListHr(availableHr)
+  }, [dataHr, dataCurrentHr, dataEdit])
+
+  useEffect(() => {
+    if (idTask && idTask > 0) {
+      if(dataEdit && dataEdit!=""){
+        setTypeForm('edit')
+        setId(dataEdit.id)
+        setUser(dataEdit.user_id)
+        setRbs(dataEdit.rbs)
+        setProjectRole(dataEdit.project_role)
+        setGroupR(dataEdit.group_r)
+        setMaxUsed(dataEdit.max_used ? formatNumber(dataEdit.max_used.toString()) : '')
+        setStandartRate(dataEdit.standart_rate ? formatNumber(dataEdit.standart_rate.toString()) : '')
+        setUomStandartRate(dataEdit.uom_standart_rate)
+        setOverTimeRate(dataEdit.overtime_rate ? formatNumber(dataEdit.overtime_rate.toString()) : '')
+        setOverTimeRateUom(dataEdit.uom_overtime_rate)
+        setCostPerUsed(dataEdit.cost_per_used)
+        setAccrue(dataEdit.accrue_at)
+        setBaseCalender(dataEdit.base_calender)
+      }else{
+        handleClearData()
+        setTypeForm('add')
+      }
+    } else {
+      handleClearData()
+    }
+  }, [openDialog])
+
+  const handleSave = () => {
+    let data = '';
+    if (typeForm=="edit") {
+      data = {
+        id,
+        proyek_id: idTask,
+        user_id:user,
+        project_role:projectRole,
+        is_customer: false,
+        max_used:maxUsed.replaceAll(".", ""),
+        standart_rate:standartRate.replaceAll(".", ""),
+        uom_standart_rate:uomStandartRate,
+        overtime_rate:overTimeRate.replaceAll(".", ""),
+        uom_overtime_rate:overTimeRateUom,
+      }
+
+      closeDialog('edit', data);
+    } else {
+      data = {
+        proyek_id: idTask,
+        user_id:user,
+        project_role:projectRole,
+        is_customer: false,
+        max_used:maxUsed.replaceAll(".", ""),
+        standart_rate:standartRate.replaceAll(".", ""),
+        uom_standart_rate:uomStandartRate,
+        overtime_rate:overTimeRate.replaceAll(".", ""),
+        uom_overtime_rate:overTimeRateUom,
+      }
+      closeDialog('add', data);
+    }
+    handleClearData()
+  }
+
+  const handleCancel = () => {
+    closeDialog('cancel', 'none')
+    handleClearData()
+  }
+
+
+  const renderForm = () => {
+    return (
+      <Form>
+          <Row>
+              <Col>
+                <FormGroup>
+                    <Label>Human Resource</Label>
+                    <Select showSearch value={user} onChange={(val) => setUser(val)} placeholder="Select Human Resource" filterOption={(input, option) =>
+                      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    } style={{ width: '100%' }}>
+                        {listHr && listHr.map(res => (
+                        <Option key={res.id} value={res.id}>{`${res.name}`}</Option>
+                        ))}
+                    </Select>
+                </FormGroup>
+              </Col>
+              <Col>
+                <FormGroup>
+                    <Label>Role Human Resource</Label>
+              <Select showSearch value={projectRole} onChange={(val) => setProjectRole(val)}
+                placeholder="Select Role Human Resource"
+                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+                tyle={{ width: '100%' }}>
+                        {dataRole && dataRole.map(res => (
+                        <Option key={res.id} value={res.id}>{`${res.name}`}</Option>
+                        ))}
+                    </Select>
+                </FormGroup>
+              </Col>
+              <Col>
+                <FormGroup>
+                    <Label>Percentage Available User</Label>
+                    <Input type="text" onChange={(e) => setMaxUsed(formatNumber(e.target.value))} value={maxUsed} placeholder='' required/>
+                </FormGroup>
+              </Col>
+          </Row>
+          <div style={{widht:"100%",display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}}>
+          <FormGroup style={{flexBasis:"49%"}}>
+              <Label>Standart Rate</Label>
+              <Input type="text" onChange={(e) => setStandartRate(formatNumber(e.target.value))} value={standartRate} placeholder='1.000...' />
+          </FormGroup>
+          <div style={{flexBasis:"2%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"}}>
+            /
+          </div>
+          <FormGroup style={{flexBasis:"49%"}}>
+              <Label>UOM Standart Rate</Label>
+              <Select value={uomStandartRate} onChange={(val) => setUomStandartRate(val)} style={{ width: '100%' }} placeholder="Select UOM">
+                <Option value={"Day"}>Day</Option>
+                <Option value={"Hour"}>Hour</Option>
+              </Select>
+          </FormGroup>
+          </div>
+
+          <div style={{widht:"100%",display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}}>
+          <FormGroup style={{flexBasis:"49%"}}>
+              <Label>Overtime Rate</Label>
+              <Input type="text" onChange={(e) => setOverTimeRate(formatNumber(e.target.value))} value={overTimeRate} placeholder='1.000...' />
+          </FormGroup>
+          <div style={{flexBasis:"2%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"}}>
+            /
+          </div>
+          <FormGroup style={{flexBasis:"49%"}}>
+              <Label>UOM Overtime Rate</Label>
+              <Select value={overTimeRateUom} onChange={(val) => setOverTimeRateUom(val)} style={{ width: '100%' }} placeholder="Select UOM">
+                <Option value={"Day"}>Day</Option>
+                <Option value={"Hour"}>Hour</Option>
+              </Select>
+          </FormGroup>
+          </div>
+      </Form>
+    )
+  }
+
+  return (
+    <>
+      <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
+        <ModalHeader className="capitalize" toggle={closeDialog}>{typeForm=="add" ? "Add" : "Edit" } Assign Human Resource</ModalHeader>
+        <ModalBody>
+          {renderForm()}
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={() => handleSave()}>{typeForm=="add" ? "Add" : "Edit" }</Button>{' '}
+          <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Cancel</Button>
+        </ModalFooter>
+      </Modal>
+    </>
+  )
+
+}
+
+export default FormAsignHr;