135 lines
3.3 KiB
JavaScript
135 lines
3.3 KiB
JavaScript
import { AkunCreate, AkunUpdate } from '@/services/referensi/akun-service'
|
|
import { useFormik } from 'formik'
|
|
import { Button } from 'primereact/button'
|
|
import { Dialog } from 'primereact/dialog'
|
|
import { InputText } from 'primereact/inputtext'
|
|
|
|
export default function FormAkun({ dialogForm, setDialogForm, dataEdit, setDataEdit, refresh, toast }) {
|
|
const formik = useFormik({
|
|
initialValues: {
|
|
akun_id: dataEdit.akun_id || '',
|
|
nama: dataEdit.nama || '',
|
|
},
|
|
validate: (data) => {
|
|
let errors = {}
|
|
if (!data.akun_id) errors.akun_id = 'Error akun is required.'
|
|
if (!data.nama) errors.nama = 'Error name is required.'
|
|
return errors
|
|
},
|
|
onSubmit: (data) => {
|
|
if (data.akun_id) {
|
|
AkunUpdate(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,
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
AkunCreate(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.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.akun_id ? 'Update Akun' : 'Add Akun'}
|
|
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-3'>
|
|
<label className='block'>Nomor Akun</label>
|
|
<InputText
|
|
className='p-inputtext-sm'
|
|
name='akun_id'
|
|
value={formik.values.akun_id}
|
|
onChange={formik.handleChange}
|
|
placeholder='Nomor Akun'
|
|
/>
|
|
{errorFieldMessage('akun_id')}
|
|
</div>
|
|
<div className='field col-12 md:col-12 mb-0'>
|
|
<label className='block'>Nama Akun</label>
|
|
<InputText
|
|
className='p-inputtext-sm'
|
|
name='nama'
|
|
value={formik.values.nama}
|
|
onChange={formik.handleChange}
|
|
placeholder='Nama Akun'
|
|
/>
|
|
{errorFieldMessage('nama')}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</Dialog>
|
|
</>
|
|
)
|
|
}
|