proof cancel

src/pages/Proof/Reply_GLD/ApplicationDetails.js

@@ -5,26 +5,35 @@ import {
     Typography,
     FormLabel,
     TextField,
+    Button,
+    Stack,
+    Dialog, DialogTitle, DialogContent, DialogActions,
 } from '@mui/material';
 
 import { useFormik } from 'formik';
 import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils"
+import * as UrlUtils from "utils/ApiPathConst"
 import * as DateUtils from "utils/DateUtils"
 import * as FormatUtils from "utils/FormatUtils"
+import { useNavigate } from "react-router-dom";
 import { useParams } from "react-router-dom";
 import Loadable from 'components/Loadable';
 const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
 import FileList from "components/FileList"
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const ApplicationDetailCard = ({ 
-    formData, 
+const ApplicationDetailCard = ({
+    formData,
+    showCancelBtn
     // setBackButtonPos 
 }) => {
 
     const params = useParams();
+    const navigate = useNavigate()
 
     const [data, setData] = React.useState({});
+    const [cancelPopUp, setCancelPopUp] = React.useState(false);
     //const [proofId, setProofId] = React.useState();
 
     React.useEffect(() => {
@@ -61,8 +70,22 @@ const ApplicationDetailCard = ({
         />;
     }
 
+    const confirmCancel = () =>{
+        setCancelPopUp(false);
+        HttpUtils.get({
+            url: UrlUtils.CANCEL_PROOF+"/"+params.id,
+            onSuccess: function(){
+                navigate("/proof/reply/"+params.id);
+            }
+        });
+    }
+
+    const doCancel = () =>{
+        setCancelPopUp(true);
+    }
+
     // React.useEffect(()=>{
-        // if (document.getElementById("applicationDetailsMainCard")) setBackButtonPos(`${document.getElementById("applicationDetailsMainCard")?.getBoundingClientRect().left / 3}px`)
+    // if (document.getElementById("applicationDetailsMainCard")) setBackButtonPos(`${document.getElementById("applicationDetailsMainCard")?.getBoundingClientRect().left / 3}px`)
     // },[document.getElementById("applicationDetailsMainCard")])
 
     return (
@@ -72,7 +95,25 @@ const ApplicationDetailCard = ({
             content={false}
         >
             <Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
-                Public Notice: Proofreading Reply
+                <Stack
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                >
+                    Public Notice: Proofreading Reply
+                    <Button
+                        component="span"
+                        variant="contained"
+                        size="large"
+                        color="error"
+                        disabled={showCancelBtn}
+                        onClick={doCancel}
+                    >
+                        <Typography variant="h5">Cancel</Typography>
+                    </Button>
+
+                </Stack>
+
             </Typography>
             <form>
                 <Grid container direction="column">
@@ -237,6 +278,18 @@ const ApplicationDetailCard = ({
 
                     </Grid>
                 </Grid>
+                <div>
+                    <Dialog open={cancelPopUp} onClose={() => setCancelPopUp(false)}  >
+                        <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
+                        <DialogContent style={{ display: 'flex', }}>
+                            <Typography variant="h4" style={{ padding: '16px' }}>Are you sure you want to cancel this proof?</Typography>
+                        </DialogContent>
+                        <DialogActions>
+                            <Button onClick={() => setCancelPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
+                            <Button onClick={() => confirmCancel()}><Typography variant="h5">Confirm</Typography></Button>
+                        </DialogActions>
+                    </Dialog>
+                </div>
             </form>
         </MainCard>
     );

src/pages/Proof/Reply_GLD/ProofForm.js

@@ -14,7 +14,7 @@ import * as DateUtils from "utils/DateUtils"
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const FormPanel = ({ formData }) => {
+const FormPanel = ({ formData, isOverTime }) => {
 
     const [data, setData] = React.useState({});
     const params = useParams();
@@ -32,17 +32,6 @@ const FormPanel = ({ formData }) => {
 
 
 
-    const isOverTime = () => {
-        let returnBeforeDate = DateUtils.convertToDate(formik.values?.returnBeforeDate);
-        if (!returnBeforeDate) return true;
-        returnBeforeDate = returnBeforeDate.setHours(14, 0, 0, 0);
-
-        let current = new Date();
-        return current.getTime() > returnBeforeDate;
-    }
-
-
-
     return (
         <MainCard xs={12} md={12} lg={12}
             border={false}
@@ -84,7 +73,7 @@ const FormPanel = ({ formData }) => {
                         </Grid>
                         :
                         (
-                            isOverTime() ?
+                            isOverTime ?
                                 <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>
                                     <Grid item xs={12} md={12} textAlign="left">
                                         <Typography variant="h5">The response timed out, please apply again.</Typography>

src/pages/Proof/Reply_GLD/index.js

@@ -36,8 +36,10 @@ const Index = () => {
     const params = useParams();
     const navigate = useNavigate()
 
-    const [record, setRecord] = React.useState();
+    const [record, setRecord] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);
+    const [isOverTime, setIsOverTime] = React.useState(false);
+    const [showCancelBtn, setShowCancelBtn] = React.useState(false);
 
     React.useLayoutEffect(() => {
         loadForm();
@@ -71,6 +73,12 @@ const Index = () => {
 
                     responseData.data["groupType"] = responseData.data.groupNo.charAt(0);
                     responseData.data["action"] = responseData.data.replyDate ? responseData.data.action : true;
+
+                    let returnBeforeDate = DateUtils.convertToDate(responseData.data.returnBeforeDate);
+                    let current = new Date();
+                    setIsOverTime(current.getTime() > returnBeforeDate.getTime());
+                    setShowCancelBtn(responseData.data.cancelled || responseData.data.replyDate || current.getTime() > returnBeforeDate.getTime())
+
                     setRecord(responseData.data);
                 }
             });
@@ -125,6 +133,7 @@ const Index = () => {
                                         <ApplicationDetails
                                             // setBackButtonPos={setBackButtonPos}
                                             formData={record}
+                                            showCancelBtn={showCancelBtn}
                                             style={{
                                                 display: "flex",
                                                 height: "100%",
@@ -137,6 +146,7 @@ const Index = () => {
                                     <Box xs={12} md={12} sx={{ p: 4, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                                         <ProofForm
                                             formData={record}
+                                            isOverTime={isOverTime}
                                         />
                                     </Box>
                                 </Grid>

src/utils/ApiPathConst.js

@@ -80,6 +80,7 @@ export const GET_PROOF = apiPath+'/proof/details';//GET
 export const REPLY_PROOF = apiPath+'/proof/reply';//GET
 export const PROOF_CHECK_PRICE = apiPath+'/proof/check-price';//GET
 export const GET_PROOF_PAY = apiPath+'/proof/pay-details';//GET
+export const CANCEL_PROOF = apiPath+'/proof/cancel';//GET
 
 
 export const PAYMENT_CREATE = apiPath+'/payment/create';//POST

src/utils/statusUtils/ProofStatus.js

@@ -5,21 +5,25 @@ const confirm = {color:"#22a13f", eng:"Confirmed", cht:"可以付印"}
 const unable = {color:"#d9372b", eng:"Re-proofing", cht:"未能付印"}
 const timeOut = {color:"#8a8784", eng:"No Reply", cht:"回覆逾時"}
 const pendingReply = {color:"#f5a83d", eng:"Pending Reply", cht:"未回覆"}
+const cancel = {color:"#000", textColor:"#fff", eng:"Cancelled", cht:"已取消"}
 
 export function getStatus_Cht(params) {
     let status = getStatus(params);
-    return getStatusTag({color: status.color, text:status.cht })
+    return getStatusTag({color: status.color, textColor:status.textColor, text:status.cht })
 }
 
 export function getStatus_Eng(params) {
     let status = getStatus(params);
-    return getStatusTag({color: status.color, text:status.eng })
+    return getStatusTag({color: status.color, textColor:status.textColor, text:status.eng })
 }
 
 function getStatus(params) {
     let replyDate = params.row?params.row.replyDate:params.replyDate;
     let action = params.row?params.row.action:params.action;
     let returnBeforeDate = params.row?params.row.returnBeforeDate:params.returnBeforeDate;
+    let isCancelled = params.row?params.row.cancelled:params.cancelled;
+
+    if(isCancelled) return cancel;
 
     if(replyDate){
         return action?confirm:unable;