Merge branch 'feature/MS-81' into 'develop'

MS-81/add loading to export buttons

Closes MS-81

See merge request !497

src/shared/api/main-order.ts

@@ -182,34 +182,43 @@ export function useOrderStatusCounts({
 }
 
 
-export const exportOrders = (startDate: Date | null, endDate: Date | null, orderStatus: string | null) => {
-
-  axiosInstance.get(endpoints.order.exportByDateRange, { responseType: 'blob', params: { startDate, endDate, orderStatus } })
-    .then((response) => {
-      const link = document.createElement("a");
-      link.href = window.URL.createObjectURL(response.data);
-      link.download = `orders_${formatDateToString(new Date())}.csv`;
-      link.click();
+export const exportOrders = (startDate: Date | null, endDate: Date | null, orderStatus: string | null): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    axiosInstance.get(endpoints.order.exportByDateRange, { 
+      responseType: 'blob', 
+      params: { startDate, endDate, orderStatus } 
     })
-    .catch((error) => {
-      console.error("Error exporting orders:", error);
-      throw error;
-    });
-}
-
-export const exportOrdersProducts = (startDate: Date | null, endDate: Date | null, orderStatus: string | null) => {
+      .then((response) => {
+        const link = document.createElement("a");
+        link.href = window.URL.createObjectURL(response.data);
+        link.download = `orders_${formatDateToString(new Date())}.csv`;
+        link.click();
+        resolve(); 
+      })
+      .catch((error) => {
+        console.error("Error exporting orders:", error);
+        reject(error);  
+      });
+  });
+};
 
-  axiosInstance.get(endpoints.order.exportordersProduct, { responseType: 'blob', params: { startDate, endDate, orderStatus } })
-    .then((response) => {
-      const link = document.createElement("a");
-      link.href = window.URL.createObjectURL(response.data);
-      link.download = `orders_products_${formatDateToString(new Date())}.csv`;
-      link.click();
+export const exportOrdersProducts = (startDate: Date | null, endDate: Date | null, orderStatus: string | null): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    axiosInstance.get(endpoints.order.exportordersProduct, { 
+      responseType: 'blob', 
+      params: { startDate, endDate, orderStatus } 
     })
-    .catch((error) => {
-      console.error("Error exporting orders:", error);
-      throw error;
-    });
-}
-
+      .then((response) => {
+        const link = document.createElement("a");
+        link.href = window.URL.createObjectURL(response.data);
+        link.download = `orders_products_${formatDateToString(new Date())}.csv`;
+        link.click();
+        resolve();  
+      })
+      .catch((error) => {
+        console.error("Error exporting orders products:", error);
+        reject(error);  
+      });
+  });
+};
 

src/shared/components/ConditionalComponent.tsx

+import { Fragment } from "react";
+
+type PropsType = {
+    isValid: boolean;
+    defaultComponent?: React.ReactNode | JSX.Element;
+    children: React.ReactNode | JSX.Element;
+}
+export default function ConditionalComponent({ isValid, defaultComponent, children }: PropsType): JSX.Element {
+    return (
+        <Fragment>
+            {isValid ? children : defaultComponent || null}
+        </Fragment>
+    )
+}
\ No newline at end of file

src/shared/sections/order/view/order-list-view.tsx

@@ -26,6 +26,7 @@ import { Alert, CircularProgress, Grid, Snackbar, TableCell, TableRow } from "@m
 import { exportOrders, exportOrdersProducts, updateOrderStatus, useDeleteOrder, useDeleteOrderList, useOrderStatusCounts, useSearchOrders } from "@/shared/api/main-order";
 import { OrderStatus, orderStatusLabels, OrderStatusList, OrderWithClientDetails, } from "@/contexts/types/main-order";
 import { getlastOrderHistory } from "@/shared/api/order";
+import ConditionalComponent from "@/shared/components/ConditionalComponent";
 
 interface IOrderStatusOption {
   value: string;
@@ -55,6 +56,8 @@ const TABLE_HEAD = [
 
 export default function OrderListView() {
   const { enqueueSnackbar } = useSnackbar();
+  const [loadingExportOrder, setLoadingExportOrder] = useState(false);
+  const [loadingExportProduct, setLoadingExportProduct] = useState(false);
   const table = useTable({ defaultOrderBy: "id", defaultOrder: "desc" });
 
   const settings = useSettingsContext();
@@ -364,11 +367,37 @@ export default function OrderListView() {
   );
   
   const downloadOrdersCSV = () => {
-      exportOrders(filters.startDate, filters.endDate, filters.status);
-    };
-    const downloadProductsCSV = () => {
-      exportOrdersProducts(filters.startDate, filters.endDate, filters.status);
-    };
+
+    if (filters.startDate === null || filters.endDate === null) {
+      setSnackbarMessage('Veuillez sélectionner les dates de début et de fin.');
+      setSnackbarOpen(true);  
+      setSnackbarSeverity("warning");
+      return;  
+    }
+
+    setLoadingExportOrder(true);  
+
+    exportOrders(filters.startDate, filters.endDate, filters.status)
+      .then(() => {
+        setLoadingExportOrder(false);  
+      })
+      .catch(() => {
+        setLoadingExportOrder(false);  
+      });
+  };
+
+
+
+  const downloadProductsCSV = () => {
+    setLoadingExportProduct(true);  
+    exportOrdersProducts(filters.startDate, filters.endDate, filters.status)
+      .then(() => {
+        setLoadingExportProduct(false);  
+      })
+      .catch(() => {
+        setLoadingExportProduct(false);  
+      });
+  };
   
 
   return (
@@ -398,25 +427,49 @@ export default function OrderListView() {
             </Button>
           }
         />
-<Grid
-  container
-  justifyContent="flex-end"
-  style={{ marginBottom: "16px" }}
->
-  <Button 
-    variant="contained" 
-    onClick={downloadOrdersCSV} 
-    style={{ marginRight: "8px" }} // Adds space between buttons
+<Grid container justifyContent="flex-end" sx={{ mb: 2 }}>
+  <ConditionalComponent
+    isValid={!loadingExportOrder}
+    defaultComponent={
+      <Button
+        variant="contained"
+        disabled
+        sx={{ mr: 1 }}
+      >
+        <CircularProgress size={24} sx={{ color: "white" }} />
+      </Button>
+    }
   >
-    Exporter les commandes
-  </Button>
-  
-  <Button variant="contained" onClick={downloadProductsCSV}>
-    Exporter les produits
-  </Button>
+    <Button
+      variant="contained"
+      onClick={downloadOrdersCSV}
+      sx={{ mr: 1 }}
+    >
+      Exporter les commandes
+    </Button>
+  </ConditionalComponent>
+
+
+  <ConditionalComponent
+    isValid={!loadingExportProduct}
+    defaultComponent={
+      <Button
+        variant="contained"
+        disabled
+      >
+        <CircularProgress size={24} sx={{ color: "white" }} />
+      </Button>
+    }
+  >
+    <Button
+      variant="contained"
+      onClick={downloadProductsCSV}
+    >
+      Exporter les produits
+    </Button>
+  </ConditionalComponent>
 </Grid>
 
-
         <Card>
 
           <Tabs