gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-24 15:25:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE-Storyless): enhance MovementForm schema and validation, improve handling of product quantities and delivery costs

Browse Source
This commit is contained in:
rstubryan
2025-11-02 21:33:38 +07:00
parent 901b61a172
commit d793824520
2 changed files with 98 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/inventory/movement/form/MovementForm.schema.ts
+56 -8
View File
@@ -1,34 +1,82 @@
import * as Yup from 'yup'; import * as Yup from 'yup';
import { Movement } from '@/types/api/inventory/movement'; import { Movement } from '@/types/api/inventory/movement';
type MovementFormSchemaType = {
transfer_reason: string;
transfer_date: string;
source_warehouse?: {
value: number;
label: string;
area?: string;
location?: string;
} | null;
source_warehouse_id: number;
destination_warehouse?: {
value: number;
label: string;
area?: string;
location?: string;
} | null;
destination_warehouse_id: number;
products: {
product?: {
value: number;
label: string;
} | null;
product_id: number;
product_qty: number | string;
}[];
deliveries: {
delivery_cost?: number | string;
delivery_cost_per_item?: number | string;
document?: File | string | null;
document_path?: string | null;
driver_name: string;
vehicle_plate: string;
supplier?: {
value: number;
label: string;
} | null;
supplier_id: number;
products: {
product?: {
value: number;
label: string;
} | null;
product_id: number;
product_qty: number | string;
}[];
}[];
};
export type ProductSchema = { export type ProductSchema = {
product: { product?: {
value: number; value: number;
label: string; label: string;
} | null; } | null;
product_id: number; product_id: number;
product_qty: number; product_qty: number | string;
}; };
export type DeliverySchema = { export type DeliverySchema = {
delivery_cost?: number | undefined; delivery_cost?: number | string;
delivery_cost_per_item?: number | undefined; delivery_cost_per_item?: number | string;
document?: File | string | null; document?: File | string | null;
document_path?: string | null; document_path?: string | null;
driver_name: string; driver_name: string;
vehicle_plate: string; vehicle_plate: string;
supplier: { supplier?: {
value: number; value: number;
label: string; label: string;
} | null; } | null;
supplier_id: number; supplier_id: number;
products: { products: {
product: { product?: {
value: number; value: number;
label: string; label: string;
} | null; } | null;
product_id: number; product_id: number;
product_qty: number; product_qty: number | string;
}[]; }[];
}; };
@@ -102,7 +150,7 @@ const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
.required('Produk wajib diisi!'), .required('Produk wajib diisi!'),
}); });
export const MovementFormSchema = Yup.object({ export const MovementFormSchema: Yup.ObjectSchema<MovementFormSchemaType> = Yup.object({
transfer_reason: Yup.string().required('Alasan transfer wajib diisi!'), transfer_reason: Yup.string().required('Alasan transfer wajib diisi!'),
transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'), transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'),
source_warehouse: Yup.object({ source_warehouse: Yup.object({
src/components/pages/inventory/movement/form/MovementForm.tsx
+42 -28
View File
@@ -173,8 +173,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
} }
return { return {
delivery_cost: d.delivery_cost ?? 0, delivery_cost: parseInt((d.delivery_cost || '').toString()) || 0,
delivery_cost_per_item: d.delivery_cost_per_item ?? 0, delivery_cost_per_item:
parseInt((d.delivery_cost_per_item || '').toString()) || 0,
document_index: documentIndex, document_index: documentIndex,
document_path: d.document_path, document_path: d.document_path,
driver_name: d.driver_name, driver_name: d.driver_name,
@@ -182,7 +183,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
supplier_id: d.supplier_id, supplier_id: d.supplier_id,
products: d.products.map((p) => ({ products: d.products.map((p) => ({
product_id: p.product_id, product_id: p.product_id,
product_qty: p.product_qty, product_qty: parseInt(p.product_qty.toString()) || 0,
})), })),
}; };
}); });
@@ -194,7 +195,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
destination_warehouse_id: values.destination_warehouse_id, destination_warehouse_id: values.destination_warehouse_id,
products: values.products.map((p) => ({ products: values.products.map((p) => ({
product_id: p.product_id, product_id: p.product_id,
product_qty: p.product_qty, product_qty: parseInt(p.product_qty.toString()) || 0,
})), })),
deliveries: deliveriesPayload, deliveries: deliveriesPayload,
}; };
@@ -304,7 +305,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
{ {
product: null, product: null,
product_id: 0, product_id: 0,
product_qty: 0, product_qty: '',
}, },
]; ];
formik.setFieldValue('products', newProducts); formik.setFieldValue('products', newProducts);
@@ -339,8 +340,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
formik.setFieldValue('deliveries', [ formik.setFieldValue('deliveries', [
...(formik.values.deliveries || []), ...(formik.values.deliveries || []),
{ {
delivery_cost: undefined, delivery_cost: '',
delivery_cost_per_item: undefined, delivery_cost_per_item: '',
document: null, document: null,
driver_name: '', driver_name: '',
vehicle_plate: '', vehicle_plate: '',
@@ -350,7 +351,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
{ {
product: null, product: null,
product_id: 0, product_id: 0,
product_qty: 0, product_qty: '',
}, },
], ],
}, },
@@ -392,7 +393,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
const delivery = formik.values.deliveries?.[idx]; const delivery = formik.values.deliveries?.[idx];
if (delivery) { if (delivery) {
const productQty = delivery.products.reduce( const productQty = delivery.products.reduce(
(sum, p) => sum + p.product_qty, (sum, p) => sum + (parseInt(p.product_qty.toString()) || 0),
0 0
); );
if (productQty > 0 && value > 0) { if (productQty > 0 && value > 0) {
@@ -416,7 +417,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
const delivery = formik.values.deliveries?.[idx]; const delivery = formik.values.deliveries?.[idx];
if (delivery) { if (delivery) {
const productQty = delivery.products.reduce( const productQty = delivery.products.reduce(
(sum, p) => sum + p.product_qty, (sum, p) => sum + (parseInt(p.product_qty.toString()) || 0),
0 0
); );
if (productQty > 0 && value > 0) { if (productQty > 0 && value > 0) {
@@ -690,36 +691,38 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
useEffect(() => { useEffect(() => {
formik.values.deliveries?.forEach((delivery, idx) => { formik.values.deliveries?.forEach((delivery, idx) => {
const productQty = delivery.products.reduce( const productQty = delivery.products.reduce(
(sum, p) => sum + p.product_qty, (sum, p) => sum + (parseInt(p.product_qty.toString()) || 0),
0 0
); );
if ( const deliveryCost =
delivery.delivery_cost && parseInt((delivery.delivery_cost || '').toString()) || 0;
delivery.delivery_cost > 0 && const deliveryCostPerItem =
productQty > 0 parseInt((delivery.delivery_cost_per_item || '').toString()) || 0;
) {
const perItem = delivery.delivery_cost / productQty; if (deliveryCost > 0 && productQty > 0) {
if (Math.abs((delivery.delivery_cost_per_item || 0) - perItem) > 0.01) { const perItem = deliveryCost / productQty;
if (Math.abs(deliveryCostPerItem - perItem) > 0.01) {
formik.setFieldValue( formik.setFieldValue(
`deliveries.${idx}.delivery_cost_per_item`, `deliveries.${idx}.delivery_cost_per_item`,
perItem perItem
); );
} }
} else if ( } else if (deliveryCostPerItem > 0 && productQty > 0) {
delivery.delivery_cost_per_item && const totalCost = deliveryCostPerItem * productQty;
delivery.delivery_cost_per_item > 0 && if (Math.abs(deliveryCost - totalCost) > 0.01) {
productQty > 0
) {
const totalCost = delivery.delivery_cost_per_item * productQty;
if (Math.abs((delivery.delivery_cost || 0) - totalCost) > 0.01) {
formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost); formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
} }
} }
}); });
}, [ }, [
formik.values.deliveries formik.values.deliveries
?.map((d) => d.products.reduce((sum, p) => sum + p.product_qty, 0)) ?.map((d) =>
d.products.reduce(
(sum, p) => sum + (parseInt(p.product_qty.toString()) || 0),
0
)
)
.join(','), .join(','),
]); ]);
@@ -765,6 +768,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
required required
label='Alasan Transfer' label='Alasan Transfer'
name='transfer_reason' name='transfer_reason'
placeholder='Masukkan alasan transfer...'
value={formik.values.transfer_reason} value={formik.values.transfer_reason}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
@@ -802,6 +806,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<SelectInput <SelectInput
required required
label='Gudang' label='Gudang'
placeholder='Pilih gudang asal...'
value={formik.values.source_warehouse} value={formik.values.source_warehouse}
onChange={(val) => { onChange={(val) => {
formik.setFieldTouched('source_warehouse', true); formik.setFieldTouched('source_warehouse', true);
@@ -869,6 +874,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<SelectInput <SelectInput
required required
label='Gudang' label='Gudang'
placeholder='Pilih gudang tujuan...'
value={formik.values.destination_warehouse} value={formik.values.destination_warehouse}
onChange={(val) => { onChange={(val) => {
formik.setFieldTouched('destination_warehouse', true); formik.setFieldTouched('destination_warehouse', true);
@@ -1055,8 +1061,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
} }
placeholder={ placeholder={
!formik.values.source_warehouse_id !formik.values.source_warehouse_id
? 'Pilih gudang asal terlebih dahulu' ? 'Pilih gudang asal terlebih dahulu...'
: 'Pilih produk' : 'Pilih produk...'
} }
isClearable isClearable
{...isRepeaterInputError( {...isRepeaterInputError(
@@ -1074,6 +1080,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<NumberInput <NumberInput
required required
name={`products.${idx}.product_qty`} name={`products.${idx}.product_qty`}
placeholder='Masukkan kuantitas...'
value={product.product_qty ?? ''} value={product.product_qty ?? ''}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
@@ -1294,6 +1301,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<td> <td>
<SelectInput <SelectInput
required required
placeholder='Pilih produk...'
value={delivery.products[0]?.product ?? undefined} value={delivery.products[0]?.product ?? undefined}
onChange={(val) => { onChange={(val) => {
formik.setFieldTouched( formik.setFieldTouched(
@@ -1334,6 +1342,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<NumberInput <NumberInput
required required
name={`deliveries.${idx}.products.0.product_qty`} name={`deliveries.${idx}.products.0.product_qty`}
placeholder='Masukkan kuantitas...'
value={delivery.products[0]?.product_qty ?? ''} value={delivery.products[0]?.product_qty ?? ''}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
@@ -1364,6 +1373,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<td> <td>
<SelectInput <SelectInput
required required
placeholder='Pilih supplier...'
value={delivery.supplier} value={delivery.supplier}
onChange={(val) => { onChange={(val) => {
formik.setFieldTouched( formik.setFieldTouched(
@@ -1403,6 +1413,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<TextInput <TextInput
required required
name={`deliveries.${idx}.vehicle_plate`} name={`deliveries.${idx}.vehicle_plate`}
placeholder='Masukkan plat nomor...'
value={delivery.vehicle_plate} value={delivery.vehicle_plate}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
@@ -1480,6 +1491,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<NumberInput <NumberInput
required required
name={`deliveries.${idx}.delivery_cost`} name={`deliveries.${idx}.delivery_cost`}
placeholder='Masukkan biaya pengiriman...'
value={delivery.delivery_cost || ''} value={delivery.delivery_cost || ''}
onChange={handleDeliveryCostChangeWrapper(idx)} onChange={handleDeliveryCostChangeWrapper(idx)}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
@@ -1504,6 +1516,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<NumberInput <NumberInput
required required
name={`deliveries.${idx}.delivery_cost_per_item`} name={`deliveries.${idx}.delivery_cost_per_item`}
placeholder='Masukkan biaya per item...'
value={delivery.delivery_cost_per_item || ''} value={delivery.delivery_cost_per_item || ''}
onChange={handleDeliveryCostPerItemChangeWrapper( onChange={handleDeliveryCostPerItemChangeWrapper(
idx idx
@@ -1530,6 +1543,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<TextInput <TextInput
required required
name={`deliveries.${idx}.driver_name`} name={`deliveries.${idx}.driver_name`}
placeholder='Masukkan nama sopir...'
value={delivery.driver_name} value={delivery.driver_name}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}