14 changed files with 1075 additions and 403 deletions
@ -0,0 +1,285 @@
|
||||
import React, { useState, useEffect } from 'react' |
||||
import { |
||||
Modal, ModalHeader, ModalBody, ModalFooter, |
||||
Button, Form, FormGroup, Label, Input, Col, Row |
||||
} from 'reactstrap'; |
||||
import { Transfer, Select } from 'antd'; |
||||
import 'antd/dist/antd.css'; |
||||
import { useTranslation } from 'react-i18next'; |
||||
import { MENU_LIST, MENU_COMPANY_ADD, MENU_COMPANY_EDIT } from '../../../const/ApiConst.js'; |
||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||
import axios from 'axios'; |
||||
const token = window.localStorage.getItem('token'); |
||||
const FormMenu = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, companyName, companyID }) => { |
||||
const { Option } = Select |
||||
const [targetKeys, setTargetKeys] = useState([]) |
||||
const [menuResource, setmenuResource] = useState([]) |
||||
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() |
||||
const config = { |
||||
headers: |
||||
{ |
||||
Authorization: `Bearer ${token}`, |
||||
"Content-type": `application/json` |
||||
} |
||||
}; |
||||
|
||||
const handleCLearData = () => { |
||||
// setId(0)
|
||||
setTargetKeys([]) |
||||
} |
||||
|
||||
useEffect(() => { |
||||
if (!openDialog) { |
||||
handleCLearData() |
||||
} else { |
||||
getDataAllMenu(); |
||||
} |
||||
}, [openDialog]) |
||||
|
||||
const getDataAllMenu = async () => { |
||||
const result = await axios |
||||
.get(MENU_LIST, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
setTransferMenu(result.data.data); |
||||
} else { |
||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const setTransferMenu = (data) => { |
||||
const finalData = [] |
||||
data.map((val, index) => { |
||||
let data = { |
||||
key: val.id, |
||||
name: val.name, |
||||
url: val.url, |
||||
alias_name: val.alias_name, |
||||
icon: val.icon, |
||||
parent_id: val.parent_id, |
||||
sequence: val.sequence, |
||||
} |
||||
finalData.push(data) |
||||
}); |
||||
setmenuResource(finalData) |
||||
} |
||||
|
||||
|
||||
const handleSave = async () => { |
||||
await saveMenuCompany() |
||||
handleCLearData() |
||||
} |
||||
|
||||
useEffect(() => { |
||||
if (typeDialog === "Edit") { |
||||
setId(dataEdit.id) |
||||
setIcon(dataEdit.icon) |
||||
setParentId(dataEdit.parent_id) |
||||
setSequence(dataEdit.sequence) |
||||
} else { |
||||
setId(0) |
||||
setName('') |
||||
setUrl('') |
||||
setIcon('') |
||||
setParentId(null) |
||||
setSequence(0) |
||||
setAliasName('') |
||||
} |
||||
}, [dataEdit, openDialog]) |
||||
|
||||
const validation = () => { |
||||
if (!icon || icon === "") { |
||||
alert("Icon cannot be empty!"); |
||||
return true; |
||||
} |
||||
if (sequence < 0) { |
||||
alert("Order cannot be empty!"); |
||||
return true; |
||||
} |
||||
} |
||||
|
||||
const saveMenuCompany = async () => { |
||||
let data = ''; |
||||
const err = validation(); |
||||
if (!err) { |
||||
if (typeDialog === "Edit") { |
||||
data = { |
||||
id, |
||||
sequence: parseInt(sequence), |
||||
icon, |
||||
} |
||||
|
||||
if (parentId && parentId > 0) { |
||||
data['parent_id'] = parentId |
||||
} |
||||
|
||||
const formData = data |
||||
const url = MENU_COMPANY_EDIT(data.id) |
||||
const result = await axios.put(url, formData, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
closeDialog('success', 'Data menu berhasil diubah') |
||||
} else { |
||||
closeDialog('failed', 'Data menu gagal diubah') |
||||
} |
||||
} |
||||
setId(0) |
||||
setName('') |
||||
setUrl('') |
||||
setIcon('') |
||||
setParentId(null) |
||||
setSequence(0) |
||||
setAliasName('') |
||||
} else { |
||||
const selectedData = menuResource.filter(item => targetKeys.includes(item.key)); |
||||
const formDatas = selectedData.map(data => ({ |
||||
menu_id: data.key, |
||||
parent_id: data.parent_id, |
||||
company_id: companyID, |
||||
icon: data.icon, |
||||
alias_name: data.alias_name, |
||||
url: data.url, |
||||
sequence: data.sequence |
||||
})); |
||||
const result = await axios |
||||
.post(MENU_COMPANY_ADD, formDatas, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.status == 200) { |
||||
closeDialog('success', result.data.message) |
||||
} else { |
||||
closeDialog('failed', result.data.message) |
||||
} |
||||
} |
||||
} |
||||
|
||||
const handleCancel = () => { |
||||
closeDialog('cancel', 'none') |
||||
setId(0) |
||||
setName('') |
||||
setUrl('') |
||||
setIcon('') |
||||
setParentId(null) |
||||
setSequence(0) |
||||
setAliasName('') |
||||
} |
||||
|
||||
const handleChange = targetKeys => { |
||||
setTargetKeys(targetKeys) |
||||
}; |
||||
|
||||
const onChangeParent = (val) => { |
||||
setParentId(val) |
||||
} |
||||
|
||||
const setupSelectParent = () => { |
||||
return ( |
||||
<> |
||||
{menuResource.map((val, index) => { |
||||
return ( |
||||
<Option key={index} value={val.id}>{val.name}</Option> |
||||
) |
||||
})} |
||||
</> |
||||
) |
||||
} |
||||
|
||||
const renderForm = () => { |
||||
return ( |
||||
<Form> |
||||
<Row> |
||||
<Col md={12}> |
||||
<div style={{ justifyContent: 'center' }}> |
||||
<Transfer |
||||
showSearch |
||||
listStyle={{ |
||||
width: 250, |
||||
height: 300, |
||||
}} |
||||
titles={['Master Menu', `Menu ${companyName}`]} |
||||
targetKeys={targetKeys} |
||||
dataSource={menuResource} |
||||
onChange={handleChange} |
||||
render={item => item.name} |
||||
/> |
||||
</div> |
||||
</Col> |
||||
</Row> |
||||
|
||||
</Form> |
||||
) |
||||
} |
||||
const renderFormEdit = () => { |
||||
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="hidden" 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="hidden" 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="hidden" value={aliasName} onChange={(e) => setAliasName(e.target.value)} placeholder={t('inputAliasMenu')} /> |
||||
</FormGroup> */} |
||||
</Col> |
||||
</Row> |
||||
|
||||
</Form> |
||||
) |
||||
} |
||||
return ( |
||||
<> |
||||
<Modal ssize="md" scrollable={true} isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}> |
||||
Add Data Menu |
||||
</ModalHeader> |
||||
<ModalBody> |
||||
{typeDialog !== 'Edit' ? renderForm() : renderFormEdit()} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{''} |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>cancel</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
</> |
||||
) |
||||
|
||||
} |
||||
export default FormMenu; |
||||
Loading…
Reference in new issue