mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
feat(FE-114,136): implement RecordingForm component with data handling and validation
This commit is contained in:
rstubryan
@@ -0,0 +1,873 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { FormikProps, useFormik } from 'formik';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { toast } from 'react-hot-toast';
|
||||
import Button from '@/components/Button';
|
||||
import TextInput from '@/components/input/TextInput';
|
||||
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
import { FormHeader } from '@/components/helper/form/FormHeader';
|
||||
import { FormActions } from '@/components/helper/form/FormActions';
|
||||
import { CreateRecordingPayload, Recording } from '@/types/api/flock/recording';
|
||||
import {
|
||||
RecordingFormSchema,
|
||||
RecordingFormValues,
|
||||
getRecordingFormInitialValues,
|
||||
UpdateRecordingFormSchema,
|
||||
} from './RecordingForm.schema';
|
||||
import { useRecordingFormHandlers } from './useRecordingFormHandlers';
|
||||
import { FlockApi } from '@/services/api/flock';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
|
||||
import useSWR from 'swr';
|
||||
|
||||
interface RecordingFormProps {
|
||||
type?: 'add' | 'edit' | 'detail';
|
||||
initialValues?: Recording;
|
||||
}
|
||||
|
||||
const DUMMY_FLOCKS = [
|
||||
{ value: 1, label: 'Flock A' },
|
||||
{ value: 2, label: 'Flock B' },
|
||||
{ value: 3, label: 'Flock C' },
|
||||
{ value: 4, label: 'Flock D' },
|
||||
];
|
||||
|
||||
const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
const [flockSelectInputValue, setFlockSelectInputValue] = useState('');
|
||||
const [selectedPakan, setSelectedPakan] = useState<number[]>([]);
|
||||
const [selectedBobot, setSelectedBobot] = useState<number[]>([]);
|
||||
const [selectedVaksin, setSelectedVaksin] = useState<number[]>([]);
|
||||
const [selectedMortal, setSelectedMortal] = useState<number[]>([]);
|
||||
const [, setRecordingFormErrorMessage] = useState('');
|
||||
const {
|
||||
deleteModal,
|
||||
recordingFormErrorMessage,
|
||||
isDeleteLoading,
|
||||
createRecordingHandler,
|
||||
updateRecordingHandler,
|
||||
deleteRecordingClickHandler,
|
||||
confirmationModalDeleteClickHandler,
|
||||
} = useRecordingFormHandlers(initialValues?.id);
|
||||
|
||||
const formikInitialValues = useMemo<RecordingFormValues>(
|
||||
() => getRecordingFormInitialValues(initialValues),
|
||||
[initialValues]
|
||||
);
|
||||
|
||||
const formik = useFormik<RecordingFormValues>({
|
||||
initialValues: formikInitialValues,
|
||||
validationSchema:
|
||||
type === 'edit' ? UpdateRecordingFormSchema : RecordingFormSchema,
|
||||
validateOnChange: true,
|
||||
validateOnBlur: true,
|
||||
onSubmit: async (values) => {
|
||||
setRecordingFormErrorMessage('');
|
||||
const payload: CreateRecordingPayload = {
|
||||
flock_id: values.flock_id,
|
||||
data_pakan: (values.data_pakan ?? []).map((p) => ({
|
||||
nama_pakan: p.nama_pakan,
|
||||
qty_pakan: p.qty_pakan,
|
||||
stock_pakan: p.stock_pakan,
|
||||
})),
|
||||
bobot_badan: (values.bobot_badan ?? []).map((b) => ({
|
||||
berat_ayam: b.berat_ayam,
|
||||
jumlah_ayam: b.jumlah_ayam,
|
||||
rata_rata_berat_ayam: b.rata_rata_berat_ayam,
|
||||
})),
|
||||
vaksinasi: (values.vaksinasi ?? []).map((v) => ({
|
||||
nama_vaksin: v.nama_vaksin,
|
||||
total_stock: v.total_stock,
|
||||
jumlah_stock: v.jumlah_stock,
|
||||
})),
|
||||
mortalitas: (values.mortalitas ?? []).map((m) => ({
|
||||
kondisi: m.kondisi,
|
||||
jumlah: m.jumlah,
|
||||
})),
|
||||
};
|
||||
|
||||
switch (type) {
|
||||
case 'add':
|
||||
await createRecordingHandler(payload);
|
||||
break;
|
||||
case 'edit':
|
||||
await updateRecordingHandler(initialValues?.id as number, payload);
|
||||
break;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// // Flock selection
|
||||
// const flocksUrl = `${FlockApi.basePath}?${new URLSearchParams({ search: flockSelectInputValue }).toString()}`;
|
||||
// const { data: flocks, isLoading: isLoadingFlocks } = useSWR(
|
||||
// flocksUrl,
|
||||
// FlockApi.getAllFetcher
|
||||
// );
|
||||
// const flockOptions = isResponseSuccess(flocks)
|
||||
// ? flocks?.data.map((f) => ({ value: f.id, label: f.name }))
|
||||
// : [];
|
||||
|
||||
const flockOptions = DUMMY_FLOCKS;
|
||||
|
||||
const addDataPakan = () => {
|
||||
const newDataPakan = [
|
||||
...(formik.values.data_pakan || []),
|
||||
{
|
||||
nama_pakan: '',
|
||||
qty_pakan: 0,
|
||||
stock_pakan: 0,
|
||||
},
|
||||
];
|
||||
formik.setFieldValue('data_pakan', newDataPakan);
|
||||
};
|
||||
|
||||
const removeDataPakan = (idx: number) => {
|
||||
const updatedDataPakan = formik.values.data_pakan?.filter(
|
||||
(_, i) => i !== idx
|
||||
);
|
||||
formik.setFieldValue('data_pakan', updatedDataPakan);
|
||||
};
|
||||
|
||||
const removeSelectedDataPakan = () => {
|
||||
const updatedDataPakan = formik.values.data_pakan?.filter(
|
||||
(_, idx) => !selectedPakan.includes(idx)
|
||||
);
|
||||
formik.setFieldValue('data_pakan', updatedDataPakan);
|
||||
setSelectedPakan([]);
|
||||
};
|
||||
|
||||
const addBobotBadan = () => {
|
||||
const newBobotBadan = [
|
||||
...(formik.values.bobot_badan || []),
|
||||
{
|
||||
berat_ayam: 0,
|
||||
jumlah_ayam: 0,
|
||||
rata_rata_berat_ayam: 0,
|
||||
},
|
||||
];
|
||||
formik.setFieldValue('bobot_badan', newBobotBadan);
|
||||
};
|
||||
|
||||
const removeBobotBadan = (idx: number) => {
|
||||
const updatedBobotBadan = formik.values.bobot_badan?.filter(
|
||||
(_, i) => i !== idx
|
||||
);
|
||||
formik.setFieldValue('bobot_badan', updatedBobotBadan);
|
||||
};
|
||||
|
||||
const removeSelectedBobotBadan = () => {
|
||||
const updatedBobotBadan = formik.values.bobot_badan?.filter(
|
||||
(_, idx) => !selectedBobot.includes(idx)
|
||||
);
|
||||
formik.setFieldValue('bobot_badan', updatedBobotBadan);
|
||||
setSelectedBobot([]);
|
||||
};
|
||||
|
||||
const addVaksinasi = () => {
|
||||
const newVaksinasi = [
|
||||
...(formik.values.vaksinasi || []),
|
||||
{
|
||||
nama_vaksin: '',
|
||||
total_stock: 0,
|
||||
jumlah_stock: 0,
|
||||
},
|
||||
];
|
||||
formik.setFieldValue('vaksinasi', newVaksinasi);
|
||||
};
|
||||
|
||||
const removeVaksinasi = (idx: number) => {
|
||||
const updatedVaksinasi = formik.values.vaksinasi?.filter(
|
||||
(_, i) => i !== idx
|
||||
);
|
||||
formik.setFieldValue('vaksinasi', updatedVaksinasi);
|
||||
};
|
||||
|
||||
const removeSelectedVaksinasi = () => {
|
||||
const updatedVaksinasi = formik.values.vaksinasi?.filter(
|
||||
(_, idx) => !selectedVaksin.includes(idx)
|
||||
);
|
||||
formik.setFieldValue('vaksinasi', updatedVaksinasi);
|
||||
setSelectedVaksin([]);
|
||||
};
|
||||
|
||||
const addMortalitas = () => {
|
||||
const newMortalitas = [
|
||||
...(formik.values.mortalitas || []),
|
||||
{
|
||||
kondisi: RECORDING_FLAG_OPTIONS[0].value,
|
||||
jumlah: 0,
|
||||
},
|
||||
];
|
||||
formik.setFieldValue('mortalitas', newMortalitas);
|
||||
};
|
||||
|
||||
const removeMortalitas = (idx: number) => {
|
||||
const updatedMortalitas = formik.values.mortalitas?.filter(
|
||||
(_, i) => i !== idx
|
||||
);
|
||||
formik.setFieldValue('mortalitas', updatedMortalitas);
|
||||
};
|
||||
|
||||
const removeSelectedMortalitas = () => {
|
||||
const updatedMortalitas = formik.values.mortalitas?.filter(
|
||||
(_, idx) => !selectedMortal.includes(idx)
|
||||
);
|
||||
formik.setFieldValue('mortalitas', updatedMortalitas);
|
||||
setSelectedMortal([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className='w-full max-w-5xl'>
|
||||
<FormHeader type={type} title='Recording' backUrl='/flock/recording' />
|
||||
<form
|
||||
onSubmit={formik.handleSubmit}
|
||||
className='w-full mt-8 flex flex-col gap-6'
|
||||
>
|
||||
{/* Basic Info Card */}
|
||||
<div className='card bg-base-100 shadow mb-4'>
|
||||
<div className='card-body'>
|
||||
<div className='flex gap-4'>
|
||||
<SelectInput
|
||||
required
|
||||
label='Flock'
|
||||
value={formik.values.flock ?? undefined}
|
||||
onChange={(val) => {
|
||||
formik.setFieldValue('flock', val);
|
||||
formik.setFieldValue(
|
||||
'flock_id',
|
||||
(val as OptionType)?.value
|
||||
);
|
||||
}}
|
||||
options={flockOptions}
|
||||
onInputChange={(val) => {
|
||||
// Filter options locally instead of API call
|
||||
return val;
|
||||
}}
|
||||
isLoading={false} // Remove isLoadingFlocks
|
||||
isError={
|
||||
formik.touched.flock_id && Boolean(formik.errors.flock_id)
|
||||
}
|
||||
errorMessage={formik.errors.flock_id as string}
|
||||
isDisabled={type === 'detail'}
|
||||
isClearable
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Data Pakan Table */}
|
||||
<div className='card bg-base-100 shadow mb-4'>
|
||||
<div className='card-body'>
|
||||
<h2 className='card-title mb-4'>Data Pakan</h2>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='table'>
|
||||
<thead>
|
||||
<tr>
|
||||
{type !== 'detail' && (
|
||||
<th>
|
||||
<input
|
||||
type='checkbox'
|
||||
className='checkbox'
|
||||
checked={
|
||||
formik.values.data_pakan?.length ===
|
||||
selectedPakan.length &&
|
||||
formik.values.data_pakan?.length > 0
|
||||
}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedPakan(
|
||||
formik.values.data_pakan?.map(
|
||||
(_, idx) => idx
|
||||
) ?? []
|
||||
);
|
||||
} else {
|
||||
setSelectedPakan([]);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</th>
|
||||
)}
|
||||
<th>Nama Pakan</th>
|
||||
<th>Qty Pakan</th>
|
||||
<th>Stock Pakan</th>
|
||||
{type !== 'detail' && <th>Aksi</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{formik.values.data_pakan?.map((pakan, idx) => (
|
||||
<tr key={`pakan-${idx}`}>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<input
|
||||
type='checkbox'
|
||||
className='checkbox'
|
||||
checked={selectedPakan.includes(idx)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedPakan([...selectedPakan, idx]);
|
||||
} else {
|
||||
setSelectedPakan(
|
||||
selectedPakan.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
<TextInput
|
||||
required
|
||||
name={`data_pakan.${idx}.nama_pakan`}
|
||||
value={pakan.nama_pakan}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
readOnly={type === 'detail'}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
required
|
||||
type='number'
|
||||
name={`data_pakan.${idx}.qty_pakan`}
|
||||
value={pakan.qty_pakan}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
readOnly={type === 'detail'}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
required
|
||||
type='number'
|
||||
name={`data_pakan.${idx}.stock_pakan`}
|
||||
value={pakan.stock_pakan}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
readOnly={type === 'detail'}
|
||||
/>
|
||||
</td>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeDataPakan(idx)}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{type !== 'detail' && (
|
||||
<div className='flex justify-center items-center mt-4 gap-4'>
|
||||
{selectedPakan.length > 0 && (
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={removeSelectedDataPakan}
|
||||
disabled={selectedPakan.length === 0}
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
Hapus Data Pakan Terpilih ({selectedPakan.length})
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type='button'
|
||||
color='success'
|
||||
onClick={addDataPakan}
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah Data Pakan
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bobot Badan Table */}
|
||||
<div className='card bg-base-100 shadow mb-4'>
|
||||
<div className='card-body'>
|
||||
<h2 className='card-title mb-4'>Bobot Badan</h2>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='table'>
|
||||
<thead>
|
||||
<tr>
|
||||
{type !== 'detail' && (
|
||||
<th>
|
||||
<input
|
||||
type='checkbox'
|
||||
className='checkbox'
|
||||
checked={
|
||||
formik.values.bobot_badan?.length ===
|
||||
selectedBobot.length &&
|
||||
formik.values.bobot_badan?.length > 0
|
||||
}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedBobot(
|
||||
formik.values.bobot_badan?.map(
|
||||
(_, idx) => idx
|
||||
) ?? []
|
||||
);
|
||||
} else {
|
||||
setSelectedBobot([]);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</th>
|
||||
)}
|
||||
<th>Berat Ayam</th>
|
||||
<th>Jumlah Ayam</th>
|
||||
<th>Rata-rata Berat Ayam</th>
|
||||
{type !== 'detail' && <th>Aksi</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{formik.values.bobot_badan?.map((bobot, idx) => (
|
||||
<tr key={`bobot-${idx}`}>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<input
|
||||
type='checkbox'
|
||||
className='checkbox'
|
||||
checked={selectedBobot.includes(idx)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedBobot([...selectedBobot, idx]);
|
||||
} else {
|
||||
setSelectedBobot(
|
||||
selectedBobot.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
<TextInput
|
||||
required
|
||||
type='number'
|
||||
name={`bobot_badan.${idx}.berat_ayam`}
|
||||
value={bobot.berat_ayam}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
readOnly={type === 'detail'}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
required
|
||||
type='number'
|
||||
name={`bobot_badan.${idx}.jumlah_ayam`}
|
||||
value={bobot.jumlah_ayam}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
readOnly={type === 'detail'}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
required
|
||||
type='number'
|
||||
name={`bobot_badan.${idx}.rata_rata_berat_ayam`}
|
||||
value={bobot.rata_rata_berat_ayam}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
readOnly={type === 'detail'}
|
||||
/>
|
||||
</td>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeBobotBadan(idx)}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{type !== 'detail' && (
|
||||
<div className='flex justify-center items-center mt-4 gap-4'>
|
||||
{selectedBobot.length > 0 && (
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={removeSelectedBobotBadan}
|
||||
disabled={selectedBobot.length === 0}
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
Hapus Bobot Badan Terpilih ({selectedBobot.length})
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type='button'
|
||||
color='success'
|
||||
onClick={addBobotBadan}
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah Data Bobot Badan
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vaksinasi Table */}
|
||||
<div className='card bg-base-100 shadow mb-4'>
|
||||
<div className='card-body'>
|
||||
<h2 className='card-title mb-4'>Vaksinasi</h2>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='table'>
|
||||
<thead>
|
||||
<tr>
|
||||
{type !== 'detail' && (
|
||||
<th>
|
||||
<input
|
||||
type='checkbox'
|
||||
className='checkbox'
|
||||
checked={
|
||||
formik.values.vaksinasi?.length ===
|
||||
selectedVaksin.length &&
|
||||
formik.values.vaksinasi?.length > 0
|
||||
}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedVaksin(
|
||||
formik.values.vaksinasi?.map(
|
||||
(_, idx) => idx
|
||||
) ?? []
|
||||
);
|
||||
} else {
|
||||
setSelectedVaksin([]);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</th>
|
||||
)}
|
||||
<th>Nama Vaksin</th>
|
||||
<th>Total Stock</th>
|
||||
<th>Jumlah Stock</th>
|
||||
{type !== 'detail' && <th>Aksi</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{formik.values.vaksinasi?.map((vaksin, idx) => (
|
||||
<tr key={`vaksin-${idx}`}>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<input
|
||||
type='checkbox'
|
||||
className='checkbox'
|
||||
checked={selectedVaksin.includes(idx)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedVaksin([...selectedVaksin, idx]);
|
||||
} else {
|
||||
setSelectedVaksin(
|
||||
selectedVaksin.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
<TextInput
|
||||
required
|
||||
name={`vaksinasi.${idx}.nama_vaksin`}
|
||||
value={vaksin.nama_vaksin}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
readOnly={type === 'detail'}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
required
|
||||
type='number'
|
||||
name={`vaksinasi.${idx}.total_stock`}
|
||||
value={vaksin.total_stock}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
readOnly={type === 'detail'}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
required
|
||||
type='number'
|
||||
name={`vaksinasi.${idx}.jumlah_stock`}
|
||||
value={vaksin.jumlah_stock}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
readOnly={type === 'detail'}
|
||||
/>
|
||||
</td>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeVaksinasi(idx)}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{type !== 'detail' && (
|
||||
<div className='flex justify-center items-center mt-4 gap-4'>
|
||||
{selectedVaksin.length > 0 && (
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={removeSelectedVaksinasi}
|
||||
disabled={selectedVaksin.length === 0}
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
Hapus Vaksinasi Terpilih ({selectedVaksin.length})
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type='button'
|
||||
color='success'
|
||||
onClick={addVaksinasi}
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah Data Vaksinasi
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mortalitas Table */}
|
||||
<div className='card bg-base-100 shadow mb-4'>
|
||||
<div className='card-body'>
|
||||
<h2 className='card-title mb-4'>Mortalitas</h2>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='table'>
|
||||
<thead>
|
||||
<tr>
|
||||
{type !== 'detail' && (
|
||||
<th>
|
||||
<input
|
||||
type='checkbox'
|
||||
className='checkbox'
|
||||
checked={
|
||||
formik.values.mortalitas?.length ===
|
||||
selectedMortal.length &&
|
||||
formik.values.mortalitas?.length > 0
|
||||
}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedMortal(
|
||||
formik.values.mortalitas?.map(
|
||||
(_, idx) => idx
|
||||
) ?? []
|
||||
);
|
||||
} else {
|
||||
setSelectedMortal([]);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</th>
|
||||
)}
|
||||
<th>Kondisi</th>
|
||||
<th>Jumlah</th>
|
||||
{type !== 'detail' && <th>Aksi</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{formik.values.mortalitas?.map((mortal, idx) => (
|
||||
<tr key={`mortal-${idx}`}>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<input
|
||||
type='checkbox'
|
||||
className='checkbox'
|
||||
checked={selectedMortal.includes(idx)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedMortal([...selectedMortal, idx]);
|
||||
} else {
|
||||
setSelectedMortal(
|
||||
selectedMortal.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
<SelectInput
|
||||
required
|
||||
value={RECORDING_FLAG_OPTIONS.find(
|
||||
(opt) => opt.value === mortal.kondisi
|
||||
)}
|
||||
onChange={(val) => {
|
||||
formik.setFieldValue(
|
||||
`mortalitas.${idx}.kondisi`,
|
||||
(val as OptionType)?.value
|
||||
);
|
||||
}}
|
||||
options={RECORDING_FLAG_OPTIONS}
|
||||
isDisabled={type === 'detail'}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
required
|
||||
type='number'
|
||||
name={`mortalitas.${idx}.jumlah`}
|
||||
value={mortal.jumlah}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
readOnly={type === 'detail'}
|
||||
/>
|
||||
</td>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeMortalitas(idx)}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{type !== 'detail' && (
|
||||
<div className='flex justify-center items-center mt-4 gap-4'>
|
||||
{selectedMortal.length > 0 && (
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={removeSelectedMortalitas}
|
||||
disabled={selectedMortal.length === 0}
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
Hapus Mortalitas Terpilih ({selectedMortal.length})
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type='button'
|
||||
color='success'
|
||||
onClick={addMortalitas}
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah Data Mortalitas
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action buttons */}
|
||||
<FormActions<RecordingFormValues>
|
||||
type={type}
|
||||
formik={formik}
|
||||
editUrl={
|
||||
initialValues
|
||||
? `/flock/recording/detail/edit/?recordingId=${initialValues.id}`
|
||||
: undefined
|
||||
}
|
||||
onDelete={deleteRecordingClickHandler}
|
||||
/>
|
||||
|
||||
{recordingFormErrorMessage && (
|
||||
<div role='alert' className='alert alert-error'>
|
||||
<Icon
|
||||
icon='material-symbols:error-outline'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<span>{recordingFormErrorMessage}</span>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</section>
|
||||
|
||||
{type !== 'add' && (
|
||||
<ConfirmationModal
|
||||
ref={deleteModal.ref}
|
||||
type='error'
|
||||
text='Apakah anda yakin ingin menghapus data Recording ini?'
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: 'error',
|
||||
isLoading: isDeleteLoading,
|
||||
onClick: confirmationModalDeleteClickHandler,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default RecordingForm;
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { toast } from 'react-hot-toast';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import { RecordingApi } from '@/services/api/flock';
|
||||
import {
|
||||
CreateRecordingPayload,
|
||||
UpdateRecordingPayload,
|
||||
} from '@/types/api/flock/recording';
|
||||
import { isResponseError } from '@/lib/api-helper';
|
||||
|
||||
export const useRecordingFormHandlers = (initialValuesId?: number) => {
|
||||
const router = useRouter();
|
||||
const deleteModal = useModal();
|
||||
const [recordingFormErrorMessage, setRecordingFormErrorMessage] =
|
||||
useState('');
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
|
||||
const createRecordingHandler = useCallback(
|
||||
async (payload: CreateRecordingPayload) => {
|
||||
const res = await RecordingApi.create(payload);
|
||||
if (isResponseError(res)) {
|
||||
setRecordingFormErrorMessage(res.message);
|
||||
return;
|
||||
}
|
||||
toast.success(res?.message as string);
|
||||
router.push('/flock/recording');
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
const updateRecordingHandler = useCallback(
|
||||
async (recordingId: number, payload: UpdateRecordingPayload) => {
|
||||
const res = await RecordingApi.update(recordingId, payload);
|
||||
if (res?.status === 'error') {
|
||||
setRecordingFormErrorMessage(res.message);
|
||||
return;
|
||||
}
|
||||
toast.success(res?.message as string);
|
||||
router.refresh();
|
||||
router.push('/flock/recording');
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
const deleteRecordingClickHandler = useCallback(() => {
|
||||
deleteModal.openModal();
|
||||
}, [deleteModal]);
|
||||
|
||||
const confirmationModalDeleteClickHandler = useCallback(async () => {
|
||||
if (!initialValuesId) return;
|
||||
|
||||
setIsDeleteLoading(true);
|
||||
await RecordingApi.delete(initialValuesId);
|
||||
deleteModal.closeModal();
|
||||
toast.success('Successfully delete Recording!');
|
||||
setIsDeleteLoading(false);
|
||||
router.push('/flock/recording');
|
||||
}, [deleteModal, initialValuesId, router]);
|
||||
|
||||
return {
|
||||
deleteModal,
|
||||
recordingFormErrorMessage,
|
||||
isDeleteLoading,
|
||||
createRecordingHandler,
|
||||
updateRecordingHandler,
|
||||
deleteRecordingClickHandler,
|
||||
confirmationModalDeleteClickHandler,
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user