From 3161bf2437916364283a2752eea8ffce47d35ee3 Mon Sep 17 00:00:00 2001
From: Pradeeppon01 <ponpradeeep@gmail.com>
Date: Fri, 2 Aug 2024 11:17:07 +0530
Subject: [PATCH] latest

---
 .env                                         |   4 +-
 src/Components/AttendanceAdditionalSheet.jsx |   1 +
 src/Components/DummyDuplicates.jsx           |  11 +
 src/Components/DummyDuplicatesPreview.jsx    | 329 ++++++++++++++-----
 src/Components/LoadingContainer.jsx          |   9 +-
 5 files changed, 267 insertions(+), 87 deletions(-)

diff --git a/.env b/.env
index 6bb0697..43b1052 100644
--- a/.env
+++ b/.env
@@ -1,5 +1,5 @@
 #VITE_REACT_APP_BACKEND_URL="https://sandbox.exampaper.vidh.ai"
 METABASE_BASE_URL="http://metabase.usln.in/public/question/d8774923-09bb-4cd9-903b-559d417e12cf"
 
-VITE_REACT_APP_BACKEND_URL="http://localhost:9999"
-#VITE_REACT_APP_BACKEND_URL="https://api.exampaper.vidh.ai"
\ No newline at end of file
+#VITE_REACT_APP_BACKEND_URL="http://localhost:9999"
+VITE_REACT_APP_BACKEND_URL="https://api.exampaper.vidh.ai"
\ No newline at end of file
diff --git a/src/Components/AttendanceAdditionalSheet.jsx b/src/Components/AttendanceAdditionalSheet.jsx
index 43d18d0..0888b2c 100644
--- a/src/Components/AttendanceAdditionalSheet.jsx
+++ b/src/Components/AttendanceAdditionalSheet.jsx
@@ -13,6 +13,7 @@ import { useDispatch, useSelector } from "react-redux";
 import TableComponentAdditionalSheet from "./TableComponentAdditionalSheet";
 const { Header, Content, Footer, Sider } = Layout;
 
