permission handling

src/Pages/GroupTasks/Overview/GroupTasksTableList.js

@@ -16,15 +16,12 @@ import {
   MyAvatar,
   SentMessagesCommands,
   WebSocketContext,
+  hasOneXYPermission,
+  hasXYPermission,
 } from "../../../utils";
 import { useContext } from "react";
 
 const columns = [
-  /*{
-    title: "ID",
-    dataIndex: "id",
-    key: "id",
-  },*/
   {
     title: "Creator",
     dataIndex: "creator",
@@ -124,7 +121,6 @@ export default function GroupTaskTableList({
 
         items.push({
           key: groupTask.Id,
-          //id: groupTask.Id,
           creator: (
             <>
               <MyAvatar avatar={user?.Avatar} /> {user?.Username}
@@ -153,30 +149,57 @@ export default function GroupTaskTableList({
   return (
     <>
       <Divider orientation="left">{categoryGroup.category}</Divider>
-      <div
-        style={{
-          marginBottom: 16,
-          display: "flex",
-          justifyContent: "space-between",
-        }}
-      >
-        <Button
-          type="primary"
-          icon={<PlusOutlined />}
-          onClick={() => showGroupTypeSelectionModal(categoryGroup)}
-        >
-          New task
-        </Button>
 
-        <Popconfirm
+      {hasOneXYPermission(
-          placement="left"
+        webSocketContext.User.Permissions,
-          title="Are you sure you want to reload the group configs?"
+        categoryGroup.category,
-          okText="Yes"
+        Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYNewTask,
-          onConfirm={() => handleOnConfirm(categoryGroup.category)}
+        Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYReloadGroupConfig
-        >
+      ) && (
-          <Button icon={<ReloadOutlined />}>Reload</Button>
+          <div
-        </Popconfirm>
+            style={{
-      </div>
+              marginBottom: 16,
+              display: "flex",
+              justifyContent: hasXYPermission(
+                webSocketContext.User.Permissions,
+                Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYNewTask,
+                categoryGroup.category
+              )
+                ? "space-between"
+                : "right",
+            }}
+          >
+            {hasXYPermission(
+              webSocketContext.User.Permissions,
+              Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYNewTask,
+              categoryGroup.category
+            ) && (
+              <Button
+                type="primary"
+                icon={<PlusOutlined />}
+                onClick={() => showGroupTypeSelectionModal(categoryGroup)}
+              >
+                New task
+              </Button>
+            )}
+
+            {hasXYPermission(
+              webSocketContext.User.Permissions,
+              Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYReloadGroupConfig,
+              categoryGroup.category
+            ) && (
+              <Popconfirm
+                placement="left"
+                title="Are you sure you want to reload the group configs?"
+                okText="Yes"
+                onConfirm={() => handleOnConfirm(categoryGroup.category)}
+              >
+                <Button icon={<ReloadOutlined />}>Reload</Button>
+              </Popconfirm>
+            )}
+          </div>
+        )}
+
       <Table columns={columns} dataSource={getTableItems()} />
     </>
   );

src/Pages/GroupTasks/Overview/index.js

@@ -3,7 +3,7 @@ import { useContext, useState } from "react";
 import GroupTasksViewModal from "./GroupTasksViewModal";
 import GroupTypeSelectionModal from "./GroupTypeSelectionModal";
 import GroupTaskTableList from "./GroupTasksTableList";
-import { WebSocketContext } from "../../../utils";
+import { Constants, WebSocketContext, hasXYPermission } from "../../../utils";
 
 export default function GroupTasks({ isGroupTasksViewModalOpen }) {
   const [isGroupTypeSelectionModalOpen, setIsGroupTypeSelectionModalOpen] =
@@ -19,6 +19,31 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) {
     setCurrentSelectedModalGroupType(null);
   };
 
+  const GroupTaskTableListItems = () => {
+    const items = [];
+
+    webSocketContext.CategoryGroups.forEach((categoryGroup) => {
+      if (
+        hasXYPermission(
+          webSocketContext.User.Permissions,
+          Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYView,
+          categoryGroup.category
+        )
+      ) {
+        items.push(
+          <GroupTaskTableList
+            key={categoryGroup.category}
+            categoryGroup={categoryGroup}
+            showGroupTypeSelectionModal={showGroupTypeSelectionModal}
+            groupTasks={webSocketContext.GroupTasks}
+          />
+        );
+      }
+    });
+
+    return items;
+  };
+
   return (
     <>
       <h1 style={{ fontWeight: "bold" }}>GROUP TASKS</h1>
@@ -26,16 +51,7 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) {
       {webSocketContext.CategoryGroups.length === 0 ? (
         <Result status="404" title="No group tasks found" />
       ) : (
-        webSocketContext.CategoryGroups.map((categoryGroup) => {
+        <GroupTaskTableListItems />
-          return (
-            <GroupTaskTableList
-              key={categoryGroup.category}
-              categoryGroup={categoryGroup}
-              showGroupTypeSelectionModal={showGroupTypeSelectionModal}
-              groupTasks={webSocketContext.GroupTasks}
-            />
-          );
-        })
       )}
 
       <GroupTypeSelectionModal

src/utils.js

@@ -42,6 +42,11 @@ export const Constants = {
   ACCEPTED_FILE_TYPES: ["image/png", "image/jpeg", "image/jpg"],
   PERMISSIONS: {
     GROUP_TASKS: {
+      OVERVIEW: {
+        XYNewTask: "group_tasks.overview.XY.new_task",
+        XYReloadGroupConfig: "group_tasks.overview.XY.reload_group_config",
+        XYView: "group_tasks.overview.XY.view",
+      },
       HISTORY: "group_tasks.history",
     },
     ALL_USERS: {
@@ -974,6 +979,12 @@ export function hasPermission(userPermissions, permission) {
   return userPermissions.includes(permission);
 }
 
+export function hasXYPermission(userPermissions, permission, xyValue) {
+  return userPermissions.includes(
+    permission.replace("XY", xyValue.toLowerCase())
+  );
+}
+
 export function hasOnePermission(userPermissions, ...permissions) {
   for (const permission of permissions) {
     if (userPermissions.includes(permission)) {
@@ -983,3 +994,15 @@ export function hasOnePermission(userPermissions, ...permissions) {
 
   return false;
 }
+
+export function hasOneXYPermission(userPermissions, xyValue, ...permissions) {
+  for (const permission of permissions) {
+    if (
+      userPermissions.includes(permission.replace("XY", xyValue.toLowerCase()))
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}