4 changed files with 1045 additions and 236 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; |
||||
@ -0,0 +1,267 @@
|
||||
import React, { useState, useEffect } from 'react' |
||||
import { |
||||
Modal, ModalHeader, ModalBody, ModalFooter, |
||||
Button, Form, FormGroup, Label, Input, Col, Row |
||||
} from 'reactstrap'; |
||||
import { Select } from 'antd'; |
||||
import { USER_ADD, USER_EDIT } from '../../../const/ApiConst.js'; |
||||
import 'antd/dist/antd.css'; |
||||
import { useTranslation } from 'react-i18next'; |
||||
import axios from 'axios'; |
||||
const { Option } = Select |
||||
const token = window.localStorage.getItem('token'); |
||||
const config = { |
||||
headers: |
||||
{ |
||||
Authorization: `Bearer ${token}`, |
||||
"Content-type": `application/json` |
||||
} |
||||
}; |
||||
const FormUser = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, roleList, companyID }) => { |
||||
const { t } = useTranslation() |
||||
const [id, setId] = useState('') |
||||
const [resourceName, setResourceName] = useState('') |
||||
const [username, setUsername] = useState('') |
||||
const [password, setPassword] = useState('') |
||||
const [employeeType, setEmployeeType] = useState('') |
||||
const [phoneNo, setPhoneNo] = useState('') |
||||
const [email, setEmail] = useState('') |
||||
const [gender, setGender] = useState('') |
||||
const [ktpNumber, setKtpNumber] = useState('') |
||||
const [roleId, setRoleId] = useState('') |
||||
const [statusResource, setStatusResource] = useState('active') |
||||
|
||||
useEffect(() => { |
||||
if (typeDialog === "Edit") { |
||||
console.log(dataEdit); |
||||
setId(dataEdit.id) |
||||
setResourceName(dataEdit.name) |
||||
setUsername(dataEdit.username) |
||||
setPassword('') |
||||
setEmployeeType(dataEdit.employee_type) |
||||
setPhoneNo(dataEdit.phone_number) |
||||
setEmail(dataEdit.email) |
||||
setGender(dataEdit.gender) |
||||
setKtpNumber(dataEdit.ktp_number ? dataEdit.ktp_number : '') |
||||
setRoleId(dataEdit.role_id) |
||||
} else { |
||||
setId(0) |
||||
setResourceName('') |
||||
setUsername('') |
||||
setPassword('') |
||||
setEmployeeType('') |
||||
setPhoneNo('') |
||||
setEmail('') |
||||
setGender('') |
||||
setRoleId('') |
||||
} |
||||
}, [dataEdit, openDialog]) |
||||
|
||||
|
||||
const handleSave = async () => { |
||||
let data = ''; |
||||
if (typeDialog === "Save") { |
||||
data = { |
||||
name: resourceName, |
||||
employee_type: employeeType, |
||||
phone_number: phoneNo, |
||||
email, |
||||
gender, |
||||
ktp_number: ktpNumber, |
||||
role_id: roleId, |
||||
status_resource: statusResource, |
||||
company_id: companyID, |
||||
username, |
||||
password, |
||||
} |
||||
const formData = data |
||||
const result = await axios.post(USER_ADD, formData, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
closeDialog('success', `Data resource berhasil ditambah`) |
||||
} else { |
||||
closeDialog('failed', result.data.message) |
||||
} |
||||
} else { |
||||
|
||||
data = { |
||||
id, |
||||
name: resourceName, |
||||
username, |
||||
employee_type: employeeType, |
||||
phone_number: phoneNo, |
||||
email, |
||||
gender, |
||||
ktp_number: ktpNumber, |
||||
role_id: roleId, |
||||
status_resource: statusResource, |
||||
company_id: companyID, |
||||
username, |
||||
password, |
||||
} |
||||
if (password == '') { |
||||
data.password = dataEdit.password; |
||||
} |
||||
let urlEdit = USER_EDIT(data.id) |
||||
const formData = data |
||||
|
||||
const result = await axios.put(urlEdit, formData, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
closeDialog('success', `Data resource berhasil diedit`) |
||||
} else { |
||||
closeDialog('failed', result.data.message) |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
const handleCancel = () => { |
||||
closeDialog('cancel', 'none') |
||||
} |
||||
|
||||
const isValidEmail = (email) => { |
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
||||
return emailRegex.test(email); |
||||
}; |
||||
|
||||
const setupSelectRole = () => { |
||||
return ( |
||||
<> |
||||
{roleList.map((val, index) => { |
||||
return ( |
||||
<Option key={index} value={val.id}>{val.name}</Option> |
||||
) |
||||
})} |
||||
</> |
||||
) |
||||
} |
||||
|
||||
|
||||
const renderFormSetAdmin = () => { |
||||
return ( |
||||
<Form> |
||||
<Row> |
||||
<Col md={12}> |
||||
<span style={{ color: "red" }}>*</span>required. |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('nik')} <span style={{ color: "red" }}>*</span></Label> |
||||
<Input type="text" value={ktpNumber} onChange={(e) => setKtpNumber(e.target.value.replace(/[^0-9]/g, ''))} placeholder={t('inputNik')} maxLength="16" /> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('nameHR')}<span style={{ color: "red" }}>*</span></Label> |
||||
<Input type="text" value={resourceName} onChange={(e) => setResourceName(e.target.value)} placeholder={t('inputName')} /> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('employeeType')} <span style={{ color: "red" }}>*</span></Label> |
||||
<Select showSearch value={employeeType} defaultValue={employeeType} onChange={(val) => setEmployeeType(val)} placeholder="Select Employee Type" style={{ width: '100%' }}> |
||||
<Option value={'employee'}>Employee</Option> |
||||
<Option value={'subcon'}>Subcon</Option> |
||||
<Option value={'freelance'}>Freelance</Option> |
||||
</Select> |
||||
</FormGroup> |
||||
|
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">Phone No.</Label> |
||||
<Input type="text" value={phoneNo} onChange={(e) => setPhoneNo(e.target.value.replace(/[^0-9]/g, ''))} placeholder={t('inputNoPhone')} maxLength="15" /> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">Email</Label> |
||||
<Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder={t('inputEmail')} |
||||
onBlur={(e) => { |
||||
if (!isValidEmail(e.target.value)) { |
||||
alert("Masukkan email yang valid."); |
||||
} |
||||
}} |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('gender')}</Label> |
||||
<Select showSearch value={gender} defaultValue={gender} onChange={(val) => setGender(val)} placeholder={t('selectGender')} style={{ width: '100%' }}> |
||||
<Option value="Male">Male</Option> |
||||
<Option value="Female">Female</Option> |
||||
{/* <Option value="Other">Other</Option> */} |
||||
</Select> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('roles')} <span style={{ color: "red" }}>*</span></Label> |
||||
<Select showSearch defaultValue={roleId} onChange={(val) => setRoleId(val)} placeholder={t('selectRole')} style={{ width: '100%' }}> |
||||
{setupSelectRole()} |
||||
</Select> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">Status</Label> |
||||
<Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)} > |
||||
<Option value={'active'}>Active</Option> |
||||
<Option value={'inactive'}>Inactive</Option> |
||||
</Select> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">Username</Label> |
||||
<Input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder={`Username...`} /> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">Password</Label> |
||||
<Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={`Password...`} /> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</Form> |
||||
) |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<Modal size="xl" fullscreen="xl" scrollable={true} isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}> |
||||
{typeDialog === "Save" ? `Add` : typeDialog === "Set" ? "Add " : "Edit"} User |
||||
</ModalHeader> |
||||
<ModalBody> |
||||
{renderFormSetAdmin()} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{''} |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>cancel</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
</> |
||||
) |
||||
|
||||
} |
||||
export default FormUser; |
||||
Loading…
Reference in new issue