dynamic tree data list creation

src/Pages/AdminArea/Roles/index.js

@@ -1,7 +1,7 @@
 import { Button, Collapse, Space, Tree } from "antd";
 import {
-  CapitalizeFirstLetter,
   Constants,
+  SentMessagesCommands,
   WebSocketContext,
 } from "../../../utils";
 import { EditOutlined, PlusOutlined } from "@ant-design/icons";
@@ -82,7 +82,7 @@ const treeData = [
   },
   {
     title: "Admin Area",
-    key: "0-1",
+    key: "2-1",
     children: [
       {
         title: "Roles",
@@ -125,6 +125,34 @@ export default function AdminAreaRoles() {
     console.log("onCheck", checkedKeys, info);
   }; */
 
+  /*
+ rolePermissions={
+              webSocketContext.AdminAreaRolesPermissions.find(
+                (r) => r.RoleId === role.Id
+              ).Permissions
+            }
+
+  */
+
+  const onCreateNewRoleClick = () => {
+    webSocketContext.SendSocketMessage(
+      SentMessagesCommands.AdminAreaCreateNewRole,
+      {}
+    );
+  };
+
+  const getRolePermissions = (role) => {
+    const rolePermissions = webSocketContext.AdminAreaRolesPermissions.find(
+      (r) => r.RoleId === role.Id
+    );
+
+    if (rolePermissions === undefined) {
+      return [];
+    }
+
+    return rolePermissions.Permissions;
+  };
+
   return (
     <>
       <Space direction="vertical" style={{ width: "100%" }}>
@@ -132,11 +160,7 @@ export default function AdminAreaRoles() {
           <Role
             key={role.Id}
             role={role}
-            rolePermissions={
-              webSocketContext.AdminAreaRolesPermissions.find(
-                (r) => r.RoleId === role.Id
-              ).Permissions
-            }
+            rolePermissions={getRolePermissions(role)}
           />
         ))}
 
@@ -146,7 +170,12 @@ export default function AdminAreaRoles() {
             justifyContent: "center",
           }}
         >
-          <Button shape="round" icon={<PlusOutlined />} size="large">
+          <Button
+            shape="round"
+            icon={<PlusOutlined />}
+            size="large"
+            onClick={() => onCreateNewRoleClick()}
+          >
             Create new role
           </Button>
         </div>
@@ -156,25 +185,62 @@ export default function AdminAreaRoles() {
 }
 
 function Role({ role, rolePermissions }) {
-  console.log("role", rolePermissions);
+  console.warn("role", rolePermissions);
 
-  const getTreeData = () => {
-    const data = [];
+  function createTreeDataList(permissions) {
+    const result = [];
 
-    for (let i = 0; i < rolePermissions.length; i++) {
-      const rolePermission = rolePermissions[i];
+    for (let i = 0; i < permissions.length; i++) {
+      const argument = permissions[i];
+      const keys = argument.split(".");
+      let currentParent = null;
 
-      console.log("rolePermission", rolePermission);
+      for (let j = 0; j < keys.length; j++) {
+        const key = keys[j];
+        const title = key
+          .replace(new RegExp("_", "g"), " ")
+          .replace(/^\w/, (c) => c.toUpperCase());
+        const obj = {
+          title: title,
+          key: keys.slice(0, j + 1).join("."),
+          children: [],
+        };
 
-      const p = rolePermission.split(".");
-
-      console.log(p);
+        if (j === 0) {
+          const existingObj = result.find((item) => item.title === obj.title);
+          if (existingObj) {
+            currentParent = existingObj;
+          } else {
+            result.push(obj);
+            currentParent = obj;
+          }
+        } else {
+          const existingChild = currentParent.children.find(
+            (item) => item.title === obj.title
+          );
+          if (existingChild) {
+            currentParent = existingChild;
+          } else {
+            const childObj = {
+              title: title,
+              key: keys.slice(0, j + 1).join("."),
+              children: [],
+            };
+            currentParent.children.push(childObj);
+            currentParent = childObj;
+          }
+        }
+      }
     }
 
-    console.log("data", data);
-  };
+    console.log("createListFromArgument", result);
 
-  getTreeData();
+    return result;
+  }
+
+  const onCheck = (checkedKeys, info) => {
+    console.log("onCheck", checkedKeys, info);
+  };
 
   return (
     <Collapse
@@ -201,9 +267,10 @@ function Role({ role, rolePermissions }) {
           children: (
             <Tree
               checkable
-              defaultExpandedKeys={["0-0"]}
-              defaultCheckedKeys={["0-0", "0-1-0-0", "0-1-0-1", "0-1-0-3"]}
-              treeData={treeData}
+              selectable={false}
+              defaultCheckedKeys={rolePermissions}
+              onCheck={onCheck}
+              treeData={createTreeDataList(rolePermissions)}
             />
           ),
         },
@@ -211,3 +278,14 @@ function Role({ role, rolePermissions }) {
     />
   );
 }
+
+/*
+ <Tree
+                checkable
+                defaultExpandedKeys={["0-0"]}
+                defaultCheckedKeys={["0-0", "0-1-0-0", "0-1-0-1", "0-1-0-3"]}
+                treeData={createListFromArgument(rolePermissions)}
+                onSelect={onSelect}
+                onCheck={onCheck}
+              />
+*/

src/utils.js

@@ -135,6 +135,7 @@ const ReceivedMessagesCommands = {
   TaskLocked: 16,
   TaskUnlocked: 17,
   UserProfileUpdated: 18,
+  AdminAreaNewRoleCreated: 19,
 };
 
 // commands sent to the backend server
@@ -145,8 +146,7 @@ export const SentMessagesCommands = {
   ReloadGroupTasks: 4,
   TaskLocking: 5,
   UpdateUserProfile: 6,
-  UpdateUserProfileUsernameAvailable: 7,
-  UpdateUserProfileEmailAvailable: 8,
+  AdminAreaCreateNewRole: 7,
 };
 
 export function WebSocketProvider({
@@ -520,6 +520,12 @@ export function WebSocketProvider({
             }
           }
           break;
+        case ReceivedMessagesCommands.AdminAreaNewRoleCreated:
+          console.log("body", body);
+
+          setAllRoles((arr) => [...arr, body]);
+          break;
+
         default:
           console.error("unknown command", cmd);
           break;