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
08e25edb8e
commit
51921be8c6
1 changed files with 193 additions and 166 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. 359
      src/views/Master/MasterMenu/DialogForm.js

359
src/views/Master/MasterMenu/DialogForm.js
Unescape View File

@ -1,166 +1,193 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap'; import { Button, Form, FormGroup, Label, Input, Col, Row } 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, dataMenu }) => { const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataMenu }) => {
const [id, setId] = useState(0) const [id, setId] = useState(0)
const [name, setName] = useState('') const [name, setName] = useState('')
const [url, setUrl] = useState('') const [url, setUrl] = useState('')
const [aliasName, setAliasName] = useState('') const [aliasName, setAliasName] = useState('')
const [icon, setIcon] = useState('') const [icon, setIcon] = useState('')
const [sequence, setSequence] = useState(0) const [sequence, setSequence] = useState(0)
const [parentId, setParentId] = useState(null) const [parentId, setParentId] = useState(null)
const { t } = useTranslation() const { t } = useTranslation()
useEffect(() => { useEffect(() => {
if (typeDialog === "Edit") { if (typeDialog === "Edit") {
console.log("data edit", dataEdit) console.log("data edit", dataEdit)
setId(dataEdit.id) setId(dataEdit.id)
setName(dataEdit.name) setName(dataEdit.name)
setUrl(dataEdit.url) setUrl(dataEdit.url)
setIcon(dataEdit.icon) setIcon(dataEdit.icon)
setParentId(dataEdit.parent_id) setParentId(dataEdit.parent_id)
setSequence(dataEdit.sequence) setSequence(dataEdit.sequence)
setAliasName(dataEdit.alias_name) setAliasName(dataEdit.alias_name)
} else { } else {
setId(0) setId(0)
setName('') setName('')
setUrl('') setUrl('')
setIcon('') setIcon('')
setParentId(null) setParentId(null)
setSequence(0) setSequence(0)
setAliasName('') setAliasName('')
} }
}, [dataEdit, openDialog]) }, [dataEdit, openDialog])
const handleSave = () => { const validation = () => {
let data = ''; if (!name || name === "") {
if (typeDialog === "Save") { alert("Menu Name cannot be empty!");
data = { return true;
name, }
url, if (!url || url === "") {
sequence: parseInt(sequence), alert("URL cannot be empty!");
icon, return true;
alias_name: aliasName }
} if (!icon || icon === "") {
alert("Icon cannot be empty!");
if (parentId && parentId > 0) { return true;
data['parent_id'] = parentId }
} if (sequence < 0) {
alert("Order cannot be empty!");
closeDialog('save', data); return true;
} else { }
data = { }
id,
name, const handleSave = () => {
url, let data = '';
sequence: parseInt(sequence), const err = validation();
icon, if (!err) {
alias_name: aliasName if (typeDialog === "Save") {
} data = {
name,
if (parentId && parentId > 0) { url,
data['parent_id'] = parentId sequence: parseInt(sequence),
} icon,
alias_name: aliasName
closeDialog('edit', data); }
}
setId(0) if (parentId && parentId > 0) {
setName('') data['parent_id'] = parentId
setUrl('') }
setIcon('')
setParentId(null) closeDialog('save', data);
setSequence(0) } else {
setAliasName('') data = {
} id,
name,
const handleCancel = () => { url,
closeDialog('cancel', 'none') sequence: parseInt(sequence),
setId(0) icon,
setName('') alias_name: aliasName
setUrl('') }
setIcon('')
setParentId(null) if (parentId && parentId > 0) {
setSequence(0) data['parent_id'] = parentId
setAliasName('') }
}
closeDialog('edit', data);
const onChangeParent = (val) => { }
setParentId(val) setId(0)
} setName('')
setUrl('')
const setupSelectParent = () => { setIcon('')
return ( setParentId(null)
<> setSequence(0)
{dataMenu.map((val, index) => { setAliasName('')
return ( }
<Option key={index} value={val.id}>{val.name}</Option> }
)
})} const handleCancel = () => {
</> closeDialog('cancel', 'none')
) setId(0)
} setName('')
setUrl('')
const renderForm = () => { setIcon('')
return ( setParentId(null)
<Form> setSequence(0)
<Row> setAliasName('')
<Col> }
<FormGroup>
<Label className="capitalize">{t('name')} Menu</Label> const onChangeParent = (val) => {
<Input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={t('inputName')} /> setParentId(val)
</FormGroup> }
<FormGroup>
<Label className="capitalize">URL</Label> const setupSelectParent = () => {
<Input type="text" value={url} onChange={(e) => setUrl(e.target.value)} placeholder={t('inputUrl')} /> return (
</FormGroup> <>
<FormGroup> {dataMenu.map((val, index) => {
<Label className="capitalize">{t('icon')} </Label> return (
<Input type="text" value={icon} onChange={(e) => setIcon(e.target.value)} placeholder={t('inputIcon')} /> <Option key={index} value={val.id}>{val.name}</Option>
</FormGroup> )
</Col> })}
<Col> </>
<FormGroup> )
<Label className="capitalize">{t('order')}</Label> }
<Input type="number" value={sequence} onChange={(e) => setSequence(e.target.value)} placeholder={t('inputOrder')} />
</FormGroup> const renderForm = () => {
<FormGroup> return (
<Label className="capitalize">{t('parentMenu')}</Label> <Form>
<Select showSearch defaultValue={parentId} onChange={onChangeParent} placeholder={t('inputParentMenu')} style={{ width: '100%' }}> <Row>
{setupSelectParent()} <Col md={12}>
</Select> <span style={{ color: "red" }}>*</span> Wajib diisi.
</FormGroup> </Col>
<FormGroup> </Row>
<Label className="capitalize">Alias Menu</Label> <Row>
<Input type="text" value={aliasName} onChange={(e) => setAliasName(e.target.value)} placeholder={t('inputAliasMenu')} /> <Col>
</FormGroup> <FormGroup>
</Col> <Label className="capitalize">{t('name')} Menu<span style={{ color: "red" }}>*</span></Label>
</Row> <Input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={t('inputName')} />
</FormGroup>
</Form> <FormGroup>
) <Label className="capitalize">URL<span style={{ color: "red" }}>*</span></Label>
} <Input type="text" value={url} onChange={(e) => setUrl(e.target.value)} placeholder={t('inputUrl')} />
</FormGroup>
<FormGroup>
return ( <Label className="capitalize">{t('icon')}<span style={{ color: "red" }}>*</span> </Label>
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> <Input type="text" value={icon} onChange={(e) => setIcon(e.target.value)} placeholder={t('inputIcon')} />
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Tambah` : "Edit"} Menu</ModalHeader> </FormGroup>
<ModalBody> </Col>
{renderForm()} <Col>
</ModalBody> <FormGroup>
<ModalFooter> <Label className="capitalize">{t('order')}<span style={{ color: "red" }}>*</span></Label>
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} <Input type="text" min="0" value={sequence} onChange={(e) => setSequence(e.target.value.replace(/[^0-9]/g, ''))} placeholder={t('inputOrder')} />
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button> </FormGroup>
</ModalFooter> <FormGroup>
</Modal> <Label className="capitalize">{t('parentMenu')}</Label>
) <Select showSearch defaultValue={parentId} onChange={onChangeParent} placeholder={t('inputParentMenu')} style={{ width: '100%' }}>
{setupSelectParent()}
} </Select>
</FormGroup>
export default DialogForm; <FormGroup>
<Label className="capitalize">Alias Menu</Label>
<Input type="text" value={aliasName} onChange={(e) => setAliasName(e.target.value)} placeholder={t('inputAliasMenu')} />
</FormGroup>
</Col>
</Row>
</Form>
)
}
return (
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Tambah` : "Edit"} Menu</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