From df0ebe5c8233026da896e6d8f8dcaa0dffe27bfc Mon Sep 17 00:00:00 2001
From: Tb Fajri <tubagus@sismedika.com>
Date: Wed, 17 Jan 2024 14:49:46 +0700
Subject: [PATCH] tambah loading export

---
 frontend/client-portal/src/@types/table.ts           |  1 +
 frontend/client-portal/src/components/Table.tsx      | 12 ++++++++----
 .../client-portal/src/pages/AlarmCenter/List.tsx     |  5 ++++-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/client-portal/src/@types/table.ts b/frontend/client-portal/src/@types/table.ts
index 6acf96d9..f01ed4ea 100644
--- a/frontend/client-portal/src/@types/table.ts
+++ b/frontend/client-portal/src/@types/table.ts
@@ -126,5 +126,6 @@ export type TableListProps<DataType> = {
     status: string;
     handleExportReport: (event: FormEvent<HTMLFormElement>) => void;
   };
+  exportLoading?: boolean;
 };
 /* -------------------------------------------------------------------------- */
diff --git a/frontend/client-portal/src/components/Table.tsx b/frontend/client-portal/src/components/Table.tsx
index 9aa6d58d..ebe4498d 100644
--- a/frontend/client-portal/src/components/Table.tsx
+++ b/frontend/client-portal/src/components/Table.tsx
@@ -28,6 +28,7 @@ import BaseTablePagination from './BaseTablePagination';
 import { Download, Search as SearchIcon } from '@mui/icons-material';
 /* ---------------------------------- types --------------------------------- */
 import { DivisionDataProps, StatusDataProps, TableListProps } from '../@types/table';
+import { LoadingButton } from '@mui/lab';
 
 export default function Table<T>({
   headCells,
@@ -42,6 +43,7 @@ export default function Table<T>({
   filterEndDate,
   searchs,
   exportReport,
+  exportLoading,
 }: TableListProps<T>) {
   /* ------------------------------- handle sort ------------------------------ */
   const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
@@ -308,16 +310,18 @@ export default function Table<T>({
           {exportReport && exportReport.useExport ? (
             <Grid item xs={12} lg={2} xl={2}>
               <FormControl fullWidth>
-                <Button
+                <LoadingButton
+                  id="upload-button"
                   variant="contained"
-                  sx={{ p: 2 }}
+                  startIcon={<Download />}
+                  sx={{ p: 1.8 }}
                   onClick={() => exportReport.handleExportReport()}
+                  loading={exportLoading}
                 >
-                  <Download />
                   <Typography variant="inherit" sx={{ marginLeft: 1 }}>
                     Export
                   </Typography>
-                </Button>
+                </LoadingButton>
               </FormControl>
             </Grid>
           ) : null}
diff --git a/frontend/client-portal/src/pages/AlarmCenter/List.tsx b/frontend/client-portal/src/pages/AlarmCenter/List.tsx
index f6995a38..1153f114 100644
--- a/frontend/client-portal/src/pages/AlarmCenter/List.tsx
+++ b/frontend/client-portal/src/pages/AlarmCenter/List.tsx
@@ -194,7 +194,7 @@ export default function List() {
   const handleExportReport = async () => {
     
     var filter = Object.fromEntries([...searchParams.entries()]);
-
+    setIsLoading(true)
     await axios
       .get(corporateValue + '/claims/exportAlrmCenter/'+(startDateValue ? startDateValue : 'all')+'/'+(endDateValue ? endDateValue : 'all'), { params: filter })
       .then((res) => {
@@ -202,6 +202,7 @@ export default function List() {
           variant: 'success',
           anchorOrigin: { horizontal: 'right', vertical: 'top' },
         });
+        setIsLoading(false)
 
         document.location.href = res.data.data.file_url;
       })
@@ -210,6 +211,7 @@ export default function List() {
           variant: 'error',
           anchorOrigin: { horizontal: 'right', vertical: 'top' },
         })
+        
       );
   };
   const exportReport = {
@@ -332,6 +334,7 @@ export default function List() {
         filterStartDate={filterStartDate}
         filterEndDate={filterEndDate}
         exportReport={exportReport}
+        exportLoading={isLoading}
       />
     </Stack>
   );