378 lines
12 KiB
JavaScript
378 lines
12 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import {
|
|
DesktopOutlined,
|
|
FileOutlined,
|
|
PieChartOutlined,
|
|
TeamOutlined,
|
|
UserOutlined,
|
|
} from "@ant-design/icons";
|
|
import { Breadcrumb, Layout, Menu, Typography, theme } from "antd";
|
|
import { ToastContainer, toast } from "react-toastify";
|
|
import { Box, Button } from "@mui/material";
|
|
import TextField from "@mui/material/TextField";
|
|
import EditButton from "./EditButton";
|
|
import { width } from "@mui/system";
|
|
import "react-toastify/dist/ReactToastify.css";
|
|
import { useSearchParams } from "react-router-dom";
|
|
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 RotateLeftIcon from "@mui/icons-material/RotateLeft";
|
|
import RotateRightIcon from "@mui/icons-material/RotateRight";
|
|
import {
|
|
updatePartAanomolyData,
|
|
updatePlaygroundCurrentPage,
|
|
updatePlaygroundResults,
|
|
updatePlaygroundTotalPages,
|
|
updateSystemNo,
|
|
} from "../redux/actions/actions";
|
|
|
|
|
|
import CustomQueryExecutorCard from "./CustomQueryExecutorCard";
|
|
import SimpleDialog from "./SimpleDialog";
|
|
import SystemNumberDialog from "./SystemNumberDialog";
|
|
import ValidationContainer from "./ValidationContainer";
|
|
import QueryExecutorCard from "./QueryExecutorCard";
|
|
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
|
|
import QueryExecutortextArea from "./QueryExecutortextArea";
|
|
import AntdesignLayout from "./AntdesignLayout";
|
|
import TextInputField from "./TextInputField";
|
|
import { render } from "react-dom";
|
|
import { updatePlaygroundQuery } from "../redux/actions/actions";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import PlayGrounds from "./PlayGrounds";
|
|
import { useParams } from "react-router-dom";
|
|
|
|
const { Header, Content, Footer, Sider } = Layout;
|
|
const PlayGround = () => {
|
|
const { type } = useParams();
|
|
|
|
console.log("Backend URL:", import.meta.env.VITE_REACT_APP_BACKEND_URL);
|
|
|
|
console.log("Type ============= ", type);
|
|
const [tableName, setTableName] = useState(null);
|
|
const tableType = {
|
|
PartA: "ocr_scanned_part_a_v1",
|
|
PartC: "ocr_scanned_part_c_v1",
|
|
Attendence: "attendence_scanned_data",
|
|
};
|
|
|
|
useEffect(() => {
|
|
console.log("use effect type ==== ", type);
|
|
console.log("use effect table name ===== ", tableName);
|
|
console.log("table name ==== ", tableType[type]);
|
|
if (!tableName) {
|
|
setTableName(tableType[type]);
|
|
}
|
|
}, [type, tableName]);
|
|
|
|
const [responseData, setResponseData] = useState([]);
|
|
const [totalData, setTotalData] = useState([]);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [totalPages, setTotalPages] = useState(0);
|
|
const [imageColumn, setImageColumn] = useState(null);
|
|
const [query, setQuery] = useState("");
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [paginationPages, setPaginationPages] = useState(null);
|
|
const [limit, setLimit] = useState("");
|
|
const recordsPerPage = 50;
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch();
|
|
const reduxPlaygroundQuery = useSelector((state) => state?.playGroundQuery);
|
|
const reduxPlaygroundPageNo = useSelector(
|
|
(state) => state?.playGroundCurrentPage
|
|
);
|
|
const reduxPlaygroundTotalPages = useSelector(
|
|
(state) => state?.playGroundtotalPages
|
|
);
|
|
const reduxPlaygroundResults = useSelector(
|
|
(state) => state?.playGroundResults
|
|
);
|
|
console.log("Redux playground query : ", reduxPlaygroundQuery);
|
|
console.log("Redux playground page no : ", reduxPlaygroundPageNo);
|
|
console.log("Redux playground total pages : ", reduxPlaygroundTotalPages);
|
|
console.log("Redux playground resutls : ", reduxPlaygroundResults);
|
|
const {
|
|
token: { colorBgContainer, borderRadiusLG },
|
|
} = theme.useToken();
|
|
|
|
useEffect(() => {
|
|
if (reduxPlaygroundQuery && !query) {
|
|
setQuery(reduxPlaygroundQuery);
|
|
}
|
|
}, [reduxPlaygroundQuery]);
|
|
|
|
useEffect(() => {
|
|
if (reduxPlaygroundPageNo != 0 && totalPages == 0) {
|
|
setTotalPages(reduxPlaygroundTotalPages);
|
|
}
|
|
}, [reduxPlaygroundTotalPages]);
|
|
|
|
useEffect(() => {
|
|
console.log("1234 ---- useEffect")
|
|
if (totalData.length == 0 && reduxPlaygroundResults) {
|
|
console.log("Redux playground results if ...");
|
|
console.log("reduxPlaygroundResults.type === type ",reduxPlaygroundResults.type === type)
|
|
if (reduxPlaygroundResults.type === type) {
|
|
console.log("Into if ...")
|
|
setTotalData(reduxPlaygroundResults?.data);
|
|
setImageColumn("s3_path");
|
|
}
|
|
}
|
|
}, [reduxPlaygroundResults]);
|
|
|
|
useEffect(() => {
|
|
if (currentPage == 0 && reduxPlaygroundPageNo !== 0) {
|
|
console.log("Updating in use effect ============================= >");
|
|
setCurrentPage(reduxPlaygroundPageNo);
|
|
}
|
|
}, [reduxPlaygroundPageNo]);
|
|
|
|
const fetchQueryValue = async () => {
|
|
if (query.includes("limit")) {
|
|
alert("Please specify the limit in the input field.");
|
|
return;
|
|
}
|
|
if (query.includes(";")) {
|
|
alert("Please remove the special character from the query ';'");
|
|
return;
|
|
}
|
|
if (!limit) {
|
|
alert("Limit cannot be empty !!");
|
|
return;
|
|
}
|
|
if (
|
|
!query.includes("image_name") &&
|
|
!query.includes("*") &&
|
|
query.includes("ocr_scanned_part_c_v1")
|
|
) {
|
|
alert(
|
|
"Selecting primary Key (image_name) or Selecting all (*) is mandatory"
|
|
);
|
|
return;
|
|
}
|
|
if (!query.includes(tableName)) {
|
|
alert(`This playground is only for : ${tableName}`);
|
|
return;
|
|
}
|
|
setIsLoading(true);
|
|
const payload = {
|
|
query: query,
|
|
limit: limit,
|
|
};
|
|
|
|
try {
|
|
const response = await fetch(
|
|
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchQueryValue`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(payload),
|
|
}
|
|
);
|
|
const data = await response.json();
|
|
setIsLoading(false);
|
|
if (data.status === "success") {
|
|
setTotalData(data.results);
|
|
var tmp = {};
|
|
tmp.type = type;
|
|
tmp.data = data?.results;
|
|
// dispatch(updatePlaygroundResults(data?.results));
|
|
dispatch(updatePlaygroundResults(tmp));
|
|
const totalPageCount = Math.ceil(data?.results.length / recordsPerPage);
|
|
setTotalPages(totalPageCount);
|
|
dispatch(updatePlaygroundTotalPages(totalPages));
|
|
setCurrentPage(1);
|
|
setResponseData(data.results.slice(0, recordsPerPage));
|
|
} else {
|
|
toast.error(data.message);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error:", error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
dispatch(updatePlaygroundQuery(query));
|
|
}, [query]);
|
|
|
|
useEffect(() => {
|
|
if (totalData.length > 0) {
|
|
setResponseData([]);
|
|
console.log(" ===========================>>>>>>>>>>>>>>>>>>>>>>>> ");
|
|
setIsLoading(true);
|
|
setTimeout(() => {
|
|
const startIndex = (currentPage - 1) * recordsPerPage;
|
|
const endIndex = startIndex + recordsPerPage;
|
|
setResponseData(totalData.slice(startIndex, endIndex));
|
|
setIsLoading(false);
|
|
}, 1000);
|
|
}
|
|
dispatch(updatePlaygroundCurrentPage(currentPage));
|
|
renderPagination();
|
|
}, [currentPage, totalData]);
|
|
|
|
const renderPagination = () => {
|
|
const pages = [];
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
pages.push(
|
|
<span key={i}>
|
|
{i > 1 && " | "}
|
|
<a
|
|
href="#!"
|
|
onClick={() => setCurrentPage(i)}
|
|
className={i === currentPage ? "active" : ""}
|
|
>
|
|
{i}
|
|
</a>
|
|
</span>
|
|
);
|
|
}
|
|
setPaginationPages(pages);
|
|
};
|
|
|
|
useEffect(() => {
|
|
renderPagination();
|
|
dispatch(updatePlaygroundTotalPages(totalPages));
|
|
}, [currentPage, totalPages]);
|
|
|
|
const getTableData = () => {
|
|
if (responseData.length === 0) return null;
|
|
const keys = Object.keys(totalData[0]);
|
|
|
|
return (
|
|
<div className="w-100">
|
|
<div className="text-left d-flex justify-content-between align-items-center">
|
|
<h5>
|
|
<strong>Total Results </strong> : {totalData.length}
|
|
</h5>
|
|
{totalData.length > 0 && (
|
|
<div id="footer-container">
|
|
<div
|
|
id="footer-main"
|
|
className="d-flex justify-content-center p-3 align-items-center"
|
|
>
|
|
<div className="d-flex justify-content-center align-items-center p-1">
|
|
<Box className="d-flex flex-column align-items-end">
|
|
<Box>{paginationPages}</Box>
|
|
<Box>
|
|
<strong>{currentPage}</strong>/
|
|
<strong>{totalPages}</strong>
|
|
</Box>
|
|
</Box>
|
|
</div>
|
|
<div className="d-flex gap-3">
|
|
{/* <button
|
|
className="btn text-light bg-primary rounded p-2 mx-3"
|
|
onClick={() =>
|
|
setCurrentPage((prev) => Math.max(prev - 1, 1))
|
|
}
|
|
>
|
|
Previous
|
|
</button>
|
|
<button
|
|
className="btn text-light bg-primary rounded p-2"
|
|
onClick={() =>
|
|
setCurrentPage((prev) => Math.min(prev + 1, totalPages))
|
|
}
|
|
>
|
|
Next
|
|
</button>
|
|
{} */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="my-2 overflow-auto">
|
|
{responseData.map((data) => (
|
|
<CustomQueryExecutorCard
|
|
type={type}
|
|
tableName={tableName}
|
|
data={data}
|
|
s3_image_column={imageColumn}
|
|
query={query}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<AntdesignLayout>
|
|
<div className="mx-3">
|
|
<div className="my-3 d-flex flex-md-row flex-column">
|
|
<div className="w-100 w-md-75">
|
|
<QueryExecutortextArea query={query} setQuery={setQuery} />
|
|
</div>
|
|
<div className="d-none d-md-block w-25">
|
|
<div className="w-100 d-flex flex-column gap-2 mx-2">
|
|
<TextInputField
|
|
placeholder={"limit"}
|
|
value={limit}
|
|
setValue={setLimit}
|
|
/>
|
|
<TextInputField
|
|
placeholder={"imageColumn"}
|
|
value={imageColumn}
|
|
setValue={setImageColumn}
|
|
/>
|
|
<button
|
|
className="btn bg-primary text-light"
|
|
id="submit-btn"
|
|
onClick={fetchQueryValue}
|
|
>
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="d-block d-md-none w-100">
|
|
<div className="w-100 d-flex flex-column gap-2">
|
|
<TextField
|
|
className="rounded h6 bg-white"
|
|
type="text"
|
|
placeholder="Limit"
|
|
id="limit-input"
|
|
autoComplete="off"
|
|
value={limit}
|
|
onChange={(e) => setLimit(e.target.value)}
|
|
/>
|
|
<TextField
|
|
className="input rounded h6 bg-white"
|
|
type="text"
|
|
placeholder="Image column name"
|
|
id="image-column-input"
|
|
autoComplete="off"
|
|
value={imageColumn}
|
|
onChange={(e) => setImageColumn(e.target.value)}
|
|
/>
|
|
<button
|
|
className="btn bg-primary text-light"
|
|
id="submit-btn"
|
|
onClick={fetchQueryValue}
|
|
>
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
id="results-container"
|
|
className="d-flex w-100 justify-content-center"
|
|
>
|
|
{getTableData()}
|
|
</div>
|
|
</div>
|
|
{isLoading && <LoadingContainer />}
|
|
</AntdesignLayout>
|
|
);
|
|
};
|
|
|
|
export default PlayGround;
|