fix(frontend): handle data modal context correctly to update after deleting entries

CHANGELOG.md

@@ -22,6 +22,7 @@ The **need for configuration updates** is **marked bold**.
 ### Fixes
 
 - fixed invalid framwork policy in the bruno DTR setup ([#967](https://github.com/eclipse-tractusx/puris/pull/967))
+- Fixed Modal dialogs not updating when deleting entries for materials ([#984](https://github.com/eclipse-tractusx/puris/pull/984))
 
 ## v3.4.0
 

frontend/src/contexts/dataModalContext.tsx

@@ -161,27 +161,47 @@ export const DataModalProvider = ({ children, material }: DataModalProviderProps
                 {...state.demandDialogOptions}
                 onClose={() => dispatch({ type: 'demandDialogOptions', payload: { open: false, mode: state.demandDialogOptions.mode } })}
                 onSave={() => onSave('demand')}
+                onRemove={(deletedUuid: string) => {
+                    const updatedDemands = state.demands.filter(p => p.uuid !== deletedUuid);
+                    dispatch({ type: 'demands', payload: updatedDemands });
+                    onSave('demand');
+                }}
                 demand={state.demand}
                 demands={state.demands}
             />
             <PlannedProductionModal
                 {...state.productionDialogOptions}
                 onClose={() => dispatch({ type: 'productionDialogOptions', payload: { open: false, mode: state.productionDialogOptions.mode } })}
                 onSave={() => onSave('production')}
+                onRemove={(deletedUuid: string) => {
+                    const updatedProductions = state.productions.filter(p => p.uuid !== deletedUuid);
+                    dispatch({ type: 'productions', payload: updatedProductions });
+                    onSave('production');
+                }}
                 production={state.production}
                 productions={state.productions}
             />
             <DeliveryInformationModal
                 {...state.deliveryDialogOptions}
                 onClose={() => dispatch({ type: 'deliveryDialogOptions', payload: { ...state.deliveryDialogOptions, open: false } })}
                 onSave={() => onSave('delivery')}
+                onRemove={(deletedUuid: string) => {
+                    const updatedDeliveries = state.deliveries.filter(p => p.uuid !== deletedUuid);
+                    dispatch({ type: 'deliveries', payload: updatedDeliveries });
+                    onSave('delivery');
+                }}
                 delivery={state.delivery}
                 deliveries={state.deliveries}
             />
             <StockModal
                 {...state.stockDialogOptions}
                 onClose={() => dispatch({ type: 'stockDialogOptions', payload: {...state.stockDialogOptions, open: false } })}
                 onSave={() => onSave('stock')}
+                onRemove={(deletedUuid: string) => {
+                    const updatedStocks = state.stocks.filter(p => p.uuid !== deletedUuid);
+                    dispatch({ type: 'stocks', payload: updatedStocks });
+                    onSave('stock');
+                }}
                 stock={state.stock}
                 stocks={state.stocks}
             />

frontend/src/features/material-details/components/DeliveryInformationModal.tsx

@@ -244,6 +244,7 @@ type DeliveryInformationModalProps = {
     site: Site | null;
     onClose: () => void;
     onSave: () => void;
+    onRemove?: (deletedUuid: string) => void;
     delivery: Delivery | null;
     deliveries: Delivery[];
 };
@@ -255,6 +256,7 @@ export const DeliveryInformationModal = ({
     site,
     onClose,
     onSave,
+    onRemove,
     delivery,
     deliveries,
 }: DeliveryInformationModalProps) => {
@@ -314,8 +316,19 @@ export const DeliveryInformationModal = ({
         onClose();
     };
 
-    const handleDelete = (row: Delivery) => {
-        if (row.uuid) deleteDelivery(row.uuid).then(onSave);
+    const handleDelete = async (row: Delivery) => {
+        if (row.uuid) {
+            try {
+                await deleteDelivery(row.uuid);
+                onRemove?.(row.uuid);
+            } catch (error) {
+                notify({
+                    title: 'Error deleting delivery',
+                    description: 'Failed to delete the delivery',
+                    severity: 'error',
+                });
+            }
+        }
     };
 
     useEffect(() => {

frontend/src/features/material-details/components/DemandCategoryModal.tsx

@@ -145,12 +145,13 @@ type DemandCategoryModalProps = {
     mode: ModalMode;
     onClose: () => void;
     onSave: () => void;
+    onRemove?: (deletedUuid: string) => void;
 };
 
 const isValidDemand = (demand: Partial<Demand>) =>
     demand?.day && demand?.demandLocationBpns && demand?.quantity && demand.demandCategoryCode && demand?.measurementUnit && demand?.partnerBpnl;
 
-export const DemandCategoryModal = ({ open, mode, onClose, onSave, demand, demands }: DemandCategoryModalProps) => {
+export const DemandCategoryModal = ({ open, mode, onClose, onSave, onRemove, demand, demands }: DemandCategoryModalProps) => {
     const [temporaryDemand, setTemporaryDemand] = useState<Partial<Demand>>(demand ?? {});
     const { partners } = usePartners('material', temporaryDemand?.ownMaterialNumber ?? null);
     const { sites } = useSites();
@@ -197,8 +198,19 @@ export const DemandCategoryModal = ({ open, mode, onClose, onSave, demand, deman
         onClose();
     };
 
-    const handleDelete = (row: Demand) => {
-        if (row.uuid) deleteDemand(row.uuid).then(onSave);
+    const handleDelete = async (row: Demand) => {
+        if (row.uuid) {
+            try {
+                await deleteDemand(row.uuid);
+                onRemove?.(row.uuid);
+            } catch (error) {
+                notify({
+                    title: 'Error deleting demand',
+                    description: 'Failed to delete the demand',
+                    severity: 'error',
+                });
+            }
+        }
     };
 
     useEffect(() => {

frontend/src/features/material-details/components/PlannedProductionModal.tsx

@@ -131,6 +131,7 @@ type PlannedProductionModalProps = {
     mode: ModalMode;
     onClose: () => void;
     onSave: () => void;
+    onRemove?: (deletedUuid: string) => void;
     production: Partial<Production> | null;
     productions: Production[];
 };
@@ -143,7 +144,7 @@ const isValidProduction = (production: Partial<Production>) =>
     production.partner &&
     isValidOrderReference(production);
 
-export const PlannedProductionModal = ({ open, mode, onClose, onSave, production, productions }: PlannedProductionModalProps) => {
+export const PlannedProductionModal = ({ open, mode, onClose, onSave, onRemove, production, productions }: PlannedProductionModalProps) => {
     const [temporaryProduction, setTemporaryProduction] = useState<Partial<Production>>(production ?? {});
     const { partners } = usePartners('product', temporaryProduction?.material?.materialNumberSupplier ?? null);
     const { sites } = useSites();
@@ -188,8 +189,19 @@ export const PlannedProductionModal = ({ open, mode, onClose, onSave, production
             })
             .finally(onClose);
     };
-    const handleDelete = (row: Production) => {
-        if (row.uuid) deleteProduction(row.uuid).then(onSave);
+    const handleDelete = async (row: Production) => {
+        if (row.uuid) {
+            try {
+                await deleteProduction(row.uuid);
+                onRemove?.(row.uuid);
+            } catch (error) {
+                notify({
+                    title: 'Error deleting production',
+                    description: 'Failed to delete the production',
+                    severity: 'error',
+                });
+            }
+        }
     };
     useEffect(() => {
         if (production) setTemporaryProduction(production);

frontend/src/features/material-details/components/StockModal.tsx

@@ -141,14 +141,15 @@ type StockModalProps = {
     mode: ModalMode;
     onClose: () => void;
     onSave: () => void;
+    onRemove?: (deletedUuid: string) => void;
     stock: Partial<Stock> | null;
     stocks: Stock[];
     stockType: StockType;
 };
 const isValidStock = (stock: Partial<Stock>) =>
     stock && stock.quantity && stock.measurementUnit && stock.partner && stock.stockLocationBpns && stock.stockLocationBpna && isValidOrderReference(stock);
 
-export const StockModal = ({ open, mode, onClose, onSave, stock, stocks, stockType }: StockModalProps) => {
+export const StockModal = ({ open, mode, onClose, onSave, onRemove, stock, stocks, stockType }: StockModalProps) => {
     const [temporaryStock, setTemporaryStock] = useState<Partial<Stock>>(stock ?? {});
     const { partners } = usePartners(stockType, temporaryStock?.material?.ownMaterialNumber ?? null);
     const { sites } = useSites();
@@ -182,8 +183,19 @@ export const StockModal = ({ open, mode, onClose, onSave, stock, stocks, stockTy
             })
             .finally(onClose);
     };
-    const handleDelete = (row: Stock) => {
-        if (row.uuid) deleteStocks(stockType, row.uuid).then(onSave);
+    const handleDelete = async (row: Stock) => {
+        if (row.uuid) {
+            try {
+                await deleteStocks(stockType, row.uuid);
+                onRemove?.(row.uuid);
+            } catch (error) {
+                notify({
+                    title: 'Error deleting stock',
+                    description: 'Failed to delete the stock',
+                    severity: 'error',
+                });
+            }
+        }
     };
     useEffect(() => {
         if (stock) setTemporaryStock(stock);