From a2d7c837cc4ae7482fc4c412f58906c4373018f2 Mon Sep 17 00:00:00 2001
From: Watiah11 <watiiahwati111@gmail.com>
Date: Mon, 6 May 2024 08:31:11 +0700
Subject: [PATCH] feat(project type): add form multi location

---
 src/views/SimproV2/ProjectType/DialogForm.js | 326 ++++++++++---------
 1 file changed, 172 insertions(+), 154 deletions(-)

diff --git a/src/views/SimproV2/ProjectType/DialogForm.js b/src/views/SimproV2/ProjectType/DialogForm.js
index 6619f40..0238082 100644
--- a/src/views/SimproV2/ProjectType/DialogForm.js
+++ b/src/views/SimproV2/ProjectType/DialogForm.js
@@ -1,154 +1,172 @@
-import React, { useEffect, useState } from 'react'
-import {
-  Modal, ModalHeader, ModalBody, ModalFooter,
-  Button, Form, FormGroup, Label, Input, Col, Row
-} from 'reactstrap';
-import { Select } from 'antd';
-import moment from 'moment';
-import 'antd/dist/antd.css';
-import { useTranslation } from 'react-i18next';
-const { Option } = Select
-
-const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, company_id, listCompany, role_name }) => {
-  const [id, setId] = useState(0)
-  const [projectType, setProjectType] = useState('')
-  const [uom, setUom] = useState('')
-  const [description, setDescription] = useState('')
-  const [unitPrice, setUnitPrice] = useState()
-  const [selectedCompany, setSelectedCompany] = useState(null)
-  const { t } = useTranslation();
-
-
-
-  useEffect(() => {
-    if (typeDialog === "Edit") {
-      setId(dataEdit.id)
-      setDescription(dataEdit.description)
-      setUnitPrice(dataEdit.unit_price)
-      setUom(dataEdit.uom)
-      setProjectType(dataEdit.name)
-      setSelectedCompany(dataEdit.company_id)
-    } else {
-      setId(0)
-    }
-  }, [dataEdit, openDialog])
-
-  const handleSave = () => {
-    let data = '';
-    if (typeDialog === "Save") {
-      if (role_name === 'Super Admin') {
-        company_id = selectedCompany
-      }
-      data = {
-        name: projectType,
-        description,
-        company_id: company_id
-      }
-
-      closeDialog('save', data);
-    } else {
-      if (role_name === 'Super Admin') {
-        company_id = selectedCompany
-      }
-      data = {
-        id,
-        name: projectType,
-        description,
-        company_id: company_id
-      }
-      closeDialog('edit', data);
-    }
-    setId(0)
-    setDescription('')
-    setSelectedCompany(null)
-  }
-
-  const handleCancel = () => {
-    closeDialog('cancel', 'none')
-    setId(0)
-    setDescription('')
-    setSelectedCompany(null)
-  }
-
-  const onChangeCompany = (val) => {
-    setSelectedCompany(val);
-  };
-
-  const renderForm = () => {
-    return (
-      <Form>
-        <Row>
-          <Col md={6}>
-            <FormGroup>
-              <Label className="capitalize">{t('nameProjectType')}</Label>
-              <Input type="text" value={projectType} onChange={(e) => setProjectType(e.target.value)} placeholder={t('inputName')} />
-            </FormGroup>
-          </Col>
-          <Col md={6}>
-            <FormGroup>
-              <Label className="capitalize">{t('description')}</Label>
-              <Input row="4" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('inputDescription')} />
-            </FormGroup>
-          </Col>
-        </Row>
-        {role_name === 'Super Admin' &&
-          <Row>
-            <Col md={6}>
-              <FormGroup>
-                <Label className="capitalize">
-                  {t('company')}<span style={{ color: "red" }}>*</span>
-                </Label>
-                <Select
-                  showSearch
-                  filterOption={(inputValue, option) =>
-                    option.children.toLowerCase().includes(inputValue.toLowerCase())
-                  }
-                  value={selectedCompany}
-                  defaultValue={selectedCompany}
-                  onChange={onChangeCompany}
-                  style={{ width: "100%" }}
-                >
-                  {listCompany.map((res) => (
-                    <Option key={res.id} value={res.id}>
-                      {res.company_name}
-                    </Option>
-                  ))}
-                </Select>
-              </FormGroup>
-            </Col>
-          </Row>
-        }
-      </Form>
-    )
-  }
-
-
-  return (
-    <>
-      <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
-        <ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Resource</ModalHeader>
-        <ModalBody>
-          {renderForm()}
-        </ModalBody>
-        <ModalFooter>
-          <Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
-          <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button>
-        </ModalFooter>
-      </Modal>
-
-      {/* <DialogMap
-      openDialog={openDialogMap}
-      closeDialog={handleCloseDialogMap}
-      toggleDialog={() => toggleMapDialog}
-      dataEdit={dataEdit}
-      workArea_={workArea}
-      lat_={lat}
-      lon_={lon}
-      radius_={radius}
-    /> */}
-    </>
-  )
-
-}
-
-export default DialogForm;
\ No newline at end of file
+import React, { useEffect, useState } from 'react'
+import {
+  Modal, ModalHeader, ModalBody, ModalFooter,
+  Button, Form, FormGroup, Label, Input, Col, Row, CustomInput
+} from 'reactstrap';
+import { Select } from 'antd';
+import moment from 'moment';
+import 'antd/dist/antd.css';
+import { useTranslation } from 'react-i18next';
+const { Option } = Select
+
+const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, company_id, listCompany, role_name }) => {
+  const [id, setId] = useState(0)
+  const [projectType, setProjectType] = useState('')
+  const [uom, setUom] = useState('')
+  const [description, setDescription] = useState('')
+  const [unitPrice, setUnitPrice] = useState()
+  const [selectedCompany, setSelectedCompany] = useState(null)
+  const [isMultiLocation, setIsMultiLocation] = useState(false);
+  const { t } = useTranslation();
+
+  const handleIsMultiLocationChange = () => {
+    setIsMultiLocation(!isMultiLocation);
+  };
+
+  useEffect(() => {
+    if (typeDialog === "Edit") {
+      setId(dataEdit.id)
+      setDescription(dataEdit.description)
+      setUnitPrice(dataEdit.unit_price)
+      setUom(dataEdit.uom)
+      setProjectType(dataEdit.name)
+      setSelectedCompany(dataEdit.company_id)
+      setIsMultiLocation(dataEdit.is_multiLocation)
+    } else {
+      handleClear()
+    }
+  }, [dataEdit, openDialog])
+
+  const handleSave = () => {
+    let data = '';
+    if (role_name === 'Super Admin') {
+      company_id = selectedCompany
+    }
+    if (typeDialog === "Save") {
+      data = {
+        name: projectType,
+        description,
+        company_id: parseInt(company_id),
+        is_multiLocation: isMultiLocation
+      }
+
+      closeDialog('save', data);
+    } else {
+      data = {
+        id,
+        name: projectType,
+        description,
+        company_id: parseInt(company_id),
+        is_multiLocation: isMultiLocation
+      }
+      closeDialog('edit', data);
+    }
+    handleClear();
+  }
+
+  const handleClear = () => {
+    setId(0)
+    setProjectType('')
+    setDescription('')
+    setSelectedCompany(null)
+    setIsMultiLocation(false)
+
+  }
+
+  const handleCancel = () => {
+    closeDialog('cancel', 'none');
+    handleClear();
+  }
+
+  const onChangeCompany = (val) => {
+    setSelectedCompany(val);
+  };
+
+  const renderForm = () => {
+    return (
+      <Form>
+        <Row>
+          <Col md={6}>
+            <FormGroup>
+              <Label className="capitalize">{t('nameProjectType')}</Label>
+              <Input type="text" value={projectType} onChange={(e) => setProjectType(e.target.value)} placeholder={t('inputName')} />
+            </FormGroup>
+          </Col>
+          <Col md={6}>
+            <FormGroup>
+              <Label className="capitalize">{t('description')}</Label>
+              <Input row="4" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('inputDescription')} />
+            </FormGroup>
+          </Col>
+        </Row>
+        <Row>
+          <Col md={6}>
+            <FormGroup>
+              <Label className="capitalize">Is Multi Location</Label>
+              <div>
+                <CustomInput type="switch" id="isMultiLocationSwitch" name="isMultiLocationSwitch" checked={isMultiLocation} onChange={handleIsMultiLocationChange} />
+              </div>
+            </FormGroup>
+          </Col>
+          {
+            role_name === 'Super Admin' && (
+                <Col md={6}>
+                  <FormGroup>
+                    <Label className="capitalize">
+                      {t('company')}<span style={{ color: "red" }}>*</span>
+                    </Label>
+                    <Select
+                      showSearch
+                      filterOption={(inputValue, option) =>
+                        option.children.toLowerCase().includes(inputValue.toLowerCase())
+                      }
+                      value={selectedCompany}
+                      defaultValue={selectedCompany}
+                      onChange={onChangeCompany}
+                      style={{ width: "100%" }}
+                    >
+                      {listCompany.map((res) => (
+                        <Option key={res.id} value={res.id}>
+                          {res.company_name}
+                        </Option>
+                      ))}
+                    </Select>
+                  </FormGroup>
+                </Col>
+              )
+            }
+        </Row>
+      </Form>
+    )
+  }
+
+
+  return (
+    <>
+      <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
+        <ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Resource</ModalHeader>
+        <ModalBody>
+          {renderForm()}
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
+          <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button>
+        </ModalFooter>
+      </Modal>
+
+      {/* <DialogMap
+      openDialog={openDialogMap}
+      closeDialog={handleCloseDialogMap}
+      toggleDialog={() => toggleMapDialog}
+      dataEdit={dataEdit}
+      workArea_={workArea}
+      lat_={lat}
+      lon_={lon}
+      radius_={radius}
+    /> */}
+    </>
+  )
+
+}
+
+export default DialogForm;