+
 function AttendanceAdditionalSheet() {
     const [tableRowData, setTableRowData] = useState([]);
     
diff --git a/src/Components/DummyDuplicates.jsx b/src/Components/DummyDuplicates.jsx
index b4118b2..c9858b1 100644
--- a/src/Components/DummyDuplicates.jsx
+++ b/src/Components/DummyDuplicates.jsx
@@ -18,6 +18,7 @@ import Snackbar from "@mui/material/Snackbar";
 import ImageDialog from "./ImageDialog";
 import { ToastContainer, toast } from "react-toastify";
 import DummyDuplicatesPreview from "./DummyDuplicatesPreview";
+import LoadingContainer from "./LoadingContainer";
 
 import AntdesignLayout from "./AntdesignLayout";
 
@@ -27,6 +28,7 @@ const DummyDuplicates = () => {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [currentImagePath, setCurrentImagePath] = useState("");
   const [barcode, SetBarcode] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
 
   const { type } = useParams();
   console.log("Type ======= ", type);
@@ -37,6 +39,7 @@ const DummyDuplicates = () => {
 
   useEffect(() => {
     const fetchDuplicateBarcodes = async () => {
+      setIsLoading(true);
       try {
         const response = await fetch(
           `${
@@ -53,6 +56,7 @@ const DummyDuplicates = () => {
           }
         );
         const responseData = await response.json();
+        setIsLoading(false);
         console.log("Response Data ==== ", responseData);
         if (responseData?.status == "success") {
           console.log("The fetch Dumplicate records is success ....");
@@ -60,6 +64,7 @@ const DummyDuplicates = () => {
           setDuplicateBarcodes(responseData?.duplicate_barcodes);
         }
       } catch (error) {
+        setIsLoading(false);
         throw new Error(error);
       }
     };
@@ -90,6 +95,11 @@ const DummyDuplicates = () => {
 
   return (
     <AntdesignLayout>
+      {dummyDuplicatesData?.length > 0 && (
+        <Box className="my-3 px-2 w-100 text-left">
+          <h5>Duplicate Barcodes : {dummyDuplicatesData?.length}</h5>
+        </Box>
+      )}
       {dummyDuplicatesData?.length > 0 &&
         duplicateBarcodes.map((barcode) => (
           <Box
@@ -117,6 +127,7 @@ const DummyDuplicates = () => {
       >
         <CircularProgress color="inherit" />
       </Backdrop>
+      {isLoading && <LoadingContainer />}
     </AntdesignLayout>
   );
 };
diff --git a/src/Components/DummyDuplicatesPreview.jsx b/src/Components/DummyDuplicatesPreview.jsx
index 29991d3..3ea97ba 100644
--- a/src/Components/DummyDuplicatesPreview.jsx
+++ b/src/Components/DummyDuplicatesPreview.jsx
@@ -14,6 +14,8 @@ import { Box } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import TextInputField from "./TextInputField";
+import { notification, Space } from "antd";
+import { toast, ToastContainer } from "react-toastify";
 
 import { useEffect, useState } from "react";
 
@@ -30,7 +32,7 @@ export default function DummyDuplicatesPreview({
   setIsDialogOpen,
 }) {
   const [open, setOpen] = React.useState(false);
-
+  const [api, contextHolder] = notification.useNotification();
   const [scaleWidthValue, setScaleWidthValue] = React.useState(80);
   const [rotateValue, setRotateValue] = React.useState(0);
   const [partAResults, setPartAResults] = React.useState([]);
@@ -40,8 +42,21 @@ export default function DummyDuplicatesPreview({
   const [partCImageIndex, setPartCImageIndex] = React.useState(0);
   const [inputBarcode, setInputBarcode] = useState(null);
   const [inputSerialNo, setInputSerialNo] = useState(null);
-  const [inputSubjectCode,setInputSubjectCode] = useState(null)
-  const [inputRegisterNumber,setInputRegisterNumber] = useState(null)
+  const [inputSubjectCode, setInputSubjectCode] = useState(null);
+  const [inputRegisterNumber, setInputRegisterNumber] = useState(null);
+  const [partAImageS3Path, setPartAImageS3Path] = useState(null);
+  const [partCImageS3Path, setPartCImageS3Path] = useState(null);
+  const [loadingText, setLoadingText] = useState(null);
+
+  const openNotification = (pauseOnHover) => () => {
+    api.open({
+      message: "Notification Title",
+      description: "Record Updated Successfully ....",
+      showProgress: true,
+      pauseOnHover,
+    });
+  };
+
   const handleClickOpen = () => {
     setOpen(true);
   };
@@ -49,17 +64,27 @@ export default function DummyDuplicatesPreview({
   const handleClose = () => {
     setOpen(false);
     setIsDialogOpen(false);
+    setTimeout(() => {
+      document.body.style.overflow = "auto";
+    }, 100);
   };
 
   React.useEffect(() => {
     handleClickOpen();
   }, []);
 
+  useEffect(() => {
+    if (partAResults.length > 0 && partAImageIndex <= partAResults.length) {
+      setPartAImageS3Path(partAResults[partAImageIndex]?.s3_path);
+    }
+  }, [partAResults]);
+
   useEffect(() => {
     console.log("fetchDuplicateBarcodeInfo .........");
     const fetchDuplicateBarcodeInfo = async () => {
       setIsLoading(true);
-      console.log("fetching barcode info .....");
+      console.log("fetching barcode info 12.....");
+      setLoadingText(`Fetching Barcode Info : ${barcode}`);
       try {
         const response = await fetch(
           `${
@@ -78,6 +103,7 @@ export default function DummyDuplicatesPreview({
         );
         const responseData = await response.json();
         setIsLoading(false);
+        setLoadingText(null);
         console.log("Barcode info Response Data ==== ", responseData);
         if (responseData?.status == "success") {
           console.log("success");
@@ -87,6 +113,7 @@ export default function DummyDuplicatesPreview({
         }
       } catch (error) {
         setIsLoading(false);
+        setLoadingText(null);
         throw new Error(error);
       }
     };
@@ -137,6 +164,129 @@ export default function DummyDuplicatesPreview({
     }
   };
 
+  useEffect(() => {
+    if (partAResults.length > 0 && partAImageIndex <= partAResults.length) {
+      setLoadingText(null);
+      setIsLoading(true);
+      setInputBarcode(null);
+      setInputRegisterNumber(null);
+      setInputSubjectCode(null);
+      setPartAImageS3Path(null);
+      setTimeout(() => {
+        setInputBarcode(partAResults[partAImageIndex]?.barcode);
+        setInputRegisterNumber(partAResults[partAImageIndex]?.register_number);
+        setInputSubjectCode(partAResults[partAImageIndex]?.subject_code);
+        setPartAImageS3Path(partAResults[partAImageIndex]?.s3_path);
+        setIsLoading(false);
+      }, 500);
+    }
+  }, [dummyDuplicatesData, partAImageIndex]);
+
+
+
+useEffect(()=>{
+  console.log("part c image index changing ....",partCImageIndex)
+  if(partCResults.length > 0 && partCImageIndex <= partCResults.length){
+    console.log("into if ..")
+    setPartCImageS3Path(null)
+    setTimeout(()=>{
+      setPartCImageS3Path(partCResults[partCImageIndex]?.s3_path)
+    },5000)
+  }
+},[partCImageIndex])
+
+
+
+  useEffect(() => {
+    if (partAImageS3Path) {
+      const fetchPartAImageData = async () => {
+        setIsLoading(true);
+        console.log("fetching Image info .....");
+        try {
+          const response = await fetch(
+            `${
+              import.meta.env.VITE_REACT_APP_BACKEND_URL
+            }/fetchPartAS3PathInfo`,
+            {
+              method: "POST",
+              body: JSON.stringify({
+                partAImageS3Path,
+              }),
+              headers: {
+                "Content-Type": "application/json",
+              },
+            }
+          );
+          const responseData = await response.json();
+          setIsLoading(false);
+          if (responseData?.status === "success") {
+            const imageInfo = responseData?.image_info;
+            console.log("Image info ====== ", imageInfo);
+            if (imageInfo && imageInfo.length > 0) {
+              setInputBarcode(imageInfo[0]?.barcode);
+              setInputRegisterNumber(imageInfo[0]?.register_number);
+              setInputSubjectCode(imageInfo[0]?.subject_code);
+            }
+          }
+        } catch (error) {
+          setIsLoading(false);
+          console.error("Error fetching barcode info:", error);
+        } finally {
+          setIsLoading(false);
+        }
+      };
+
+      fetchPartAImageData();
+    }
+  }, [partAImageS3Path]);
+
+  const updateDuplicateRecordData = async () => {
+    const regex = /^\d+(_\d+)?$/;
+    console.log("Regex ===== ", regex);
+    if (!regex.test(inputBarcode)) {
+      alert("Please enter valid Barcode");
+      return;
+    }
+    try {
+      setIsLoading(true);
+      const response = await fetch(
+        `${
+          import.meta.env.VITE_REACT_APP_BACKEND_URL
+        }/updateDuplicateRecordData`,
+        {
+          method: "POST",
+          body: JSON.stringify({
+            DuplicatePartAbarcode: barcode,
+            inputBarcode,
+            inputRegisterNumber,
+            inputSerialNo,
+            inputSubjectCode,
+            partAS3Path: partAResults[partAImageIndex]?.s3_path,
+            partCS3Path: partCResults[partCImageIndex]?.s3_path,
+          }),
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      const responseData = await response.json();
+      setIsLoading(false);
+      console.log("Response Data ==== ", responseData);
+      if (responseData?.status == "success") {
+        console.log("Updated successfully ....");
+        if (responseData?.duplicate_record) {
+          alert(`Already a record with barcode is present : ${inputBarcode}`);
+        } else {
+          console.log("showing notification ...");
+          toast.success("Record updated Successfully ..");
+        }
+      }
+    } catch (error) {
+      setIsLoading(false);
+      throw new Error(error);
+    }
+  };
+
   return (
     <React.Fragment>
       <Dialog
@@ -149,6 +299,8 @@ export default function DummyDuplicatesPreview({
         }}
       >
         <AppBar sx={{ position: "relative" }}>
+          {contextHolder}
+          <ToastContainer />
           <Toolbar>
             <IconButton
               edge="start"
@@ -201,67 +353,77 @@ export default function DummyDuplicatesPreview({
           <Box className="d-flex flex-row">
             <Box className="rounded bg-white d-flex flex-column align-items-center">
               <Box>
-                <Box className="text-center">
-                  {partAImageIndex + 1 + "/" + partAResults.length}
-                </Box>
-                <Button
-                  className="bg-primary text-white m-3"
-                  onClick={() => {
-                    if (partAImageIndex !== 0) {
-                      setPartAImageIndex((prev) => prev - 1);
-                    }
-                  }}
-                >
-                  <ArrowBackIcon />
-                </Button>
-                <Button
-                  className="bg-primary text-white m-3"
-                  onClick={() => {
-                    console.log("partAimage Index === ", partAImageIndex);
-                    if (partAImageIndex < partAResults.length - 1) {
-                      setPartAImageIndex((prev) => prev + 1);
-                    }
-                  }}
-                >
-                  <ArrowForwardIcon />
-                </Button>
+                {partAResults.length > 0 && (
+                  <>
+                    <Box className="text-center">
+                      {partAImageIndex + 1 + "/" + partAResults.length}
+                    </Box>
+                    <Button
+                      className="bg-primary text-white m-3"
+                      onClick={() => {
+                        if (partAImageIndex !== 0) {
+                          setPartAImageIndex((prev) => prev - 1);
+                        }
+                      }}
+                    >
+                      <ArrowBackIcon />
+                    </Button>
+                    <Button
+                      className="bg-primary text-white m-3"
+                      onClick={() => {
+                        console.log("partAimage Index === ", partAImageIndex);
+                        if (partAImageIndex < partAResults.length - 1) {
+                          setPartAImageIndex((prev) => prev + 1);
+                        }
+                      }}
+                    >
+                      <ArrowForwardIcon />
+                    </Button>
+                  </>
+                )}
               </Box>
               {partAResults.length > 0 && (
                 <img
-                  src={`https://docs.exampaper.vidh.ai/${partAResults[partAImageIndex]?.s3_path}`}
+                  alt="Part-A Image"
+                  src={`https://docs.exampaper.vidh.ai/${partAImageS3Path}`}
                   width={"900px"}
                 />
               )}
             </Box>
             <Box className="rounded bg-white d-flex flex-column align-items-center">
               <Box>
-                <Box className="text-center">
-                  {partCImageIndex + 1 + "/" + partCResults.length}
-                </Box>
-                <Button
-                  className="bg-primary text-white m-3"
-                  onClick={() => {
-                    if (partCImageIndex !== 0) {
-                      setPartCImageIndex((prev) => prev - 1);
-                    }
-                  }}
-                >
-                  <ArrowBackIcon />
-                </Button>
-                <Button
-                  className="bg-primary text-white m-3"
-                  onClick={() => {
-                    console.log("partCimage Index === ", partCImageIndex);
-                    if (partCImageIndex < partCResults.length - 1) {
-                      setPartCImageIndex((prev) => prev + 1);
-                    }
-                  }}
-                >
-                  <ArrowForwardIcon />
-                </Button>
+                {partCResults.length > 0 && (
+                  <>
+                    <Box className="text-center">
+                      {partCImageIndex + 1 + "/" + partCResults.length}
+                    </Box>
+                    <Button
+                      className="bg-primary text-white m-3"
+                      onClick={() => {
+                        if (partCImageIndex !== 0) {
+                          setPartCImageIndex((prev) => prev - 1);
+                        }
+                      }}
+                    >
+                      <ArrowBackIcon />
+                    </Button>
+                    <Button
+                      className="bg-primary text-white m-3"
+                      onClick={() => {
+                        console.log("partCimage Index === ", partCImageIndex);
+                        if (partCImageIndex < partCResults.length - 1) {
+                          setPartCImageIndex((prev) => prev + 1);
+                        }
+                      }}
+                    >
+                      <ArrowForwardIcon />
+                    </Button>
+                  </>
+                )}
               </Box>
               {partCResults.length > 0 && (
                 <img
+                  alt="Part-C Image"
                   src={`https://docs.exampaper.vidh.ai/${partCResults[partCImageIndex]?.s3_path}`}
                   width={"900px"}
                 />
@@ -269,36 +431,39 @@ export default function DummyDuplicatesPreview({
             </Box>
           </Box>
         </div>
-        <Box className="d-flex justify-content-center align-items-center gap-3 m-3">
-          <TextInputField
-            value={inputBarcode}
-            setValue={setInputBarcode}
-            placeholder={"Barcode"}
-          />
-          <TextInputField
-            value={inputSerialNo}
-            setValue={setInputSerialNo}
-            placeholder={"Serial No"}
-          />
-          <TextInputField
-            value={inputSubjectCode}
-            setValue={setInputSubjectCode}
-            placeholder={"Subject Code"}
-          />
-          <TextInputField
-            value={inputRegisterNumber}
-            setValue={setInputRegisterNumber}
-            placeholder={"Register Number"}
-          />
-          <Button
-            className="bg-primary rounded text-white px-5"
-            style={{ height: "50px" }}
-          >
-            Update
-          </Button>
-        </Box>
+        {partAResults.length > 0 && (
+          <Box className="d-flex justify-content-center align-items-center gap-3 m-3">
+            <TextInputField
+              value={inputBarcode}
+              setValue={setInputBarcode}
+              placeholder={"Barcode"}
+            />
+            <TextInputField
+              value={inputSerialNo}
+              setValue={setInputSerialNo}
+              placeholder={"Serial No"}
+            />
+            <TextInputField
+              value={inputSubjectCode}
+              setValue={setInputSubjectCode}
+              placeholder={"Subject Code"}
+            />
+            <TextInputField
+              value={inputRegisterNumber}
+              setValue={setInputRegisterNumber}
+              placeholder={"Register Number"}
+            />
+            <Button
+              className="bg-primary rounded text-white px-5"
+              style={{ height: "50px" }}
+              onClick={updateDuplicateRecordData}
+            >
+              Update
+            </Button>
+          </Box>
+        )}
       </Dialog>
-      {isLoading && <LoadingContainer />}
+      {isLoading && <LoadingContainer loadingText={loadingText} />}
     </React.Fragment>
   );
 }
diff --git a/src/Components/LoadingContainer.jsx b/src/Components/LoadingContainer.jsx
index 2af8320..d8de713 100644
--- a/src/Components/LoadingContainer.jsx
+++ b/src/Components/LoadingContainer.jsx
@@ -29,9 +29,12 @@ const LoadingContainer = ({ loadingText }) => {
         className="d-flex justify-content-center align-items-center"
         style={LoadingContainerStyle}
       >
-        <Spinner animation="border" variant="light" role="status">
-          <span className="visually-hidden">Loading...</span>
-        </Spinner>
+        <Box className="d-flex flex-column align-items-center justify-content-center gap-2">
+          <h6 className="text-white">{loadingText}</h6>
+          <Spinner animation="border" variant="light" role="status">
+            <span className="visually-hidden">Loading...</span>
+          </Spinner>
+        </Box>
       </Box>
     </>
   );