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

add validation

pull/2/head
wahyuun 1 year ago
parent
5f778a2743
commit
8a45d7f5bb
1 changed files with 137 additions and 117 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. 254
      src/views/SimproV2/Divisi/DialogForm.js

254
src/views/SimproV2/Divisi/DialogForm.js
Unescape View File

@ -1,117 +1,137 @@
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
} from 'reactstrap'; } from 'reactstrap';
import { Select } from 'antd'; import { Select } from 'antd';
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, dataDivisions }) => { const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataDivisions }) => {
const [id, setId] = useState(0) const [id, setId] = useState(0)
const [name, setName] = useState('') const [name, setName] = useState('')
const [parent, setParent] = useState(null) const [parent, setParent] = useState(null)
const [description, setDescription] = useState('') const [description, setDescription] = useState('')
const { t } = useTranslation() const { t } = useTranslation()
const onChangeParent = (val) => { const onChangeParent = (val) => {
setParent(val) setParent(val)
} }
useEffect(() => { useEffect(() => {
if (typeDialog === "Edit") { if (typeDialog === "Edit") {
setId(dataEdit.id) setId(dataEdit.id)
setDescription(dataEdit.description) setDescription(dataEdit.description)
setName(dataEdit.name) setName(dataEdit.name)
setParent(dataEdit.parent) setParent(dataEdit.parent)
} else { } else {
setId(0) setId(0)
} }
}, [dataEdit, openDialog]) }, [dataEdit, openDialog])
const handleSave = () => { const validation = () => {
let data = ''; if (!name || name === "") {
if (typeDialog === "Save") { alert("Division Name cannot be empty!");
data = { return true;
name: name, }
description, }
parent const handleSave = () => {
} let data = '';
closeDialog('save', data); const err = validation();
} else {
data = { if (!err) {
id, if (typeDialog === "Save") {
name: name, data = {
description, name: name,
parent description,
} parent
closeDialog('edit', data); }
} closeDialog('save', data);
setId(0) } else {
setDescription('') data = {
} id,
const handleCancel = () => { name: name,
closeDialog('cancel', 'none') description,
setId(0) parent
setDescription('') }
} closeDialog('edit', data);
}
const renderForm = () => { setId(0)
return ( setDescription('')
<Form> setName('')
<Row> }
<Col md={6}> }
<FormGroup> const handleCancel = () => {
<Label className="capitalize">{t('name')}</Label> closeDialog('cancel', 'none')
<Input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={t('inputName')} /> setId(0)
</FormGroup> setDescription('')
</Col> setName('')
</Row> }
<Row>
<Col md={6}> const renderForm = () => {
<FormGroup> return (
<Label className="capitalize">{t('nameDivision')}</Label> <Form>
<Select showSearch <Row>
value={parent} <Col md={12}>
onChange={onChangeParent} <span style={{ color: "red" }}>*</span> Wajib diisi.
style={{ width: '100%' }} </Col>
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} </Row>
> <Row>
{dataDivisions.map((res, idx) => ( <Col md={6}>
<Option key={res['id']} value={res['id']}>{res['displayName']}</Option> <FormGroup>
))} <Label className="capitalize">{t('name')}<span style={{ color: "red" }}>*</span></Label>
</Select> <Input
</FormGroup> type="text"
</Col> value={name}
</Row> onChange={(e) => setName(e.target.value)}
<Row> placeholder={t('inputName')}
<Col md={6}> />
<FormGroup> </FormGroup>
<Label className="capitalize">{t('description')}</Label> </Col>
<Input row="4" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('inputDescription')} /> <Col md={6}>
</FormGroup> <FormGroup>
</Col> <Label className="capitalize">{t('nameDivision')}</Label>
</Row> <Select showSearch
</Form> value={parent}
) onChange={onChangeParent}
} style={{ width: '100%' }}
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
>
return ( {dataDivisions.map((res, idx) => (
<> <Option key={res['id']} value={res['id']}>{res['displayName']}</Option>
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> ))}
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} {t('division')}</ModalHeader> </Select>
<ModalBody> </FormGroup>
{renderForm()} </Col>
</ModalBody> </Row>
<ModalFooter> <Row>
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} <Col md={12}>
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button> <FormGroup>
</ModalFooter> <Label className="capitalize">{t('description')}</Label>
</Modal> <Input row="4" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('inputDescription')} />
</> </FormGroup>
) </Col>
</Row>
} </Form>
)
export default DialogForm; }
return (
<>
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} {t('division')}</ModalHeader>
<ModalBody>
{renderForm()}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button>
</ModalFooter>
</Modal>
</>
)
}
export default DialogForm;

Write Preview
Loading…
Cancel
Save