added changes in playground UI

src/Components/CustomQueryExecutorCard.jsx

@@ -3,16 +3,17 @@ 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"
+import PlayGroundEditContainer from "./PlayGroundEditContainer";
-import saveRotatedImage from "./Utilities/PartCPlaygroundUtilities"
+import saveRotatedImage from "./Utilities/PartCPlaygroundUtilities";
 import markAsPartc from "./Utilities/PartAPlaygroundUtilities";
 
+
 const CustomQueryExecutorCard = ({
   data,
   s3_image_column,
@@ -37,7 +38,7 @@ const CustomQueryExecutorCard = ({
   const [imageName, setImageName] = useState(null);
   const [tableNameData, setTableNameData] = useState(null);
   const imageEleRef = useRef();
-  const [showEditContainer,setShowEditContainer] = useState(false)
+  const [showEditContainer, setShowEditContainer] = useState(false);
   const [editorType, setEditorType] = useState(null);
 
   console.log("data =================== ", data);
@@ -54,8 +55,7 @@ const CustomQueryExecutorCard = ({
     if (tableName) {
       setTableNameData(tableName);
     }
-    if(data?.subject_code){
+    if (data?.subject_code) {
-    
     }
   }, [data]);
 
@@ -149,8 +149,10 @@ 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 Frontpage ! ....");
       } else {
+        toast.error("Something Went Wrong !...");
+        setIsLoading(false)
         throw new Error(responseData?.message);
       }
     } catch (error) {
@@ -158,8 +160,6 @@ const CustomQueryExecutorCard = ({
     }
   };
 
-  
-
   const updateBack = async () => {
     const payload = {
       data,
@@ -185,6 +185,8 @@ const CustomQueryExecutorCard = ({
         setDataValue(updatedData);
         toast.success("Record Marked as Backpage ! ....");
       } else {
+        setIsLoading(false);
+        toast.error("Something Went Wrong !...");
         throw new Error(responseData?.message);
       }
     } catch (error) {
@@ -245,7 +247,7 @@ const CustomQueryExecutorCard = ({
     }
   };
 
-  const markAsDummy = async () =>{
+  const markAsDummy = async () => {
     const payload = {
       data,
     };
@@ -270,35 +272,38 @@ const CustomQueryExecutorCard = ({
         console.log("Updation successfull ....");
         toast.success("Record Marked As Ev !...");
       } else {
+        setIsLoading(false)
+        toast.error("Something Went Wrong !...");
         throw new Error(responseData?.message);
       }
     } catch (error) {
-      setIsLoading(false)
+      setIsLoading(false);
+      toast.error("Something Went Wrong !...");
       throw new Error(error);
     }
-  }
+  };
 
-  const showContainerAction = () =>{
+  const showContainerAction = () => {
-    setShowEditContainer(true)
+    setShowEditContainer(true);
-    console.log("type === ", type)
+    console.log("type === ", type);
     // setEditorType(type)
-  }
+  };
 
   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: "Mark As Dummy", action: markAsDummy },
-      { btnLabel: "Edit",action: showContainerAction}
+      { btnLabel: "Edit", action: showContainerAction },
     ],
     PartA: [
       { btnLabel: "Mark As Front", action: updatePartAFront },
       { btnLabel: "Mark As Backpage", action: updatePartAInstructions },
       // { btnLabel: "Initiate Process", action: initateProcess },
-      { btnLabel: "Mark As Dummy",action:markAsDummy },
+      { btnLabel: "Mark As Dummy", action: markAsDummy },
-      { btnLabel: "Mark As Part-C",action: markAsPartc },
+      { btnLabel: "Mark As Part-C", action: markAsPartc },
-      { btnLabel: "Edit",action: showContainerAction}
+      { btnLabel: "Edit", action: showContainerAction },
     ],
   };
 
@@ -314,7 +319,6 @@ const CustomQueryExecutorCard = ({
     setValues(Object.values(dataValue));
   }, [dataValue]);
 
-
   const rotate_and_process = async () => {
     setIsLoading(true);
     try {
@@ -342,8 +346,7 @@ const CustomQueryExecutorCard = ({
     }
   };
 
-
+  const saveRotatedImage = async () => {
-const saveRotatedImage = async () => {
     try {
       if (rotateAngle === 0) {
         return;
@@ -368,16 +371,20 @@ const saveRotatedImage = async () => {
       setIsLoading(false);
       const responseData = await response.json();
       if (responseData.status === "success") {
-        toast.success("Image Rotation Saved Successfully")
+        toast.success("Image Rotation Saved Successfully");
+      } else {
+        toast.error("Something Went Wrong !...");
       }
     } catch (error) {
       setIsLoading(false);
+      toast.error("Something Went Wrong !...");
       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="p-1">
           <Box className="p-2 d-flex justify-content-end gap-3 align-items-center">
@@ -435,7 +442,10 @@ const saveRotatedImage = async () => {
             />
           </Box>
         </Box>
-        <Box className="d-flex flex-column gap-2 mx-2 py-3" style={{minWidth:"250px"}}>
+        <Box
+          className="d-flex flex-column gap-2 mx-2 py-3"
+          style={{ minWidth: "250px" }}
+        >
           {type &&
             buttonActions[type].map((action) => (
               <Button
@@ -450,18 +460,28 @@ const saveRotatedImage = async () => {
               className="m-0 bg-primary text-white p-3 rounded"
               onClick={rotateLeft}
             >
-              Rotate left<RotateLeftIcon/>
+              Rotate left
+              <RotateLeftIcon />
             </Button>
 
             <Button
               className="m-0 bg-primary text-white p-3 rounded"
               onClick={rotateRight}
             >
-              Rotate Right<RotateRight/>
+              Rotate Right
+              <RotateRight />
             </Button>
             <Button
               className="m-0 bg-primary text-white p-3 rounded"
-              onClick={()=>saveRotatedImage(imageName,tableNameData,rotateAngle,data, setIsLoading)}
+              onClick={() =>
+                saveRotatedImage(
+                  imageName,
+                  tableNameData,
+                  rotateAngle,
+                  data,
+                  setIsLoading
+                )
+              }
             >
               Save
             </Button>
@@ -476,7 +496,17 @@ const saveRotatedImage = async () => {
         </Box>
       </Box>
       {isLoading && <LoadingContainer loadingText={"Loading ..."} />}
-      {showEditContainer && <PlayGroundEditContainer type={type} rotateAngle={rotateAngle} data={data} s3Path={data[s3_image_column]} tableName={tableName} imageName={data["image_name"]} setShowEditContainer={setShowEditContainer}/>}
+      {showEditContainer && (
+        <PlayGroundEditContainer
+          type={type}
+          rotateAngle={rotateAngle}
+          data={data}
+          s3Path={data[s3_image_column]}
+          tableName={tableName}
+          imageName={data["image_name"]}
+          setShowEditContainer={setShowEditContainer}
+        />
+      )}
     </Box>
   );
 };

src/Components/PlayGround.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import {
   DesktopOutlined,
   FileOutlined,
@@ -28,7 +28,7 @@ import {
   updatePlaygroundTotalPages,
   updateSystemNo,
 } from "../redux/actions/actions";
-
+import { Select } from "antd";
 
 import CustomQueryExecutorCard from "./CustomQueryExecutorCard";
 import SimpleDialog from "./SimpleDialog";
@@ -48,7 +48,7 @@ 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);
@@ -68,7 +68,7 @@ const PlayGround = () => {
     }
   }, [type, tableName]);
 
-  const [responseData, setResponseData] = useState([]);
+  const [responseData, setResponseData] = useState(null);
   const [totalData, setTotalData] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
@@ -78,6 +78,7 @@ const PlayGround = () => {
   const [paginationPages, setPaginationPages] = useState(null);
   const [limit, setLimit] = useState("");
   const recordsPerPage = 50;
+  const resultsContainerRef = useRef();
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const reduxPlaygroundQuery = useSelector((state) => state?.playGroundQuery);
@@ -111,12 +112,15 @@ const PlayGround = () => {
   }, [reduxPlaygroundTotalPages]);
 
   useEffect(() => {
-    console.log("1234  ---- useEffect")
+    console.log("1234  ---- useEffect");
     if (totalData.length == 0 && reduxPlaygroundResults) {
       console.log("Redux playground results if ...");
-      console.log("reduxPlaygroundResults.type === type ",reduxPlaygroundResults.type === type)
+      console.log(
+        "reduxPlaygroundResults.type === type ",
+        reduxPlaygroundResults.type === type
+      );
       if (reduxPlaygroundResults.type === type) {
-        console.log("Into if ...")
+        console.log("Into if ...");
         setTotalData(reduxPlaygroundResults?.data);
         setImageColumn("s3_path");
       }
@@ -131,6 +135,14 @@ const PlayGround = () => {
   }, [reduxPlaygroundPageNo]);
 
   const fetchQueryValue = async () => {
+    // console.log("results container ref ===== ", resultsContainerRef);
+    // if (resultsContainerRef) {
+    //   console.log(
+    //     "Results container ref current ===== ",
+    //     resultsContainerRef.current
+    //   );
+    //   resultsContainerRef.current.innerHTML = "";
+    // }
     if (query.includes("limit")) {
       alert("Please specify the limit in the input field.");
       return;
@@ -241,7 +253,14 @@ const PlayGround = () => {
   }, [currentPage, totalPages]);
 
   const getTableData = () => {
-    if (responseData.length === 0) return null;
+    if (totalData.length === 0) {
+      return (
+        <Box className="bg-white rounded p-3 my-3 w-100 h6">
+          No Results Found ...
+        </Box>
+      );
+    }
+
     const keys = Object.keys(totalData[0]);
 
     return (
@@ -289,20 +308,31 @@ const PlayGround = () => {
           )}
         </div>
         <div className="my-2 overflow-auto">
-          {responseData.map((data) => (
+          {responseData ? (
-            <CustomQueryExecutorCard
+            responseData.length > 0 ? (
-              type={type}
+              responseData.map((data) => (
-              tableName={tableName}
+                <CustomQueryExecutorCard
-              data={data}
+                  type={type}
-              s3_image_column={imageColumn}
+                  tableName={tableName}
-              query={query}
+                  data={data}
-            />
+                  s3_image_column={imageColumn}
-          ))}
+                  query={query}
+                />
+              ))
+            ) : (
+              <Box>No Results Found ...</Box>
+            )
+          ) : null}
         </div>
       </div>
     );
   };
 
+  const handleSelect = (e) => {
+    console.log("E ======= ", e);
+    setImageColumn(e);
+  };
+
   return (
     <AntdesignLayout>
       <div className="mx-3">
@@ -317,11 +347,16 @@ const PlayGround = () => {
                 value={limit}
                 setValue={setLimit}
               />
-              <TextInputField
+              {totalData && totalData.length > 0 ? (
-                placeholder={"imageColumn"}
+                <Select onChange={handleSelect} style={{ height: "50px" }}>
-                value={imageColumn}
+                  {Object.keys(totalData[0]).map((key) => (
-                setValue={setImageColumn}
+                    <Select.Option key={key} value={key}>
-              />
+                      {key}
+                    </Select.Option>
+                  ))}
+                </Select>
+              ) : null}
+
               <button
                 className="btn bg-primary text-light"
                 id="submit-btn"
@@ -343,15 +378,16 @@ const PlayGround = () => {
                 value={limit}
                 onChange={(e) => setLimit(e.target.value)}
               />
-              <TextField
+              {totalData && totalData.length > 0 ? (
-                className="input rounded h6 bg-white"
+                <Select onChange={handleSelect} style={{ height: "50px" }}>
-                type="text"
+                  {Object.keys(totalData[0]).map((key) => (
-                placeholder="Image column name"
+                    <Select.Option key={key} value={key}>
-                id="image-column-input"
+                      {key}
-                autoComplete="off"
+                    </Select.Option>
-                value={imageColumn}
+                  ))}
-                onChange={(e) => setImageColumn(e.target.value)}
+                </Select>
-              />
+              ) : null}
+
               <button
                 className="btn bg-primary text-light"
                 id="submit-btn"
@@ -364,6 +400,7 @@ const PlayGround = () => {
         </div>
         <div
           id="results-container"
+          ref={resultsContainerRef}
           className="d-flex w-100 justify-content-center"
         >
           {getTableData()}

src/Components/PlayGroundEditContainer.jsx

@@ -9,6 +9,7 @@ import { NavLink, Link } from "react-router-dom";
 import TextInputField from "./TextInputField";
 import { Height } from "@mui/icons-material";
 import HighlightOffIcon from "@mui/icons-material/HighlightOff";
+import LoadingContainer from "./LoadingContainer";
 import {toast} from "react-toastify"
 
 const PlayGroundEditContainer = ({
@@ -130,8 +131,14 @@ const PlayGroundEditContainer = ({
     }
   };
 
+  const imageStyle = {
+    transform:`rotate(${rotateAngle})deg`
+  }
+
+  console.log("Image style ====== ",imageStyle)
+
   return (
-    <Dialog open={open} onClose={handleClose} maxWidth="xl" style={{zIndex:100}} fullWidth>
+    <Dialog open={open} sx={{ zIndex: 'fab' }} onClose={handleClose} maxWidth="xl" style={{zIndex:100}} fullWidth>
       <DialogContent>
         <Box className="d-flex justify-content-between align-items-start gap-4">
           <Box className="d-flex flex-column">
@@ -198,6 +205,7 @@ const PlayGroundEditContainer = ({
           </Box>
         </Box>
       </DialogContent>
+      {isLoading && <LoadingContainer/>}
     </Dialog>
   );
 };

src/Components/QueryExecutor.jsx

@@ -6,7 +6,7 @@ import {
   TeamOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import { Breadcrumb, Layout, Menu, Typography, theme } from "antd";
+import { Breadcrumb, Layout, Menu, Select, Typography, theme } from "antd";
 import { ToastContainer, toast } from "react-toastify";
 import { Box, Button } from "@mui/material";
 import TextField from "@mui/material/TextField";
@@ -50,7 +50,7 @@ const QueryExecutor = () => {
   const [imageColumn, setImageColumn] = useState(null);
   const [query, setQuery] = useState("");
   const [isLoading, setIsLoading] = useState(false);
-  const [paginationPages,setPaginationPages] = useState(null)
+  const [paginationPages, setPaginationPages] = useState(null);
   const [limit, setLimit] = useState("");
   const recordsPerPage = 50;
   const navigate = useNavigate();
@@ -88,13 +88,13 @@ const QueryExecutor = () => {
   useEffect(() => {
     if (totalData.length == 0 && reduxPlaygroundResults.length > 0) {
       setTotalData(reduxPlaygroundResults);
-      setImageColumn("s3_path")
+      setImageColumn("s3_path");
     }
   }, [reduxPlaygroundResults]);
 
   useEffect(() => {
     if (currentPage == 0 && reduxPlaygroundPageNo !== 0) {
-      console.log("Updating in use effect ============================= >")
+      console.log("Updating in use effect ============================= >");
       setCurrentPage(reduxPlaygroundPageNo);
     }
   }, [reduxPlaygroundPageNo]);
@@ -144,7 +144,7 @@ const QueryExecutor = () => {
         dispatch(updatePlaygroundResults(data?.results));
         const totalPageCount = Math.ceil(data?.results.length / recordsPerPage);
         setTotalPages(totalPageCount);
-        dispatch(updatePlaygroundTotalPages(totalPages))
+        dispatch(updatePlaygroundTotalPages(totalPages));
         setCurrentPage(1);
         setResponseData(data.results.slice(0, recordsPerPage));
       } else {
@@ -159,11 +159,10 @@ const QueryExecutor = () => {
     dispatch(updatePlaygroundQuery(query));
   }, [query]);
 
-
   useEffect(() => {
     if (totalData.length > 0) {
-      setResponseData([])
+      setResponseData([]);
-      console.log(" ===========================>>>>>>>>>>>>>>>>>>>>>>>> ")
+      console.log(" ===========================>>>>>>>>>>>>>>>>>>>>>>>> ");
       setIsLoading(true);
       setTimeout(() => {
         const startIndex = (currentPage - 1) * recordsPerPage;
@@ -173,7 +172,7 @@ const QueryExecutor = () => {
       }, 1000);
     }
     dispatch(updatePlaygroundCurrentPage(currentPage));
-    renderPagination()
+    renderPagination();
   }, [currentPage, totalData]);
 
   const renderPagination = () => {
@@ -192,7 +191,7 @@ const QueryExecutor = () => {
         </span>
       );
     }
-    setPaginationPages(pages)
+    setPaginationPages(pages);
   };
 
   useEffect(() => {
@@ -201,7 +200,15 @@ const QueryExecutor = () => {
   }, [currentPage, totalPages]);
 
   const getTableData = () => {
-    if (responseData.length === 0) return null;
+    console.log("total data in get table data ================ ",totalData)
+    if (totalData.length === 0){
+      console.log("Total data length ======= 0",totalData?.length)
+      return (
+        <Box className="bg-white rounded p-3 my-3 w-100 h6">No Results Found ...</Box>
+      )
+    }
+
+
     const keys = Object.keys(totalData[0]);
 
     return (
@@ -249,18 +256,38 @@ const QueryExecutor = () => {
           )}
         </div>
         <div className="my-2 overflow-auto">
-          {responseData.map((data) => (
+          {responseData ? (
-            <QueryExecutorCard
+            responseData.length > 0 ? (
-              data={data}
+              responseData.map((data) => (
-              s3_image_column={imageColumn}
+                <QueryExecutorCard
-              query={query}
+                  key={data.id} // Assuming 'data' has a unique 'id' property
-            />
+                  data={data}
-          ))}
+                  s3_image_column={imageColumn}
+                  query={query}
+                />
+              ))
+            ) : (
+              <Box>No Results Found ...</Box>
+            )
+          ) : null}
         </div>
       </div>
     );
   };
 
+  const handleSelect = (e) => {
+    console.log("E ======= ", e);
+    setImageColumn(e);
+  };
+
+  useEffect(() => {
+    console.log("Use effect ============ ", responseData);
+  }, [responseData]);
+
+  useEffect(() => {
+    console.log("Image column use effect .......... ", imageColumn);
+  }, [imageColumn]);
+
   return (
     <AntdesignLayout>
       <div className="mx-3">
@@ -275,11 +302,22 @@ const QueryExecutor = () => {
                 value={limit}
                 setValue={setLimit}
               />
-              <TextInputField
+              {/* <TextInputField
                 placeholder={"imageColumn"}
                 value={imageColumn}
                 setValue={setImageColumn}
-              />
+              /> */}
+
+              {totalData && totalData.length > 0 ? (
+                <Select onChange={handleSelect} style={{ height: "50px" }}>
+                  {Object.keys(totalData[0]).map((key) => (
+                    <Select.Option key={key} value={key}>
+                      {key}
+                    </Select.Option>
+                  ))}
+                </Select>
+              ) : null}
+
               <button
                 className="btn bg-primary text-light"
                 id="submit-btn"
@@ -301,7 +339,7 @@ const QueryExecutor = () => {
                 value={limit}
                 onChange={(e) => setLimit(e.target.value)}
               />
-              <TextField
+              {/* <TextField
                 className="input rounded h6 bg-white"
                 type="text"
                 placeholder="Image column name"
@@ -309,7 +347,17 @@ const QueryExecutor = () => {
                 autoComplete="off"
                 value={imageColumn}
                 onChange={(e) => setImageColumn(e.target.value)}
-              />
+              /> */}
+              {totalData && totalData.length > 0 ? (
+                <Select onChange={handleSelect} style={{ height: "50px" }}>
+                  {Object.keys(totalData[0]).map((key) => (
+                    <Select.Option key={key} value={key}>
+                      {key}
+                    </Select.Option>
+                  ))}
+                </Select>
+              ) : null}
+
               <button
                 className="btn bg-primary text-light"
                 id="submit-btn"

src/Components/Utilities/PartAPlaygroundUtilities.jsx

@@ -1,34 +1,37 @@
 import { toast } from "react-toastify";
 
 const markAsPartc = async (data) => {
-    try {
+  try {
-      console.log("data=", data)
+    console.log("data=", data);
-      if (rotateAngle === 0) {
+    if (rotateAngle === 0) {
-        return;
+      return;
-      }
-      const payload = {
-        data
-      };
-      setIsLoading(true);
-      const response = await fetch(
-        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/markAsPartc`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(payload),
-        }
-      );
-      setIsLoading(false);
-      const responseData = await response.json();
-      if (responseData.status === "success") {
-        toast.success("record updated")
-      }
-    } catch (error) {
-      setIsLoading(false);
-      throw new Error(error);
     }
-  };
+    const payload = {
+      data,
+    };
+    setIsLoading(true);
+    const response = await fetch(
+      `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/markAsPartc`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      }
+    );
+    setIsLoading(false);
+    const responseData = await response.json();
+    if (responseData.status === "success") {
+      toast.success("record updated");
+    } else {
+      toast.error("Something Went Wrong !...");
+    }
+  } catch (error) {
+    setIsLoading(false);
+    toast.error("Something Went Wrong !...");
+    throw new Error(error);
+  }
+};
 
-  export default markAsPartc
+export default markAsPartc;