Merge pull request #41 from chaitanyakole/role_based_permissions

Task #234974 Implement Role-Based Action Permissions for Add, Edit, and Delete
tekdi · Feb 11, 2025 · 28c15a2 · 28c15a2
2 parents 6b6c9ff + 76bc536
commit 28c15a2
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 61 deletions.
diff --git a/src/components/ActionIcon.tsx b/src/components/ActionIcon.tsx
@@ -9,6 +9,7 @@ import cohortIcon from "../../public/images/apartment.svg";
 import addIcon from "../../public/images/addIcon.svg";
 
 import Image from "next/image";
+import { useRouter } from "next/router";
 
 interface ActionCellProps {
   onEdit: (rowData: any) => void;
@@ -39,37 +40,38 @@ const ActionIcon: React.FC<ActionCellProps> = ({
 }) => {
   const { t } = useTranslation();
   const theme = useTheme<any>();
+  const router = useRouter();
 
+  const isCohortAdmin = rowData?.userRoleTenantMapping?.code === "cohort_admin";
+  const isLearnersPage = router.pathname === "/learners";
+  const isActionAllowed = isCohortAdmin && !isLearnersPage;
   return (
     <Box
       sx={{
         display: "flex",
         flexDirection: "row",
         gap: "20px",
         alignItems: "center",
-        pointerEvents: disable ? "none" : "auto",
+        pointerEvents: isActionAllowed ? "none" : "auto",
+        opacity: isActionAllowed ? 0.5 : 1,
       }}
     >
       {roleButton && (
         <Tooltip title={t("COMMON.ADD")}>
           <Button
             onClick={() => {
-              onAdd(rowData);
+              if (!isActionAllowed) onAdd(rowData);
             }}
+            disabled={isActionAllowed}
             sx={{
               display: "flex",
               flexDirection: "column",
               alignItems: "center",
-              cursor: "pointer",
-              color: disable ? theme?.palette?.secondary.contrastText : "",
-              backgroundColor: "#EAF2FF",
+              cursor: isActionAllowed ? "not-allowed" : "pointer",
+              backgroundColor: isActionAllowed ? "#d3d3d3" : "#EAF2FF",
               p: "10px",
-              "&:hover": {
-                backgroundColor: "#d0e5ff", // Optional: adjust hover color
-              },
             }}
           >
-            {/* Optional typography or icon within the button */}
             <Typography variant="body2" fontFamily={"Poppins"}>
               {t("COMMON.ADD")}
             </Typography>
@@ -81,7 +83,7 @@ const ActionIcon: React.FC<ActionCellProps> = ({
         <Tooltip title={t("COMMON.ADD")}>
           <Box
             onClick={() => {
-              onAdd(rowData);
+              if (!isActionAllowed) onAdd(rowData);
             }}
             sx={{
               display: "flex",
@@ -106,45 +108,36 @@ const ActionIcon: React.FC<ActionCellProps> = ({
           <Tooltip title={t("COMMON.EDIT")}>
             <Box
               onClick={() => {
-                onEdit(rowData);
+                if (!isActionAllowed) onEdit(rowData);
               }}
               sx={{
                 display: "flex",
                 flexDirection: "column",
                 alignItems: "center",
-                cursor: "pointer",
-                color: disable ? theme?.palette?.secondary.contrastText : "",
-                backgroundColor: "#E3EAF0",
+                cursor: isActionAllowed ? "not-allowed" : "pointer",
+                backgroundColor: isActionAllowed ? "#d3d3d3" : "#E3EAF0",
                 p: "10px",
               }}
             >
               <Image src={editIcon} alt="" />
-              {/* <Typography variant="body2" fontFamily={"Poppins"}>
-            {t("COMMON.EDIT")}
-          </Typography> */}
             </Box>
           </Tooltip>
 
           <Tooltip title={t("COMMON.DELETE")}>
             <Box
               onClick={() => {
-                onDelete(rowData);
+                if (!isActionAllowed) onDelete(rowData);
               }}
               sx={{
                 display: "flex",
                 flexDirection: "column",
                 alignItems: "center",
-                cursor: "pointer",
-                color: disable ? theme?.palette?.secondary.contrastText : "",
-                backgroundColor: "#EAF2FF",
+                cursor: isActionAllowed ? "not-allowed" : "pointer",
+                backgroundColor: isActionAllowed ? "#d3d3d3" : "#EAF2FF",
                 p: "10px",
               }}
             >
               <Image src={deleteIcon} alt="" />
-              {/* 
-          <Typography variant="body2" fontFamily={"Poppins"}>
-            {t("COMMON.DELETE")}
-          </Typography> */}
             </Box>
           </Tooltip>
         </>
@@ -154,23 +147,18 @@ const ActionIcon: React.FC<ActionCellProps> = ({
         <Tooltip title={reassignType}>
           <Box
             onClick={() => {
-              if (reassignCohort) reassignCohort(rowData);
+              if (!isActionAllowed && reassignCohort) reassignCohort(rowData);
             }}
             sx={{
               display: "flex",
               flexDirection: "column",
               alignItems: "center",
-              cursor: "pointer",
-              color: disable ? theme?.palette?.secondary.contrastText : "",
-              backgroundColor: "#E5E5E5",
+              cursor: isActionAllowed ? "not-allowed" : "pointer",
+              backgroundColor: isActionAllowed ? "#d3d3d3" : "#E5E5E5",
               p: "10px",
             }}
           >
             <Image src={cohortIcon} alt="" />
-            {/* 
-          <Typography variant="body2" fontFamily={"Poppins"}>
-            {t("COMMON.DELETE")}
-          </Typography> */}
           </Box>
         </Tooltip>
       )}

diff --git a/src/data/tableColumns.ts b/src/data/tableColumns.ts
@@ -47,7 +47,7 @@ export const getUserTableColumns = (t: any, isMobile: boolean) => {
   return generateColumns(t, configs, isMobile);
 };
 
-export const getTLTableColumns = (t: any, isMobile: boolean, filter:any) => {
+export const getTLTableColumns = (t: any, isMobile: boolean, filter: any) => {
   const configs: ColumnConfig[] = [
     { key: "name", titleKey: "TABLE_TITLE.NAME", width: 130 },
     { key: "mobile", titleKey: "TABLE_TITLE.MOBILE", width: 130 },
@@ -60,30 +60,34 @@ export const getTLTableColumns = (t: any, isMobile: boolean, filter:any) => {
     { key: "createdAt", titleKey: "TABLE_TITLE.CREATED_DATE", width: 130 },
     { key: "updatedAt", titleKey: "TABLE_TITLE.UPDATED_DATE", width: 130 },
     // { key: "roleDefine", titleKey: "TABLE_TITLE.ROLE", width: 130 },
-    ...(filter?.status?.[0]!=="archived"?[{
-      key: "actions",
-      titleKey: "TABLE_TITLE.ACTIONS",
-      width: 170,
-      isSortable: false,
-    }]:[]),
+    ...(filter?.status?.[0] !== "archived"
+      ? [
+          {
+            key: "actions",
+            titleKey: "TABLE_TITLE.ACTIONS",
+            width: 170,
+            isSortable: false,
+          },
+        ]
+      : []),
   ];
 
   return generateColumns(t, configs, isMobile);
 };
 
-export const getTenantTableData = (t: any, isMobile: boolean,role:any) => {
-  console.log({role});
-  const adminInfo = JSON.parse(localStorage.getItem("adminInfo") ?? '{}');
+export const getTenantTableData = (t: any, isMobile: boolean, role: any) => {
+  console.log({ role });
+  const adminInfo = JSON.parse(localStorage.getItem("adminInfo") ?? "{}");
   // const localRoleCheck = adminInfo?.tenantData?.[0]?.roleName === "cohort admin";
-  const isCohortAdmin = adminInfo?.tenantData?.[0]?.roleName === "cohort admin" ? true : false;
-  
+  // const isCohortAdmin = adminInfo?.tenantData?.[0]?.roleName === "cohort admin" ? true : false;
+
   const configs: ColumnConfig[] = [
     { key: "name", titleKey: "TABLE_TITLE.NAME", width: 130 },
     // { key: "updatedBy", titleKey: "TABLE_TITLE.UPDATED_BY", width: 130 },
     // { key: "createdBy", titleKey: "TABLE_TITLE.CREATED_BY", width: 130 },
     { key: "createdAt", titleKey: "TABLE_TITLE.CREATED_DATE", width: 130 },
     // { key: "updatedAt", titleKey: "TABLE_TITLE.UPDATED_DATE", width: 130 },
-  
+
     // {
     //   key: "totalActiveMembers",
     //   titleKey: "TABLE_TITLE.ACTIVE_LEARNERS",
@@ -95,16 +99,28 @@ export const getTenantTableData = (t: any, isMobile: boolean,role:any) => {
     //   width: 130,
     // },
     { key: "status", titleKey: "TABLE_TITLE.STATUS", width: 90 },
-
-    ...(role == true ? [{ key: "roleDefine", titleKey: "TABLE_TITLE.CREATE_TENANT_ADMIN", width: 130 }] : []),
-    ...(isCohortAdmin ==false?[{ key: "actions", titleKey: "TABLE_TITLE.ACTIONS", width: 125 }]:[]),
+
+    ...(role == true
+      ? [
+          {
+            key: "roleDefine",
+            titleKey: "TABLE_TITLE.CREATE_TENANT_ADMIN",
+            width: 130,
+          },
+        ]
+      : []),
+    { key: "actions", titleKey: "TABLE_TITLE.ACTIONS", width: 125 },
     // ...(role== true ?[{ key: "actions", titleKey: "TABLE_TITLE.ACTIONS", width: 125 }]:[]),
   ];
-
 
   return generateColumns(t, configs, isMobile);
 };
-export const getCohortTableData = (t: any, isMobile: boolean,role:any,filter:any) => {
+export const getCohortTableData = (
+  t: any,
+  isMobile: boolean,
+  role: any,
+  filter: any
+) => {
   const configs: ColumnConfig[] = [
     { key: "name", titleKey: "TABLE_TITLE.NAME", width: 130 },
     { key: "type", titleKey: "TABLE_TITLE.TYPE", width: 90 },
@@ -124,16 +140,20 @@ export const getCohortTableData = (t: any, isMobile: boolean,role:any,filter:any
     //   width: 130,
     // },
     // { key: "roleDefine", titleKey: "TABLE_TITLE.ROLE", width: 130 },
-
-
-    ...(
-      role == true && !(filter?.status?.[0] === "inactive" || filter?.status?.[0] === "archived")
-        ? [{ key: "cohortAdmin", titleKey: "TABLE_TITLE.CREATE_COHORT_ADMIN", width: 130 }]
-        : []
-    )
-
-,    
-    ...(filter?.status?.[0]!="archived"?[{ key: "actions", titleKey: "TABLE_TITLE.ACTIONS", width: 125 }]:[]),
+
+    ...(role == true &&
+    !(filter?.status?.[0] === "inactive" || filter?.status?.[0] === "archived")
+      ? [
+          {
+            key: "cohortAdmin",
+            titleKey: "TABLE_TITLE.CREATE_COHORT_ADMIN",
+            width: 130,
+          },
+        ]
+      : []),
+    ...(filter?.status?.[0] != "archived"
+      ? [{ key: "actions", titleKey: "TABLE_TITLE.ACTIONS", width: 125 }]
+      : []),
   ];
 
   return generateColumns(t, configs, isMobile);

diff --git a/src/pages/cohorts.tsx b/src/pages/cohorts.tsx
@@ -347,6 +347,7 @@ const Center: React.FC = () => {
           createdAt: item?.createdAt,
           updatedAt: item?.updatedAt,
           cohortId: item?.cohortId,
+          userRoleTenantMapping: { code: item?.role },
         }));
 
         setCohortData(resultData || []);

diff --git a/src/pages/tenant.tsx b/src/pages/tenant.tsx
@@ -60,6 +60,7 @@ interface TenantData {
   domain: string;
   tenantId: string;
   type: string;
+  userRoleTenantMapping: string;
 }
 interface RowData {
   cohortId: string;
@@ -302,6 +303,7 @@ const Tenant: React.FC = () => {
             createdAt: item.createdAt || "-",
             domain: item.domain || "-",
             tenantId: item.tenantId || "-",
+            userRoleTenantMapping: item.userRoleTenantMapping || "-",
           };
 
           resultData.push(requiredData);