From 3cb6b5d94a3fb97987046364f7c21295a6cf0115 Mon Sep 17 00:00:00 2001
From: anna <anna.ho@2fi-solutions.com.hk>
Date: Thu, 22 Feb 2024 17:29:11 +0800
Subject: [PATCH] add please wait

---
 src/pages/Setting/DrImport/index.js | 36 +++++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/pages/Setting/DrImport/index.js b/src/pages/Setting/DrImport/index.js
index 033649c..cbbc3bf 100644
--- a/src/pages/Setting/DrImport/index.js
+++ b/src/pages/Setting/DrImport/index.js
@@ -1,6 +1,7 @@
 
 import * as React from "react";
 import * as HttpUtils from "utils/HttpUtils";
+import * as DateUtils from "utils/DateUtils";
 import * as UrlUtils from "utils/ApiPathConst";
 
 import {
@@ -20,6 +21,7 @@ const Index = () => {
     const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
     const [warningText, setWarningText] = React.useState("");
     const [resultStr, setResultStr] = React.useState("");
+    const [wait, setWait] = React.useState(false);
 
     const intl = useIntl();
 
@@ -37,7 +39,9 @@ const Index = () => {
 
     const readFile = (event) => {
         let file = event.target.files[0];
+        setWait(true);
         if (file) {
+            
             if (file.name.toLowerCase().substr(file.name.length - 5).includes(".xlsx")
             ) {
                 HttpUtils.postWithFiles({
@@ -45,20 +49,27 @@ const Index = () => {
                     params:null,
                     files: [event.target.files[0]],
                     onSuccess: function (responData) {
+                        setWait(false);
                         if(responData?.msg){
-                            setResultStr(<><span style={{"color": "red"}}>Error</span><br/><span style={{"whiteSpace": "pre-line"}}>{responData?.msg}</span></>)
+                            setResultStr(<>{DateUtils.datetimeStr(new Date())}<br/><span style={{"color": "red"}}>Error</span><br/><span style={{"whiteSpace": "pre-line"}}>{responData?.msg}</span></>)
                         }else if(responData?.success){
-                            setResultStr(<><span style={{"color": "green"}}>Success</span><br/>Record Count: {responData.recordCount}</>)
+                            setResultStr(<>{DateUtils.datetimeStr(new Date())}<br/><span style={{"color": "green"}}>Success</span><br/>Record Count: {responData.recordCount}</>)
                         }
+                    },
+                    onError: function(){
+                        setWait(false);
+                        setResultStr(<>{DateUtils.datetimeStr(new Date())}<br/><span style={{"color": "red"}}>Error</span><br/>Action Fail: Please import valid file.</>)
                     }
                 });
             } else {
-                setWarningText(intl.formatMessage({ id: 'requireValidFileWithFormat' }));
+                setWait(false);
+                setWarningText("Please upload a valid file (file format: .xlsx)");
                 setIsWarningPopUp(true);
-                setAttachment({});
                 document.getElementById("uploadFileBtn").value = "";
                 return;
             }
+        }else{
+            setWait(false);
         }
         document.getElementById("uploadFileBtn").value = "";
     }
@@ -169,6 +180,23 @@ const Index = () => {
                     </DialogActions>
                 </Dialog>
             </div>
+            <div>
+                <Dialog
+                    open={wait}
+                    onClose={() => setWait(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
+                    <DialogContent style={{ display: 'flex', }}>
+                        <Typography variant="h4" style={{ padding: '16px' }}>Please wait ...</Typography>
+                    </DialogContent>
+                </Dialog>
+            </div>
         </Grid>
     );
 };