mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-25 15:55:48 +00:00
refactor(FE-62,65): simplify error handling in MovementForm by consolidating error checks
This commit is contained in:
@@ -38,24 +38,6 @@ interface MovementFormProps {
|
|||||||
initialValues?: Movement;
|
initialValues?: Movement;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getEkspedisiFieldError(
|
|
||||||
formik: FormikProps<MovementFormValues>,
|
|
||||||
idx: number,
|
|
||||||
field: keyof EkspedisiSchema
|
|
||||||
) {
|
|
||||||
const errorObj = formik.errors.ekspedisi?.[idx];
|
|
||||||
const touched = formik.touched.ekspedisi?.[idx]?.[field];
|
|
||||||
const isError =
|
|
||||||
touched &&
|
|
||||||
typeof errorObj === 'object' &&
|
|
||||||
!!(errorObj as Record<string, unknown>)?.[field];
|
|
||||||
const errorMessage =
|
|
||||||
typeof errorObj === 'object'
|
|
||||||
? (errorObj as Record<string, string>)?.[field]
|
|
||||||
: undefined;
|
|
||||||
return { isError, errorMessage };
|
|
||||||
}
|
|
||||||
|
|
||||||
const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||||
const [, setMovementFormErrorMessage] = useState('');
|
const [, setMovementFormErrorMessage] = useState('');
|
||||||
const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
|
const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
|
||||||
@@ -212,16 +194,22 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
|||||||
!formik.touched[arrayName] ||
|
!formik.touched[arrayName] ||
|
||||||
!Array.isArray(formik.touched[arrayName])
|
!Array.isArray(formik.touched[arrayName])
|
||||||
) {
|
) {
|
||||||
return false;
|
return {
|
||||||
|
isError: false,
|
||||||
|
errorMessage: undefined,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const touchedField = formik.touched[arrayName]?.[idx]?.[column as string];
|
const touchedField = formik.touched[arrayName]?.[idx]?.[column as string];
|
||||||
const errorField = formik.errors[arrayName]?.[idx] as Record<
|
const errorField = formik.errors[arrayName]?.[idx] as Record<
|
||||||
string,
|
string,
|
||||||
unknown
|
string
|
||||||
>;
|
>;
|
||||||
|
|
||||||
return touchedField && Boolean(errorField?.[column as string]);
|
return {
|
||||||
|
isError: touchedField && Boolean(errorField?.[column as string]),
|
||||||
|
errorMessage: touchedField ? errorField?.[column as string] : undefined,
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
interface WarehouseOptionType extends OptionType {
|
interface WarehouseOptionType extends OptionType {
|
||||||
@@ -571,11 +559,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
|||||||
isLoading={isLoadingProducts}
|
isLoading={isLoadingProducts}
|
||||||
isDisabled={type === 'detail'}
|
isDisabled={type === 'detail'}
|
||||||
isClearable
|
isClearable
|
||||||
isError={isRepeaterInputError(
|
{...isRepeaterInputError('product', 'product', idx)}
|
||||||
'product',
|
|
||||||
'product',
|
|
||||||
idx
|
|
||||||
)}
|
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
@@ -586,7 +570,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
|||||||
value={product.qty_product ?? ''}
|
value={product.qty_product ?? ''}
|
||||||
onChange={formik.handleChange}
|
onChange={formik.handleChange}
|
||||||
onBlur={formik.handleBlur}
|
onBlur={formik.handleBlur}
|
||||||
isError={isRepeaterInputError(
|
{...isRepeaterInputError(
|
||||||
'product',
|
'product',
|
||||||
'qty_product',
|
'qty_product',
|
||||||
idx
|
idx
|
||||||
@@ -734,13 +718,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
|||||||
formik.setFieldValue(`ekspedisi.${idx}.qty`, '');
|
formik.setFieldValue(`ekspedisi.${idx}.qty`, '');
|
||||||
}}
|
}}
|
||||||
options={getFilteredProductOptions()}
|
options={getFilteredProductOptions()}
|
||||||
isDisabled={type === 'detail'}
|
{...isRepeaterInputError(
|
||||||
isClearable
|
|
||||||
isError={isRepeaterInputError(
|
|
||||||
'ekspedisi',
|
'ekspedisi',
|
||||||
'product',
|
'product',
|
||||||
idx
|
idx
|
||||||
)}
|
)}
|
||||||
|
isDisabled={type === 'detail'}
|
||||||
|
isClearable
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
@@ -751,7 +735,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
|||||||
value={ekspedisi.qty ?? ''}
|
value={ekspedisi.qty ?? ''}
|
||||||
onChange={formik.handleChange}
|
onChange={formik.handleChange}
|
||||||
onBlur={formik.handleBlur}
|
onBlur={formik.handleBlur}
|
||||||
{...getEkspedisiFieldError(formik, idx, 'qty')}
|
{...isRepeaterInputError('ekspedisi', 'qty', idx)}
|
||||||
readOnly={type === 'detail'}
|
readOnly={type === 'detail'}
|
||||||
className={{
|
className={{
|
||||||
wrapper: 'w-full min-w-24',
|
wrapper: 'w-full min-w-24',
|
||||||
@@ -777,7 +761,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
|||||||
isLoading={isLoadingSuppliers}
|
isLoading={isLoadingSuppliers}
|
||||||
isDisabled={type === 'detail'}
|
isDisabled={type === 'detail'}
|
||||||
isClearable
|
isClearable
|
||||||
isError={isRepeaterInputError(
|
{...isRepeaterInputError(
|
||||||
'ekspedisi',
|
'ekspedisi',
|
||||||
'supplier',
|
'supplier',
|
||||||
idx
|
idx
|
||||||
@@ -791,10 +775,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
|||||||
value={ekspedisi.plat_nomor ?? ''}
|
value={ekspedisi.plat_nomor ?? ''}
|
||||||
onChange={formik.handleChange}
|
onChange={formik.handleChange}
|
||||||
onBlur={formik.handleBlur}
|
onBlur={formik.handleBlur}
|
||||||
{...getEkspedisiFieldError(
|
{...isRepeaterInputError(
|
||||||
formik,
|
'ekspedisi',
|
||||||
idx,
|
'plat_nomor',
|
||||||
'plat_nomor'
|
idx
|
||||||
)}
|
)}
|
||||||
readOnly={type === 'detail'}
|
readOnly={type === 'detail'}
|
||||||
className={{
|
className={{
|
||||||
@@ -809,10 +793,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
|||||||
value={ekspedisi.no_surat_jalan ?? ''}
|
value={ekspedisi.no_surat_jalan ?? ''}
|
||||||
onChange={formik.handleChange}
|
onChange={formik.handleChange}
|
||||||
onBlur={formik.handleBlur}
|
onBlur={formik.handleBlur}
|
||||||
{...getEkspedisiFieldError(
|
{...isRepeaterInputError(
|
||||||
formik,
|
'ekspedisi',
|
||||||
idx,
|
'no_surat_jalan',
|
||||||
'no_surat_jalan'
|
idx
|
||||||
)}
|
)}
|
||||||
readOnly={type === 'detail'}
|
readOnly={type === 'detail'}
|
||||||
className={{
|
className={{
|
||||||
@@ -848,7 +832,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
isError={isRepeaterInputError(
|
{...isRepeaterInputError(
|
||||||
'ekspedisi',
|
'ekspedisi',
|
||||||
'dokumen',
|
'dokumen',
|
||||||
idx
|
idx
|
||||||
@@ -867,10 +851,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
|||||||
value={ekspedisi.biaya_ekspedisi ?? ''}
|
value={ekspedisi.biaya_ekspedisi ?? ''}
|
||||||
onChange={formik.handleChange}
|
onChange={formik.handleChange}
|
||||||
onBlur={formik.handleBlur}
|
onBlur={formik.handleBlur}
|
||||||
{...getEkspedisiFieldError(
|
{...isRepeaterInputError(
|
||||||
formik,
|
'ekspedisi',
|
||||||
idx,
|
'biaya_ekspedisi',
|
||||||
'biaya_ekspedisi'
|
idx
|
||||||
)}
|
)}
|
||||||
readOnly={type === 'detail'}
|
readOnly={type === 'detail'}
|
||||||
className={{
|
className={{
|
||||||
@@ -883,10 +867,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
|||||||
disabled
|
disabled
|
||||||
onChange={formik.handleChange}
|
onChange={formik.handleChange}
|
||||||
onBlur={formik.handleBlur}
|
onBlur={formik.handleBlur}
|
||||||
{...getEkspedisiFieldError(
|
{...isRepeaterInputError(
|
||||||
formik,
|
'ekspedisi',
|
||||||
idx,
|
'biaya_ekspedisi_per_item',
|
||||||
'biaya_ekspedisi_per_item'
|
idx
|
||||||
)}
|
)}
|
||||||
name={`ekspedisi.${idx}.biaya_ekspedisi_per_item`}
|
name={`ekspedisi.${idx}.biaya_ekspedisi_per_item`}
|
||||||
value={
|
value={
|
||||||
@@ -910,10 +894,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
|||||||
value={ekspedisi.nama_sopir ?? ''}
|
value={ekspedisi.nama_sopir ?? ''}
|
||||||
onChange={formik.handleChange}
|
onChange={formik.handleChange}
|
||||||
onBlur={formik.handleBlur}
|
onBlur={formik.handleBlur}
|
||||||
{...getEkspedisiFieldError(
|
{...isRepeaterInputError(
|
||||||
formik,
|
'ekspedisi',
|
||||||
idx,
|
'nama_sopir',
|
||||||
'nama_sopir'
|
idx
|
||||||
)}
|
)}
|
||||||
readOnly={type === 'detail'}
|
readOnly={type === 'detail'}
|
||||||
className={{
|
className={{
|
||||||
|
|||||||
Reference in New Issue
Block a user