pradeeppon2001
/
temp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

latest

This commit is contained in:
Pradeeppon01 2024-07-02 14:53:21 +05:30
parent 165c91d1d0
commit 2b0e3b11be
2 changed files with 380 additions and 308 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env
View File

@ -1,4 +1,4 @@
# VITE_REACT_APP_BACKEND_URL="https://sandbox.exampaper.vidh.ai" #VITE_REACT_APP_BACKEND_URL="https://sandbox.exampaper.vidh.ai"
# VTE_REACT_APP_BACKEND_URL="http://localhost:9999"I
METABASE_BASE_URL="http://metabase.usln.in/public/question/d8774923-09bb-4cd9-903b-559d417e12cf" METABASE_BASE_URL="http://metabase.usln.in/public/question/d8774923-09bb-4cd9-903b-559d417e12cf"
VITE_REACT_APP_BACKEND_URL="https://api.exampaper.vidh.ai" VITE_REACT_APP_BACKEND_URL="https://api.exampaper.vidh.ai"
# VITE_REACT_APP_BACKEND_URL="http://localhost:9999"

684
src/Components/AnomolyPartC.jsx
View File

@ -1,332 +1,404 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from "react";
import { Box, Button, Card, CardContent, Typography, CircularProgress } from '@mui/material'; import {
import { Layout, theme, Pagination } from 'antd'; Box,
Button,
Card,
CardContent,
Typography,
CircularProgress,
} from "@mui/material";
import { Layout, theme, Pagination } from "antd";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import HomeIcon from "@mui/icons-material/Home"; import HomeIcon from "@mui/icons-material/Home";
import QueryExecutorCard from './QueryExecutorCard'; import QueryExecutorCard from "./QueryExecutorCard";
import { updatePartCErrorList, updatePartCErrorData, updateSelectedError, updateSelectedJson } from '../redux/actions/actions'; import {
import { useSelector, useDispatch } from 'react-redux'; updatePartCErrorList,
import SystemNumberDialog from './SystemNumberDialog'; updatePartCErrorData,
updateSelectedError,
updateSelectedJson,
} from "../redux/actions/actions";
import { useSelector, useDispatch } from "react-redux";
import SystemNumberDialog from "./SystemNumberDialog";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
const { Content, Header } = Layout; const { Content, Header } = Layout;
function AnomalyPartC() { function AnomalyPartC() {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [isLoading2, setIsLoading2] = useState(false); const [isLoading2, setIsLoading2] = useState(false);
const [anomalyData, setAnomalyData] = useState(null); const [anomalyData, setAnomalyData] = useState(null);
const [evErrors, setEvErrors] = useState([]); const [evErrors, setEvErrors] = useState([]);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [errorReason, setErrorReason] = useState(null); const [errorReason, setErrorReason] = useState(null);
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(1); const [totalPages, setTotalPages] = useState(1);
const [showSystemNoContainer, setShowSystemNoContainer] = useState(false); const [showSystemNoContainer, setShowSystemNoContainer] = useState(false);
const [selectedIndex, setSelectedIndex] = useState(null); const [selectedIndex, setSelectedIndex] = useState(null);
const [selectedDegreeType, setSelectedDegreeType] = useState("0");
const degreeTypes = [
{ type: "UG", type_code: "0" },
{ type: "PG", type_code: "2" },
];
const { const handleDegreeTypeChange = (e) => {
token: { colorBgContainer, borderRadiusLG }, console.log("Value ===== ", e.target.value);
} = theme.useToken(); setSelectedDegreeType(e.target.value);
const navigate = useNavigate(); };
const dispatch = useDispatch(); const {
const evErrorsList = useSelector((state) => state?.partCErrorList); token: { colorBgContainer, borderRadiusLG },
console.log("evErrorsList = ", evErrorsList) } = theme.useToken();
const navigate = useNavigate();
const dispatch = useDispatch();
const evErrorsList = useSelector((state) => state?.partCErrorList);
console.log("evErrorsList = ", evErrorsList);
const evErrorsData = useSelector((state) => state?.partCErrorData); const evErrorsData = useSelector((state) => state?.partCErrorData);
console.log("evErrorData: ", evErrorsData) console.log("evErrorData: ", evErrorsData);
const reduxSystemNo = useSelector((state) => state?.systemNumber); const reduxSystemNo = useSelector((state) => state?.systemNumber);
console.log("systemno: ", reduxSystemNo) console.log("systemno: ", reduxSystemNo);
// const selectedError = useSelector((state) => state?.selectedError); // const selectedError = useSelector((state) => state?.selectedError);
// console.log("selectedError: ", selectedError) // console.log("selectedError: ", selectedError)
// const selectedErrorData = useSelector((state) => state?.selectedErrorData); // const selectedErrorData = useSelector((state) => state?.selectedErrorData);
// console.log("selectedErrorData: ", selectedErrorData) // console.log("selectedErrorData: ", selectedErrorData)
const selectedErrorJson = useSelector((state) => state?.selectedErrorJson); const selectedErrorJson = useSelector((state) => state?.selectedErrorJson);
console.log("selectedErrorJson: ", selectedErrorJson) console.log("selectedErrorJson: ", selectedErrorJson);
useEffect(() => {
if (!reduxSystemNo) {
useEffect(() => { setShowSystemNoContainer(true);
if(!reduxSystemNo){ } else {
setShowSystemNoContainer(true) if (evErrorsList.length > 0) {
}else{ setAnomalyData(evErrorsList);
if(evErrorsList.length > 0){ } else {
setAnomalyData(evErrorsList) fetchAnomalyData();
}else{
fetchAnomalyData();
}
}
}, [reduxSystemNo]);
useEffect(() => {
if(!reduxSystemNo){
setShowSystemNoContainer(true)
}else{
if( evErrorsData.length>0){
setEvErrors(evErrorsData)
}
if (error && errorReason) {
fetchAnomalyRecords(reduxSystemNo);
}
}
}, [error, errorReason]);
useEffect(() => {
if (evErrors && evErrors.length > 0) {
console.log("len = ", evErrors.length)
const tp = Math.ceil(evErrors.length / 10);
console.log("tp = ", tp)
setTotalPages(tp);
}
}, [evErrors]);
const updateSystemReservationStatus = async (systemRecords) => {
const payload = {
systemRecords,
sysNo:reduxSystemNo
};
try {
fetch(
`${
import.meta.env.VITE_REACT_APP_BACKEND_URL
}/updateSystemReservationStatusPartC`,
{
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 = async () => {
setIsLoading(true);
try {
const response = await fetch(
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/getpartcEv`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
}
);
const responseData = await response.json();
setAnomalyData(responseData.data);
dispatch(updatePartCErrorList(responseData.data))
} catch (error) {
console.error("Error fetching data: ", error);
} finally {
setIsLoading(false);
}
};
const fetchAnomalyRecords = async (reduxSystemNo) => {
setIsLoading(true);
try {
const response = await fetch(
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/getpartcEvErrors`,
{
method: "POST",
body: JSON.stringify({
error,
error_reason: errorReason,
sysno: reduxSystemNo
}),
headers: {
"Content-Type": "application/json",
},
}
);
const responseData = await response.json();
var systemRecords = responseData?.data
console.log("System record ====== ",responseData.systemRecord)
if(!responseData.systemRecord){
systemRecords = getRecordsBySystemId(
responseData?.data,
reduxSystemNo
);
}
updateSystemReservationStatus(systemRecords);
console.log("System records : ", systemRecords);
setEvErrors(systemRecords);
dispatch(updatePartCErrorData(systemRecords))
} catch (error) {
console.error("Error fetching data: ", error);
} finally {
setIsLoading(false);
}
};
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;
} }
}
}, [reduxSystemNo]);
const handleClick = (error, errorReason, index) => { useEffect(() => {
setError(error); if (!reduxSystemNo) {
setErrorReason(errorReason); setShowSystemNoContainer(true);
setCurrentPage(1); } else {
setSelectedIndex(index); if (evErrorsData.length > 0) {
let tmp = {} setEvErrors(evErrorsData);
tmp["error"] = error }
tmp["error_reason"] = errorReason if (error && errorReason) {
console.log("tmp = ", tmp) fetchAnomalyRecords(reduxSystemNo);
dispatch(updateSelectedJson(tmp)) }
}
}, [error, errorReason]);
useEffect(() => {
if (evErrors && evErrors.length > 0) {
console.log("len = ", evErrors.length);
const tp = Math.ceil(evErrors.length / 10);
console.log("tp = ", tp);
setTotalPages(tp);
}
}, [evErrors]);
useEffect(() => {
dispatch(updatePartCErrorData([]));
setAnomalyData([]);
setEvErrors([]);
fetchAnomalyData();
}, [selectedDegreeType]);
const updateSystemReservationStatus = async (systemRecords) => {
const payload = {
systemRecords,
sysNo: reduxSystemNo,
}; };
try {
const handlePageChange = (page) => { fetch(
setIsLoading2(true); `${
setCurrentPage(page); import.meta.env.VITE_REACT_APP_BACKEND_URL
}; }/updateSystemReservationStatusPartC`,
{
useEffect(() => { method: "POST",
if (currentPage > 0) { headers: {
setIsLoading2(false); "Content-Type": "application/json",
},
body: JSON.stringify(payload),
} }
}, [currentPage, evErrors]); )
.then((response) => response.json())
.then((responseData) => {
console.log("response from updation : ", responseData);
});
} catch (error) {
throw new Error("Error in update system records : ", systemRecords);
}
};
const getCurrentPageData = () => { const fetchAnomalyData = async () => {
const startIndex = (currentPage - 1) * 10; setIsLoading(true);
const endIndex = startIndex + 10; try {
return evErrors.slice(startIndex, endIndex); const response = await fetch(
}; `${
import.meta.env.VITE_REACT_APP_BACKEND_URL
}/getpartcEv?degreeType=${selectedDegreeType}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
}
);
const responseData = await response.json();
setAnomalyData(responseData.data);
dispatch(updatePartCErrorList(responseData.data));
} catch (error) {
console.error("Error fetching data: ", error);
} finally {
setIsLoading(false);
}
};
const handleSystemNoChange = () => { const fetchAnomalyRecords = async (reduxSystemNo) => {
console.log("System No Change is called"); setIsLoading(true);
setShowSystemNoContainer(true); try {
dispatch(updateSelectedJson({})) const response = await fetch(
// dispatch(updatePartCErrorList([])) `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/getpartcEvErrors`,
dispatch(updatePartCErrorData([])) {
method: "POST",
body: JSON.stringify({
error,
error_reason: errorReason,
sysno: reduxSystemNo,
degreeType: selectedDegreeType,
}),
headers: {
"Content-Type": "application/json",
},
}
);
const responseData = await response.json();
var systemRecords = responseData?.data;
console.log("System record ====== ", responseData.systemRecord);
if (!responseData.systemRecord) {
systemRecords = getRecordsBySystemId(responseData?.data, reduxSystemNo);
}
console.log("System records : ", systemRecords);
}; setEvErrors(systemRecords);
setIsLoading(false);
dispatch(updatePartCErrorData(systemRecords));
return ( updateSystemReservationStatus(systemRecords);
<Layout style={{ minHeight: "100vh" }}> } catch (error) {
<Layout> setIsLoading(false);
<Header style={{ padding: 0, background: colorBgContainer }}> console.error("Error fetching data: ", error);
<Box className="d-flex justify-content-between h-100 py-1 px-2"> }
<Button };
className="bg-primary p-1 text-light"
onClick={() => navigate(-1)} function getRecordsBySystemId(records, systemId) {
> const new_data = [];
<ArrowBackIcon /> for (var i = 0; i < records.length; i++) {
</Button> var count = i % 5;
<Box className="d-flex justify-content-between gap-2"> if (count === systemId - 1) {
{reduxSystemNo && ( new_data.push(records[i]);
<Box }
className="h6 p-0 m-0 text-light bg-primary rounded h-100 d-flex align-items-center px-3" }
style={{ cursor: "pointer" }} return new_data;
onClick={handleSystemNoChange} }
>
<b>System No : </b> {reduxSystemNo} const handleClick = (error, errorReason, index) => {
</Box> setError(error);
)} setErrorReason(errorReason);
<Button setCurrentPage(1);
className="bg-primary p-1 text-light" setSelectedIndex(index);
onClick={() => navigate("/")} let tmp = {};
> tmp["error"] = error;
<HomeIcon /> tmp["error_reason"] = errorReason;
</Button> console.log("tmp = ", tmp);
</Box> dispatch(updateSelectedJson(tmp));
</Box> };
</Header>
<Content style={{ padding: '24px', backgroundColor: "#5078f2", backgroundImage: "linear-gradient(315deg, #5078f2 0%, #efe9f4 74%)" }}> const handlePageChange = (page) => {
{isLoading ? ( setIsLoading2(true);
<Box display="flex" justifyContent="center" alignItems="center" height="100%"> setCurrentPage(page);
<CircularProgress /> };
</Box>
) : ( useEffect(() => {
<> if (currentPage > 0) {
{anomalyData && anomalyData.map((item, index) => ( setIsLoading2(false);
<Card }
onClick={() => handleClick(item.error, item.error_reason, index)} }, [currentPage, evErrors]);
key={index}
style={{ margin: '16px', borderRadius: borderRadiusLG, const getCurrentPageData = () => {
alignItems: 'flex-start', textAlign: 'start', cursor: 'pointer', const startIndex = (currentPage - 1) * 10;
color:"white", const endIndex = startIndex + 10;
backgroundColor: selectedIndex === index ? '#3f51b5' : '#537895', return evErrors.slice(startIndex, endIndex);
backgroundImage: selectedIndex === index ? };
'linear-gradient(315deg, #70a1ff 0%, #c2c0c0 74%);' :
'linear-gradient(315deg, #537895 0%, #09203f 74%)' const handleSystemNoChange = () => {
}} console.log("System No Change is called");
> setShowSystemNoContainer(true);
<CardContent> dispatch(updateSelectedJson({}));
{item.error && ( // dispatch(updatePartCErrorList([]))
<Typography id="1" variant="body2"> dispatch(updatePartCErrorData([]));
Code: {item.error} };
</Typography>
)} return (
{item['count(*)'] && ( <Layout style={{ minHeight: "100vh" }}>
<Typography id="2" variant="body2" color="whitesmoke"> <Layout>
Count: {item['count(*)']} <Header style={{ padding: 0, background: colorBgContainer }}>
</Typography> <Box className="d-flex justify-content-between h-100 py-1 px-2">
)} <Button
{item.error_reason && ( className="bg-primary p-1 text-light"
<Typography id="3" variant="body2" color="whitesmoke"> onClick={() => navigate(-1)}
Reason: {item.error_reason} >
</Typography> <ArrowBackIcon />
)} </Button>
</CardContent> <Box className="d-flex justify-content-between gap-2">
</Card> {reduxSystemNo && (
))} <Box
{evErrors && evErrors.length > 0 &&( className="h6 p-0 m-0 text-light bg-primary rounded h-100 d-flex align-items-center px-3"
<> style={{ cursor: "pointer" }}
<Box display="flex" justifyContent="center" marginBottom="16px"> onClick={handleSystemNoChange}
<Pagination >
current={currentPage} <b>System No : </b> {reduxSystemNo}
total={totalPages * 10} </Box>
onChange={handlePageChange} )}
/> <Button
</Box> className="bg-primary p-1 text-light"
{isLoading2 ? ( onClick={() => navigate("/")}
<Box display="flex" justifyContent="center" alignItems="center" height="100%"> >
<CircularProgress /> <HomeIcon />
</Box> </Button>
) : ( </Box>
getCurrentPageData().map((data, index) => ( </Box>
<QueryExecutorCard </Header>
key={index} <Content
data={data} style={{
s3_image_column="s3_path" padding: "24px",
query="ocr_scanned_part_c_v1" backgroundColor: "#5078f2",
/> backgroundImage: "linear-gradient(315deg, #5078f2 0%, #efe9f4 74%)",
)) }}
)} >
</> {isLoading ? (
)} <Box
</> display="flex"
)} justifyContent="center"
</Content> alignItems="center"
{showSystemNoContainer && ( height="100%"
<SystemNumberDialog >
setShowSystemNoContainer={setShowSystemNoContainer} <CircularProgress />
showSystemNoContainer={showSystemNoContainer} </Box>
) : (
<>
<Box className="w-25 d-flex flex-column align-items-start">
<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>
{anomalyData &&
anomalyData.map((item, index) => (
<Card
onClick={() =>
handleClick(item.error, item.error_reason, index)
}
key={index}
style={{
margin: "16px",
borderRadius: borderRadiusLG,
alignItems: "flex-start",
textAlign: "start",
cursor: "pointer",
color: "white",
backgroundColor:
selectedIndex === index ? "#3f51b5" : "#537895",
backgroundImage:
selectedIndex === index
? "linear-gradient(315deg, #70a1ff 0%, #c2c0c0 74%);"
: "linear-gradient(315deg, #537895 0%, #09203f 74%)",
}}
>
<CardContent>
{item.error && (
<Typography id="1" variant="body2">
Code: {item.error}
</Typography>
)}
{item["count(*)"] && (
<Typography id="2" variant="body2" color="whitesmoke">
Count: {item["count(*)"]}
</Typography>
)}
{item.error_reason && (
<Typography id="3" variant="body2" color="whitesmoke">
Reason: {item.error_reason}
</Typography>
)}
</CardContent>
</Card>
))}
{evErrors && evErrors.length > 0 && (
<>
<Box
display="flex"
justifyContent="center"
marginBottom="16px"
>
<Pagination
current={currentPage}
total={totalPages * 10}
onChange={handlePageChange}
/> />
)} </Box>
</Layout> {isLoading2 ? (
</Layout> <Box
); display="flex"
justifyContent="center"
alignItems="center"
height="100%"
>
<CircularProgress />
</Box>
) : (
getCurrentPageData().map((data, index) => (
<QueryExecutorCard
key={index}
data={data}
s3_image_column="s3_path"
query="ocr_scanned_part_c_v1"
/>
))
)}
</>
)}
</>
)}
</Content>
{showSystemNoContainer && (
<SystemNumberDialog
setShowSystemNoContainer={setShowSystemNoContainer}
showSystemNoContainer={showSystemNoContainer}
/>
)}
</Layout>
</Layout>
);
} }
export default AnomalyPartC; export default AnomalyPartC;