change user role

src/Components/SideMenu/index.js

@@ -8,7 +8,7 @@ import {
   SnippetsOutlined,
   UsergroupAddOutlined,
 } from "@ant-design/icons";
-import { Badge, Divider, Menu, Space } from "antd";
+import { Badge, Divider, Menu } from "antd";
 import Sider from "antd/es/layout/Sider";
 import { useContext, useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";

src/Pages/Users/index.js

@@ -1,11 +1,12 @@
-import { Popover, Table } from "antd";
+import { Popconfirm, Popover, Select, Space, Table, notification } from "antd";
 import {
   FormatDatetime,
   MyAvatar,
   WebSocketContext,
   getConnectionStatusItem,
 } from "../../utils";
-import { useContext } from "react";
+import { useContext, useState } from "react";
+import { Link } from "react-router-dom";
 
 const columns = [
   {
@@ -37,6 +38,84 @@ const columns = [
 
 export default function Users() {
   const webSocketContext = useContext(WebSocketContext);
+  const [selectedRoleId, setSelectedRoleId] = useState("");
+  const [notificationApi, notificationContextHolder] =
+    notification.useNotification();
+
+  const getTableContent = () => {
+    return [
+      {
+        title: "Avatar",
+        dataIndex: "avatar",
+        key: "avatar",
+      },
+      {
+        title: "Username",
+        dataIndex: "username",
+        key: "username",
+      },
+      {
+        title: "Role",
+        dataIndex: "role",
+        key: "role",
+      },
+      {
+        title: "Connection status",
+        dataIndex: "connectionStatus",
+        key: "connectionStatus",
+      },
+      {
+        title: "Last online",
+        dataIndex: "lastOnline",
+        key: "lastOnline",
+      },
+      {
+        title: "Action",
+        key: "action",
+        render: (_, record) => (
+          <Space size="middle">
+            <Popconfirm
+              title="Change role"
+              okText="Change"
+              onConfirm={() => onRoleChangeConfirm()}
+              description={
+                <Select
+                  style={{ width: 250 }}
+                  getPopupContainer={(node) => node.parentNode}
+                  defaultValue={
+                    webSocketContext.AllUsers.find(
+                      (user) => user.Id === record.key
+                    ).RoleId
+                  }
+                  value={selectedRoleId}
+                  onChange={(e) => setSelectedRoleId(e)}
+                >
+                  {webSocketContext.AllRoles.map((role) => (
+                    <Select.Option key={role.Id}>
+                      {role.DisplayName}
+                    </Select.Option>
+                  ))}
+                </Select>
+              }
+            >
+              <Link
+                to="#"
+                onClick={() => {
+                  setSelectedRoleId(
+                    webSocketContext.AllUsers.find(
+                      (user) => user.Id === record.key
+                    ).RoleId
+                  );
+                }}
+              >
+                Change role
+              </Link>
+            </Popconfirm>
+          </Space>
+        ),
+      },
+    ];
+  };
 
   const getTableItems = () => {
     let items = [];
@@ -70,13 +149,33 @@ export default function Users() {
     return items;
   };
 
+  const onRoleChangeConfirm = () => {
+    console.log("onRoleChangeConfirm", selectedRoleId);
+
+    const existsRole = webSocketContext.AllRoles.find(
+      (role) => role.Id === selectedRoleId
+    );
+
+    if (existsRole === undefined) {
+      notificationApi["error"]({
+        message: `User role could not be changed`,
+        description: `The role does not exist anymore`,
+      });
+      return;
+    }
+
+    console.log("existsRole", existsRole);
+  };
+
   return (
     <>
+      {notificationContextHolder}
+
       <h1 style={{ fontWeight: "bold" }}>
         All users ({webSocketContext.AllUsers.length})
       </h1>
 
-      <Table columns={columns} dataSource={getTableItems()} />
+      <Table columns={getTableContent()} dataSource={getTableItems()} />
     </>
   );
 }