bib confirm loading

src/pages/Payment/Search_GLD/DataGrid.js

@@ -13,9 +13,10 @@ import { getPaymentMethodByCode} from "auth/utils";
 import {
     Checkbox,
     Dialog, DialogTitle, DialogContent, DialogActions,
-    Button,Typography
+    Button, Typography
     // MenuItem
 } from '@mui/material';
+import LoadingButton from '@mui/lab/LoadingButton';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, applySearch}) {
@@ -26,6 +27,7 @@ export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, a
     const [bib, setBib] = React.useState();
     const [appNo, setAppNo] = React.useState();
     const [refreshTrigger, setRefreshTrigger] = React.useState(0);
+    const [bibLoading, setBibLoading] = React.useState(false);
 
     const forceRefresh = () => {
         setRefreshTrigger(prev => prev + 1);
@@ -55,23 +57,43 @@ export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, a
         navigate('/paymentPage/details/' + params.row.id);
     };
 
+    const finishBibRequest = () => {
+        setBibLoading(false);
+    };
+
     const doBIB = () => {
-        setIsPopUp(false);
-        // console.log(refreshTrigger)
+        if (bibLoading) {
+            return;
+        }
+        setBibLoading(true);
         HttpUtils.post({
             url: PAYMENT_BIB + "/" + bibId,
             onSuccess: function () {
-                forceRefresh()
-            }
+                setIsPopUp(false);
+                forceRefresh();
+                finishBibRequest();
+            },
+            onFail: finishBibRequest,
+            onError: finishBibRequest,
         });
-    }
+    };
     
     const popUPBib = (id, bibFlag, appNo) => {
-        setBibId(id)
-        setBib(bibFlag)
-        setAppNo(appNo)
+        if (bibLoading) {
+            return;
+        }
+        setBibId(id);
+        setBib(bibFlag);
+        setAppNo(appNo);
         setIsPopUp(true);
-    }
+    };
+
+    const closeBibDialog = () => {
+        if (bibLoading) {
+            return;
+        }
+        setIsPopUp(false);
+    };
 
     const columns = [
         {
@@ -140,7 +162,13 @@ export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, a
             headerName: 'BIB',
             width: 150,
             renderCell: (params) => {
-                return <Checkbox checked={params.row.bib} onChange={() => {popUPBib(params.row.id, params.row.bib, params.row.appNos)}}/>;
+                return (
+                    <Checkbox
+                        checked={params.row.bib}
+                        disabled={bibLoading}
+                        onChange={() => popUPBib(params.row.id, params.row.bib, params.row.appNos)}
+                    />
+                );
             }
         },
         {
@@ -184,7 +212,7 @@ export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, a
             <div>
                 <Dialog
                     open={isPopUp}
-                    onClose={() => setIsPopUp(false)}
+                    onClose={closeBibDialog}
                     PaperProps={{
                         sx: {
                             minWidth: '40vw',
@@ -198,8 +226,12 @@ export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, a
                         <Typography variant="h5" style={{ padding: '16px' }}>{bib?"Cancel Bank-in-bank?":"Set "+appNo+" as Bank-in-bank?"}</Typography>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
-                        <Button onClick={() => doBIB()}><Typography variant="h5">Confirm</Typography></Button>
+                        <Button onClick={closeBibDialog} disabled={bibLoading}>
+                            <Typography variant="h5">Cancel</Typography>
+                        </Button>
+                        <LoadingButton onClick={doBIB} loading={bibLoading} disabled={bibLoading}>
+                            <Typography variant="h5">Confirm</Typography>
+                        </LoadingButton>
                     </DialogActions>
                 </Dialog>
             </div>