|
|
|
@ -8,6 +8,7 @@ import moment from 'moment';
|
|
|
|
|
import 'antd/dist/antd.css'; |
|
|
|
|
import { formatRupiah, formatNumber } from '../../../const/CustomFunc' |
|
|
|
|
import { ROLE_SEARCH } from '../../../const/ApiConst' |
|
|
|
|
import { useTranslation } from 'react-i18next'; |
|
|
|
|
const { Option } = Select |
|
|
|
|
|
|
|
|
|
const token = window.localStorage.getItem('token'); |
|
|
|
@ -41,6 +42,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
|
|
|
|
|
const [divisionId, setDivisionId] = useState('') |
|
|
|
|
const [statusResource, setStatusResource] = useState('active') |
|
|
|
|
const [statusRestriction, setStatusRestriction] = useState(false) |
|
|
|
|
const { t } = useTranslation() |
|
|
|
|
useEffect(() => { |
|
|
|
|
if (typeDialog === "Edit" || typeDialog === "Set") { |
|
|
|
|
console.log("cel data Edit", dataEdit) |
|
|
|
@ -61,6 +63,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
|
|
|
|
|
setRoleId(dataEdit.role_id) |
|
|
|
|
setDivisionId(dataEdit.divisi_id) |
|
|
|
|
setAddress(dataEdit.address) |
|
|
|
|
setStatusRestriction(dataEdit.status_boundary) |
|
|
|
|
} else { |
|
|
|
|
setId(0) |
|
|
|
|
setResourceName('') |
|
|
|
@ -80,6 +83,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
|
|
|
|
|
setDivisionId('') |
|
|
|
|
setAddress('') |
|
|
|
|
setStatusResource('active') |
|
|
|
|
setStatusRestriction(false) |
|
|
|
|
} |
|
|
|
|
}, [dataEdit, openDialog]) |
|
|
|
|
|
|
|
|
@ -201,28 +205,28 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
|
|
|
|
|
<Form> |
|
|
|
|
<Row> |
|
|
|
|
<Col md={12}> |
|
|
|
|
<span style={{ color: "red" }}>*</span> Wajib diisi. |
|
|
|
|
<span style={{ color: "red" }}>*</span>{t('required')}. |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
<Row> |
|
|
|
|
<Col md={6}> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label className="capitalize">NIK (KTP / ID Card) <span style={{ color: "red" }}>*</span></Label> |
|
|
|
|
<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={`Input NIK (KTP)...`} maxLength="16" /> */} |
|
|
|
|
<Input type="text" value={ktpNumber} onChange={(e) => setKtpNumber(e.target.value)} placeholder={`Input NIK (KTP)...`} maxLength="16" /> |
|
|
|
|
<Input type="text" value={ktpNumber} onChange={(e) => setKtpNumber(e.target.value)} placeholder={t('inputNik')} maxLength="16" /> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col md={6}> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label className="capitalize">Resource Name <span style={{ color: "red" }}>*</span></Label> |
|
|
|
|
<Input type="text" value={resourceName} onChange={(e) => setResourceName(e.target.value)} placeholder={`Input resource name...`} /> |
|
|
|
|
<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">Employee Type <span style={{ color: "red" }}>*</span></Label> |
|
|
|
|
<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> |
|
|
|
@ -234,7 +238,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
|
|
|
|
|
<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={`Input phone number...`} maxLength="15" /> |
|
|
|
|
<Input type="text" value={phoneNo} onChange={(e) => setPhoneNo(e.target.value.replace(/[^0-9]/g, ''))} placeholder={t('inputNoPhone')} maxLength="15" /> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
@ -242,13 +246,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
|
|
|
|
|
<Col md={6}> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label className="capitalize">Email</Label> |
|
|
|
|
<Input type="text" value={email} onChange={(e) => setEmail(e.target.value)} placeholder={`Input email...`} /> |
|
|
|
|
<Input type="text" value={email} onChange={(e) => setEmail(e.target.value)} placeholder={t('inputEmail')} /> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col md={6}> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label className="capitalize">Gender</Label> |
|
|
|
|
<Select showSearch value={gender} defaultValue={gender} onChange={(val) => setGender(val)} placeholder="Select Gender" style={{ width: '100%' }}> |
|
|
|
|
<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> */} |
|
|
|
@ -259,30 +263,30 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
|
|
|
|
|
<Row> |
|
|
|
|
<Col md={6}> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label className="capitalize">Birth Place</Label> |
|
|
|
|
<Input type="text" value={birthPlace} onChange={(e) => setBirthPlace(e.target.value)} placeholder={`Input birth place...`} /> |
|
|
|
|
<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">Birth Date</Label> |
|
|
|
|
<DatePicker style={{ width: "100%" }} value={birthDate} onChange={(date, dateString) => setBirthDate(date)} /> |
|
|
|
|
<Label className="capitalize">{t('birthDate')}</Label> |
|
|
|
|
<DatePicker style={{ width: "100%" }} value={birthDate} placeholder={t('inputBrithDate')} onChange={(date, dateString) => setBirthDate(date)} /> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
<Row> |
|
|
|
|
<Col md={6}> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label className="capitalize">Role <span style={{ color: "red" }}>*</span></Label> |
|
|
|
|
<Select showSearch defaultValue={roleId} onChange={(val) => setRoleId(val)} placeholder="Select Role" style={{ width: '100%' }}> |
|
|
|
|
<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">Division <span style={{ color: "red" }}>*</span></Label> |
|
|
|
|
<Select showSearch defaultValue={divisionId} onChange={(val) => setDivisionId(val)} placeholder="Select Division" style={{ width: '100%' }}> |
|
|
|
|
<Label className="capitalize">{t('division')} <span style={{ color: "red" }}>*</span></Label> |
|
|
|
|
<Select showSearch defaultValue={divisionId} onChange={(val) => setDivisionId(val)} placeholder={t('selectDivision')} style={{ width: '100%' }}> |
|
|
|
|
{setupSelectDivisi()} |
|
|
|
|
</Select> |
|
|
|
|
</FormGroup> |
|
|
|
@ -291,14 +295,14 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
|
|
|
|
|
|
|
|
|
|
<Row> |
|
|
|
|
<Col md={6}> |
|
|
|
|
<Label className="capitalize">Status Resource</Label> |
|
|
|
|
<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}> |
|
|
|
|
<Label className="capitalize">Pembatasan wilayah kerja</Label> |
|
|
|
|
<Label className="capitalize">{t('restrictions')}</Label> |
|
|
|
|
<Select style={{ width: "100%" }} defaultValue={statusRestriction} onChange={(e) => setStatusRestriction(e)}> |
|
|
|
|
<Option value={true}>Ya</Option> |
|
|
|
|
<Option value={false}>Tidak</Option> |
|
|
|
@ -306,8 +310,8 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
|
|
|
|
|
</Col> |
|
|
|
|
<Col md={6}> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label className="capitalize">Address</Label> |
|
|
|
|
<Input type="textarea" value={address} onChange={(e) => setAddress(e.target.value)} placeholder="Input address..." /> |
|
|
|
|
<Label className="capitalize">{t('address')}</Label> |
|
|
|
|
<Input type="textarea" value={address} onChange={(e) => setAddress(e.target.value)} placeholder={t('inputAddress')} /> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
|
|
|
|
@ -342,7 +346,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
|
|
|
|
|
</Col> |
|
|
|
|
<Col md={6}> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label className="capitalize">Retry Password</Label> |
|
|
|
|
<Label className="capitalize">{t('retryPassword')}</Label> |
|
|
|
|
<Input type="password" value={retryPassword} onChange={(e) => setRetryPassword(e.target.value)} placeholder={`Retry password...`} /> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
@ -357,13 +361,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
|
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
|
|
|
|
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} Human Resource</ModalHeader> |
|
|
|
|
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} {t('hr')}</ModalHeader> |
|
|
|
|
<ModalBody> |
|
|
|
|
{typeDialog !== "Set" ? renderForm() : renderForm2()} |
|
|
|
|
</ModalBody> |
|
|
|
|
<ModalFooter> |
|
|
|
|
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
|
|
|
|
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
|
|
|
|
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button> |
|
|
|
|
</ModalFooter> |
|
|
|
|
</Modal> |
|
|
|
|
</> |
|
|
|
|