system no changes done for attendence additional sheet ui

src/Components/AttendanceAdditionalSheet.jsx

@@ -3,6 +3,8 @@ import { Box, Button} from "@mui/material"
 import { ToastContainer } from "react-toastify";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import HomeIcon from "@mui/icons-material/Home";
+import LoadingContainer from "./LoadingContainer";
+import SystemNumberDialog from "./SystemNumberDialog";
 
 import { Breadcrumb, Layout, Menu, Typography, theme } from "antd";
 import { useNavigate } from "react-router-dom";
@@ -13,6 +15,7 @@ const { Header, Content, Footer, Sider } = Layout;
 
 function AttendanceAdditionalSheet() {
     const [tableRowData, setTableRowData] = useState([]);
+    
     const [windowWidth, setWindowWidth] = useState(window.innerWidth);
     const [collapsed, setCollapsed] = useState(false);
     const [anomolyData, setAnomolyData] = useState([]);
@@ -21,7 +24,20 @@ function AttendanceAdditionalSheet() {
     const [distinctExamCentreCodes,setDistinctExamCentreCodes] = useState([])
     const dispatch = useDispatch()
     const reduxAnomolyData = useSelector((state) => state.attendenceAnomolyData);
+    const [showSystemNoContainer, setShowSystemNoContainer] = useState(false);
     const [filterSelectedExamCentreCode,setFilterSelectedExamCentreCode] = useState("")
+    const reduxSystemNo = useSelector((state) => state?.systemNumber);
+    
+    useEffect(() => {
+      if (!reduxSystemNo) {
+        setShowSystemNoContainer(true);
+      } else {
+        
+        fetchAnomalyData(reduxSystemNo)
+        
+      }
+    },[])
+    
     useEffect(() => {
         const handleResize = () => {
           setWindowWidth(window.innerWidth);
@@ -55,36 +71,74 @@ function AttendanceAdditionalSheet() {
       }
       
 
-    useEffect(()=>{
+    // useEffect(()=>{
-        const tmpData = [];
+    //     const tmpData = [];
-        for (const data of anomolyData) {
+    //     for (const data of anomolyData) {
-          tmpData.push(
+    //       tmpData.push(
-            createData(
+    //         createData(
-                data.image_name,
+    //             data.image_name,
-                data.s3_image_path
+    //             data.s3_image_path
-            //   data.attendence_serial_no,
+    //         //   data.attendence_serial_no,
-            //   data.answer_booklet_sno,
+    //         //   data.answer_booklet_sno,
-            //   data.exam_centre_code,
+    //         //   data.exam_centre_code,
-            //   data.exam_centre,
+    //         //   data.exam_centre,
-            //   data.student_name,
+    //         //   data.student_name,
-            //   data.register_number,
+    //         //   data.register_number,
-            //   data.reassigned_serial_no
+    //         //   data.reassigned_serial_no
-            )
+    //         )
-          );
+    //       );
-        }
+    //     }
-        console.log("Tmp data is : ", tmpData);
+    //     console.log("Tmp data is : ", tmpData);
-        if (tmpData.length > 0) {
+    //     if (tmpData.length > 0) {
-          setTableRowData(tmpData);
+    //       setTableRowData(tmpData);
-        }
+    //     }
-      },[anomolyData])
+    //   },[anomolyData])
 
-      const fetchAnomalyData = () => {
+      const updateSystemReservationStatus = async (systemRecords) => {
+        const payload = {
+          systemRecords,
+          sysNo:reduxSystemNo
+        };
+        try {
+          fetch(
+            `${
+              import.meta.env.VITE_REACT_APP_BACKEND_URL
+            }/updateSystemReservationStatusAttendence`,
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify(payload),
+            }
+          )
+            .then((response) => response.json())
+            .then((responseData) => {
+              console.log("response from updation : ", responseData);
+            });
+        } catch (error) {
+          throw new Error("Error in update system records : ", systemRecords);
+        }
+      };
+
+      function getRecordsBySystemId(records, systemId) {
+        const new_data = [];
+        for (var i = 0; i < records.length; i++) {
+          var count = i % 5;
+          if (count === systemId - 1) {
+            new_data.push(records[i]);
+          }
+        }
+        return new_data;
+      }
+
+      const fetchAnomalyData = (reduxSystemNo) => {
         console.log("Fetching.......");
         setIsLoading(true);
         fetch(
           `${
             import.meta.env.VITE_REACT_APP_BACKEND_URL
-          }/fetchAnamolyAttendenceAdditionalSheetData`,
+          }/fetchAnamolyAttendenceAdditionalSheetData?sysNo=${reduxSystemNo}`,
           {
             method: "GET",
             headers: {
@@ -100,24 +154,51 @@ function AttendanceAdditionalSheet() {
             console.log("Response Data is : ", responseData);
             setIsLoading(false);
             if (responseData.status === "success") {
-              setAnomolyData(responseData?.data);
+              // setAnomolyData(responseData?.data);
-            //   const tmpExamCentreCodes = [];
+              console.log("System record ====== ",responseData.systemRecord)
-            //   const distinctExamCentreCodesSet = new Set(distinctExamCentreCodes);
+              var systemRecords = responseData?.data
-              
+              if(!responseData.systemRecord){
-            //   for (var data of responseData?.data) {
+                systemRecords = getRecordsBySystemId(
-            //     if (!distinctExamCentreCodesSet.has(data.exam_centre_code)) {
+                  responseData?.data,
-            //       distinctExamCentreCodesSet.add(data.exam_centre_code);
+                  reduxSystemNo
-            //       tmpExamCentreCodes.push(data.exam_centre_code);
+                );
-            //     }
+              }
-            //     setFilterAnomolyData([...tmpExamCentreCodes])
+              updateSystemReservationStatus(systemRecords);
+              console.log("System records : ", systemRecords);
+              // if (searchParamsType === "old") {
+              //   localStorage.setItem(
+              //     "part-a-old-anomoly",
+              //     JSON.stringify(systemRecords)
+              //   );
+              // } else if (searchParamsType !== "old") {
+              //   localStorage.setItem(
+              //     "part-a-anomoly",
+              //     JSON.stringify(systemRecords)
+              //   );
               // }
+              setAnomolyData(systemRecords);
+              // dispatch(updatePartAanomolyData(systemRecords));
+              const tmpData = [];
+              for (const data of systemRecords) {
+                tmpData.push(
+                  createData(
+                      data.image_name,
+                      data.s3_image_path
+                  //   data.attendence_serial_no,
+                  //   data.answer_booklet_sno,
+                  //   data.exam_centre_code,
+                  //   data.exam_centre,
+                  //   data.student_name,
+                  //   data.register_number,
+                  //   data.reassigned_serial_no
+                  )
+                );
+              }
+              // console.log("Tmp data is : ", tmpData);
+              if (tmpData.length > 0) {
+                setTableRowData(tmpData);
+              }
               
-              
-            //   setDistinctExamCentreCodes([...distinctExamCentreCodesSet]);
-            //   console.log("Tmp exam centre code: ", tmpExamCentreCodes);
-    
-            //   // console.log("Data to be stored in store : ", responseData?.data);
-            //   dispatch(updateAttendenceAnomolyData(responseData?.data));
             }
           })
           .catch((error) => {
@@ -127,15 +208,15 @@ function AttendanceAdditionalSheet() {
       };
 
 
-      useEffect(() => {
+      // useEffect(() => {
-        if (reduxAnomolyData.length > 0) {
+      //   if (reduxAnomolyData.length > 0) {
-          console.log("Redux anomoly data found")
+      //     console.log("Redux anomoly data found")
-          setAnomolyData(reduxAnomolyData)
+      //     setAnomolyData(reduxAnomolyData)
-        } else {
+      //   } else {
-          console.log("Redux anomoly data not found")
+      //     console.log("Redux anomoly data not found")
-          fetchAnomalyData();
+      //     fetchAnomalyData();
-        }
+      //   }
-      }, []);
+      // }, []);
     
     
       useEffect(()=>{
@@ -148,6 +229,15 @@ function AttendanceAdditionalSheet() {
     
       },[filterSelectedExamCentreCode])
 
+      const handleSystemNoChange = () => {
+        console.log("System No Change is called");
+        setShowSystemNoContainer(true);
+      };
+    
+      useEffect(() => {
+        console.log("System no container show status : ", showSystemNoContainer);
+      }, [showSystemNoContainer]);
+
   const {
     token: { colorBgContainer, borderRadiusLG },
   } = theme.useToken();
@@ -178,6 +268,15 @@ function AttendanceAdditionalSheet() {
               <ArrowBackIcon />
             </Button>
             <Box className="d-flex justify-content-between gap-2">
+              {reduxSystemNo && (
+                    <Box
+                      className="h6 p-0 m-0 text-light bg-primary rounded h-100 d-flex align-items-center px-3"
+                      style={{ cursor: "pointer" }}
+                      onClick={handleSystemNoChange}
+                    >
+                      <b>System No : </b> {reduxSystemNo}
+                    </Box>
+                  )}
               <Button
                 className="bg-primary p-1 text-light"
                 onClick={() => {
@@ -217,6 +316,13 @@ function AttendanceAdditionalSheet() {
 
 
       </Layout>
+      {isLoading && <LoadingContainer loadingText={"Loading"} />}
+      {showSystemNoContainer && (
+        <SystemNumberDialog
+          setShowSystemNoContainer={setShowSystemNoContainer}
+          showSystemNoContainer={showSystemNoContainer}
+        />
+      )}
     </Layout>
   );
 }