ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(project type): add form multi location

pull/1/head
Watiah11 6 months ago
parent
e6383ae087
commit
a2d7c837cc
1 changed files with 172 additions and 154 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 326
      src/views/SimproV2/ProjectType/DialogForm.js

326
src/views/SimproV2/ProjectType/DialogForm.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save