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