farhan048
1 year ago
2 changed files with 0 additions and 259 deletions
@ -1,258 +0,0 @@
|
||||
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