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