latest
This commit is contained in:
parent
b8c352465c
commit
d606973faa
|
|
@ -3,9 +3,13 @@ import DownloadIcon from "@mui/icons-material/Download";
|
|||
import { LazyLoadImage } from "react-lazy-load-image-component";
|
||||
import { Label, MoreHorizTwoTone, RotateRight } from "@mui/icons-material";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { ToastContainer, toast } from "react-toastify";
|
||||
// import { ToastContainer, toast } from "react-toastify";
|
||||
import LoadingContainer from "./LoadingContainer";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
// import "react-toastify/dist/ReactToastify.css";
|
||||
import RotateLeftIcon from "@mui/icons-material/RotateLeft";
|
||||
import RotateRightIcon from "@mui/icons-material/RotateRight";
|
||||
import PlayGroundEditContainer from "./PlayGroundEditContainer"
|
||||
|
||||
const CustomQueryExecutorCard = ({
|
||||
data,
|
||||
|
|
@ -16,7 +20,7 @@ const CustomQueryExecutorCard = ({
|
|||
reduxSystemNo,
|
||||
degreeType,
|
||||
type,
|
||||
tableName
|
||||
tableName,
|
||||
}) => {
|
||||
// console.log("ERROR ============= ",error)
|
||||
// console.log("ERROR REASON ============== ",error_reason)
|
||||
|
|
@ -28,10 +32,11 @@ const CustomQueryExecutorCard = ({
|
|||
const [keys, setKeys] = useState([]);
|
||||
const [values, setValues] = useState([]);
|
||||
const [rotateAngle, setRotateAngle] = useState(0);
|
||||
const [imageName,setImageName] = useState(null)
|
||||
const [tableNameData,setTableNameData] = useState(null)
|
||||
const imageEleRef = useRef()
|
||||
console.log("data =================== ",data)
|
||||
const [imageName, setImageName] = useState(null);
|
||||
const [tableNameData, setTableNameData] = useState(null);
|
||||
const imageEleRef = useRef();
|
||||
const [showEditContainer,setShowEditContainer] = useState(false)
|
||||
console.log("data =================== ", data);
|
||||
// console.log("image column ====== ", s3_image_column);
|
||||
// console.log("s3 image ======= ", data[s3_image_column]);
|
||||
// console.log("Keys ==== ",keys)
|
||||
|
|
@ -39,104 +44,23 @@ const CustomQueryExecutorCard = ({
|
|||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
console.log("Image name ====== ",data?.image_name)
|
||||
setImageName(data?.image_name)
|
||||
console.log("Image name ====== ", data?.image_name);
|
||||
setImageName(data?.image_name);
|
||||
}
|
||||
if (tableName) {
|
||||
setTableNameData(tableName)
|
||||
setTableNameData(tableName);
|
||||
}
|
||||
},[data])
|
||||
|
||||
|
||||
const updateFront = () => {
|
||||
console.log("update front");
|
||||
};
|
||||
|
||||
const updateBack = () => {
|
||||
console.log("update back ..");
|
||||
};
|
||||
|
||||
const initateProcess = () => {
|
||||
console.log("inititate process..");
|
||||
};
|
||||
|
||||
const rotateLeft = () => {
|
||||
console.log("rotate left .....");
|
||||
const newAngle = rotateAngle - 90
|
||||
setRotateAngle((prev) => prev - 90);
|
||||
console.log("new angle ....",newAngle)
|
||||
const newStyle = `rotate(${newAngle}deg)`
|
||||
imageEleRef.current.style.transform = newStyle
|
||||
};
|
||||
|
||||
const rotateRight = () => {
|
||||
console.log("rotate right");
|
||||
const newAngle = rotateAngle + 90
|
||||
setRotateAngle((prev) => prev + 90);
|
||||
const newStyle = `rotate(${newAngle}deg)`
|
||||
imageEleRef.current.style.transform = newStyle
|
||||
};
|
||||
|
||||
const buttonActions = {
|
||||
PartC: [
|
||||
{ btnLabel: "Mark As Front", action: updateFront },
|
||||
{ btnLabel: "Mark As Back", action: updateBack },
|
||||
{ btnLabel: "Initiate Process", action: initateProcess },
|
||||
],
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setDataValue(data);
|
||||
setKeys(Object.keys(data));
|
||||
setValues(Object.values(data));
|
||||
}, [data]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log("Data value ===== ", dataValue);
|
||||
setKeys(Object.keys(dataValue));
|
||||
setValues(Object.values(dataValue));
|
||||
}, [dataValue]);
|
||||
|
||||
const mark_as_ev = async () => {
|
||||
const updatePartAInstructions = async () => {
|
||||
console.log("update instrunction");
|
||||
const payload = {
|
||||
data,
|
||||
};
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvCoverMarking`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
);
|
||||
setIsLoading(false);
|
||||
const responseData = await response.json();
|
||||
if (responseData.status === "success") {
|
||||
const updatedData = { ...dataValue, is_cover: 1 };
|
||||
// console.log("Data ===== ", updatedData);
|
||||
setDataValue(updatedData);
|
||||
console.log("Updation successfull ....");
|
||||
toast.success("Record Marked As Ev !...");
|
||||
} else {
|
||||
throw new Error(responseData?.message);
|
||||
}
|
||||
} catch (error) {
|
||||
throw new Error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const mark_as_dummy = async () => {
|
||||
const payload = {
|
||||
data,
|
||||
};
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcDummyMarking`,
|
||||
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/updatePartAInstructions`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
|
|
@ -149,10 +73,10 @@ const CustomQueryExecutorCard = ({
|
|||
const responseData = await response.json();
|
||||
if (responseData.status === "success") {
|
||||
console.log("Updation successfull ....");
|
||||
const updatedData = { ...dataValue, type: 102 };
|
||||
const updatedData = { ...dataValue, is_backpage: 1 };
|
||||
// console.log("Data ===== ", updatedData);
|
||||
setDataValue(updatedData);
|
||||
toast.success("Record Marked as Dummy ! ....");
|
||||
// toast.success("Record Marked as Backpage ! ....");
|
||||
} else {
|
||||
throw new Error(responseData?.message);
|
||||
}
|
||||
|
|
@ -161,21 +85,15 @@ const CustomQueryExecutorCard = ({
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
const saveRotatedImage = async () =>{
|
||||
try{
|
||||
if(rotateAngle === 0){
|
||||
return
|
||||
}
|
||||
const updatePartAFront = async () => {
|
||||
console.log("update front");
|
||||
const payload = {
|
||||
imageName,
|
||||
tableNameData,
|
||||
rotateAngle,
|
||||
s3_path : data[s3_image_column]
|
||||
}
|
||||
data,
|
||||
};
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/saveRotatedImage`,
|
||||
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partAFrontSideMarking`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
|
|
@ -187,16 +105,55 @@ const CustomQueryExecutorCard = ({
|
|||
setIsLoading(false);
|
||||
const responseData = await response.json();
|
||||
if (responseData.status === "success") {
|
||||
toast.success("Image Rotation Saved Successfully")
|
||||
console.log("Updation successfull ....");
|
||||
const updatedData = { ...dataValue, is_backpage: 1 };
|
||||
// console.log("Data ===== ", updatedData);
|
||||
setDataValue(updatedData);
|
||||
// toast.success("Record Marked as Backpage ! ....");
|
||||
} else {
|
||||
throw new Error(responseData?.message);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
setIsLoading(false)
|
||||
throw new Error(error)
|
||||
}
|
||||
throw new Error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const mark_as_backpage = async () => {
|
||||
const updateFront = async () => {
|
||||
console.log("update front");
|
||||
const payload = {
|
||||
data,
|
||||
};
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvFrontSideMarking`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
);
|
||||
setIsLoading(false);
|
||||
const responseData = await response.json();
|
||||
if (responseData.status === "success") {
|
||||
console.log("Updation successfull ....");
|
||||
const updatedData = { ...dataValue, is_backpage: 1 };
|
||||
// console.log("Data ===== ", updatedData);
|
||||
setDataValue(updatedData);
|
||||
// toast.success("Record Marked as Backpage ! ....");
|
||||
} else {
|
||||
throw new Error(responseData?.message);
|
||||
}
|
||||
} catch (error) {
|
||||
throw new Error(error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const updateBack = async () => {
|
||||
const payload = {
|
||||
data,
|
||||
};
|
||||
|
|
@ -219,7 +176,7 @@ const CustomQueryExecutorCard = ({
|
|||
const updatedData = { ...dataValue, is_backpage: 1 };
|
||||
// console.log("Data ===== ", updatedData);
|
||||
setDataValue(updatedData);
|
||||
toast.success("Record Marked as Backpage ! ....");
|
||||
// toast.success("Record Marked as Backpage ! ....");
|
||||
} else {
|
||||
throw new Error(responseData?.message);
|
||||
}
|
||||
|
|
@ -228,6 +185,158 @@ const CustomQueryExecutorCard = ({
|
|||
}
|
||||
};
|
||||
|
||||
const initateProcess = () => {
|
||||
console.log("inititate process..");
|
||||
};
|
||||
|
||||
const rotateLeft = () => {
|
||||
console.log("rotate left .....");
|
||||
const newAngle = rotateAngle - 90;
|
||||
setRotateAngle((prev) => prev - 90);
|
||||
console.log("new angle ....", newAngle);
|
||||
const newStyle = `rotate(${newAngle}deg)`;
|
||||
imageEleRef.current.style.transform = newStyle;
|
||||
};
|
||||
|
||||
const rotateRight = () => {
|
||||
console.log("rotate right");
|
||||
const newAngle = rotateAngle + 90;
|
||||
setRotateAngle((prev) => prev + 90);
|
||||
const newStyle = `rotate(${newAngle}deg)`;
|
||||
imageEleRef.current.style.transform = newStyle;
|
||||
};
|
||||
|
||||
const updateEvCover = async () => {
|
||||
const payload = {
|
||||
data,
|
||||
};
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvCoverMarking`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
);
|
||||
setIsLoading(false);
|
||||
const responseData = await response.json();
|
||||
if (responseData.status === "success") {
|
||||
const updatedData = { ...dataValue, is_cover: 1 };
|
||||
// console.log("Data ===== ", updatedData);
|
||||
setDataValue(updatedData);
|
||||
console.log("Updation successfull ....");
|
||||
// toast.success("Record Marked As Ev !...");
|
||||
} else {
|
||||
throw new Error(responseData?.message);
|
||||
}
|
||||
} catch (error) {
|
||||
throw new Error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const markAsDummy = async () =>{
|
||||
const payload = {
|
||||
data,
|
||||
};
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvDummyMarking`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
);
|
||||
setIsLoading(false);
|
||||
const responseData = await response.json();
|
||||
if (responseData.status === "success") {
|
||||
const updatedData = { ...dataValue, is_cover: 1 };
|
||||
// console.log("Data ===== ", updatedData);
|
||||
setDataValue(updatedData);
|
||||
console.log("Updation successfull ....");
|
||||
// toast.success("Record Marked As Ev !...");
|
||||
} else {
|
||||
throw new Error(responseData?.message);
|
||||
}
|
||||
} catch (error) {
|
||||
setIsLoading(false)
|
||||
throw new Error(error);
|
||||
}
|
||||
}
|
||||
|
||||
const showContainerAction = () =>{
|
||||
setShowEditContainer(true)
|
||||
}
|
||||
|
||||
const buttonActions = {
|
||||
PartC: [
|
||||
{ btnLabel: "Mark As Front", action: updateFront },
|
||||
{ btnLabel: "Mark As Back", action: updateBack },
|
||||
{ btnLabel: "Mark As Ev", action: updateEvCover },
|
||||
{ btnLabel: "Mark As Dummy",action: markAsDummy},
|
||||
{ btnLabel: "Edit",action: showContainerAction}
|
||||
],
|
||||
PartA: [
|
||||
{ btnLabel: "Mark As Front", action: updatePartAFront },
|
||||
{ btnLabel: "Mark As Instruction", action: updatePartAInstructions },
|
||||
{ btnLabel: "Initiate Process", action: initateProcess },
|
||||
{ btnLabel: "Mark As Dummy",action:markAsDummy },
|
||||
{ btnLabel: "Edit",action: showContainerAction}
|
||||
],
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setDataValue(data);
|
||||
setKeys(Object.keys(data));
|
||||
setValues(Object.values(data));
|
||||
}, [data]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log("Data value ===== ", dataValue);
|
||||
setKeys(Object.keys(dataValue));
|
||||
setValues(Object.values(dataValue));
|
||||
}, [dataValue]);
|
||||
|
||||
const saveRotatedImage = async () => {
|
||||
try {
|
||||
if (rotateAngle === 0) {
|
||||
return;
|
||||
}
|
||||
const payload = {
|
||||
imageName,
|
||||
tableNameData,
|
||||
rotateAngle,
|
||||
s3_path: data[s3_image_column],
|
||||
};
|
||||
setIsLoading(true);
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/saveRotatedImage`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
);
|
||||
setIsLoading(false);
|
||||
const responseData = await response.json();
|
||||
if (responseData.status === "success") {
|
||||
// toast.success("Image Rotation Saved Successfully")
|
||||
}
|
||||
} catch (error) {
|
||||
setIsLoading(false);
|
||||
throw new Error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const rotate_and_process = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
|
|
@ -257,15 +366,7 @@ const CustomQueryExecutorCard = ({
|
|||
|
||||
return (
|
||||
<Box className="w-100 rounded shadow mb-5 bg-white">
|
||||
<ToastContainer />
|
||||
<Box className="p-4 d-flex justify-content-between align-items-start">
|
||||
<Box className="text-left p-3 d-flex flex-column justify-content-between align-items-between h-100">
|
||||
{keys.map((record, index) => (
|
||||
<p>
|
||||
<strong>{keys[index]}</strong> : {values[index]}
|
||||
</p>
|
||||
))}
|
||||
</Box>
|
||||
<Box className="p-1">
|
||||
<Box className="p-2 d-flex justify-content-end gap-3 align-items-center">
|
||||
{/* {query.includes("ocr_scanned_part_c_v1") &&
|
||||
|
|
@ -303,22 +404,14 @@ const CustomQueryExecutorCard = ({
|
|||
</Button>
|
||||
</>
|
||||
)} */}
|
||||
{type &&
|
||||
buttonActions[type].map((action) => (
|
||||
<Button
|
||||
className="w-50 m-0 bg-primary text-white p-1 rounded"
|
||||
onClick={action?.action}
|
||||
>
|
||||
{action?.btnLabel}
|
||||
</Button>
|
||||
))}
|
||||
<Button className="bg-primary">
|
||||
|
||||
{/* <Button className="bg-primary">
|
||||
<a
|
||||
href={`https://docs.exampaper.vidh.ai/${data[s3_image_column]}`}
|
||||
>
|
||||
<DownloadIcon className="text-light text-white" />
|
||||
</a>
|
||||
</Button>
|
||||
</Button> */}
|
||||
</Box>
|
||||
<Box className="border border-dark" id={imageName}>
|
||||
<img
|
||||
|
|
@ -329,26 +422,49 @@ const CustomQueryExecutorCard = ({
|
|||
ref={imageEleRef}
|
||||
/>
|
||||
</Box>
|
||||
<Box className="d-flex justify-content-between gap-2 my-2">
|
||||
</Box>
|
||||
<Box className="d-flex flex-column gap-2 mx-2 py-3" style={{minWidth:"250px"}}>
|
||||
{type &&
|
||||
buttonActions[type].map((action) => (
|
||||
<Button
|
||||
className="w-50 m-0 bg-primary text-white p-1 rounded"
|
||||
className="m-0 bg-primary text-white p-3 rounded"
|
||||
onClick={action?.action}
|
||||
>
|
||||
{action?.btnLabel}
|
||||
</Button>
|
||||
))}
|
||||
<Box className="d-flex flex-column justify-content-between gap-2 my-2">
|
||||
<Button
|
||||
className="m-0 bg-primary text-white p-3 rounded"
|
||||
onClick={rotateLeft}
|
||||
>
|
||||
Rotate left
|
||||
</Button>
|
||||
<Button className="w-50 m-0 bg-primary text-white p-1 rounded" onClick={saveRotatedImage}>
|
||||
Save
|
||||
Rotate left<RotateLeftIcon/>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
className="w-50 m-0 bg-primary text-white p-1 rounded"
|
||||
className="m-0 bg-primary text-white p-3 rounded"
|
||||
onClick={rotateRight}
|
||||
>
|
||||
Rotate Right
|
||||
Rotate Right<RotateRight/>
|
||||
</Button>
|
||||
<Button
|
||||
className="m-0 bg-primary text-white p-3 rounded"
|
||||
onClick={saveRotatedImage}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box className="text-left p-3 d-flex flex-column justify-content-between align-items-between h-100">
|
||||
{keys.map((record, index) => (
|
||||
<p>
|
||||
<strong>{keys[index]}</strong> : {values[index]}
|
||||
</p>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
{isLoading && <LoadingContainer loadingText={"Loading ..."} />}
|
||||
{showEditContainer && <PlayGroundEditContainer rotateAngle={rotateAngle} data={data} s3Path={data[s3_image_column]} tableName={tableName} imageName={data["image_name"]} setShowEditContainer={setShowEditContainer}/>}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,356 @@
|
|||
import { Box, Button } from "@mui/material";
|
||||
import DownloadIcon from "@mui/icons-material/Download";
|
||||
import { LazyLoadImage } from "react-lazy-load-image-component";
|
||||
import { Label, MoreHorizTwoTone, RotateRight } from "@mui/icons-material";
|
||||
import { useState, useEffect,useRef } from "react";
|
||||
import { ToastContainer, toast } from "react-toastify";
|
||||
import LoadingContainer from "./LoadingContainer";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const CustomQueryExecutorCard = ({
|
||||
data,
|
||||
s3_image_column,
|
||||
query,
|
||||
error,
|
||||
error_reason,
|
||||
reduxSystemNo,
|
||||
degreeType,
|
||||
type,
|
||||
tableName
|
||||
}) => {
|
||||
// console.log("ERROR ============= ",error)
|
||||
// console.log("ERROR REASON ============== ",error_reason)
|
||||
// console.log("REDUX SYSTEM NO ================== ",reduxSystemNo)
|
||||
const navigate = useNavigate();
|
||||
const [dataValue, setDataValue] = useState({});
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
// console.log("data in query executor Card : ", data);
|
||||
const [keys, setKeys] = useState([]);
|
||||
const [values, setValues] = useState([]);
|
||||
const [rotateAngle, setRotateAngle] = useState(0);
|
||||
const [imageName,setImageName] = useState(null)
|
||||
const [tableNameData,setTableNameData] = useState(null)
|
||||
const imageEleRef = useRef()
|
||||
console.log("data =================== ",data)
|
||||
// console.log("image column ====== ", s3_image_column);
|
||||
// console.log("s3 image ======= ", data[s3_image_column]);
|
||||
// console.log("Keys ==== ",keys)
|
||||
// console.log("Values ===== ",values)
|
||||
|
||||
useEffect(()=>{
|
||||
if(data){
|
||||
console.log("Image name ====== ",data?.image_name)
|
||||
setImageName(data?.image_name)
|
||||
}
|
||||
if(tableName){
|
||||
setTableNameData(tableName)
|
||||
}
|
||||
},[data])
|
||||
|
||||
|
||||
const updateFront = () => {
|
||||
console.log("update front");
|
||||
};
|
||||
|
||||
const updateBack = () => {
|
||||
console.log("update back ..");
|
||||
};
|
||||
|
||||
const initateProcess = () => {
|
||||
console.log("inititate process..");
|
||||
};
|
||||
|
||||
const rotateLeft = () => {
|
||||
console.log("rotate left .....");
|
||||
const newAngle = rotateAngle - 90
|
||||
setRotateAngle((prev) => prev - 90);
|
||||
console.log("new angle ....",newAngle)
|
||||
const newStyle = `rotate(${newAngle}deg)`
|
||||
imageEleRef.current.style.transform = newStyle
|
||||
};
|
||||
|
||||
const rotateRight = () => {
|
||||
console.log("rotate right");
|
||||
const newAngle = rotateAngle + 90
|
||||
setRotateAngle((prev) => prev + 90);
|
||||
const newStyle = `rotate(${newAngle}deg)`
|
||||
imageEleRef.current.style.transform = newStyle
|
||||
};
|
||||
|
||||
const buttonActions = {
|
||||
PartC: [
|
||||
{ btnLabel: "Mark As Front", action: updateFront },
|
||||
{ btnLabel: "Mark As Back", action: updateBack },
|
||||
{ btnLabel: "Initiate Process", action: initateProcess },
|
||||
],
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setDataValue(data);
|
||||
setKeys(Object.keys(data));
|
||||
setValues(Object.values(data));
|
||||
}, [data]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log("Data value ===== ", dataValue);
|
||||
setKeys(Object.keys(dataValue));
|
||||
setValues(Object.values(dataValue));
|
||||
}, [dataValue]);
|
||||
|
||||
const mark_as_ev = async () => {
|
||||
const payload = {
|
||||
data,
|
||||
};
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvCoverMarking`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
);
|
||||
setIsLoading(false);
|
||||
const responseData = await response.json();
|
||||
if (responseData.status === "success") {
|
||||
const updatedData = { ...dataValue, is_cover: 1 };
|
||||
// console.log("Data ===== ", updatedData);
|
||||
setDataValue(updatedData);
|
||||
console.log("Updation successfull ....");
|
||||
toast.success("Record Marked As Ev !...");
|
||||
} else {
|
||||
throw new Error(responseData?.message);
|
||||
}
|
||||
} catch (error) {
|
||||
throw new Error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const mark_as_dummy = async () => {
|
||||
const payload = {
|
||||
data,
|
||||
};
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcDummyMarking`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
);
|
||||
setIsLoading(false);
|
||||
const responseData = await response.json();
|
||||
if (responseData.status === "success") {
|
||||
console.log("Updation successfull ....");
|
||||
const updatedData = { ...dataValue, type: 102 };
|
||||
// console.log("Data ===== ", updatedData);
|
||||
setDataValue(updatedData);
|
||||
toast.success("Record Marked as Dummy ! ....");
|
||||
} else {
|
||||
throw new Error(responseData?.message);
|
||||
}
|
||||
} catch (error) {
|
||||
throw new Error(error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const saveRotatedImage = async () =>{
|
||||
try{
|
||||
if(rotateAngle === 0){
|
||||
return
|
||||
}
|
||||
const payload = {
|
||||
imageName,
|
||||
tableNameData,
|
||||
rotateAngle,
|
||||
s3_path : data[s3_image_column]
|
||||
}
|
||||
setIsLoading(true);
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/saveRotatedImage`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
);
|
||||
setIsLoading(false);
|
||||
const responseData = await response.json();
|
||||
if (responseData.status === "success") {
|
||||
toast.success("Image Rotation Saved Successfully")
|
||||
}
|
||||
|
||||
}catch(error){
|
||||
setIsLoading(false)
|
||||
throw new Error(error)
|
||||
}
|
||||
}
|
||||
|
||||
const mark_as_backpage = async () => {
|
||||
const payload = {
|
||||
data,
|
||||
};
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvBacksideMarking`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
);
|
||||
setIsLoading(false);
|
||||
const responseData = await response.json();
|
||||
if (responseData.status === "success") {
|
||||
console.log("Updation successfull ....");
|
||||
const updatedData = { ...dataValue, is_backpage: 1 };
|
||||
// console.log("Data ===== ", updatedData);
|
||||
setDataValue(updatedData);
|
||||
toast.success("Record Marked as Backpage ! ....");
|
||||
} else {
|
||||
throw new Error(responseData?.message);
|
||||
}
|
||||
} catch (error) {
|
||||
throw new Error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const rotate_and_process = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const payload = {
|
||||
data,
|
||||
};
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partCRotateProcess`,
|
||||
{
|
||||
method: "POST",
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
);
|
||||
const responseData = await response.json();
|
||||
setIsLoading(false);
|
||||
if (responseData.status === "success") {
|
||||
console.log("Response successfull ...");
|
||||
}
|
||||
} catch (error) {
|
||||
setIsLoading(false);
|
||||
throw new Error(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box className="w-100 rounded shadow mb-5 bg-white">
|
||||
<ToastContainer />
|
||||
<Box className="p-4 d-flex justify-content-between align-items-start">
|
||||
<Box className="text-left p-3 d-flex flex-column justify-content-between align-items-between h-100">
|
||||
{keys.map((record, index) => (
|
||||
<p>
|
||||
<strong>{keys[index]}</strong> : {values[index]}
|
||||
</p>
|
||||
))}
|
||||
</Box>
|
||||
<Box className="p-1">
|
||||
<Box className="p-2 d-flex justify-content-end gap-3 align-items-center">
|
||||
{/* {query.includes("ocr_scanned_part_c_v1") &&
|
||||
data[s3_image_column] && (
|
||||
<>
|
||||
<Button
|
||||
className="w-50 m-0 bg-primary text-white p-1 rounded"
|
||||
onClick={() => navigate(`/sqlPlayground/edit?image_name=${data["image_name"]}&table=ocr_scanned_part_c_v1&error=${error}&error_reason=${error_reason}&sysNo=${reduxSystemNo}°reeType=${degreeType}`)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
className="w-50 m-0 bg-primary text-white p-1 rounded"
|
||||
onClick={() => {
|
||||
mark_as_backpage();
|
||||
}}
|
||||
>
|
||||
Mark As Back
|
||||
</Button>
|
||||
<Button
|
||||
className="w-50 m-0 bg-primary text-white p-1 rounded"
|
||||
onClick={() => {
|
||||
mark_as_ev();
|
||||
}}
|
||||
>
|
||||
Mark As EV
|
||||
</Button>
|
||||
<Button
|
||||
className="w-50 m-0 bg-primary text-white p-1 rounded"
|
||||
onClick={() => {
|
||||
mark_as_dummy();
|
||||
}}
|
||||
>
|
||||
Mark As Dummy
|
||||
</Button>
|
||||
</>
|
||||
)} */}
|
||||
{type &&
|
||||
buttonActions[type].map((action) => (
|
||||
<Button
|
||||
className="w-50 m-0 bg-primary text-white p-1 rounded"
|
||||
onClick={action?.action}
|
||||
>
|
||||
{action?.btnLabel}
|
||||
</Button>
|
||||
))}
|
||||
<Button className="bg-primary">
|
||||
<a
|
||||
href={`https://docs.exampaper.vidh.ai/${data[s3_image_column]}`}
|
||||
>
|
||||
<DownloadIcon className="text-light text-white" />
|
||||
</a>
|
||||
</Button>
|
||||
</Box>
|
||||
<Box className="border border-dark" id={imageName}>
|
||||
<img
|
||||
src={`https://docs.exampaper.vidh.ai/${data[s3_image_column]}`}
|
||||
width="800px"
|
||||
height="auto"
|
||||
alt="Image Alt"
|
||||
ref={imageEleRef}
|
||||
/>
|
||||
</Box>
|
||||
<Box className="d-flex justify-content-between gap-2 my-2">
|
||||
<Button
|
||||
className="w-50 m-0 bg-primary text-white p-1 rounded"
|
||||
onClick={rotateLeft}
|
||||
>
|
||||
Rotate left
|
||||
</Button>
|
||||
<Button className="w-50 m-0 bg-primary text-white p-1 rounded" onClick={saveRotatedImage}>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
className="w-50 m-0 bg-primary text-white p-1 rounded"
|
||||
onClick={rotateRight}
|
||||
>
|
||||
Rotate Right
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
{isLoading && <LoadingContainer loadingText={"Loading ..."} />}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomQueryExecutorCard;
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import Dialog from "@mui/material/Dialog";
|
||||
import DialogContent from "@mui/material/DialogContent";
|
||||
import DialogContentText from "@mui/material/DialogContentText";
|
||||
import DialogTitle from "@mui/material/DialogTitle";
|
||||
import { Button, Box } from "@mui/material";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import { NavLink, Link } from "react-router-dom";
|
||||
import TextInputField from "./TextInputField";
|
||||
import { Height } from "@mui/icons-material";
|
||||
import HighlightOffIcon from "@mui/icons-material/HighlightOff";
|
||||
|
||||
const PlayGroundEditContainer = ({
|
||||
data,
|
||||
s3Path,
|
||||
imageName,
|
||||
tableName,
|
||||
setShowEditContainer,
|
||||
rotateAngle,
|
||||
}) => {
|
||||
const type = "PartC";
|
||||
const dialogText = "This is dialog text";
|
||||
const [marks, setMarks] = useState(null);
|
||||
const [barcode, setBarcode] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [qrcode, setQrcode] = useState(null);
|
||||
const [subjectCode, setSubjectCode] = useState(null);
|
||||
const [open, setOpen] = useState(true); // Set open state to true by default
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setQrcode(data?.qrcode);
|
||||
setBarcode(data?.barcode);
|
||||
setMarks(data?.marks);
|
||||
setSubjectCode(data?.subject_code)
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
const updateRecord = async () => {
|
||||
if (!marks) {
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const payload = {
|
||||
qrcode,
|
||||
barcode,
|
||||
table:tableName,
|
||||
s3Path,
|
||||
subjectCode,
|
||||
marks,
|
||||
imageName,
|
||||
rotateAngle,
|
||||
};
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/editPartCdata`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
);
|
||||
const responseData = await response.json();
|
||||
setIsLoading(false);
|
||||
console.log("response data ========= ", responseData);
|
||||
if (responseData?.status === "success") {
|
||||
toast.success("Record Updated Successfully ...");
|
||||
}
|
||||
} catch (error) {
|
||||
setIsLoading(false);
|
||||
throw new Error(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={handleClose} maxWidth="lg" style={{zIndex:100}} fullWidth>
|
||||
<DialogContent>
|
||||
<Box className="d-flex justify-content-between align-items-start gap-4">
|
||||
<Box className="d-flex flex-column">
|
||||
<img
|
||||
src={`https://docs.exampaper.vidh.ai/${s3Path}`}
|
||||
height={"100%"}
|
||||
width={"100%"}
|
||||
/>
|
||||
</Box>
|
||||
<Box className="py-3 d-flex flex-column justify-content-end w-100 gap-3">
|
||||
<TextInputField
|
||||
value={qrcode}
|
||||
setValue={setQrcode}
|
||||
placeholder={"QR code"}
|
||||
/>
|
||||
<TextInputField
|
||||
value={barcode}
|
||||
setValue={setBarcode}
|
||||
placeholder={"BarCode"}
|
||||
/>
|
||||
<TextInputField
|
||||
value={marks}
|
||||
setValue={setMarks}
|
||||
placeholder={"Marks"}
|
||||
/>
|
||||
<Button
|
||||
className="bg-primary text-white p-3"
|
||||
onClick={() => updateRecord()}
|
||||
>
|
||||
Update
|
||||
</Button>
|
||||
<Button
|
||||
className="bg-primary text-white p-3"
|
||||
onClick={() => setShowEditContainer(false)}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlayGroundEditContainer;
|
||||
Loading…
Reference in New Issue