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 8 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
Split 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 {
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;
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;

Write Preview
Loading…
Cancel
Save