From d606973faa1f476a13afa8edefbffc3162ccd437 Mon Sep 17 00:00:00 2001 From: Pradeeppon01 Date: Wed, 10 Jul 2024 23:25:34 +0530 Subject: [PATCH] latest --- src/Components/CustomQueryExecutorCard.jsx | 412 +++++++++++------- src/Components/CustomQueryExecutorCard_BK.jsx | 356 +++++++++++++++ src/Components/PlayGroundEditContainer.jsx | 126 ++++++ 3 files changed, 746 insertions(+), 148 deletions(-) create mode 100644 src/Components/CustomQueryExecutorCard_BK.jsx create mode 100644 src/Components/PlayGroundEditContainer.jsx diff --git a/src/Components/CustomQueryExecutorCard.jsx b/src/Components/CustomQueryExecutorCard.jsx index 5d97cef..6b3c111 100644 --- a/src/Components/CustomQueryExecutorCard.jsx +++ b/src/Components/CustomQueryExecutorCard.jsx @@ -2,10 +2,14 @@ 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 { useState, useEffect, useRef } from "react"; +// 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,115 +32,35 @@ 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) // 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)); + if (data) { + console.log("Image name ====== ", data?.image_name); + setImageName(data?.image_name); + } + if (tableName) { + setTableNameData(tableName); + } }, [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 payload = { - imageName, - tableNameData, - rotateAngle, - s3_path : data[s3_image_column] - } + const updatePartAFront = async () => { + console.log("update front"); + const payload = { + 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) + } catch (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 ( - - - {keys.map((record, index) => ( -

- {keys[index]} : {values[index]} -

- ))} - {/* {query.includes("ocr_scanned_part_c_v1") && @@ -303,22 +404,14 @@ const CustomQueryExecutorCard = ({ )} */} - {type && - buttonActions[type].map((action) => ( - - ))} - + */} - + + + {type && + buttonActions[type].map((action) => ( + + ))} + - + + + + {keys.map((record, index) => ( +

+ {keys[index]} : {values[index]} +

+ ))} + {isLoading && } + {showEditContainer && } ); }; diff --git a/src/Components/CustomQueryExecutorCard_BK.jsx b/src/Components/CustomQueryExecutorCard_BK.jsx new file mode 100644 index 0000000..5d97cef --- /dev/null +++ b/src/Components/CustomQueryExecutorCard_BK.jsx @@ -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 ( + + + + + {keys.map((record, index) => ( +

+ {keys[index]} : {values[index]} +

+ ))} + + + + {/* {query.includes("ocr_scanned_part_c_v1") && + data[s3_image_column] && ( + <> + + + + + + )} */} + {type && + buttonActions[type].map((action) => ( + + ))} + + + + Image Alt + + + + + + + + + {isLoading && } + + ); +}; + +export default CustomQueryExecutorCard; diff --git a/src/Components/PlayGroundEditContainer.jsx b/src/Components/PlayGroundEditContainer.jsx new file mode 100644 index 0000000..1cfdb06 --- /dev/null +++ b/src/Components/PlayGroundEditContainer.jsx @@ -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 ( + + + + + + + + + + + + + + + + + ); +}; + +export default PlayGroundEditContainer;