Merge pull request #94 from AkshataKatwal16/page-issue

Issue feat:Modify delete functionality and optimise code

src/components/ActionIcon.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { Box, Typography, Tooltip, useTheme } from "@mui/material";
+import DeleteConfirmation from "./DeleteConfirmation";
+
+interface ActionCellProps {
+  rowData?: any;
+}
+
+const ActionIcon: React.FC<ActionCellProps> = ({
+  rowData,
+  //  onEdit,
+}) => {
+  const theme = useTheme<any>();
+  const [open, setOpen] = useState(false);
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleOpen = () => {
+    setOpen(true);
+  };
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        gap: "20px",
+        alignItems: "center",
+      }}
+    >
+      <Tooltip title={"COMMON.DELETE"}>
+        <Box
+          onClick={() => {
+            console.log(rowData);
+
+            handleOpen();
+          }}
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            cursor: "pointer",
+            backgroundColor: "#F8EFE7",
+            p: "10px",
+          }}
+        >
+          <img src={"/delete.png"} height="20px" alt="Image" />
+        </Box>
+      </Tooltip>
+
+      <DeleteConfirmation
+        open={open}
+        handleClose={handleClose}
+        rowData={rowData}
+      />
+    </Box>
+  );
+};
+
+export default ActionIcon;

