e-verify/components/Form/JenisKegiatan.js

import { JenisBelanjaList } from '@/services/referensi/jenisBelanja-service'
import { JenisKegiatanCreate, JenisKegiatanUpdate } from '@/services/referensi/jenisKegiatan-service'
import { useFormik } from 'formik'
import { Button } from 'primereact/button'
import { Dialog } from 'primereact/dialog'
import { Dropdown } from 'primereact/dropdown'
import { InputText } from 'primereact/inputtext'
import { useEffect, useState } from 'react'

export default function FormJenisKegiatan({ dialogForm, setDialogForm, dataEdit, setDataEdit, refresh, toast }) {
	const [optionJenisBelanja, setOptionJenisBelanja] = useState([])

	useEffect(() => {
		JenisBelanjaList({ draw: 0 }).then((res) => setOptionJenisBelanja(res.data))
	}, [])

	const formik = useFormik({
		initialValues: {
			ref_id: dataEdit.jenis_id || '',
			nama: dataEdit.nama || '',
			jenis_belanja_id: dataEdit.jenis_belanja_id || '',
		},
		validate: (data) => {
			let errors = {}
			if (!data.nama) errors.nama = 'Nama is required.'
			if (!data.jenis_belanja_id) errors.jenis_belanja_id = 'Jenis Belanja is required.'
			return errors
		},
		onSubmit: (data) => {
			if (data.ref_id) {
				JenisKegiatanUpdate(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 {
				JenisKegiatanCreate(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.ref_id ? 'Update Jenis Kegiatan' : 'Add Jenis Kegiatan'}
				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</label>
							<InputText
								className='p-inputtext-sm'
								name='nama'
								value={formik.values.nama}
								onChange={formik.handleChange}
								placeholder='Masukkan nama jenis kegiatan'
							/>
							{errorFieldMessage('nama')}
						</div>
						<div className='field col-12 md:col-4'>
							<label className='block'>Jenis Belanja</label>
							<Dropdown
								panelClassName='p-dropdown-form'
								name='jenis_belanja_id'
								options={optionJenisBelanja}
								optionLabel='nama'
								optionValue='jenis_id'
								value={formik.values.jenis_belanja_id}
								onChange={formik.handleChange}
								showClear={formik.values.jenis_belanja_id ? true : false}
								scrollHeight='200px'
								placeholder='Select Jenis Belanja'
							/>
							{errorFieldMessage('jenis_belanja_id')}
						</div>
					</div>
				</form>
			</Dialog>
		</>
	)
}