update proof UI

src/pages/ProofCreate_FromApp/ProofForm.js

@@ -28,6 +28,8 @@ const FormPanel = ({ formData }) => {
     const [columnPrice, setColumnPrice] = React.useState(ComboData.proofPrice[0]);
     const [attachments, setAttachments] = React.useState([]);
 
+    const [wait, setWait] = React.useState(false);
+
     const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
     const [warningText, setWarningText] = React.useState("");
 
@@ -45,10 +47,10 @@ const FormPanel = ({ formData }) => {
 
 
     React.useEffect(() => {
-        if (!attachments || attachments.length <= 0){
-            formik.setFieldValue("length",0);
-            formik.setFieldValue("noOfPages",0);
-            formik.setFieldValue("fee",0);
+        if (!attachments || attachments.length <= 0) {
+            formik.setFieldValue("length", 0);
+            formik.setFieldValue("noOfPages", 0);
+            formik.setFieldValue("fee", 0);
             return;
         }
 
@@ -56,10 +58,12 @@ const FormPanel = ({ formData }) => {
 
     }, [attachments]);
 
-    const doCalculate=()=>{
-        if (!attachments || attachments.length <= 0){
-            setWarningText("無法計算，請上傳有效文件。");
+    const doCalculate = () => {
+        setWait(true);
+        if (!attachments || attachments.length <= 0) {
+            setWarningText("Unable to calculate, please upload a valid document.");
             setIsWarningPopUp(true);
+            setWait(false);
             return;
         }
         HttpUtils.postWithFiles({
@@ -69,23 +73,25 @@ const FormPanel = ({ formData }) => {
             },
             files: attachments,
             onSuccess: function (responseData) {
-                if(responseData.data.detail){
-                    setWarningText("無法計算，請上傳有效文件或手動輸入。");
+                if (responseData.data.detail) {
+                    setWarningText("Unable to calculate, please upload a valid document or input manually.");
                     setIsWarningPopUp(true);
                     return;
                 }
-                formik.setFieldValue("length",responseData.data.length);
+                formik.setFieldValue("length", responseData.data.length);
                 let colValue = 0;
-                setColumnPrice(ComboData.proofPrice.find(obj=>{
+                setColumnPrice(ComboData.proofPrice.find(obj => {
                     colValue = obj.value;
                     return obj.colCount === responseData.data.column
                 }));
-                formik.setFieldValue("noOfPages",responseData.data.no_of_page);
-                formik.setFieldValue("fee",(data.groupType == "A"?6552*responseData.data.no_of_page :responseData.data.length*colValue));
+                formik.setFieldValue("noOfPages", responseData.data.no_of_page);
+                formik.setFieldValue("fee", (data.groupType == "A" ? 6552 * responseData.data.no_of_page : responseData.data.length * colValue));
+                setWait(false);
             },
-            onError: function(){
-                setWarningText("無法計算，請手動輸入。");
+            onError: function () {
+                setWarningText("Unable to calculate, please input manually.");
                 setIsWarningPopUp(true);
+                setWait(false);
             }
         });
     }
@@ -95,7 +101,7 @@ const FormPanel = ({ formData }) => {
         initialValues: data,
         onSubmit: values => {
             if (!attachments || attachments.length <= 0) {
-                setWarningText("請選擇上傳檔案");
+                setWarningText("Please upload file.");
                 setIsWarningPopUp(true);
                 return;
             }
@@ -121,13 +127,13 @@ const FormPanel = ({ formData }) => {
         let file = event.target.files[0];
         if (file) {
             if (!file.name.toLowerCase().substr(file.name.length - 4).includes(".pdf")) {
-                setWarningText("請上傳有效檔案 (檔案格式: .pdf)");
+                setWarningText("Please upload a valid file (File format: .pdf).");
                 setIsWarningPopUp(true);
                 document.getElementById("uploadFileBtn").value = "";
                 return;
             }
             if (file.size >= (10 * 1024 * 1034)) {
-                setWarningText("上傳檔案大小應<10MB");
+                setWarningText("The file size for uploading should be less than 10MB");
                 setIsWarningPopUp(true);
                 return;
             }
@@ -186,17 +192,27 @@ const FormPanel = ({ formData }) => {
                         <UploadFileTable key="uploadTable" recordList={attachments} setRecordList={setAttachments} />
                     </Grid>
 
-                    <Grid item xs={12} md={12}>
-                        <Button
-                            size="large"
-                            variant="contained"
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            Calculate
-                        </Button>
-                    </Grid>
+                    {
+                        wait ?
+                            <Grid item xs={12} md={12}>
+                                Doing calculate, please wait ...
+                            </Grid>
+                            :
+                            <Grid item xs={12} md={12}>
+                                <Button
+                                    size="large"
+                                    variant="contained"
+                                    onClick={doCalculate}
+                                    sx={{
+                                        textTransform: 'capitalize',
+                                        alignItems: 'end'
+                                    }}>
+                                    Calculate
+                                </Button>
+                            </Grid>
+                    }
+
+
 
                     {
                         formik.values.groupType == "A" ?
@@ -352,7 +368,7 @@ const FormPanel = ({ formData }) => {
             </form>
             <div>
                 <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
-                    <DialogTitle>注意</DialogTitle>
+                    <DialogTitle>Warning</DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
                     </DialogContent>