132 lines
3.5 KiB
JavaScript
132 lines
3.5 KiB
JavaScript
import { UserList } from '@/services/manajemen/user-service'
|
|
import { UnitKerjaList } from '@/services/referensi/unitKerja-service'
|
|
import { VerifikatorCreate } from '@/services/referensi/verifikator-service'
|
|
import { useFormik } from 'formik'
|
|
import { Button } from 'primereact/button'
|
|
import { Dialog } from 'primereact/dialog'
|
|
import { Dropdown } from 'primereact/dropdown'
|
|
import { MultiSelect } from 'primereact/multiselect'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
export default function FormVerifikator({ dialogForm, setDialogForm, dataEdit, setDataEdit, refresh, toast }) {
|
|
const [ddVerifikator, setDdVerifikator] = useState([])
|
|
const [ddUserList, setDdUserList] = useState([])
|
|
|
|
useEffect(() => {
|
|
UnitKerjaList({ draw: 0 }).then((res) => {
|
|
setDdVerifikator(res.data)
|
|
})
|
|
UserList({ draw: 0 }).then((res) => {
|
|
setDdUserList(res.data)
|
|
})
|
|
}, [])
|
|
|
|
const formik = useFormik({
|
|
initialValues: {
|
|
unit_id: '',
|
|
user_id: dataEdit.user_id || '',
|
|
},
|
|
validate: (data) => {
|
|
let errors = {}
|
|
if (!data.unit_id) errors.unit_id = 'Kode Unit is required.'
|
|
if (!data.user_id) errors.user_id = 'Nama is required.'
|
|
return errors
|
|
},
|
|
onSubmit: (data) => {
|
|
VerifikatorCreate(data).then((res) => {
|
|
if (res.status === 'success') {
|
|
refresh(Math.random)
|
|
formik.resetForm()
|
|
setDataEdit([])
|
|
setDialogForm(false)
|
|
toast.current.show({
|
|
severity: 'success',
|
|
detail: res.message,
|
|
closable: false,
|
|
})
|
|
} else {
|
|
setDialogForm(false)
|
|
toast.current.show({
|
|
severity: 'error',
|
|
detail: res.message,
|
|
closable: false,
|
|
})
|
|
}
|
|
})
|
|
},
|
|
})
|
|
|
|
const isFieldValid = (field) => !!(formik.errors[field] && formik.touched[field])
|
|
const errorFieldMessage = (field) => {
|
|
return (
|
|
isFieldValid(field) && (
|
|
<small className='p-error' style={{ fontSize: '11px' }}>
|
|
{formik.errors[field]}
|
|
</small>
|
|
)
|
|
)
|
|
}
|
|
|
|
const dialogFooter = (
|
|
<div className='flex justify-end'>
|
|
<Button
|
|
type='submit'
|
|
label='Cancel'
|
|
className='p-button-sm p-button-secondary'
|
|
onClick={() => {
|
|
formik.resetForm()
|
|
setDialogForm(false)
|
|
}}
|
|
/>
|
|
<Button type='submit' label='Save' className='p-button-sm p-button-primary' onClick={formik.handleSubmit} />
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<>
|
|
<Dialog
|
|
header={formik.values.ref_id ? 'Update Jenis Tagihan' : 'Add Jenis Tagihan'}
|
|
className='p-dialog-form'
|
|
visible={dialogForm}
|
|
draggable={false}
|
|
resizable={false}
|
|
position={'center'}
|
|
closable={false}
|
|
style={{ width: '30vw' }}
|
|
footer={dialogFooter}
|
|
>
|
|
<form onSubmit={formik.handleSubmit}>
|
|
<div className='p-fluid grid gap-y-3'>
|
|
<div className='field col-12 md:col-12'>
|
|
<label className='block'>Nama Verifikator</label>
|
|
<Dropdown
|
|
name='user_id'
|
|
optionLabel='nama'
|
|
optionValue='user_id'
|
|
value={formik.values.user_id}
|
|
options={ddUserList}
|
|
onChange={formik.handleChange}
|
|
placeholder='Select nama verifikator'
|
|
/>
|
|
{errorFieldMessage('nama')}
|
|
</div>
|
|
<div className='field col-12 md:col-12'>
|
|
<label className='block'>Unit</label>
|
|
<MultiSelect
|
|
name='unit_id'
|
|
optionLabel='nama'
|
|
optionValue='unit_id'
|
|
value={formik.values.unit_id}
|
|
options={ddVerifikator}
|
|
onChange={formik.handleChange}
|
|
placeholder='Select unit'
|
|
/>
|
|
{errorFieldMessage('unit_id')}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</Dialog>
|
|
</>
|
|
)
|
|
}
|