ibnu
2 years ago
5 changed files with 315 additions and 73 deletions
@ -0,0 +1,117 @@
|
||||
import React, { useEffect, useState } from 'react' |
||||
import { |
||||
Modal, ModalHeader, ModalBody, ModalFooter, |
||||
Button, Form, FormGroup, Label, Input, Col, Row |
||||
} from 'reactstrap'; |
||||
import { DatePicker, Tooltip, Select } from 'antd'; |
||||
import { formatRupiah, formatNumber } from '../../../const/CustomFunc' |
||||
import moment from 'moment'; |
||||
import 'antd/dist/antd.css'; |
||||
import { useTranslation } from 'react-i18next'; |
||||
|
||||
const DialogFormHierarchy = ({ openDialog, closeDialog, toggleDialog, typeDialog, parentId, idProject }) => { |
||||
const [id, setId] = useState(0) |
||||
const [nameDaerah, setNameDaerah] = useState('') |
||||
const [nameArea, setNameArea] = useState('') |
||||
const { t } = useTranslation(); |
||||
const handleSaveDaerah = () => { |
||||
let data = ''; |
||||
if (typeDialog === "Save") { |
||||
data = { |
||||
project_id: idProject, |
||||
name: nameDaerah, |
||||
} |
||||
closeDialog('save', data); |
||||
} else { |
||||
data = { |
||||
id, |
||||
name: nameDaerah, |
||||
} |
||||
closeDialog('edit', data); |
||||
} |
||||
|
||||
} |
||||
const handleSaveArea = () => { |
||||
let data = ''; |
||||
if (typeDialog === "SaveArea") { |
||||
data = { |
||||
project_id: idProject, |
||||
name: nameArea, |
||||
} |
||||
|
||||
if (parentId && parentId > 0) { |
||||
data['parent_id'] = parentId |
||||
} |
||||
closeDialog('save', data); |
||||
} else { |
||||
data = { |
||||
id, |
||||
project_id: idProject, |
||||
parent_id: parentId, |
||||
name: nameArea, |
||||
} |
||||
closeDialog('edit', data); |
||||
} |
||||
|
||||
} |
||||
|
||||
const handleCancel = () => { |
||||
closeDialog('cancel', 'none') |
||||
} |
||||
const renderFormDaerah = () => { |
||||
return ( |
||||
<Form> |
||||
<Row> |
||||
<Col> |
||||
<FormGroup> |
||||
<Label className="capitalize">Nama Daerah</Label> |
||||
<Input type="text" value={nameDaerah} onChange={(e) => setNameDaerah(e.target.value)} placeholder={t('inputName')} /> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</Form> |
||||
) |
||||
} |
||||
const renderFormArea = () => { |
||||
return ( |
||||
<Form> |
||||
<Row> |
||||
<Col> |
||||
<FormGroup> |
||||
<Label className="capitalize">Nama Area</Label> |
||||
<Input type="text" value={nameArea} onChange={(e) => setNameArea(e.target.value)} placeholder={t('inputName')} /> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</Form> |
||||
) |
||||
} |
||||
return ( |
||||
<> |
||||
{typeDialog === "SaveArea" ? ( |
||||
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "SaveArea" ? `Add` : "Edit"} Area</ModalHeader> |
||||
<ModalBody> |
||||
{renderFormArea()} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="primary" onClick={() => handleSaveArea()}>{typeDialog == "SaveArea" ? `Add` : "Edit"} </Button>{' '} |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
) : ( |
||||
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Daerah</ModalHeader> |
||||
<ModalBody> |
||||
{renderFormDaerah()} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="primary" onClick={() => handleSaveDaerah()}>{typeDialog}</Button>{' '} |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
)} |
||||
</> |
||||
) |
||||
} |
||||
export default DialogFormHierarchy; |
Loading…
Reference in new issue