150 lines
4.1 KiB
JavaScript
150 lines
4.1 KiB
JavaScript
import { JamKerjaCreate } from '@/services/manajemen/jam-kerja-service'
|
|
import { Formik } from 'formik'
|
|
import moment from 'moment'
|
|
import { Button } from 'primereact/button'
|
|
import { Calendar } from 'primereact/calendar'
|
|
import { Dialog } from 'primereact/dialog'
|
|
import { MultiSelect } from 'primereact/multiselect'
|
|
|
|
const dbHari = [
|
|
{ name: 'Senin', code: 'senin' },
|
|
{ name: 'Selasa', code: 'selasa' },
|
|
{ name: 'Rabu', code: 'rabu' },
|
|
{ name: 'Kamis', code: 'kamis' },
|
|
{ name: 'Jumat', code: 'jumat' },
|
|
{ name: 'Sabtu', code: 'sabtu' },
|
|
{ name: 'Minggu', code: 'minggu' },
|
|
]
|
|
|
|
export default function FormJamKerja({ dialogForm, setDialogForm, dataEdit, toast, refresh }) {
|
|
return (
|
|
<>
|
|
<Formik
|
|
initialValues={{
|
|
user_id: dataEdit.user_id || '',
|
|
hari: dataEdit.hari || null,
|
|
jam_masuk: dataEdit.jam_masuk || null,
|
|
jam_keluar: dataEdit.jam_keluar || null,
|
|
}}
|
|
onSubmit={(data, { setSubmitting }) => {
|
|
Object.assign(data, {
|
|
jam_masuk: moment(data.jam_masuk).format('HH:mm'),
|
|
jam_keluar: moment(data.jam_keluar).format('HH:mm'),
|
|
})
|
|
let time = data.jam_masuk + '-' + data.jam_keluar
|
|
let days = ''
|
|
let panjang_array = data.hari.length
|
|
data.hari.map((values, i) => {
|
|
let plus1 = i + 1
|
|
let koma = plus1 < panjang_array ? ',' : ''
|
|
days += values.code + koma
|
|
})
|
|
|
|
let dataKirim = { days, time }
|
|
JamKerjaCreate(dataKirim).then((res) => {
|
|
if (res.status === 'success') {
|
|
setDialogForm(false)
|
|
refresh(Math.random)
|
|
toast.current.show({
|
|
severity: 'success',
|
|
detail: res.message,
|
|
closable: false,
|
|
})
|
|
} else {
|
|
setDialogForm(false)
|
|
refresh(Math.random)
|
|
toast.current.show({
|
|
severity: 'error',
|
|
detail: res.message,
|
|
closable: false,
|
|
})
|
|
}
|
|
})
|
|
setSubmitting(false)
|
|
}}
|
|
validateOnChange={false}
|
|
>
|
|
{({ values, handleChange, handleSubmit, isSubmitting, resetForm }) => {
|
|
const dialogFooter = (
|
|
<div className='flex justify-end'>
|
|
<Button
|
|
type='submit'
|
|
label='Cancel'
|
|
className='p-button-sm p-button-secondary'
|
|
onClick={() => {
|
|
resetForm()
|
|
setDialogForm(false)
|
|
}}
|
|
/>
|
|
<Button
|
|
type='submit'
|
|
label='Save'
|
|
className='p-button-sm p-button-primary'
|
|
onClick={handleSubmit}
|
|
loading={isSubmitting}
|
|
/>
|
|
</div>
|
|
)
|
|
return (
|
|
<Dialog
|
|
header={values.user_id ? 'Update Jam Kerja' : 'Add Jam Kerja'}
|
|
className='p-dialog-form'
|
|
visible={dialogForm}
|
|
draggable={false}
|
|
resizable={false}
|
|
position={'center'}
|
|
closable={false}
|
|
style={{ width: '30vw' }}
|
|
footer={dialogFooter}
|
|
>
|
|
<form onSubmit={handleSubmit}>
|
|
<div className='p-fluid grid'>
|
|
<div className='field col-12 md:col-12 mb-2'>
|
|
<label className='block'>Pilih Hari</label>
|
|
<MultiSelect
|
|
id='hari'
|
|
value={values.hari}
|
|
onChange={handleChange}
|
|
options={dbHari}
|
|
optionLabel='name'
|
|
placeholder='Select Hari'
|
|
maxSelectedLabels={3}
|
|
className='w-full md:w-20rem'
|
|
/>
|
|
</div>
|
|
<div className='grid grid-cols-2 gap-3'>
|
|
<div className='mb-2'>
|
|
<label className='block'>Jam Masuk</label>
|
|
<Calendar
|
|
id='jam_masuk'
|
|
value={values.jam_masuk}
|
|
onChange={handleChange}
|
|
placeholder='Masukkan Jam Masuk'
|
|
timeOnly
|
|
hourFormat='24'
|
|
/>
|
|
</div>
|
|
<div className='mb-2'>
|
|
<label className='block'>Jam Keluar</label>
|
|
<Calendar
|
|
id='jam_keluar'
|
|
value={values.jam_keluar}
|
|
onChange={handleChange}
|
|
placeholder='Masukkan Jam Keluar'
|
|
timeOnly
|
|
hourFormat='24'
|
|
minDate={values.jam_masuk}
|
|
disabled={values.jam_masuk ? false : true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</Dialog>
|
|
)
|
|
}}
|
|
</Formik>
|
|
</>
|
|
)
|
|
}
|