published loading

src/pages/PublicNotice/Search_GLD/DataGrid.js

@@ -8,6 +8,7 @@ import {
     Stack,
     Dialog, DialogTitle, DialogContent, DialogActions,
 } from '@mui/material';
+import LoadingButton from '@mui/lab/LoadingButton';
 import { GET_PUBLIC_NOTICE_LIST, SET_PUBLIC_NOTICE_STATUS_PUBLISH_BULK } from "utils/ApiPathConst";
 import * as HttpUtils from "utils/HttpUtils";
 import * as DateUtils from "utils/DateUtils";
@@ -29,6 +30,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
     const [selectedRowItems, setSelectedRowItems] = React.useState([]);
     const [isConfirmPopUp, setIsConfirmPopUp] = React.useState(false);
     const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
+    const [publishLoading, setPublishLoading] = React.useState(false);
 
     const [reload, setReload] = React.useState(new Date());
 
@@ -39,6 +41,12 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
         set_searchCriteria(searchCriteria);
     }, [searchCriteria]);
 
+    React.useEffect(() => {
+        if (!isConfirmPopUp) {
+            setPublishLoading(false);
+        }
+    }, [isConfirmPopUp]);
+
 
     function genIssueNo(params) {
         const issueNo = params.row.issueYear + " Vol. " + FormatUtils.zeroPad(params.row.issueVolume, 3) + ", No. " + FormatUtils.zeroPad(params.row.issueNo, 2) + ", " + DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)")
@@ -158,26 +166,36 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
     }
 
     const doPublish = () => {
-        setIsConfirmPopUp(false);
+        if (publishLoading) return;
+
         let appIdList = [];
         const datas = rows?.filter((row) =>
             selectedRowItems.includes(row.id)
         );
-        // console.log(datas)
         for (var i = 0; i < datas?.length; i++) {
             appIdList.push(datas[i].id);
         }
         if (appIdList.length < 1) {
+            setIsConfirmPopUp(false);
             setIsWarningPopUp(true);
         } else {
+            setPublishLoading(true);
             HttpUtils.post({
                 url: SET_PUBLIC_NOTICE_STATUS_PUBLISH_BULK,
                 params: {
                     ids: appIdList
                 },
                 onSuccess: () => {
+                    setPublishLoading(false);
+                    setIsConfirmPopUp(false);
                     setReload(new Date());
                     notifyActionSuccess("Action Success!")
+                },
+                onFail: () => {
+                    setPublishLoading(false);
+                },
+                onError: () => {
+                    setPublishLoading(false);
                 }
             });
         }
@@ -190,6 +208,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
                 <Grid container direction="row" justifyContent="flex-start" alignItems="center" sx={{ p: 1 }} >
                     <Button
                         variant="contained"
+                        disabled={publishLoading}
                         onClick={() => setIsConfirmPopUp(true)}
                     >
                         Published
@@ -228,7 +247,10 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
         <div>
             <Dialog
                 open={isConfirmPopUp}
-                onClose={() => setIsConfirmPopUp(false)}
+                onClose={() => {
+                    if (publishLoading) return;
+                    setIsConfirmPopUp(false);
+                }}
                 PaperProps={{
                     sx: {
                         minWidth: '40vw',
@@ -248,15 +270,24 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
                     </Stack>
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={() => setIsConfirmPopUp(false)} aria-label={intl.formatMessage({ id: 'close' })}>
+                    <Button
+                        onClick={() => setIsConfirmPopUp(false)}
+                        disabled={publishLoading}
+                        aria-label={intl.formatMessage({ id: 'close' })}
+                    >
                         <Typography variant="h5">
                             <FormattedMessage id="close" />
                         </Typography></Button>
 
-                    <Button onClick={() => doPublish()} aria-label={intl.formatMessage({ id: 'confirm' })}>
-                        <Typography variant="h5">
+                    <LoadingButton
+                        onClick={() => doPublish()}
+                        loading={publishLoading}
+                        aria-label={intl.formatMessage({ id: 'confirm' })}
+                    >
+                        <Typography variant="h5" component="span">
                             <FormattedMessage id="confirm" />
-                        </Typography></Button>
+                        </Typography>
+                    </LoadingButton>
                 </DialogActions>
             </Dialog>
         </div>