Merge pull request #117 from AkshataKatwal16/page-issue

Issue feat:Add filter by status on all my content and UI enhancement
tekdi · Nov 25, 2024 · 230411e · 230411e
2 parents dfd1ebb + 0ac6064
commit 230411e
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 16 deletions.
diff --git a/.github/workflows/dev-deployment.yaml b/.github/workflows/dev-deployment.yaml
@@ -88,4 +88,4 @@ jobs:
         sleep 10
         kubectl get pods
         kubectl get services
-        kubectl get deployment 
+        kubectl get deployment 
diff --git a/src/components/KaTableComponent.tsx b/src/components/KaTableComponent.tsx
@@ -186,11 +186,19 @@ const KaTableComponent: React.FC<CustomTableProps> = ({ data, columns, tableTitl
             }
             else if(props.column.key === "create-by")
             {
+              if(props.rowData.creator)
               return (
                 <Typography sx={{ fontSize: '14px', fontWeight: 500 }} variant="body2" color={'#987100'}>
                   {props.rowData.creator}
                 </Typography>
               )
+              else
+              return (
+                <Typography sx={{ fontSize: '14px', fontWeight: 500 }} variant="body2" color={'#987100'}>
+                  -
+                </Typography>
+              )
+
             }
             else if (props.column.key === 'contentAction') {
                {

diff --git a/src/components/SearchBox.tsx b/src/components/SearchBox.tsx
@@ -19,7 +19,7 @@ import SearchIcon from "@mui/icons-material/Search";
 import ClearIcon from "@mui/icons-material/Clear";
 import { debounce } from "@/utils/Helper";
 import { getPrimaryCategory } from "@/services/ContentService";
-import { SortOptions } from "@/utils/app.constant";
+import { SortOptions , StatusOptions} from "@/utils/app.constant";
 
 export interface SearchBarProps {
   onSearch: (value: string) => void;
@@ -28,6 +28,8 @@ export interface SearchBarProps {
   placeholder: string;
   onFilterChange?: (selectedFilters: string[]) => void;
   onSortChange?: (sortBy: string) => void;
+  onStatusChange?: (status: string) => void;
+  allContents?: boolean
 }
 
 const sortOptions = SortOptions;
@@ -38,11 +40,15 @@ const SearchBox: React.FC<SearchBarProps> = ({
   placeholder = "Search...",
   onFilterChange,
   onSortChange,
+  onStatusChange,
+  allContents=false
 }) => {
   const theme = useTheme<any>();
   const [searchTerm, setSearchTerm] = useState(value);
   const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
   const [sortBy, setSortBy] = useState<string>("Modified On");
+  const [status, setStatus] = useState<string>("");
+
   const [primaryCategory, setPrimaryCategory] = useState<string[]>();
 
   useEffect(() => {
@@ -100,6 +106,11 @@ const SearchBox: React.FC<SearchBarProps> = ({
     onSortChange && onSortChange(value);
   };
 
+  const handleStatusChange = (event: SelectChangeEvent<string>) => {
+    const value = event.target.value as string;
+    setStatus(value);
+    onStatusChange && onStatusChange(value);
+  };
   return (
     <Grid container gap={1} alignItems={"center"}>
       <Grid item xs={12} md={5}>
@@ -194,9 +205,9 @@ const SearchBox: React.FC<SearchBarProps> = ({
         </FormControl>
 
       </Grid>
-
-      <Grid item xs={12} md={3} sx={{ mx: theme.spacing(2.5) }} justifySelf={"end"}>
-        <FormControl sx={{ width: "100%", mt: 2,  }}>
+    
+      <Grid xs={12} md={3} sx={{ mx: theme.spacing(2.5) }} justifySelf={"end"}>
+        <FormControl sx={{ width: "100%", mt: 2 }}>
           <InputLabel>Sort By</InputLabel>
           <Select
             value={sortBy}
@@ -211,6 +222,22 @@ const SearchBox: React.FC<SearchBarProps> = ({
           </Select>
         </FormControl>
       </Grid>
+     {allContents &&(<Grid item xs={3} md={3} ml={3} justifySelf={"end"}>
+        <FormControl sx={{ width: "100%", mt: 2 }}>
+          <InputLabel>Filter By Status</InputLabel>
+          <Select
+            value={status}
+            onChange={handleStatusChange}
+            input={<OutlinedInput label="Filter By Status" />}
+          >
+            {StatusOptions?.map((option) => (
+              <MenuItem key={option} value={option}>
+                {option}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </Grid>)}
     </Grid>
   );
 };

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
@@ -21,7 +21,7 @@ import {
 import Image from "next/image";
 import { useRouter } from "next/router";
 import React, { useState } from "react";
-
+import ManageSearchIcon from '@mui/icons-material/ManageSearch';
 import logo from "/public/logo.png";
 import { Role } from "@/utils/app.constant";
 import { getLocalStoredUserRole } from "@/services/LocalStorageService";
@@ -38,9 +38,9 @@ const menuItems = [
   ...(userRole === Role.CCTA
     ? [{ text: "Up for Review", key: "up-review", icon: <PreviewOutlinedIcon /> }]
     : []),
-  { text: "Published", key: "publish", icon: <OutlinedFlagOutlinedIcon /> },
+  { text: "My Published Contents", key: "publish", icon: <OutlinedFlagOutlinedIcon /> },
   { text: "All My Contents", key: "allContents", icon: <AppsOutlinedIcon /> },
-  { text: "Discover-contents", key: "discover-contents", icon: <AppsOutlinedIcon /> },
+  { text: "Discover-contents", key: "discover-contents", icon: <ManageSearchIcon /> },
 
 ];
 

diff --git a/src/pages/workspace/content/allContents/index.tsx b/src/pages/workspace/content/allContents/index.tsx
@@ -54,6 +54,8 @@ const AllContentsPage = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [filter, setFilter] = useState<string[]>([]);
   const [sortBy, setSortBy] = useState("Modified On");
+  const [statusBy, setStatusBy] = useState("");
+
  const [contentList, setContentList] = React.useState<content[]>([]);
   const [data, setData] = React.useState<any[]>([]);
 
@@ -99,13 +101,16 @@ const AllContentsPage = () => {
     console.log("sortBy", sortBy)
     setSortBy(sortBy);
   };
+  const handleStatusChange = (statusBy: string) => {
+    setStatusBy(statusBy);
+  };
 
 
   useEffect(() => {
     const getContentList = async () => {
       try {
         setLoading(true);
-        const status = [
+        let status=[
           "Draft",
           "FlagDraft",
           "Review",
@@ -114,6 +119,33 @@ const AllContentsPage = () => {
           "Unlisted",
           "FlagReview",
         ];
+        if (statusBy === "" || statusBy === "All") {
+           status = [
+            "Draft",
+            "FlagDraft",
+            "Review",
+            "Processing",
+            "Live",
+            "Unlisted",
+            "FlagReview",
+          ];
+        }
+        else if (statusBy === "Live") {
+          status = ["Live"];
+        }
+        else if (statusBy === "Review") {
+          status = ["Review"];
+        }
+        else if (statusBy === "Draft") {
+          status = ["Draft"];
+        }
+        else if (statusBy === "Unlisted") {
+          status = ["Unlisted"];
+        }
+        else if (statusBy === "FlagReview") {
+          status = ["FlagReview"];
+        }
+
         const query = debouncedSearchTerm || "";
         const primaryCategory = filter.length ? filter : [];
         const order = sortBy === "Created On" ? "asc" : "desc";
@@ -140,7 +172,7 @@ const AllContentsPage = () => {
       }
     };
     getContentList();
-  }, [debouncedSearchTerm, filter,fetchContentAPI, sortBy,  page]);
+  }, [debouncedSearchTerm, filter,fetchContentAPI, sortBy, statusBy, page]);
 
   useEffect(() => {
     const filteredArray = contentList.map(item => ({
@@ -193,6 +225,8 @@ const AllContentsPage = () => {
               onSearch={handleSearch}
               onFilterChange={handleFilterChange}
               onSortChange={handleSortChange}
+              onStatusChange={handleStatusChange}
+              allContents={true}
             />
           </Box>
               {loading ? (

diff --git a/src/pages/workspace/content/discover-contents/index.tsx b/src/pages/workspace/content/discover-contents/index.tsx
@@ -37,19 +37,19 @@ import useSharedStore from "@/utils/useSharedState";
 
 // ]
 const columns = [
-  { key: 'name', title: 'TITLE & DESCRIPTION', dataType: DataType.String, width: "450px" },
-  { key: 'contentType', title: 'CONTENT TYPE', dataType: DataType.String, width: "250px" },
-  { key: 'status', title: 'STATUS', dataType: DataType.String, width: "100px" },
-  { key: 'lastUpdatedOn', title: 'LAST MODIFIED', dataType: DataType.String, width: "180px" },
-  { key: 'contentAction', title: 'ACTION', dataType: DataType.String, width: "100px" },
+  { key: 'name', title: 'TITLE & DESCRIPTION', dataType: DataType.String, width: "200px" },
   { key: 'create-by', title: 'CREATED BY', dataType: DataType.String, width: "100px" },
 
+  { key: 'contentType', title: 'CONTENT TYPE', dataType: DataType.String, width: "100px" },
+  { key: 'status', title: 'STATUS', dataType: DataType.String, width: "100px" },
+  { key: 'lastUpdatedOn', title: 'LAST MODIFIED', dataType: DataType.String, width: "100px" },
+
 
 ]
 const ContentsPage = () => {
   const theme = useTheme<any>();
 
-  const [selectedKey, setSelectedKey] = useState("contents");
+  const [selectedKey, setSelectedKey] = useState("discover-contents");
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
   const [searchTerm, setSearchTerm] = useState("");

diff --git a/src/utils/app.constant.ts b/src/utils/app.constant.ts
@@ -12,6 +12,8 @@ export enum Role {
   CCTA="Central Admin CCTA"
 }
 export const SortOptions = ["Modified On", "Created On"];
+export const StatusOptions = ["Live", "Review" ,  "Draft", "All"];
+
 
 export const LIMIT = 10;