root
1 year ago
5 changed files with 681 additions and 10 deletions
@ -0,0 +1,399 @@
|
||||
import React, { useState, useMemo, useEffect } from 'react' |
||||
import { |
||||
Modal, ModalHeader, ModalBody, ModalFooter, |
||||
Button, Form, FormGroup, Label, Input, Col, Row, Card, CardBody, Fade |
||||
} from 'reactstrap'; |
||||
import { Pagination, Table, Tooltip, Select, Input as InputAntd } from 'antd'; |
||||
import moment from 'moment'; |
||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||
import DialogFormUser from './DialogFormUser'; |
||||
import 'antd/dist/antd.css'; |
||||
import { useTranslation } from 'react-i18next'; |
||||
import axios from "../../../const/interceptorApi" |
||||
import { |
||||
USER_SEARCH, USER_EDIT, USER_DELETE, ROLE_SEARCH, DIVISI_SEARCH, |
||||
} from '../../../const/ApiConst'; |
||||
const token = window.localStorage.getItem('token'); |
||||
const config = { |
||||
headers: |
||||
{ |
||||
Authorization: `Bearer ${token}`, |
||||
"Content-type": `application/json` |
||||
} |
||||
}; |
||||
const { Option } = Select |
||||
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, roleList, companyID }) => { |
||||
const { t } = useTranslation() |
||||
const [registrationnumber, setRegistrationNumber] = useState('') |
||||
const [companyName, setCompanyName] = useState('') |
||||
const [addressCompany, setAddressCompany] = useState('') |
||||
const [phoneNumber, setPhoneNumber] = useState('') |
||||
const [emailCompany, setEmailCompany] = useState('') |
||||
const [description, setDescription] = useState('') |
||||
const [logoLogin, setLogoLogin] = useState([]) |
||||
const [logoHeader, setLogoHeader] = useState([]) |
||||
const [favIcon, setFavIcon] = useState([]) |
||||
const [loginInstruction, setLoginInstruction] = useState('') |
||||
const [about, setAbout] = useState('') |
||||
const [htmlTitle, setHtmlTitle] = useState('') |
||||
const [appName, setAppName] = useState('') |
||||
const [baseUrl, setBaseUrl] = useState([]) |
||||
const [statusCompany, setStatusCompany] = useState('active') |
||||
const [template, setTemplate] = useState('') |
||||
|
||||
const [dataTable, setDatatable] = useState([]) |
||||
const [openDialogUser, setOpenDialogUser] = useState(false) |
||||
const [typeDialogUser, setTypeDialogUser] = useState("add") |
||||
const [currentPage, setCurrentPage] = useState(1) |
||||
const [rowsPerPage, setRowsPerPage] = useState(10) |
||||
const [totalPage, setTotalPage] = useState(0) |
||||
const [search, setSearch] = useState('') |
||||
|
||||
useEffect(() => { |
||||
if (companyID) { |
||||
getDataUser() |
||||
} |
||||
}, [companyID, rowsPerPage, currentPage]) |
||||
|
||||
const onShowSizeChange = (current, pageSize) => { |
||||
setRowsPerPage(pageSize) |
||||
} |
||||
|
||||
const onPagination = (current, pageSize) => { |
||||
setCurrentPage(current) |
||||
} |
||||
|
||||
const getDataUser = async () => { |
||||
let start = 0; |
||||
|
||||
if (currentPage !== 1 && currentPage > 1) { |
||||
start = (currentPage * rowsPerPage) - rowsPerPage |
||||
} |
||||
|
||||
const payload = { |
||||
"paging": { |
||||
"start": start, |
||||
"length": rowsPerPage |
||||
}, |
||||
"columns": [], |
||||
"group_column": { |
||||
"operator": "AND", |
||||
"group_operator": "OR", |
||||
"where": [ |
||||
{ |
||||
"name": "name", |
||||
"logic_operator": "~*", |
||||
"value": search |
||||
}, |
||||
{ |
||||
"name": "ktp_number", |
||||
"logic_operator": "~*", |
||||
"value": search |
||||
}, |
||||
{ |
||||
"name": "name", |
||||
"logic_operator": "~*", |
||||
"value": search, |
||||
"table_name": "m_divisi" |
||||
}, |
||||
{ |
||||
"name": "employee_type", |
||||
"logic_operator": "~*", |
||||
"value": search |
||||
}, |
||||
{ |
||||
"name": "name", |
||||
"logic_operator": "~*", |
||||
"value": search, |
||||
"table_name": "m_roles" |
||||
}, |
||||
{ |
||||
"name": "phone_number", |
||||
"logic_operator": "~*", |
||||
"value": search |
||||
}, |
||||
{ |
||||
"name": "email", |
||||
"logic_operator": "~*", |
||||
"value": search |
||||
}, |
||||
{ |
||||
"name": "status_resource", |
||||
"logic_operator": "~*", |
||||
"value": search |
||||
}, |
||||
{ |
||||
"name": "company_id", |
||||
"logic_operator": "=", |
||||
"value": companyID |
||||
}, |
||||
] |
||||
}, |
||||
"joins": [ |
||||
{ |
||||
"name": "m_roles", |
||||
"column_join": "role_id", |
||||
"column_results": [ |
||||
"name", |
||||
"description" |
||||
] |
||||
}, |
||||
{ |
||||
"name": "m_divisi", |
||||
"column_join": "divisi_id", |
||||
"column_results": [ |
||||
"name" |
||||
] |
||||
} |
||||
], |
||||
"orders": { |
||||
"columns": [ |
||||
"id" |
||||
], |
||||
"ascending": false |
||||
} |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(USER_SEARCH, payload, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
setDatatable(result.data.data); |
||||
setTotalPage(result.data.totalRecord); |
||||
} else { |
||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
const handleAddUser = async () => { |
||||
await setTypeDialogUser("Save") |
||||
setOpenDialogUser(true) |
||||
} |
||||
|
||||
const closeDialogUser = () => { |
||||
setOpenDialogUser(false); |
||||
}; |
||||
|
||||
const handleSave = () => { |
||||
let data = ''; |
||||
|
||||
if (!registrationnumber && registrationnumber === "") { |
||||
alert("Please input Registration Number"); |
||||
return; |
||||
} |
||||
if (!companyName && companyName === "") { |
||||
alert("Please input the name"); |
||||
return; |
||||
} |
||||
|
||||
if (typeDialog === "Save") { |
||||
data = { |
||||
registration_no: registrationnumber, |
||||
company_name: companyName, |
||||
address: addressCompany, |
||||
phone_no: phoneNumber, |
||||
email: emailCompany, |
||||
description: description, |
||||
logo_login: logoLogin, |
||||
logo_header: logoHeader, |
||||
favicon_image: favIcon, |
||||
login_instruction: loginInstruction, |
||||
about: about, |
||||
html_title: htmlTitle, |
||||
app_name: appName, |
||||
base_url: baseUrl, |
||||
is_active: statusCompany, |
||||
template_id: template |
||||
} |
||||
console.log(data) |
||||
|
||||
closeDialog('save', data); |
||||
} else if (typeDialog === "Set") { |
||||
// if (!password && password === "") {
|
||||
// alert("Please fill password");
|
||||
// return;
|
||||
// }
|
||||
// if (password !== retryPassword) {
|
||||
// alert("Password doesn't match");
|
||||
// return;
|
||||
// }
|
||||
// if (password.length < 8) {
|
||||
// alert("Password minimum 8 character");
|
||||
// return;
|
||||
// }
|
||||
// data = {
|
||||
// id,
|
||||
// username,
|
||||
// password,
|
||||
// email,
|
||||
// }
|
||||
|
||||
closeDialog('edit', data); |
||||
} else { |
||||
|
||||
// data = {
|
||||
// id,
|
||||
// name: resourceName,
|
||||
// username,
|
||||
// employee_type: employeeType,
|
||||
// phone_number: phoneNo,
|
||||
// email,
|
||||
// gender,
|
||||
// birth_place: birthPlace,
|
||||
// blood_type: bloodType,
|
||||
// ktp_number: ktpNumber,
|
||||
// biaya_per_jam: biayaPerJam.replace('.', ''),
|
||||
// role_id: roleId,
|
||||
// divisi_id: divisionId,
|
||||
// address,
|
||||
// status_resource: statusResource,
|
||||
// status_boundary: statusRestriction,
|
||||
// company_id: company_id
|
||||
// }
|
||||
|
||||
// if (birthDate && birthDate != "") {
|
||||
// data['birth_date'] = birthDate;
|
||||
// }
|
||||
|
||||
closeDialog('edit', data); |
||||
} |
||||
} |
||||
|
||||
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 renderFromCompany = () => { |
||||
return ( |
||||
<Form> |
||||
<Row> |
||||
<Col md={12}> |
||||
<span style={{ color: "red" }}>*</span>required. |
||||
</Col> |
||||
</Row> |
||||
</Form> |
||||
) |
||||
} |
||||
|
||||
|
||||
|
||||
const RenderTable = useMemo(() => { |
||||
const columns = [ |
||||
{ title: t('nik'), dataIndex: 'ktp_number', key: 'ktp_number' }, |
||||
{ title: t('nameHR'), dataIndex: 'name', key: 'name' }, |
||||
|
||||
{ title: t('employeeType'), dataIndex: 'employee_type', key: 'employee_type' }, |
||||
{ |
||||
title: t('roles'), |
||||
dataIndex: 'join_first_name', |
||||
key: 'join_first_name', |
||||
render: (text, record) => <>{record.join_first_name}</> |
||||
}, |
||||
{ title: 'Phone No.', dataIndex: 'phone_number', key: 'phone_number' }, |
||||
{ title: 'Email', dataIndex: 'email', key: 'email' }, |
||||
{ title: 'Status', dataIndex: 'status_resource', key: 'status_status' } |
||||
// title: t('action'),
|
||||
// dataIndex: '',
|
||||
// key: 'x',
|
||||
// render: (text, record) => <>
|
||||
// <Tooltip title={t('edit')}>
|
||||
// <Button size="small" type="link" style={{ color: 'green' }} onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button>
|
||||
// </Tooltip>
|
||||
|
||||
// <Tooltip title={t('delete')}>
|
||||
// <Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
|
||||
// </Tooltip>
|
||||
// <Tooltip title="Set User">
|
||||
// <Button size="small" type="link" style={{ color: 'primary' }} onClick={() => handleSetWorker(text)}><i className="fa fa-users"></i></Button>
|
||||
// </Tooltip>
|
||||
// </>,
|
||||
// },
|
||||
|
||||
// { title: "Number Registration", dataIndex: 'registration_no', key: 'registration_no' },
|
||||
// { title: "Name", dataIndex: 'company_name', key: 'company_name' },
|
||||
// { title: 'Phone No.', dataIndex: 'phone_no', key: 'phone_no' },
|
||||
// { title: 'Email', dataIndex: 'email', key: 'email' },
|
||||
// { title: 'Status', dataIndex: 'is_active', key: 'is_active', render: (text, record) => <>{text && text !== false ? "Active" : 'Inactive'}</> }
|
||||
]; |
||||
return ( |
||||
<Table |
||||
rowKey="id" |
||||
size="small" |
||||
columns={columns} |
||||
dataSource={dataTable} |
||||
pagination={false} |
||||
/> |
||||
) |
||||
}, [dataTable]) |
||||
|
||||
return ( |
||||
<> |
||||
<DialogFormUser |
||||
openDialog={openDialogUser} |
||||
closeDialog={closeDialogUser} |
||||
typeDialog={typeDialogUser} |
||||
roleList={roleList} |
||||
/> |
||||
<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" ? "Manage Admin" : "Edit"} Company |
||||
{typeDialog === "Set" && ( |
||||
<Tooltip title={t("add")}> |
||||
<Button onClick={handleAddUser} size='sm' color="primary"><i className='fa fa-plus'></i></Button> |
||||
</Tooltip> |
||||
)} |
||||
</ModalHeader> |
||||
<ModalBody> |
||||
|
||||
{typeDialog !== "Set" && renderFromCompany()} |
||||
{typeDialog === "Set" && ( |
||||
<> |
||||
{RenderTable} |
||||
<Pagination |
||||
style={{ marginTop: "25px" }} |
||||
showSizeChanger |
||||
onShowSizeChange={onShowSizeChange} |
||||
onChange={onPagination} |
||||
pageSizeOptions={["10", "25", "50"]} |
||||
total={totalPage} |
||||
pageSize={rowsPerPage} |
||||
current={currentPage} |
||||
/> |
||||
</> |
||||
)} |
||||
|
||||
</ModalBody> |
||||
<ModalFooter> |
||||
{typeDialog !== "Set" && ( |
||||
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button> |
||||
)} |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>cancel</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
</> |
||||
) |
||||
|
||||
} |
||||
export default DialogForm; |
||||
@ -0,0 +1,258 @@
|
||||
import React, { useState, useMemo } from 'react' |
||||
import { |
||||
Modal, ModalHeader, ModalBody, ModalFooter, |
||||
Button, Form, FormGroup, Label, Input, Col, Row, Card, CardBody, Fade |
||||
} from 'reactstrap'; |
||||
import { DatePicker, Table, Tooltip, Select, Input as InputAntd } from 'antd'; |
||||
import moment from 'moment'; |
||||
import 'antd/dist/antd.css'; |
||||
import { useTranslation } from 'react-i18next'; |
||||
const { Option } = Select |
||||
const DialogFormUser = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, roleList }) => { |
||||
const { t } = useTranslation() |
||||
|
||||
const [resourceName, setResourceName] = useState('') |
||||
const [username, setUsername] = useState('') |
||||
const [password, setPassword] = useState('') |
||||
const [retryPassword, setRetryPassword] = useState('') |
||||
const [employeeType, setEmployeeType] = useState('') |
||||
const [phoneNo, setPhoneNo] = useState('') |
||||
const [email, setEmail] = useState('') |
||||
const [gender, setGender] = useState('') |
||||
const [birthDate, setBirthDate] = useState('') |
||||
const [birthPlace, setBirthPlace] = useState('') |
||||
const [ktpNumber, setKtpNumber] = useState('') |
||||
const [roleId, setRoleId] = useState('') |
||||
const [address, setAddress] = useState('') |
||||
const [statusResource, setStatusResource] = useState('active') |
||||
const [statusRestriction, setStatusRestriction] = useState(false) |
||||
|
||||
|
||||
|
||||
const handleSave = () => { |
||||
let data = ''; |
||||
|
||||
if (typeDialog === "Save") { |
||||
data = { |
||||
// registration_no: registrationnumber,
|
||||
// company_name: companyName,
|
||||
// address: addressCompany,
|
||||
// phone_no: phoneNumber,
|
||||
// email: emailCompany,
|
||||
// description: description,
|
||||
// logo_login: logoLogin,
|
||||
// logo_header: logoHeader,
|
||||
// favicon_image: favIcon,
|
||||
// login_instruction: loginInstruction,
|
||||
// about: about,
|
||||
// html_title: htmlTitle,
|
||||
// app_name: appName,
|
||||
// base_url: baseUrl,
|
||||
// is_active: statusCompany,
|
||||
// template_id: template
|
||||
} |
||||
console.log(data) |
||||
|
||||
closeDialog('save', data); |
||||
} else if (typeDialog === "Set") { |
||||
// if (!password && password === "") {
|
||||
// alert("Please fill password");
|
||||
// return;
|
||||
// }
|
||||
// if (password !== retryPassword) {
|
||||
// alert("Password doesn't match");
|
||||
// return;
|
||||
// }
|
||||
// if (password.length < 8) {
|
||||
// alert("Password minimum 8 character");
|
||||
// return;
|
||||
// }
|
||||
// data = {
|
||||
// id,
|
||||
// username,
|
||||
// password,
|
||||
// email,
|
||||
// }
|
||||
|
||||
closeDialog('edit', data); |
||||
} else { |
||||
|
||||
// data = {
|
||||
// id,
|
||||
// name: resourceName,
|
||||
// username,
|
||||
// employee_type: employeeType,
|
||||
// phone_number: phoneNo,
|
||||
// email,
|
||||
// gender,
|
||||
// birth_place: birthPlace,
|
||||
// blood_type: bloodType,
|
||||
// ktp_number: ktpNumber,
|
||||
// biaya_per_jam: biayaPerJam.replace('.', ''),
|
||||
// role_id: roleId,
|
||||
// divisi_id: divisionId,
|
||||
// address,
|
||||
// status_resource: statusResource,
|
||||
// status_boundary: statusRestriction,
|
||||
// company_id: company_id
|
||||
// }
|
||||
|
||||
// if (birthDate && birthDate != "") {
|
||||
// data['birth_date'] = birthDate;
|
||||
// }
|
||||
|
||||
closeDialog('edit', data); |
||||
} |
||||
} |
||||
|
||||
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('birthPlace')}</Label> |
||||
<Input type="text" value={birthPlace} onChange={(e) => setBirthPlace(e.target.value)} placeholder={t('inputBrithPlace')} /> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('birthDate')}</Label> |
||||
<DatePicker format={"DD-MM-YYYY"} style={{ width: "100%" }} value={birthDate} placeholder={t('inputBrithDate')} onChange={(date, dateString) => setBirthDate(date)} /> |
||||
</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> |
||||
</Row> |
||||
|
||||
<Row> |
||||
<Col md={6}> |
||||
<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> |
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('address')}</Label> |
||||
<Input type="textarea" value={address} onChange={(e) => setAddress(e.target.value)} placeholder={t('inputAddress')} /> |
||||
</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 DialogFormUser; |
||||
Loading…
Reference in new issue