Merge pull request #511 from AkshataKatwal16/master-data

Issue feat: Make the notification table responsive and add CCTA role-based privilege for notification page access.

src/components/RouteGuard.tsx

@@ -101,7 +101,7 @@ const RouteGuard: React.FC<{ children: React.ReactNode }> = ({ children }) => {
       }
     }
 
-    if (((user.role === Role.ADMIN || user.role === Role.CENTRAL_ADMIN) && (allowedPaths.includes(router.pathname) || isWorkspaceContent || isCoursePlannerContent)) ||  (user.role === Role.ADMIN && router.pathname === "/programs")) {
+    if (((user.role === Role.ADMIN || user.role === Role.CENTRAL_ADMIN) && (allowedPaths.includes(router.pathname) || isWorkspaceContent || isCoursePlannerContent)) ||  (user.role === Role.ADMIN && (router.pathname === "/programs" ||router.pathname === "/notification-templates" ))) {
 
       if (router.pathname !== "/login" && router.pathname !== "/logout" && router.pathname !== "/edit-password") {
 

src/components/layouts/sidebar/MenuItems.js

@@ -108,7 +108,9 @@ export const getFilteredMenuItems = () => {
         (item) =>
           item.title !== "SIDEBAR.COURSE_PLANNER" &&
           item.title !== "SIDEBAR.WORKSPACE" &&
-          item.title !== "PROGRAM_MANAGEMENT.PROGRAMS"
+          item.title !== "PROGRAM_MANAGEMENT.PROGRAMS" &&
+          item.title !== "SIDEBAR.MANAGE_NOTIFICATION"
+
 
       );
     }

src/components/notification-templates/TemplateTable.tsx

@@ -9,13 +9,19 @@ import { showToastMessage } from '../Toastify';
 import ConfirmationModal from '../ConfirmationModal';
 import { useTranslation } from 'react-i18next';
 import { useRouter } from 'next/router';
+import { useMediaQuery } from "@mui/material";
+import { Theme } from "@mui/system";
+import { getNotificationTableData } from '@/data/tableColumns';
 
 interface TemplateTableProps {
     searchKey: string;
     context: string;
 }
 
 const TemplateTable: React.FC<TemplateTableProps> = ({ searchKey = '', context }) => {
+    const isMobile = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.down("sm")
+  );
     const columns: ITableProps["columns"] = [
         { key: 'actionId', title: 'ID', dataType: DataType.Number, width: 50, style: { textAlign: 'center' }, },
         { key: 'title', title: 'TITLE', dataType: DataType.String, width: 180, style: { textAlign: 'center' }, },
@@ -84,7 +90,8 @@ const TemplateTable: React.FC<TemplateTableProps> = ({ searchKey = '', context }
 
     return (
         <>
-            <KaTableComponent columns={columns} data={filteredTemplates} rowKeyField={'actionId'} extraActions={[]} paginationEnable={false} onEdit={onEdit} onDelete={onDelete} />
+            <KaTableComponent              columns={getNotificationTableData(t, isMobile)}
+ data={filteredTemplates} rowKeyField={'actionId'} extraActions={[]} paginationEnable={false} onEdit={onEdit} onDelete={onDelete} />
             {
                 confirmationModalOpen &&
                 <ConfirmationModal

src/data/tableColumns.ts

@@ -8,18 +8,17 @@ interface ColumnConfig {
   width?: number;
   sortDirection?: SortDirection;
   isSortable?: boolean;
+  title?: string;
+  dataType?: DataType; // Added dataType field
+  style?:any
 }
 const isActiveYear = store.getState().isActiveYearSelected;
 
-const generateColumns = (
-  t: any,
-  configs: ColumnConfig[],
-  isMobile: boolean
-) => {
+const generateColumns = (t: any, configs: ColumnConfig[], isMobile: boolean) => {
   const newConfigs = configs.map((config) => ({
     key: config.key,
     title: t(config.titleKey).toUpperCase(),
-    dataType: DataType.String,
+    dataType: config.dataType || DataType.String, // Default to String if not provided
     sortDirection: config.sortDirection,
     width: isMobile && config.width ? config.width : config.width || undefined,
     isSortable: config.isSortable,
@@ -329,5 +328,23 @@ export const getBlockTableData = (t: any, isMobile: boolean, isArchived?:any) =>
   }
   }
 
+  return generateColumns(t, configs, isMobile);
+};
+
+export const getNotificationTableData = (t: any, isMobile: boolean, isArchived?:any) => {
+
+
+  const configs: ColumnConfig[] = [
+
+    { key: 'actionId', titleKey: 'ID', dataType: DataType.Number, width: 50,  },
+    { key: 'title', titleKey: 'TITLE', dataType: DataType.String, width: 180,  },
+    { key: 'key', titleKey: 'KEY', dataType: DataType.String, width: 180,  },
+    { key: 'context', titleKey: 'CONTEXT',  width: 100, },
+    { key: 'status', titleKey: 'STATUS',  width: 100,  },
+    { key: 'templateType', titleKey: 'TYPE', dataType: DataType.Object, width: 100, style: { textAlign: 'center' } },
+    { key: 'actions', titleKey: 'ACTIONS',  width: 120 }
+  ];
+
+
   return generateColumns(t, configs, isMobile);
 };