435 lines
13 KiB
JavaScript
435 lines
13 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
DesktopOutlined,
|
|
FileOutlined,
|
|
PieChartOutlined,
|
|
TeamOutlined,
|
|
UserOutlined,
|
|
} from "@ant-design/icons";
|
|
import { Breadcrumb, Layout, Menu, Typography, theme } from "antd";
|
|
import BookletInput from "./BookletInput";
|
|
import { Box, Button } from "@mui/material";
|
|
import { useEffect } from "react";
|
|
import TextField from "@mui/material/TextField";
|
|
import EditButton from "./EditButton";
|
|
import { width } from "@mui/system";
|
|
import { ToastContainer, toast } from "react-toastify";
|
|
import "react-toastify/dist/ReactToastify.css";
|
|
import { TablePagination } from "@mui/base/TablePagination";
|
|
import TableComponent from "./TableComponent";
|
|
import LoadingContainer from "./LoadingContainer";
|
|
import HomeIcon from "@mui/icons-material/Home";
|
|
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
|
import { useNavigate } from "react-router-dom";
|
|
import QueryStatsIcon from "@mui/icons-material/QueryStats";
|
|
import { useSearchParams } from "react-router-dom";
|
|
import { updatePartAanomolyData } from "../redux/actions/actions";
|
|
import {
|
|
useSelector,
|
|
useDispatch,
|
|
ReactReduxContext,
|
|
batch,
|
|
} from "react-redux";
|
|
import useEnhancedEffect from "@mui/material/utils/useEnhancedEffect";
|
|
import SystemNumberDialog from "./SystemNumberDialog";
|
|
import FormControl from "@mui/material/FormControl";
|
|
import Select, { selectClasses } from "@mui/material/Select";
|
|
import MenuItem from "@mui/material/MenuItem";
|
|
|
|
const { Header, Content, Footer, Sider } = Layout;
|
|
function getItem(label, key, icon, children) {
|
|
return {
|
|
key,
|
|
icon,
|
|
children,
|
|
label,
|
|
};
|
|
}
|
|
|
|
const items = [getItem("Reassigned Booklet No", "1", <PieChartOutlined />)];
|
|
|
|
const PartAReassigned = () => {
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
const [anomolyData, setAnomolyData] = useState([]);
|
|
const [tableRowData, setTableRowData] = useState([]);
|
|
const [selectedDegreeType, setSelectedDegreeType] = useState(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
|
let [searchParams, setSearchParams] = useSearchParams();
|
|
|
|
const [showSystemNoContainer, setShowSystemNoContainer] = useState(false);
|
|
const searchParamsType = searchParams.get("type");
|
|
const dispatch = useDispatch();
|
|
const reduxPartA2023AnomolyData = useSelector(
|
|
(state) => state?.partABatchAnomolyData
|
|
);
|
|
const reduxSystemNo = useSelector((state) => state?.systemNumber);
|
|
console.log("Redux partA 2023 anomoly data : ", reduxPartA2023AnomolyData);
|
|
const degreeTypes = [
|
|
{ type: "NON VOCATIONAL", type_code: "0" },
|
|
{ type: "VOCATIONAL", type_code: "6" },
|
|
];
|
|
|
|
const handleDegreeTypeChange = (e) => {
|
|
const newDegreeType = e.target.value;
|
|
console.log("Value ===== ", newDegreeType);
|
|
setSelectedDegreeType(newDegreeType);
|
|
// dispatch(updatePartCDegreeType(newDegreeType));
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!selectedDegreeType) {
|
|
setSelectedDegreeType("0");
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
console.log("Selected degree type in use Effect === ", selectedDegreeType);
|
|
}, [selectedDegreeType]);
|
|
|
|
useEffect(() => {
|
|
if (!reduxSystemNo) {
|
|
setShowSystemNoContainer(true);
|
|
} else {
|
|
let localstorageRecords;
|
|
// if (searchParamsType === "old") {
|
|
// localstorageRecords = localStorage.getItem("part-a-old-anomoly");
|
|
// if (localstorageRecords) {
|
|
// localstorageRecords = JSON.parse(localstorageRecords);
|
|
// }
|
|
// } else if (searchParamsType !== "old") {
|
|
// localstorageRecords = localStorage.getItem("part-a-anomoly");
|
|
// if (localstorageRecords) {
|
|
// localstorageRecords = JSON.parse(localstorageRecords);
|
|
// }
|
|
// }
|
|
if (selectedDegreeType) {
|
|
fetchAnomalyData(reduxSystemNo);
|
|
}
|
|
|
|
// if (localstorageRecords && localstorageRecords.length > 0) {
|
|
// console.log(
|
|
// "Length of local storage records is high so aborting fetching ..."
|
|
// );
|
|
// console.log("The local storage records are ... ", localstorageRecords);
|
|
// setAnomolyData(localstorageRecords);
|
|
// dispatch(updatePartAanomolyData(localstorageRecords));
|
|
// const tmpData = [];
|
|
// for (const data of localstorageRecords) {
|
|
// tmpData.push(
|
|
// createData(
|
|
// data.s3_path,
|
|
// data.barcode,
|
|
// data.register_number,
|
|
// data.subject_code,
|
|
// data.type,
|
|
// reduxSystemNo
|
|
// )
|
|
// );
|
|
// }
|
|
// // console.log("Tmp data is : ", tmpData);
|
|
// if (tmpData.length > 0) {
|
|
// setTableRowData(tmpData);
|
|
// }
|
|
// } else {
|
|
// fetchAnomalyData(reduxSystemNo);
|
|
// }
|
|
|
|
// if(searchParamsType==="old"){
|
|
// const sytemData = localStorage.get("part-a-anomoly")
|
|
// }else if(searchParamsType !== "old"){
|
|
// const sytemData = localStorage.get("part-a-old-anomoly")
|
|
// }
|
|
}
|
|
}, [reduxSystemNo, selectedDegreeType]);
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
setWindowWidth(window.innerWidth);
|
|
};
|
|
|
|
window.addEventListener("resize", handleResize);
|
|
|
|
return () => {
|
|
window.removeEventListener("resize", handleResize);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (windowWidth < 800) {
|
|
setCollapsed(true);
|
|
}
|
|
if (windowWidth > 800) {
|
|
setCollapsed(false);
|
|
}
|
|
}, [windowWidth]);
|
|
|
|
const navigate = useNavigate();
|
|
function createData(
|
|
s3_path,
|
|
barcode,
|
|
register_number,
|
|
subject_code,
|
|
type,
|
|
systemNo
|
|
) {
|
|
return {
|
|
s3_path,
|
|
barcode,
|
|
register_number,
|
|
subject_code,
|
|
type,
|
|
systemNo,
|
|
};
|
|
}
|
|
|
|
const updateSystemReservationStatus = async (systemRecords) => {
|
|
const payload = {
|
|
systemRecords,
|
|
sysNo: reduxSystemNo,
|
|
};
|
|
try {
|
|
fetch(
|
|
`${
|
|
import.meta.env.VITE_REACT_APP_BACKEND_URL
|
|
}/updateSystemReservationStatus`,
|
|
{
|
|
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);
|
|
}
|
|
};
|
|
|
|
const fetchAnomalyData = (reduxSystemNo) => {
|
|
console.log("Fetching.......");
|
|
setIsLoading(true);
|
|
fetch(
|
|
`${
|
|
import.meta.env.VITE_REACT_APP_BACKEND_URL
|
|
}/fetchAnamolyPartAData?type=${searchParamsType}&sysNo=${reduxSystemNo}°reeType=${selectedDegreeType}`,
|
|
{
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
}
|
|
)
|
|
.then((response) => {
|
|
console.log("Response fetched..");
|
|
return response.json();
|
|
})
|
|
.then((responseData) => {
|
|
console.log("Response Data is : ", responseData);
|
|
setIsLoading(false);
|
|
if (responseData.status === "success") {
|
|
console.log("System record ====== ", responseData.systemRecord);
|
|
var systemRecords = responseData?.data;
|
|
if (!responseData.systemRecord) {
|
|
systemRecords = getRecordsBySystemId(
|
|
responseData?.data,
|
|
reduxSystemNo
|
|
);
|
|
}
|
|
//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.s3_path,
|
|
data.barcode,
|
|
data.register_number,
|
|
data.subject_code,
|
|
data.type,
|
|
reduxSystemNo
|
|
)
|
|
);
|
|
}
|
|
// console.log("Tmp data is : ", tmpData);
|
|
if (tmpData.length > 0) {
|
|
setTableRowData(tmpData);
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error fetching data: ", error);
|
|
setIsLoading(false);
|
|
});
|
|
};
|
|
|
|
// useEffect(() => {
|
|
// fetchAnomalyData();
|
|
// }, []);
|
|
|
|
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 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();
|
|
|
|
return (
|
|
<Layout
|
|
style={{
|
|
minHeight: "100vh",
|
|
}}
|
|
>
|
|
<ToastContainer />
|
|
<Sider
|
|
collapsible
|
|
collapsed={collapsed}
|
|
onCollapse={(value) => setCollapsed(value)}
|
|
>
|
|
<div className="demo-logo-vertical" />
|
|
<Menu
|
|
theme="dark"
|
|
defaultSelectedKeys={["1"]}
|
|
mode="inline"
|
|
items={items}
|
|
/>
|
|
</Sider>
|
|
<Layout>
|
|
<Header
|
|
style={{
|
|
padding: 0,
|
|
background: colorBgContainer,
|
|
}}
|
|
>
|
|
<Box className="d-flex justify-content-between h-100 py-1 px-2">
|
|
<Button
|
|
className="bg-primary p-1 text-light"
|
|
onClick={() => {
|
|
navigate(-1);
|
|
}}
|
|
>
|
|
<ArrowBackIcon />
|
|
</Button>
|
|
<Box className="d-flex justify-content-between gap-2">
|
|
{/* <Button
|
|
className="bg-primary p-1 text-light"
|
|
onClick={() => {
|
|
navigate("/anomoly/reassigned/stats");
|
|
}}
|
|
>
|
|
<QueryStatsIcon />
|
|
</Button> */}
|
|
<Box className="d-flex justify-content-between gap-md-4 gap-1 align-items-center">
|
|
{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 rounded h-100"
|
|
onClick={() => {
|
|
navigate("/");
|
|
}}
|
|
>
|
|
<HomeIcon />
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Header>
|
|
<Content
|
|
style={{
|
|
margin: "16px 16px",
|
|
}}
|
|
>
|
|
<Box className="w-25 text-left">
|
|
<h6>Degree Type</h6>
|
|
<FormControl fullWidth>
|
|
<Select
|
|
className="bg-white"
|
|
value={selectedDegreeType}
|
|
onChange={handleDegreeTypeChange}
|
|
>
|
|
{degreeTypes.map((degree) => (
|
|
<MenuItem key={degree.type_code} value={degree.type_code}>
|
|
{degree.type}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</Box>
|
|
<Box className="w-100 d-flex justify-content-between">
|
|
<Box className="w-100 d-flex justify-content-center">
|
|
{tableRowData.length > 0 && (
|
|
<TableComponent
|
|
batchType={searchParamsType}
|
|
rows={tableRowData}
|
|
type={"PartAReassigned"}
|
|
/>
|
|
)}
|
|
{tableRowData.length == 0 && (
|
|
<Box className="w-100 d-flex justify-content-center py-2 align-items-center text-center">
|
|
<h6>No Data Found !!</h6>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
</Content>
|
|
<Footer
|
|
style={{
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
exampaper.vidh.ai ©{new Date().getFullYear()}
|
|
</Footer>
|
|
</Layout>
|
|
{isLoading && <LoadingContainer loadingText={"Loading"} />}
|
|
{showSystemNoContainer && (
|
|
<SystemNumberDialog
|
|
setShowSystemNoContainer={setShowSystemNoContainer}
|
|
showSystemNoContainer={showSystemNoContainer}
|
|
/>
|
|
)}
|
|
</Layout>
|
|
);
|
|
};
|
|
export default PartAReassigned;
|