feat(FE): adding delete per product row delivery order

This commit is contained in:
randy-ar
2026-01-20 11:06:53 +07:00
parent 41bf12846d
commit f69fc08ef8
4 changed files with 57 additions and 14 deletions
@@ -582,6 +582,30 @@ const MarketingForm = ({
},
[addDOModal]
);
const handleDeleteDO = useCallback(
async (id: number) => {
setDeliveryOrderValues((prev) =>
prev.map((product) =>
product.id === id
? {
...product,
...{
unit_price: '',
total_weight: '',
qty: '',
avg_weight: '',
total_price: '',
delivery_date: '',
},
}
: product
)
);
addDOModal.closeModal();
setSelectedDeliveryProduct(null);
},
[addDOModal]
);
useEffect(() => {
formik.setFieldValue('delivery_order', deliveryOrderValues);
@@ -686,6 +710,7 @@ const MarketingForm = ({
formType={formType}
data={deliveryOrderValues}
onEdit={handleEditDO}
onDelete={handleDeleteDO}
onAddProductClick={handleAddDOClick}
/>
</Card>
@@ -106,6 +106,7 @@ const DeliveryOrderProductForm = ({
await onUpdateForm?.(values.marketing_product_id as number, values);
}
handleResetForm();
setSelectedProduct(null);
},
});
@@ -124,7 +125,7 @@ const DeliveryOrderProductForm = ({
marketing_product: undefined,
},
});
setSelectedProduct(null);
// setSelectedProduct(null);
};
const handleBlurField = (field: string) => {
@@ -16,6 +16,7 @@ type DeliveryOrderProductTableProps = {
data: DeliveryOrderProductFormValues[];
formType?: 'add' | 'edit' | 'add_deliver' | 'edit_deliver';
onEdit: (id: number) => void;
onDelete: (id: number) => void;
onAddProductClick: () => void;
};
@@ -23,10 +24,13 @@ const DeliveryOrderProductTable = ({
data,
formType,
onEdit,
onDelete,
onAddProductClick,
}: DeliveryOrderProductTableProps) => {
const onEditRef = useRef(onEdit);
onEditRef.current = onEdit;
const onDeleteRef = useRef(onDelete);
onDeleteRef.current = onDelete;
const canAddData = data.filter((item) => !Boolean(item.qty));
@@ -144,16 +148,29 @@ const DeliveryOrderProductTable = ({
<div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
<>
{props.row.original.qty && (
<Button
color='warning'
className='px-2 py-1 text-sm'
onClick={() =>
onEditRef.current(props.row.original.id as number)
}
type='button'
>
<Icon icon='mdi:edit' width={16} height={16} /> Edit
</Button>
<>
<Button
color='warning'
className='px-2 py-1 text-sm'
onClick={() =>
onEditRef.current(props.row.original.id as number)
}
type='button'
>
<Icon icon='mdi:edit' width={16} height={16} /> Edit
</Button>
<Button
color='error'
className='px-2 py-1 text-sm'
onClick={() =>
onDeleteRef.current(props.row.original.id as number)
}
type='button'
disabled={!!props.row.original.do_number}
>
<Icon icon='mdi:delete' width={16} height={16} /> Hapus
</Button>
</>
)}
{!props.row.original.qty && '-'}
</>
@@ -111,7 +111,7 @@ const SalesOrderProductTable = ({
5
) +
' ' +
row.original.uom,
(row.original.uom ?? ''),
},
{
accessorFn: (row: SalesOrderProductFormValues) =>
@@ -135,7 +135,7 @@ const SalesOrderProductTable = ({
onClick={() => onEditRef.current(props.row.original.id as number)}
type='button'
>
<Icon icon='mdi:pencil' width={16} height={16} />
<Icon icon='mdi:pencil' width={16} height={16} /> Edit
</Button>
<Button
color='error'
@@ -145,7 +145,7 @@ const SalesOrderProductTable = ({
}
type='button'
>
<Icon icon='mdi:trash' width={16} height={16} />
<Icon icon='mdi:trash' width={16} height={16} /> Hapus
</Button>
</div>
),