80 lines
1.9 KiB
JavaScript
80 lines
1.9 KiB
JavaScript
import { useFormik } from 'formik'
|
|
import { Button } from 'primereact/button'
|
|
import { Dialog } from 'primereact/dialog'
|
|
import { InputText } from 'primereact/inputtext'
|
|
|
|
export default function FormVerifikasi({ dialogForm, setDialogForm, dataEdit }) {
|
|
const formik = useFormik({
|
|
initialValues: {
|
|
ref_id: dataEdit.ref_id || '',
|
|
nama: dataEdit.nama || '',
|
|
},
|
|
validate: (data) => {
|
|
let errors = {}
|
|
if (!data.nama) errors.nama = 'Nama is required.'
|
|
return errors
|
|
},
|
|
onSubmit: (data) => {
|
|
console.log(data)
|
|
},
|
|
})
|
|
|
|
const isFieldValid = (field) => !!(formik.touched[field] && formik.errors[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 Verifikasi' : 'Add Verifikasi'}
|
|
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'>
|
|
<div className='field col-12 md:col-12 mb-0'>
|
|
<label className='block'>Nama</label>
|
|
<InputText
|
|
className='p-inputtext-sm'
|
|
name='nama'
|
|
value={formik.values.nama}
|
|
onChange={formik.handleChange}
|
|
placeholder='Masukkan nama jenis tagihan'
|
|
/>
|
|
{errorFieldMessage('nama')}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</Dialog>
|
|
</>
|
|
)
|
|
}
|