mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 05:22:02 +00:00
Merge branch 'development' of gitlab.com:mbugroup/lti-web-client into feat/FE/refactor-submission-form
This commit is contained in:
rstubryan
@@ -0,0 +1,46 @@
|
||||
import Alert from '@/components/Alert';
|
||||
import Button from '@/components/Button';
|
||||
import { Icon } from '@iconify/react';
|
||||
|
||||
/**
|
||||
* Alert Unique Error List
|
||||
* @param formErrorList - Array of error messages
|
||||
* @param onClose - Function to close the alert
|
||||
*/
|
||||
const AlertErrorList = ({
|
||||
formErrorList,
|
||||
onClose,
|
||||
}: {
|
||||
formErrorList: string[];
|
||||
onClose: () => void;
|
||||
}) => {
|
||||
return (
|
||||
<Alert color='error' className='flex flex-col gap-2 px-4 m-4'>
|
||||
<div className='flex justify-between items-center gap-2 w-full'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Icon icon='material-symbols:error-outline' width={24} height={24} />
|
||||
<span className='font-semibold'>
|
||||
Terdapat {formErrorList.length} error pada form:
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
onClick={onClose}
|
||||
variant='link'
|
||||
className='ml-auto p-0 w-fit text-white'
|
||||
color='none'
|
||||
>
|
||||
<Icon icon='material-symbols:close' width={24} height={24} />
|
||||
</Button>
|
||||
</div>
|
||||
<ul className='list-disc list-inside pl-8 space-y-1 w-full'>
|
||||
{formErrorList.map((error, index) => (
|
||||
<li key={index} className='text-sm'>
|
||||
{error}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Alert>
|
||||
);
|
||||
};
|
||||
|
||||
export default AlertErrorList;
|
||||
@@ -309,7 +309,7 @@ const useApprovalSteps = ({
|
||||
moduleId: string;
|
||||
params?: {
|
||||
page?: number;
|
||||
limit: number;
|
||||
limit: number | string;
|
||||
search?: string;
|
||||
group_step_number?: boolean;
|
||||
};
|
||||
|
||||
@@ -125,6 +125,7 @@ const InventoryAdjustmentForm = ({
|
||||
|
||||
const warehouseUrl = `${WarehouseApi.basePath}?${new URLSearchParams({
|
||||
search: '',
|
||||
limit: '100',
|
||||
}).toString()}`;
|
||||
const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
|
||||
warehouseUrl,
|
||||
|
||||
@@ -48,6 +48,8 @@ import DeliveryOrderProductForm from '@/components/pages/marketing/form/repeater
|
||||
import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
|
||||
import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
|
||||
import RequirePermission from '@/components/helper/RequirePermission';
|
||||
import { getUniqueFormikErrors } from '@/lib/formik-helper';
|
||||
import AlertErrorList from '@/components/helper/form/FormErrors';
|
||||
|
||||
const MemoizedSalesOrderProductTable = memo(SalesOrderProductTable);
|
||||
const MemoizedSalesOrderProductForm = memo(SalesOrderProductForm);
|
||||
@@ -217,6 +219,7 @@ const MarketingForm = ({
|
||||
const [deliveryFormState, setDeliveryFormState] = useState<'add' | 'edit'>(
|
||||
'add'
|
||||
);
|
||||
const [formErrorList, setFormErrorList] = useState<string[]>([]);
|
||||
const [deliveryOrderValues, setDeliveryOrderValues] = useState<
|
||||
DeliveryOrderProductFormValues[]
|
||||
>(
|
||||
@@ -558,11 +561,28 @@ const MarketingForm = ({
|
||||
);
|
||||
}, [memoSalesOrder]);
|
||||
|
||||
const handleValidateForm = async () => {
|
||||
const errors = await formik.validateForm();
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
// Parse and display errors
|
||||
const errorMessages = getUniqueFormikErrors(errors);
|
||||
setFormErrorList(errorMessages);
|
||||
return; // Stop submission
|
||||
}
|
||||
};
|
||||
|
||||
const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
handleValidateForm();
|
||||
formik.handleSubmit();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<form
|
||||
className='flex flex-col gap-4'
|
||||
onSubmit={formik.handleSubmit}
|
||||
onSubmit={handleFormSubmit}
|
||||
onReset={formik.handleReset}
|
||||
>
|
||||
<FormHeader
|
||||
@@ -666,6 +686,14 @@ const MarketingForm = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error List Alert */}
|
||||
{formErrorList.length > 0 && (
|
||||
<AlertErrorList
|
||||
formErrorList={formErrorList}
|
||||
onClose={() => setFormErrorList([])}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Form Actions */}
|
||||
<div className='flex flex-row items-start justify-center gap-2 mt-4'>
|
||||
<Button type='reset' color='warning' disabled={formik.isSubmitting}>
|
||||
@@ -673,7 +701,7 @@ const MarketingForm = ({
|
||||
</Button>
|
||||
<Button
|
||||
type='submit'
|
||||
disabled={!formik.isValid || formik.isSubmitting}
|
||||
disabled={formik.isSubmitting}
|
||||
isLoading={formik.isSubmitting}
|
||||
>
|
||||
Submit
|
||||
|
||||
+29
-6
@@ -16,6 +16,8 @@ import Badge from '@/components/Badge';
|
||||
import { SalesProductToFieldValues } from '@/components/pages/marketing/form/MarketingForm';
|
||||
import * as Yup from 'yup';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { getUniqueFormikErrors } from '@/lib/formik-helper';
|
||||
import AlertErrorList from '@/components/helper/form/FormErrors';
|
||||
|
||||
const DeliveryOrderProductForm = ({
|
||||
formState,
|
||||
@@ -40,6 +42,8 @@ const DeliveryOrderProductForm = ({
|
||||
null
|
||||
);
|
||||
const [currentInput, setCurrentInput] = useState<string>('');
|
||||
const [formErrorList, setFormErrorList] = useState<string[]>([]);
|
||||
|
||||
const salesOrder = salesOrders.find(
|
||||
(item) => item.id === initialValues?.marketing_product_id
|
||||
);
|
||||
@@ -164,15 +168,27 @@ const DeliveryOrderProductForm = ({
|
||||
}
|
||||
}, [initialValues]);
|
||||
|
||||
const handleValidateForm = () => {
|
||||
formik.validateForm();
|
||||
const formErrorList = getUniqueFormikErrors(formik.errors);
|
||||
setFormErrorList(formErrorList);
|
||||
if (formErrorList.length > 0) {
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
handleBlurField(currentInput);
|
||||
handleValidateForm();
|
||||
formik.handleSubmit(e);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<form
|
||||
className='size-full'
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleBlurField(currentInput);
|
||||
formik.handleSubmit(e);
|
||||
}}
|
||||
onSubmit={handleFormSubmit}
|
||||
onReset={handleResetForm}
|
||||
>
|
||||
{formikErrorMessage && (
|
||||
@@ -372,6 +388,13 @@ const DeliveryOrderProductForm = ({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{formErrorList.length > 0 && (
|
||||
<AlertErrorList
|
||||
formErrorList={formErrorList}
|
||||
onClose={() => setFormErrorList([])}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className='flex flex-row justify-end gap-3 mt-4'>
|
||||
<Button type='reset' color='warning'>
|
||||
Reset
|
||||
@@ -379,7 +402,7 @@ const DeliveryOrderProductForm = ({
|
||||
<Button
|
||||
type='submit'
|
||||
isLoading={formik.isSubmitting}
|
||||
disabled={!formik.isValid || formik.isSubmitting}
|
||||
disabled={formik.isSubmitting}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
|
||||
+8
-4
@@ -25,15 +25,19 @@ export const SalesOrderProductSchema: Yup.ObjectSchema<SalesOrderProductSchemaTy
|
||||
id: Yup.number(),
|
||||
vehicle_number: Yup.string().required('Nomor Kendaraan wajib diisi!'),
|
||||
kandang: Yup.object({
|
||||
value: Yup.number().min(1).required(),
|
||||
label: Yup.string().required(),
|
||||
value: Yup.number()
|
||||
.min(1, 'Kandang wajib diisi!')
|
||||
.required('Kandang wajib diisi!'),
|
||||
label: Yup.string().required('Kandang wajib diisi!'),
|
||||
}).nullable(),
|
||||
kandang_id: Yup.number()
|
||||
.min(1, 'Kandang wajib diisi!')
|
||||
.required('Kandang wajib diisi!'),
|
||||
product_warehouse: Yup.object({
|
||||
value: Yup.number().min(1).required(),
|
||||
label: Yup.string().required(),
|
||||
value: Yup.number()
|
||||
.min(1, 'Produk wajib diisi!')
|
||||
.required('Produk wajib diisi!'),
|
||||
label: Yup.string().required('Produk wajib diisi!'),
|
||||
}).nullable(),
|
||||
product_warehouse_id: Yup.number()
|
||||
.min(1, 'Produk wajib diisi!')
|
||||
|
||||
@@ -24,6 +24,8 @@ import {
|
||||
} from '@/lib/helper';
|
||||
import PatternInput from '@/components/input/PatternInput';
|
||||
import Alert from '@/components/Alert';
|
||||
import { getUniqueFormikErrors } from '@/lib/formik-helper';
|
||||
import AlertErrorList from '@/components/helper/form/FormErrors';
|
||||
|
||||
const SalesOrderProductForm = ({
|
||||
initialValues,
|
||||
@@ -37,6 +39,7 @@ const SalesOrderProductForm = ({
|
||||
}) => {
|
||||
const [formErrorMessage, setFormErrorMessage] = useState('');
|
||||
const [currentInput, setCurrentInput] = useState<string>('');
|
||||
const [formErrorList, setFormErrorList] = useState<string[]>([]);
|
||||
|
||||
// ============ Formik ============
|
||||
const formik = useFormik<SalesOrderProductFormValues>({
|
||||
@@ -169,15 +172,29 @@ const SalesOrderProductForm = ({
|
||||
}
|
||||
};
|
||||
|
||||
const handleValidateForm = async () => {
|
||||
const errors = await formik.validateForm();
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
// Parse and display errors
|
||||
const errorMessages = getUniqueFormikErrors(errors);
|
||||
setFormErrorList(errorMessages);
|
||||
return; // Stop submission
|
||||
}
|
||||
};
|
||||
|
||||
const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
handleBlurField(currentInput);
|
||||
handleValidateForm();
|
||||
formik.handleSubmit(e);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<form
|
||||
className='size-full'
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleBlurField(currentInput);
|
||||
formik.handleSubmit(e);
|
||||
}}
|
||||
onSubmit={handleFormSubmit}
|
||||
onReset={handleResetForm}
|
||||
>
|
||||
{formErrorMessage && (
|
||||
@@ -338,6 +355,15 @@ const SalesOrderProductForm = ({
|
||||
placeholder='Masukan Total Penjualan'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Error List Alert */}
|
||||
{formErrorList.length > 0 && (
|
||||
<AlertErrorList
|
||||
formErrorList={formErrorList}
|
||||
onClose={() => setFormErrorList([])}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className='flex flex-row justify-end gap-3 mt-4'>
|
||||
<Button type='reset' color='warning' onClick={handleResetForm}>
|
||||
Reset
|
||||
@@ -345,7 +371,7 @@ const SalesOrderProductForm = ({
|
||||
<Button
|
||||
type='submit'
|
||||
isLoading={formik.isSubmitting}
|
||||
disabled={!formik.isValid || formik.isSubmitting}
|
||||
disabled={formik.isSubmitting}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
|
||||
@@ -18,6 +18,7 @@ import { Icon } from '@iconify/react';
|
||||
import Badge from '@/components/Badge';
|
||||
import { CHICKINS_APPROVAL_LINE } from '@/config/approval-line';
|
||||
import RequirePermission from '@/components/helper/RequirePermission';
|
||||
import { BaseApproval } from '@/types/api/api-general';
|
||||
const ChickinFormKandang = ({
|
||||
formType = 'add',
|
||||
initialValues,
|
||||
@@ -33,11 +34,16 @@ const ChickinFormKandang = ({
|
||||
approvals,
|
||||
isLoading: approvalsLoading,
|
||||
refresh: refreshApprovals,
|
||||
rawDataApprovals,
|
||||
} = useApprovalSteps({
|
||||
latestApproval: initialValues?.chickin_approval,
|
||||
approvalLines: CHICKINS_APPROVAL_LINE,
|
||||
moduleName: 'CHICKINS',
|
||||
moduleId: initialValues?.id.toString() ?? '',
|
||||
params: {
|
||||
limit: 'limit',
|
||||
group_step_number: false,
|
||||
},
|
||||
});
|
||||
|
||||
const afterSubmitFormChickin = () => {
|
||||
@@ -180,6 +186,7 @@ const ChickinFormKandang = ({
|
||||
</div>
|
||||
{openChickin && (
|
||||
<ChickinLogsView
|
||||
rawDataApprovals={rawDataApprovals as BaseApproval[]}
|
||||
initialValues={initialValues}
|
||||
afterSubmit={afterSubmitFormChickin}
|
||||
/>
|
||||
|
||||
@@ -8,6 +8,7 @@ import PillBadge from '@/components/PillBadge';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { formatDate, formatNumber } from '@/lib/helper';
|
||||
import { ChickinApi } from '@/services/api/production/chickin';
|
||||
import { BaseApproval } from '@/types/api/api-general';
|
||||
import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { useState } from 'react';
|
||||
@@ -16,9 +17,11 @@ import toast from 'react-hot-toast';
|
||||
const ChickinLogsView = ({
|
||||
initialValues,
|
||||
afterSubmit,
|
||||
rawDataApprovals,
|
||||
}: {
|
||||
initialValues: ProjectFlockKandang;
|
||||
afterSubmit?: () => void;
|
||||
rawDataApprovals: BaseApproval[];
|
||||
}) => {
|
||||
const confirmModal = useModal();
|
||||
const [isApproveLoading, setIsApproveLoading] = useState(false);
|
||||
@@ -60,9 +63,15 @@ const ChickinLogsView = ({
|
||||
</div>
|
||||
) : (
|
||||
(initialValues?.chickins || []).map((chickin, index) => {
|
||||
const latestApproval = rawDataApprovals[0];
|
||||
const isApproved =
|
||||
initialValues.chickin_approval?.step_number === 2;
|
||||
const isPending = initialValues.chickin_approval?.step_number === 1;
|
||||
index == (initialValues?.chickins || []).length - 1
|
||||
? latestApproval?.step_number === 2
|
||||
: true;
|
||||
const isPending =
|
||||
index == (initialValues?.chickins || []).length - 1
|
||||
? latestApproval?.step_number === 1
|
||||
: false;
|
||||
const quantity = isApproved
|
||||
? chickin.usage_qty
|
||||
: isPending
|
||||
@@ -82,7 +91,7 @@ const ChickinLogsView = ({
|
||||
{/* Header with Status Badge */}
|
||||
<div className='flex flex-row justify-between items-center'>
|
||||
<div className='text-lg font-semibold'>
|
||||
Chick In #{index + 1}
|
||||
Chick In #{index + 1} - {latestApproval?.step_number}
|
||||
</div>
|
||||
<PillBadge
|
||||
content={
|
||||
|
||||
@@ -64,9 +64,9 @@ export const ProjectFlockBudgetsSchema: Yup.ObjectSchema<ProjectFlockBudgetsSche
|
||||
.min(1, 'Harga minimal 1!')
|
||||
.required('Harga wajib diisi!'),
|
||||
total_price: Yup.number()
|
||||
.typeError('Harga harus berupa angka!')
|
||||
.min(1, 'Harga minimal 1!')
|
||||
.required('Harga wajib diisi!'),
|
||||
.typeError('Total Harga harus berupa angka!')
|
||||
.min(1, 'Total Harga minimal 1!')
|
||||
.required('Total Harga wajib diisi!'),
|
||||
});
|
||||
|
||||
export const ProjectFlockFormSchema: Yup.ObjectSchema<ProjectFlockFormSchemaType> =
|
||||
|
||||
@@ -6,6 +6,8 @@ import SelectInput, {
|
||||
useSelect,
|
||||
} from '@/components/input/SelectInput';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { getUniqueFormikErrors } from '@/lib/formik-helper';
|
||||
import AlertErrorList from '@/components/helper/form/FormErrors';
|
||||
import {
|
||||
AreaApi,
|
||||
FcrApi,
|
||||
@@ -64,6 +66,7 @@ const ProjectFlockForm = ({
|
||||
|
||||
const [projectFlockFormErrorMessage, setProjectFlockFormErrorMessage] =
|
||||
useState('');
|
||||
const [formErrorList, setFormErrorList] = useState<string[]>([]);
|
||||
const [selectedArea, setSelectedArea] = useState('');
|
||||
const [selectedLocation, setSelectedLocation] = useState('');
|
||||
const [selectedCategory, setSelectedCategory] = useState('');
|
||||
@@ -134,6 +137,7 @@ const ProjectFlockForm = ({
|
||||
const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
|
||||
search: '',
|
||||
location_id: selectedLocation == '' ? '0' : selectedLocation,
|
||||
limit: 'limit',
|
||||
}).toString()}`;
|
||||
const {
|
||||
data: kandang,
|
||||
@@ -638,6 +642,17 @@ const ProjectFlockForm = ({
|
||||
return !isNonstockAlreadyInBudgets;
|
||||
});
|
||||
|
||||
const handleValidateForm = async () => {
|
||||
const errors = await formik.validateForm();
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
// Parse and display errors
|
||||
const errorMessages = getUniqueFormikErrors(errors);
|
||||
setFormErrorList(errorMessages);
|
||||
return; // Stop submission
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className='w-full'>
|
||||
@@ -697,7 +712,11 @@ const ProjectFlockForm = ({
|
||||
|
||||
<form
|
||||
className='w-auto h-auto'
|
||||
onSubmit={formik.handleSubmit}
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleValidateForm();
|
||||
formik.handleSubmit(e);
|
||||
}}
|
||||
onReset={formik.handleReset}
|
||||
>
|
||||
{/* Form Informasi Umum */}
|
||||
@@ -1063,6 +1082,14 @@ const ProjectFlockForm = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error List Alert */}
|
||||
{formErrorList.length > 0 && (
|
||||
<AlertErrorList
|
||||
formErrorList={formErrorList}
|
||||
onClose={() => setFormErrorList([])}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className='flex flex-row justify-center gap-2 flex-wrap my-6 px-4'>
|
||||
{formType !== 'detail' && (
|
||||
<RequirePermission
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
import { FormikErrors } from 'formik';
|
||||
|
||||
export type ErrorMessage = {
|
||||
key: string;
|
||||
message: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Parse Formik errors object into a flat array of error messages
|
||||
* @param errors - Formik errors object
|
||||
* @param parentKey - Parent key for nested objects (used internally for recursion)
|
||||
* @returns Array of error messages
|
||||
*/
|
||||
export function parseFormikErrors<T>(
|
||||
errors: FormikErrors<T>,
|
||||
parentKey: string = ''
|
||||
): ErrorMessage[] {
|
||||
const errorList: ErrorMessage[] = [];
|
||||
|
||||
Object.keys(errors).forEach((key) => {
|
||||
const value = errors[key as keyof typeof errors];
|
||||
const fullKey = parentKey ? `${parentKey}.${key}` : key;
|
||||
|
||||
if (typeof value === 'string') {
|
||||
// Direct error message
|
||||
errorList.push({ key: fullKey, message: value });
|
||||
} else if (Array.isArray(value)) {
|
||||
// Array of errors
|
||||
value.forEach((item, index) => {
|
||||
if (typeof item === 'string') {
|
||||
errorList.push({ key: `${fullKey}[${index}]`, message: item });
|
||||
} else if (item && typeof item === 'object') {
|
||||
// Nested object in array
|
||||
const nestedErrors = parseFormikErrors(
|
||||
item as FormikErrors<unknown>,
|
||||
`${fullKey}[${index}]`
|
||||
);
|
||||
errorList.push(...nestedErrors);
|
||||
}
|
||||
});
|
||||
} else if (value && typeof value === 'object') {
|
||||
// Nested object
|
||||
const nestedErrors = parseFormikErrors(
|
||||
value as FormikErrors<unknown>,
|
||||
fullKey
|
||||
);
|
||||
errorList.push(...nestedErrors);
|
||||
}
|
||||
});
|
||||
|
||||
return errorList;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get unique error messages from Formik errors
|
||||
* @param errors - Formik errors object
|
||||
* @returns Array of unique error messages
|
||||
*/
|
||||
export function getUniqueFormikErrors<T>(errors: FormikErrors<T>): string[] {
|
||||
const errorList = parseFormikErrors(errors);
|
||||
return Array.from(new Set(errorList.map((e) => e.message)));
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all error messages from Formik errors
|
||||
* @param errors - Formik errors object
|
||||
* @returns Array of error messages
|
||||
*/
|
||||
export function getAllFormikErrors<T>(errors: FormikErrors<T>): ErrorMessage[] {
|
||||
return parseFormikErrors(errors);
|
||||
}
|
||||
Reference in New Issue
Block a user