mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
fix(FE): fixing error message on submit and fixing ui
This commit is contained in:
randy-ar
+15
-19
@@ -2,34 +2,30 @@ import * as Yup from 'yup';
|
||||
|
||||
// Schema for LAYING category (production_standard_details is required)
|
||||
const LayingRepeaterFormSchema = Yup.object({
|
||||
week: Yup.number().required('Minggu wajib diisi!'),
|
||||
week: Yup.number().required('Wajib diisi!'),
|
||||
production_standard_uniformity_details: Yup.object({
|
||||
target_mean_bw: Yup.number().required('Berat rata-rata wajib diisi!'),
|
||||
max_depletion: Yup.number().required('Maksimal depletion wajib diisi!'),
|
||||
min_uniformity: Yup.number().required('Minimal uniformitas wajib diisi!'),
|
||||
feed_intake: Yup.number().required('Pengambilan makanan wajib diisi!'),
|
||||
target_mean_bw: Yup.number().required('Wajib diisi!'),
|
||||
max_depletion: Yup.number().required('Wajib diisi!'),
|
||||
min_uniformity: Yup.number().required('Wajib diisi!'),
|
||||
feed_intake: Yup.number().required('Wajib diisi!'),
|
||||
}),
|
||||
production_standard_details: Yup.object({
|
||||
target_hen_day_production: Yup.number().required(
|
||||
'Produksi telur per hari wajib diisi!'
|
||||
),
|
||||
target_hen_house_production: Yup.number().required(
|
||||
'Produksi telur per kandang wajib diisi!'
|
||||
),
|
||||
target_egg_weight: Yup.number().required('Berat telur wajib diisi!'),
|
||||
target_egg_mass: Yup.number().required('Massa telur wajib diisi!'),
|
||||
standard_fcr: Yup.number().required('FCR wajib diisi!'),
|
||||
target_hen_day_production: Yup.number().required('Wajib diisi!'),
|
||||
target_hen_house_production: Yup.number().required('Wajib diisi!'),
|
||||
target_egg_weight: Yup.number().required('Wajib diisi!'),
|
||||
target_egg_mass: Yup.number().required('Wajib diisi!'),
|
||||
standard_fcr: Yup.number().required('Wajib diisi!'),
|
||||
}).required(),
|
||||
});
|
||||
|
||||
// Schema for GROWING category (production_standard_details is optional)
|
||||
const GrowingRepeaterFormSchema = Yup.object({
|
||||
week: Yup.number().required('Minggu wajib diisi!'),
|
||||
week: Yup.number().required('Wajib diisi!'),
|
||||
production_standard_uniformity_details: Yup.object({
|
||||
target_mean_bw: Yup.number().required('Berat rata-rata wajib diisi!'),
|
||||
max_depletion: Yup.number().required('Maksimal depletion wajib diisi!'),
|
||||
min_uniformity: Yup.number().required('Minimal uniformitas wajib diisi!'),
|
||||
feed_intake: Yup.number().required('Pengambilan makanan wajib diisi!'),
|
||||
target_mean_bw: Yup.number().required('Wajib diisi!'),
|
||||
max_depletion: Yup.number().required('Wajib diisi!'),
|
||||
min_uniformity: Yup.number().required('Wajib diisi!'),
|
||||
feed_intake: Yup.number().required('Wajib diisi!'),
|
||||
}),
|
||||
production_standard_details: Yup.object({
|
||||
target_hen_day_production: Yup.number().optional(),
|
||||
|
||||
+86
-45
@@ -344,7 +344,7 @@ const ProductionStandardForm = ({
|
||||
const columns = useMemo<ColumnDef<TableRowsType>[]>(() => {
|
||||
const baseColumns: ColumnDef<TableRowsType>[] = [
|
||||
{
|
||||
header: 'Minggu',
|
||||
header: 'Week',
|
||||
accessorKey: 'week',
|
||||
enableSorting: false,
|
||||
},
|
||||
@@ -358,30 +358,40 @@ const ProductionStandardForm = ({
|
||||
header: 'Hen Day',
|
||||
accessorFn: (row) =>
|
||||
row.production_standard_details?.target_hen_day_production,
|
||||
cell: ({ row }) =>
|
||||
`${row.original.production_standard_details?.target_hen_day_production}%`,
|
||||
enableSorting: false,
|
||||
},
|
||||
{
|
||||
header: 'Hen House',
|
||||
accessorFn: (row) =>
|
||||
row.production_standard_details?.target_hen_house_production,
|
||||
cell: ({ row }) =>
|
||||
`${row.original.production_standard_details?.target_hen_house_production} pc`,
|
||||
enableSorting: false,
|
||||
},
|
||||
{
|
||||
header: 'Egg Weight',
|
||||
accessorFn: (row) =>
|
||||
row.production_standard_details?.target_egg_weight,
|
||||
cell: ({ row }) =>
|
||||
`${row.original.production_standard_details?.target_egg_weight} g`,
|
||||
enableSorting: false,
|
||||
},
|
||||
{
|
||||
header: 'Egg Mass',
|
||||
accessorFn: (row) =>
|
||||
row.production_standard_details?.target_egg_mass,
|
||||
cell: ({ row }) =>
|
||||
`${row.original.production_standard_details?.target_egg_mass} g`,
|
||||
enableSorting: false,
|
||||
},
|
||||
{
|
||||
header: 'FCR',
|
||||
accessorFn: (row) =>
|
||||
row.production_standard_details?.standard_fcr,
|
||||
cell: ({ row }) =>
|
||||
`${row.original.production_standard_details?.standard_fcr} g`,
|
||||
enableSorting: false,
|
||||
},
|
||||
]
|
||||
@@ -393,24 +403,32 @@ const ProductionStandardForm = ({
|
||||
header: 'Mean BW',
|
||||
accessorFn: (row) =>
|
||||
row.production_standard_uniformity_details?.target_mean_bw,
|
||||
cell: ({ row }) =>
|
||||
`${row.original.production_standard_uniformity_details?.target_mean_bw} g`,
|
||||
enableSorting: false,
|
||||
},
|
||||
{
|
||||
header: 'Max Depletion',
|
||||
accessorFn: (row) =>
|
||||
row.production_standard_uniformity_details?.max_depletion,
|
||||
cell: ({ row }) =>
|
||||
`${row.original.production_standard_uniformity_details?.max_depletion}%`,
|
||||
enableSorting: false,
|
||||
},
|
||||
{
|
||||
header: 'Min Uniformity',
|
||||
accessorFn: (row) =>
|
||||
row.production_standard_uniformity_details?.min_uniformity,
|
||||
cell: ({ row }) =>
|
||||
`${row.original.production_standard_uniformity_details?.min_uniformity}%`,
|
||||
enableSorting: false,
|
||||
},
|
||||
{
|
||||
header: 'Feed Intake',
|
||||
accessorFn: (row) =>
|
||||
row.production_standard_uniformity_details?.feed_intake,
|
||||
cell: ({ row }) =>
|
||||
`${row.original.production_standard_uniformity_details?.feed_intake} g`,
|
||||
enableSorting: false,
|
||||
},
|
||||
];
|
||||
@@ -728,7 +746,52 @@ const ProductionStandardForm = ({
|
||||
};
|
||||
|
||||
// ===== Formik Error List =====
|
||||
const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
|
||||
const { formErrorList, close, handleFormSubmit } = useFormikErrorList(
|
||||
formik,
|
||||
{
|
||||
onBeforeSubmit: (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// For GROWING category, clear production_standard_details errors and set default values
|
||||
if (formik.values.project_category === 'GROWING') {
|
||||
// Set default values for production_standard_details
|
||||
formik.values.details?.forEach((detail) => {
|
||||
detail.production_standard_details = {
|
||||
target_hen_day_production: 0,
|
||||
target_hen_house_production: 0,
|
||||
target_egg_weight: 0,
|
||||
target_egg_mass: 0,
|
||||
standard_fcr: 0,
|
||||
};
|
||||
});
|
||||
|
||||
// Clear any errors related to production_standard_details
|
||||
const currentErrors = { ...formik.errors };
|
||||
if (currentErrors.details && Array.isArray(currentErrors.details)) {
|
||||
const cleanedDetails = currentErrors.details
|
||||
.map((detailError) => {
|
||||
if (detailError && typeof detailError === 'object') {
|
||||
const { production_standard_details, ...rest } = detailError;
|
||||
return Object.keys(rest).length > 0 ? rest : undefined;
|
||||
}
|
||||
return detailError;
|
||||
})
|
||||
.filter(
|
||||
(error): error is Exclude<typeof error, undefined> =>
|
||||
error !== undefined
|
||||
);
|
||||
|
||||
currentErrors.details = (
|
||||
cleanedDetails.length > 0 ? cleanedDetails : undefined
|
||||
) as typeof currentErrors.details;
|
||||
}
|
||||
formik.setErrors(currentErrors);
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -821,19 +884,20 @@ const ProductionStandardForm = ({
|
||||
key={`row-${row.index}`}
|
||||
className='sticky bottom-0 bg-base-100 shadow-lg'
|
||||
>
|
||||
<td colSpan={colSpan} className='p-6'>
|
||||
<td colSpan={colSpan} className='p-2'>
|
||||
<form
|
||||
className='h-full w-full flex flex-col justify-end'
|
||||
onSubmit={repeaterFormik.handleSubmit}
|
||||
onReset={repeaterFormik.handleReset}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'grid gap-4 items-start',
|
||||
formik.values.project_category === 'LAYING'
|
||||
? 'grid-cols-10'
|
||||
: 'grid-cols-5'
|
||||
)}
|
||||
className='grid gap-2 items-start w-full'
|
||||
style={{
|
||||
gridTemplateColumns:
|
||||
formik.values.project_category === 'LAYING'
|
||||
? 'repeat(10, minmax(auto, 1fr)) minmax(auto, auto)'
|
||||
: 'repeat(4, minmax(auto, 1fr)) minmax(auto, auto)',
|
||||
}}
|
||||
>
|
||||
<NumberInput
|
||||
name='week'
|
||||
@@ -862,7 +926,7 @@ const ProductionStandardForm = ({
|
||||
}
|
||||
onChange={repeaterFormik.handleChange}
|
||||
onBlur={repeaterFormik.handleBlur}
|
||||
endAdornment={<Icon icon='mdi:percent' />}
|
||||
bottomLabel='Persen (%)'
|
||||
errorMessage={getProductionDetailsError(
|
||||
repeaterFormik.errors
|
||||
.production_standard_details,
|
||||
@@ -894,11 +958,7 @@ const ProductionStandardForm = ({
|
||||
}
|
||||
onChange={repeaterFormik.handleChange}
|
||||
onBlur={repeaterFormik.handleBlur}
|
||||
endAdornment={
|
||||
<div className='w-full h-full flex items-center justify-center'>
|
||||
Butir
|
||||
</div>
|
||||
}
|
||||
bottomLabel='Butir (pc)'
|
||||
errorMessage={getProductionDetailsError(
|
||||
repeaterFormik.errors
|
||||
.production_standard_details,
|
||||
@@ -930,11 +990,7 @@ const ProductionStandardForm = ({
|
||||
}
|
||||
onChange={repeaterFormik.handleChange}
|
||||
onBlur={repeaterFormik.handleBlur}
|
||||
endAdornment={
|
||||
<div className='w-full h-full flex items-center justify-center'>
|
||||
gr
|
||||
</div>
|
||||
}
|
||||
bottomLabel='Gram (g)'
|
||||
errorMessage={getProductionDetailsError(
|
||||
repeaterFormik.errors
|
||||
.production_standard_details,
|
||||
@@ -959,17 +1015,13 @@ const ProductionStandardForm = ({
|
||||
name='production_standard_details.target_egg_mass'
|
||||
label='Egg Mass'
|
||||
placeholder='1'
|
||||
bottomLabel='Gram (g)'
|
||||
value={
|
||||
repeaterFormik.values
|
||||
.production_standard_details?.target_egg_mass
|
||||
}
|
||||
onChange={repeaterFormik.handleChange}
|
||||
onBlur={repeaterFormik.handleBlur}
|
||||
endAdornment={
|
||||
<div className='w-full h-full flex items-center justify-center'>
|
||||
gr
|
||||
</div>
|
||||
}
|
||||
errorMessage={getProductionDetailsError(
|
||||
repeaterFormik.errors
|
||||
.production_standard_details,
|
||||
@@ -1000,11 +1052,7 @@ const ProductionStandardForm = ({
|
||||
}
|
||||
onChange={repeaterFormik.handleChange}
|
||||
onBlur={repeaterFormik.handleBlur}
|
||||
endAdornment={
|
||||
<div className='w-full h-full flex items-center justify-center'>
|
||||
gr
|
||||
</div>
|
||||
}
|
||||
bottomLabel='Gram (g)'
|
||||
errorMessage={getProductionDetailsError(
|
||||
repeaterFormik.errors
|
||||
.production_standard_details,
|
||||
@@ -1038,11 +1086,7 @@ const ProductionStandardForm = ({
|
||||
}
|
||||
onChange={repeaterFormik.handleChange}
|
||||
onBlur={repeaterFormik.handleBlur}
|
||||
endAdornment={
|
||||
<div className='w-full h-full flex items-center justify-center'>
|
||||
gr
|
||||
</div>
|
||||
}
|
||||
bottomLabel='Gram (g)'
|
||||
errorMessage={
|
||||
repeaterFormik.errors
|
||||
.production_standard_uniformity_details
|
||||
@@ -1072,7 +1116,7 @@ const ProductionStandardForm = ({
|
||||
}
|
||||
onChange={repeaterFormik.handleChange}
|
||||
onBlur={repeaterFormik.handleBlur}
|
||||
endAdornment={<Icon icon='mdi:percent' />}
|
||||
bottomLabel='Persen (%)'
|
||||
errorMessage={
|
||||
repeaterFormik.errors
|
||||
.production_standard_uniformity_details
|
||||
@@ -1102,7 +1146,7 @@ const ProductionStandardForm = ({
|
||||
}
|
||||
onChange={repeaterFormik.handleChange}
|
||||
onBlur={repeaterFormik.handleBlur}
|
||||
endAdornment={<Icon icon='mdi:percent' />}
|
||||
bottomLabel='Persen (%)'
|
||||
errorMessage={
|
||||
repeaterFormik.errors
|
||||
.production_standard_uniformity_details
|
||||
@@ -1132,11 +1176,8 @@ const ProductionStandardForm = ({
|
||||
}
|
||||
onChange={repeaterFormik.handleChange}
|
||||
onBlur={repeaterFormik.handleBlur}
|
||||
endAdornment={
|
||||
<div className='w-full h-full flex items-center justify-center'>
|
||||
gr/ekor
|
||||
</div>
|
||||
}
|
||||
bottomLabel='Gram/Ekor (g)'
|
||||
endAdornment
|
||||
errorMessage={
|
||||
repeaterFormik.errors
|
||||
.production_standard_uniformity_details
|
||||
@@ -1162,7 +1203,7 @@ const ProductionStandardForm = ({
|
||||
type='button'
|
||||
color='error'
|
||||
variant='outline'
|
||||
className='min-w-24'
|
||||
className='min-w-xs'
|
||||
onClick={handleCancelEdit}
|
||||
>
|
||||
<Icon icon='mdi:close' /> Batal
|
||||
@@ -1178,7 +1219,7 @@ const ProductionStandardForm = ({
|
||||
<Button
|
||||
type='submit'
|
||||
color={editMode ? 'warning' : 'success'}
|
||||
className='min-w-24'
|
||||
className='min-w-xs'
|
||||
disabled={
|
||||
isAddingRow ||
|
||||
formik.values.project_category === ''
|
||||
@@ -1195,7 +1236,7 @@ const ProductionStandardForm = ({
|
||||
variant='outline'
|
||||
color='primary'
|
||||
onClick={toggleTableHeight}
|
||||
className='absolute bottom-6 right-6'
|
||||
className='absolute bottom-2 right-2'
|
||||
>
|
||||
<Icon
|
||||
icon={
|
||||
|
||||
@@ -38,6 +38,9 @@ export const useFormikErrorList = <T>(
|
||||
|
||||
// Validate form
|
||||
const isValid = await handleValidateForm();
|
||||
if (isValid) {
|
||||
close();
|
||||
}
|
||||
|
||||
// Call onAfterValidation callback if validation passed
|
||||
if (options?.onAfterValidation) {
|
||||
|
||||
Reference in New Issue
Block a user