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