Merge pull request #96 from AkshataKatwal16/page-issue

Issue feat:Add searchbar in publish page
tekdi · Nov 17, 2024 · b467af4 · b467af4
2 parents f2ac641 + 091e765
commit b467af4
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 73 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,10 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@module-federation/nextjs-mf": "^8.5.5",
-    "@module-federation/utilities": "3.0.11",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@module-federation/nextjs-mf": "^8.5.5",
+    "@module-federation/utilities": "3.0.11",
     "@mui/icons-material": "^5.15.15",
     "@mui/material": "^5.15.21",
     "@project-sunbird/sunbird-collection-editor-web-component": "^1.6.0",
@@ -41,7 +41,8 @@
     "reflect-metadata": "^0.1.13",
     "svg2img": "^1.0.0-beta.2",
     "url": "^0.11.3",
-    "uuid": "^10.0.0"
+    "uuid": "^10.0.0",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@types/jquery": "^3.5.31",
@@ -55,4 +56,4 @@
     "typescript": "^5.6.2",
     "webpack": "^5.76.2"
   }
-}
+}
diff --git a/src/components/ActionIcon.tsx b/src/components/ActionIcon.tsx
@@ -12,6 +12,7 @@ const ActionIcon: React.FC<ActionCellProps> = ({
 }) => {
   const theme = useTheme<any>();
   const [open, setOpen] = useState(false);
+
   const handleClose = () => {
     setOpen(false);
   };
@@ -27,7 +28,7 @@ const ActionIcon: React.FC<ActionCellProps> = ({
         alignItems: "center",
       }}
     >
-      <Tooltip title={"COMMON.DELETE"}>
+      <Tooltip title={"Delete"}>
         <Box
           onClick={() => {
             console.log(rowData);

diff --git a/src/components/DeleteConfirmation.tsx b/src/components/DeleteConfirmation.tsx
@@ -23,17 +23,19 @@ const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({
   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();
   };

diff --git a/src/components/KaTableComponent.tsx b/src/components/KaTableComponent.tsx
@@ -9,7 +9,6 @@ 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<{
@@ -73,23 +72,7 @@ const KaTableComponent: React.FC<CustomTableProps> = ({ data, columns, tableTitl
       router.push({ pathname: `/collection`, query: { identifier, mode } });
     }
   };
-
-  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 (
+ return (
     <>
      <KaTable
       columns={columns}
@@ -213,6 +196,9 @@ const KaTableComponent: React.FC<CustomTableProps> = ({ data, columns, tableTitl
           },
         },
       }}
+      noData={{
+        text: "No data found",
+      }}
     />
     </>
 

diff --git a/src/components/SearchBox.tsx b/src/components/SearchBox.tsx
@@ -42,7 +42,7 @@ const SearchBox: React.FC<SearchBarProps> = ({
   const theme = useTheme<any>();
   const [searchTerm, setSearchTerm] = useState(value);
   const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
-  const [sortBy, setSortBy] = useState<string>("");
+  const [sortBy, setSortBy] = useState<string>("Modified On");
   const [primaryCategory, setPrimaryCategory] = useState<string[]>();
 
   useEffect(() => {

diff --git a/src/pages/workspace/content/allContents/index.tsx b/src/pages/workspace/content/allContents/index.tsx
@@ -52,16 +52,16 @@ const AllContentsPage = () => {
   const [rowsPerPage, setRowsPerPage] = useState(10);
   const [searchTerm, setSearchTerm] = useState("");
   const [filter, setFilter] = useState<string[]>([]);
-  const [sortBy, setSortBy] = useState("updated");
-  const [contentList, setContentList] = React.useState<content[]>([]);
+  const [sortBy, setSortBy] = useState("Modified On");
+ const [contentList, setContentList] = React.useState<content[]>([]);
   const [data, setData] = React.useState<any[]>([]);
 
   const [loading, setLoading] = useState(false);
   const [contentDeleted, setContentDeleted] = React.useState(false);
   const [debouncedSearchTerm, setDebouncedSearchTerm] =
     useState<string>(searchTerm);
   const [totalCount, setTotalCount] = useState(0);
-
+  
   const handleChangePage = (event: unknown, newPage: number) => {
     setPage(newPage - 1);
   };
@@ -92,6 +92,7 @@ const AllContentsPage = () => {
   };
 
   const handleSortChange = (sortBy: string) => {
+    console.log("sortBy", sortBy)
     setSortBy(sortBy);
   };
 
@@ -135,7 +136,7 @@ const AllContentsPage = () => {
       }
     };
     getContentList();
-  }, [debouncedSearchTerm, filter, sortBy, contentDeleted, page]);
+  }, [debouncedSearchTerm, filter, sortBy,  page]);
 
   useEffect(() => {
     const filteredArray = contentList.map(item => ({
@@ -187,21 +188,14 @@ const AllContentsPage = () => {
               onSortChange={handleSortChange}
             />
           </Box>
-
-
-          {loading ? (
+              {loading ? (
             <Loader showBackdrop={true} loadingText={"Loading"} />
-          ) : contentList && contentList.length > 0 ? (
-            contentList &&
-            contentList.length > 0 && (
-              <>
+          ) : (
+            <>
                 <Box className="table-ka-container">
                   <KaTableComponent columns={columns} tableTitle="all-content" data={data} />
                 </Box>
               </>
-            )
-          ) : (
-            <NoDataFound />
           )}
         </Box>
 

diff --git a/src/pages/workspace/content/draft/index.tsx b/src/pages/workspace/content/draft/index.tsx
@@ -41,7 +41,7 @@ const DraftPage = () => {
   const [rowsPerPage, setRowsPerPage] = useState(5);
   const [searchTerm, setSearchTerm] = useState("");
   const [filter, setFilter] = useState<string[]>([]);
-  const [sortBy, setSortBy] = useState("updated");
+  const [sortBy, setSortBy] = useState("Modified On");
   const [contentList, setContentList] = React.useState([]);
   const [contentDeleted, setContentDeleted] = React.useState(false);
   const [loading, setLoading] = useState(false);
@@ -156,19 +156,16 @@ const DraftPage = () => {
               onSortChange={handleSortChange}
             />
           </Box>
-          {loading ? (
+         {loading ? (
             <Box display="flex" justifyContent="center" my={5}>
               <CircularProgress />
             </Box>
-          ) : contentList && contentList.length > 0 ? (
-            <Box className="table-ka-container">
+          ) :(<>
+           <Box className="table-ka-container">
               <KaTableComponent columns={columns} data={data} tableTitle="draft"  />
             </Box>
-
-          ) : (
-            <NoDataFound />
+          </>
           )}
-
           {totalCount > LIMIT && (
             <PaginationComponent
               count={Math.ceil(totalCount / LIMIT)}

diff --git a/src/pages/workspace/content/publish/index.tsx b/src/pages/workspace/content/publish/index.tsx
@@ -40,7 +40,7 @@ const PublishPage = () => {
   const [rowsPerPage, setRowsPerPage] = useState(5);
   const [searchTerm, setSearchTerm] = useState("");
   const [filter, setFilter] = useState<string[]>([]);
-  const [sortBy, setSortBy] = useState("updated");
+  const [sortBy, setSortBy] = useState("Modified On");
   const [contentList, setContentList] = React.useState([]);
   const [contentDeleted, setContentDeleted] = React.useState(false);
   const [loading, setLoading] = useState(false);
@@ -153,31 +153,35 @@ const PublishPage = () => {
             >
               Published
             </Typography>
+
+          </Box>
+          <Box mb={3}>
+            <SearchBox
+              placeholder="Search by title..."
+              onSearch={handleSearch}
+              onFilterChange={handleFilterChange}
+              onSortChange={handleSortChange}
+            />
           </Box>
           {/* <Typography mb={2}>Here you see all your published content.</Typography> */}
-
-
-          {loading ? (
+{loading ? (
             <Box display="flex" justifyContent="center" my={5}>
               <CircularProgress />
             </Box>
-          ) : contentList && contentList.length > 0 ? (
-            <Box className="table-ka-container">
+          ) : (<>
+          <Box className="table-ka-container">
               <KaTableComponent columns={columns} data={data} tableTitle="publish" />
             </Box>
-          ) : (
-            <NoDataFound />
-          )}
-
-
-          {totalCount > LIMIT && (
+          </>)}
+            {totalCount > LIMIT && (
             <PaginationComponent
               count={Math.ceil(totalCount / LIMIT)}
               page={page}
               onPageChange={(event, newPage) => setPage(newPage - 1)}
             />
           )}
         </Box>
+
       </Box>
     </Layout>
   );

diff --git a/src/pages/workspace/content/review/index.tsx b/src/pages/workspace/content/review/index.tsx
@@ -17,6 +17,7 @@ import ReviewCommentPopup from "../../../../components/ReviewCommentPopup";
 import { publishContent, submitComment } from "@/services/ContentService";
 import Players from "@/components/players/Players";
 import V1Player from "@/components/V1-Player/V1Player";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import {
   playerConfig,
   V1PlayerConfig,
@@ -134,7 +135,9 @@ const ReviewContentSubmissions = () => {
       year: "numeric",
     });
   };
-
+  const handleBackClick = () => {
+    router.back();
+  };
   return (
     <Card sx={{ padding: 2, backgroundColor: "white" }}>
       <Box
@@ -143,6 +146,9 @@ const ReviewContentSubmissions = () => {
         alignItems="center"
         mb={2}
       >
+         <IconButton onClick={handleBackClick}>
+            <ArrowBackIcon />
+          </IconButton>
         <Typography
           variant="h5"
           sx={{