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