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