src/components/DeleteConfirmation.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Button,
+  IconButton,
+  Typography,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { deleteContent } from "@/services/ContentService";
+
+interface DeleteConfirmationProps {
+  open: boolean;
+  handleClose: any;
+  rowData?: any;
+}
+
+const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({
+  open,
+  rowData,
+  handleClose,
+}) => {
+  const handleDelete = async (content?: any) => {
+    console.log(`Deleting item at index`, rowData);
+
+    if (rowData?.identifier && rowData?.mimeType) {
+      try {
+        await deleteContent(rowData?.identifier, rowData?.mimeType);
+        console.log(`Deleted item with identifier - ${rowData?.identifier}`);
+        // setContentDeleted((prev) => !prev);
+      } catch (error) {
+        console.error("Failed to delete content:", error);
+      }
+    }
+    handleClose();
+  };
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="delete-confirmation-title"
+      aria-describedby="delete-confirmation-description"
+      maxWidth="xs"
+      fullWidth
+    >
+      <DialogTitle sx={{ m: 0, p: 2 }} id="delete-confirmation-title">
+        <Typography variant="h6">Confirm Deletion</Typography>
+        <IconButton
+          aria-label="close"
+          onClick={handleClose}
+          sx={{
+            position: "absolute",
+            right: 8,
+            top: 8,
+            color: (theme) => theme.palette.grey[500],
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent dividers>
+        <DialogContentText
+          id="delete-confirmation-description"
+          sx={{ textAlign: "center", mt: 1 }}
+        >
+          Are you sure you want to delete this item?
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions sx={{ justifyContent: "center", pb: 2 }}>
+        <Button onClick={handleClose} variant="outlined">
+          Cancel
+        </Button>
+        <Button onClick={handleDelete} variant="contained">
+          Delete
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default DeleteConfirmation;

src/components/KaTableComponent.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Table as KaTable } from 'ka-table';
 import { DataType, EditingMode, SortingMode } from 'ka-table/enums';
 import { Typography, useTheme, IconButton, Box } from '@mui/material';
@@ -8,7 +8,8 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import router from "next/router";
 import { MIME_TYPE } from "@/utils/app.config";
 import Image from "next/image";
-
+import ActionIcon from './ActionIcon';
+import { deleteContent } from '@/services/ContentService';
 interface CustomTableProps {
   data: any[]; // Define a more specific type for your data if needed
   columns: Array<{
@@ -20,9 +21,14 @@ interface CustomTableProps {
   tableTitle?: string
 }
 
-const KaTableComponent: React.FC<CustomTableProps> = ({ data, columns, handleDelete, tableTitle }) => {
+const KaTableComponent: React.FC<CustomTableProps> = ({ data, columns, tableTitle }) => {
   const theme = useTheme<any>();
+  const [open, setOpen] = useState(false);
 
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleOpen = () => setOpen(true);
 
   const openEditor = (content: any) => {
     const identifier = content?.identifier;
@@ -68,10 +74,24 @@ const KaTableComponent: React.FC<CustomTableProps> = ({ data, columns, handleDel
     }
   };
 
-
+  const handleDelete = async(content: any) => {
+    console.log(`Deleting item at index`, content);
+
+    if (content?.identifier && content?.mimeType) {
+      try {
+        await deleteContent(content?.identifier, content?.mimeType);
+        console.log(`Deleted item with identifier - ${content?.identifier}`);
+      //  setContentDeleted((prev) => !prev);
+      } catch (error) {
+        console.error("Failed to delete content:", error);
+      }
+    }
+    handleClose();
+  };
 
   return (
-    <KaTable
+    <>
+     <KaTable
       columns={columns}
       data={data}
       // editingMode={EditingMode.Cell}
@@ -161,30 +181,14 @@ const KaTableComponent: React.FC<CustomTableProps> = ({ data, columns, handleDel
             else if (props.column.key === 'contentAction') {
               if (props.rowData.status === "Draft") {
                 return (
-                  <Box
-                    onClick={handleDelete}
-
-                  >
-                    <Box sx={{
-                      background: '#FAEEEC',
-                      height: '42px',
-                      width: '42px',
-                      borderRadius: '12px',
-                      display: 'flex',
-                      justifyContent: 'center',
-                      alignItems: 'center'
-                    }}>
-
-                      {/* <Image src={'/logo.png'} alt="" /> */}
-                      <img
-                        src={'/delete.png'}
-                        height="20px"
-                        alt="Image"
-
-                      />
-
-                    </Box>
-                  </Box>
+                  <>
+
+
+
+                   <ActionIcon
+                   rowData={props.rowData}
+                 /></>
+
                 );
               }
             }
@@ -193,34 +197,25 @@ const KaTableComponent: React.FC<CustomTableProps> = ({ data, columns, handleDel
 
               return (
                 <Box
-                  onClick={handleDelete}
+                  onClick={handleOpen}
 
                 >
-                  <Box sx={{
-                    background: '#FAEEEC',
-                    height: '42px',
-                    width: '42px',
-                    borderRadius: '12px',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center'
-                  }}>
-
-                    <img
-                      src={'/delete.png'}
-                      height="20px"
-                      alt="Image"
+
+                         <ActionIcon
+                   rowData={props.rowData}
+
+                 />
 
-                    />
-                  </Box>
                 </Box>
               );
             }
-            return props.children; // Default content for other columns
+            return props.children; 
           },
         },
       }}
     />
+    </>
+
   );
 };
 

src/pages/workspace/content/allContents/index.tsx

@@ -95,18 +95,6 @@ const AllContentsPage = () => {
     setSortBy(sortBy);
   };
 
-  const openEditor = (content: any) => {
-    const identifier = content?.identifier;
-    const mode = content?.mode;
-    if (content?.mimeType === MIME_TYPE.QUESTIONSET_MIME_TYPE) {
-      router.push({ pathname: `/editor`, query: { identifier, mode } });
-    } else if (
-      content?.mimeType &&
-      MIME_TYPE.GENERIC_MIME_TYPE.includes(content?.mimeType)
-    ) {
-      router.push({ pathname: `/upload-editor`, query: { identifier } });
-    }
-  };
 
   useEffect(() => {
     const getContentList = async () => {
@@ -166,19 +154,7 @@ const AllContentsPage = () => {
     console.log(filteredArray)
   }, [contentList]);
 
-  const handleDeleteClick = async (content: any) => {
-    if (content?.identifier && content?.mimeType) {
-      try {
-        await deleteContent(content?.identifier, content?.mimeType);
-        console.log(`Deleted item with identifier - ${content?.identifier}`);
-        setTimeout(() => {
-          setContentDeleted((prev) => !prev);
-        }, 1000);
-      } catch (error) {
-        console.error("Failed to delete content:", error);
-      }
-    }
-  };
+
 
   const filteredData = useMemo(
     () =>

src/pages/workspace/content/draft/index.tsx

@@ -97,23 +97,7 @@ const DraftPage = () => {
 
   const router = useRouter();
 
-  const openEditor = (content: any) => {
-    const identifier = content?.identifier;
-    const mode = content?.mode;
-    if (content?.mimeType === MIME_TYPE.QUESTIONSET_MIME_TYPE) {
-      router.push({ pathname: `/editor`, query: { identifier, mode } });
-    } else if (
-      content?.mimeType &&
-      MIME_TYPE.GENERIC_MIME_TYPE.includes(content?.mimeType)
-    ) {
-      router.push({ pathname: `/upload-editor`, query: { identifier } });
-    } else if (
-      content?.mimeType &&
-      MIME_TYPE.COLLECTION_MIME_TYPE.includes(content?.mimeType)
-    ) {
-      router.push({ pathname: `/collection`, query: { identifier, mode } });
-    }
-  };
+
 
   useEffect(() => {
     const getDraftContentList = async () => {
@@ -178,7 +162,7 @@ const DraftPage = () => {
             </Box>
           ) : contentList && contentList.length > 0 ? (
             <Box className="table-ka-container">
-              <KaTableComponent columns={columns} data={data} tableTitle="draft" handleDelete={handleDelete} />
+              <KaTableComponent columns={columns} data={data} tableTitle="draft"  />
             </Box>
 
           ) : (

src/pages/workspace/content/publish/index.tsx

@@ -90,10 +90,7 @@ const PublishPage = () => {
     setSortBy(sortBy);
   };
 
-  const handleDelete = (index: number) => {
-    console.log(`Deleting item at index ${index}`);
-    setContentDeleted((prev) => !prev);
-  };
+
 
   const openEditor = (content: any) => {
     const identifier = content?.identifier;
@@ -166,7 +163,7 @@ const PublishPage = () => {
             </Box>
           ) : contentList && contentList.length > 0 ? (
             <Box className="table-ka-container">
-              <KaTableComponent columns={columns} data={data} tableTitle="publish" handleDelete={handleDelete} />
+              <KaTableComponent columns={columns} data={data} tableTitle="publish" />
             </Box>
           ) : (
             <NoDataFound />