feat(FE-170,175): extend GradingForm to support additional grading data and improve form initialization

This commit is contained in:
rstubryan
2025-11-07 14:56:03 +07:00
parent 2e35462300
commit 80fcabde7e
5 changed files with 99 additions and 52 deletions
@@ -640,6 +640,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
RecordingGrowingFormValues | RecordingLayingFormValues
>({
initialValues: formikInitialValues,
enableReinitialize: true,
validationSchema: (() => {
if (isLayingCategory) {
return type === 'edit'
@@ -915,14 +916,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
return;
}
formik.setFieldValue('project_flock_kandang_id', projectFlockKandangId);
if (formik.values.project_flock_kandang_id !== projectFlockKandangId) {
formik.setFieldValue('project_flock_kandang_id', projectFlockKandangId);
formik.setFieldValue('project_flock_kandang', {
value: projectFlockKandangId,
label: projectFlockKandangLookup
? `${projectFlockKandangLookup.project_flock.flock_name} - ${projectFlockKandangLookup.kandang.name}`
: `${selectedProjectFlock?.label || ''} - ${selectedKandang?.label || ''}`,
});
formik.setFieldValue('project_flock_kandang', {
value: projectFlockKandangId,
label: projectFlockKandangLookup
? `${projectFlockKandangLookup.project_flock.flock_name} - ${projectFlockKandangLookup.kandang.name}`
: `${selectedProjectFlock?.label || ''} - ${selectedKandang?.label || ''}`,
});
}
}
}, [
projectFlockKandangLookup,
@@ -930,6 +933,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
selectedKandang,
type,
recordedProjectFlockKandangIds,
formik.values.project_flock_kandang_id,
]);
useEffect(() => {
@@ -959,19 +963,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
};
setSelectedKandang(kandangOption);
formik.setFieldValue(
'project_flock_kandang_id',
if (
formik.values.project_flock_kandang_id !==
projectFlockKandangDetail.id
);
formik.setFieldValue('project_flock_kandang', {
value: projectFlockKandangDetail.id,
label: `${projectFlock.flock_name} - ${kandang.name}`,
});
) {
formik.setFieldValue(
'project_flock_kandang_id',
projectFlockKandangDetail.id
);
formik.setFieldValue('project_flock_kandang', {
value: projectFlockKandangDetail.id,
label: `${projectFlock.flock_name} - ${kandang.name}`,
});
}
}
}
}
}
}, [projectFlockKandangDetail, type, projectFlockOptions]);
}, [
projectFlockKandangDetail,
type,
projectFlockOptions,
formik.values.project_flock_kandang_id,
]);
const approveHandler = async () => {
setIsApproveLoading(true);
@@ -1345,31 +1359,41 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
Kembali
</Button>
{type === 'detail' && !isRecordingApproved(initialValues) && (!isLayingCategory || hasGradingData(initialValues)) && (
<div className='flex flex-row gap-2'>
<Button
variant='outline'
color='success'
onClick={() => approveModal.openModal()}
isLoading={isApproveLoading}
className='w-full sm:w-fit'
>
<Icon icon='material-symbols:check' width={24} height={24} />
Approve
</Button>
{type === 'detail' &&
!isRecordingApproved(initialValues) &&
(!isLayingCategory || hasGradingData(initialValues)) && (
<div className='flex flex-row gap-2'>
<Button
variant='outline'
color='success'
onClick={() => approveModal.openModal()}
isLoading={isApproveLoading}
className='w-full sm:w-fit'
>
<Icon
icon='material-symbols:check'
width={24}
height={24}
/>
Approve
</Button>
<Button
variant='outline'
color='error'
onClick={() => rejectModal.openModal()}
isLoading={isRejectLoading}
className='w-full sm:w-fit'
>
<Icon icon='material-symbols:close' width={24} height={24} />
Reject
</Button>
</div>
)}
<Button
variant='outline'
color='error'
onClick={() => rejectModal.openModal()}
isLoading={isRejectLoading}
className='w-full sm:w-fit'
>
<Icon
icon='material-symbols:close'
width={24}
height={24}
/>
Reject
</Button>
</div>
)}
</div>
<h1 className='text-2xl font-bold text-center'>
@@ -2681,7 +2705,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
{/* Approve Confirmation Modal */}
{(type as 'add' | 'edit' | 'detail') === 'detail' &&
!isRecordingApproved(initialValues) && (!isLayingCategory || hasGradingData(initialValues)) && (
!isRecordingApproved(initialValues) &&
(!isLayingCategory || hasGradingData(initialValues)) && (
<ConfirmationModal
ref={approveModal.ref}
type='success'
@@ -2700,7 +2725,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
{/* Reject Confirmation Modal */}
{(type as 'add' | 'edit' | 'detail') === 'detail' &&
!isRecordingApproved(initialValues) && (!isLayingCategory || hasGradingData(initialValues)) && (
!isRecordingApproved(initialValues) &&
(!isLayingCategory || hasGradingData(initialValues)) && (
<ConfirmationModal
ref={rejectModal.ref}
type='error'
@@ -49,7 +49,10 @@ import useSWR from 'swr';
// INTERFACES & PROPS
interface GradingFormProps {
type?: 'add' | 'edit' | 'detail';
initialValues?: RecordingEgg & { grading_eggs?: GradingEgg[] };
initialValues?: RecordingEgg & {
grading_eggs?: GradingEgg[];
gradings?: { grade: string; qty: number }[];
};
}
const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
@@ -190,19 +193,37 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
recordingEggId = parseInt(recordingId || '0') || 0;
}
return getRecordingGradingFormInitialValues({
recording_egg_id: recordingEggId,
eggs_grading:
initialValues?.grading_eggs?.map((grading: GradingEgg) => ({
let gradingData: {
recording_egg_id: number;
grade: string;
qty: number;
}[] = [];
if (initialValues?.grading_eggs && initialValues.grading_eggs.length > 0) {
gradingData = initialValues.grading_eggs.map((grading: GradingEgg) => ({
recording_egg_id: recordingEggId,
grade: grading.grade,
qty: grading.qty,
}));
} else if (initialValues?.gradings && initialValues.gradings.length > 0) {
gradingData = initialValues.gradings.map(
(grading: { grade: string; qty: number }) => ({
recording_egg_id: recordingEggId,
grade: grading.grade,
qty: grading.qty,
})) || [],
})
);
}
return getRecordingGradingFormInitialValues({
recording_egg_id: recordingEggId,
eggs_grading: gradingData,
});
}, [initialValues, recordingId, konsumsiBaikEggId]);
const formik = useFormik<RecordingGradingFormValues>({
initialValues: formikInitialValues,
enableReinitialize: true,
validationSchema: (() => {
return type === 'edit'
? UpdateRecordingGradingFormSchema
@@ -370,7 +391,7 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
{ recording_egg_id: konsumsiBaikEggId, grade: '', qty: '' },
]);
}
}, [konsumsiBaikEggId, formik.values.eggs_grading]);
}, [konsumsiBaikEggId, formik.values.eggs_grading.length]);
return (
<>