role sorting order and show user avatars that are in role

src/Pages/AdminArea/Roles/index.js

@@ -1,4 +1,5 @@
 import {
+  Avatar,
   Button,
   Collapse,
   Input,
@@ -11,6 +12,7 @@ import {
 } from "antd";
 import {
   Constants,
+  MyAvatar,
   SentMessagesCommands,
   WebSocketContext,
 } from "../../../utils";
@@ -18,8 +20,8 @@ import {
   ArrowDownOutlined,
   ArrowUpOutlined,
   CloseOutlined,
+  DeleteOutlined,
   EditOutlined,
-  ExpandAltOutlined,
   PlusOutlined,
   SaveOutlined,
 } from "@ant-design/icons";
@@ -76,8 +78,6 @@ export default function AdminAreaRoles() {
       }
     }
 
-    console.log("createListFromArgument", result);
-
     return result;
   }
 
@@ -93,8 +93,6 @@ export default function AdminAreaRoles() {
       (r) => r.RoleId === role.Id
     );
 
-    console.warn("getRolePermissions", rolePermissions);
-
     if (rolePermissions === undefined || rolePermissions.Permissions === null) {
       return [];
     }
@@ -144,8 +142,8 @@ export default function AdminAreaRoles() {
 
 function Role({ treeData, role, webSocketContext, notificationApi }) {
   const [editMode, setEditMode] = useState(false);
-  const [roleDisplayName, setRoleDisplayName] = useState(role.DisplayName);
+  const [roleDisplayName, setRoleDisplayName] = useState("");
-  const [roleDescription, setRoleDescription] = useState(role.Description);
+  const [roleDescription, setRoleDescription] = useState("");
 
   const getRolePermissions = (role) => {
     const rolePermissions = webSocketContext.AdminAreaRolesPermissions.find(
@@ -201,6 +199,9 @@ function Role({ treeData, role, webSocketContext, notificationApi }) {
   const onEditClick = () => {
     setCheckedTreeKeyPermissions(rolePermissions);
     setEditMode(true);
+
+    setRoleDisplayName(role.DisplayName);
+    setRoleDescription(role.Description);
   };
 
   const onSaveClick = () => {
@@ -282,6 +283,60 @@ function Role({ treeData, role, webSocketContext, notificationApi }) {
     setRoleDescription(role.Description);
   };
 
+  const onMoveUpClick = () => {
+    webSocketContext.SendSocketMessage(
+      SentMessagesCommands.AdminAreaUpdateRoleSortingOrder,
+      {
+        RoleId: role.Id,
+        Direction: 0,
+      }
+    );
+  };
+
+  const onMoveDownClick = () => {
+    webSocketContext.SendSocketMessage(
+      SentMessagesCommands.AdminAreaUpdateRoleSortingOrder,
+      {
+        RoleId: role.Id,
+        Direction: 1,
+      }
+    );
+  };
+
+  const UserAvatarsInRole = () => {
+    const usersInRole = webSocketContext.AllUsers.filter(
+      (user) => user.RoleId === role.Id
+    );
+
+    if (usersInRole.length > 0) {
+      let avatars = [];
+
+      usersInRole.forEach((user) => {
+        avatars.push(
+          <MyAvatar
+            key={user.Id}
+            avatarWidth={26}
+            avatar={user.Avatar}
+            tooltip
+            tooltipTitle={user.Username}
+          />
+        );
+      });
+
+      return (
+        <Avatar.Group
+          maxCount={6}
+          size={28}
+          maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
+        >
+          {avatars}
+        </Avatar.Group>
+      );
+    }
+
+    return null;
+  };
+
   return (
     <Collapse
       collapsible={editMode ? "icon" : "header"}
@@ -290,12 +345,15 @@ function Role({ treeData, role, webSocketContext, notificationApi }) {
         {
           key: "2",
           extra: editMode ? (
-            <Space style={{ paddingLeft: 10 }} size="small">
+            <Space key="spaceedit" style={{ paddingLeft: 10 }} size="small">
+              <Tooltip title="Delete">
+                <DeleteOutlined />
+              </Tooltip>
               <Tooltip title="Move role up">
-                <ArrowUpOutlined />
+                <ArrowUpOutlined onClick={() => onMoveUpClick()} />
               </Tooltip>
               <Tooltip title="Move role down">
-                <ArrowDownOutlined />
+                <ArrowDownOutlined onClick={() => onMoveDownClick()} />
               </Tooltip>
               <Tooltip title="Save">
                 <SaveOutlined onClick={() => onSaveClick()} />
@@ -305,9 +363,13 @@ function Role({ treeData, role, webSocketContext, notificationApi }) {
               </Tooltip>
             </Space>
           ) : (
-            <Tooltip title="Edit">
+            <Space style={{ paddingLeft: 10 }} size="small" align="start">
-              <EditOutlined onClick={() => onEditClick()} />
+              <UserAvatarsInRole />
-            </Tooltip>
+
+              <Tooltip title="Edit">
+                <EditOutlined onClick={() => onEditClick()} />
+              </Tooltip>
+            </Space>
           ),
           label: (
             <>

src/utils.js

@@ -140,6 +140,7 @@ const ReceivedMessagesCommands = {
   UserProfileUpdated: 18,
   AdminAreaNewRoleCreated: 19,
   AdminAreaRoleUpdated: 20,
+  AdminAreaUpdateRoleSortingOrder: 21,
 };
 
 // commands sent to the backend server
@@ -152,6 +153,7 @@ export const SentMessagesCommands = {
   UpdateUserProfile: 6,
   AdminAreaCreateNewRole: 7,
   AdminAreaUpdateRole: 8,
+  AdminAreaUpdateRoleSortingOrder: 9,
 };
 
 export function WebSocketProvider({
@@ -527,6 +529,11 @@ export function WebSocketProvider({
           break;
         case ReceivedMessagesCommands.AdminAreaNewRoleCreated:
           setAllRoles((arr) => [...arr, body]);
+
+          setAdminAreaRolesPermissions((arr) => [
+            ...arr,
+            { RoleId: body.Id, Permissions: [] },
+          ]);
           break;
         case ReceivedMessagesCommands.AdminAreaRoleUpdated:
           setAllRoles((arr) => {
@@ -597,7 +604,49 @@ export function WebSocketProvider({
               }
             }
           }
+          break;
+        case ReceivedMessagesCommands.AdminAreaUpdateRoleSortingOrder:
+          setAllRoles((arr) => {
+            const newArr = [...arr];
 
+            const updatedRoleIndex = newArr.findIndex(
+              (role) => role.Id === body.RoleId
+            );
+
+            const currentSortingOrder = newArr[updatedRoleIndex].SortingOrder;
+
+            if (body.Direction === 0) {
+              newArr[updatedRoleIndex].SortingOrder =
+                newArr[updatedRoleIndex].SortingOrder - 1;
+            } else {
+              newArr[updatedRoleIndex].SortingOrder =
+                newArr[updatedRoleIndex].SortingOrder + 1;
+            }
+
+            const newSortingOrder = newArr[updatedRoleIndex].SortingOrder;
+
+            for (let i = 0; i < newArr.length; i++) {
+              if (newArr[i].Id !== newArr[updatedRoleIndex].Id) {
+                if (newArr[i].SortingOrder === newSortingOrder) {
+                  newArr[i].SortingOrder = currentSortingOrder;
+                } else if (
+                  newArr[i].SortingOrder < currentSortingOrder &&
+                  newArr[i].SortingOrder >= newSortingOrder
+                ) {
+                  newArr[i].SortingOrder = newArr[i].SortingOrder + 1;
+                } else if (
+                  newArr[i].SortingOrder > currentSortingOrder &&
+                  newArr[i].SortingOrder <= newSortingOrder
+                ) {
+                  newArr[i].SortingOrder = newArr[i] - 1;
+                }
+              }
+            }
+
+            newArr.sort((a, b) => a.SortingOrder - b.SortingOrder);
+
+            return newArr;
+          });
           break;
 
         default: