Jannex
/
admin-dashboard-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update user role

main
alex 2023-06-22 23:46:44 +02:00
parent abf549a964
commit 4adff4e0d9
3 changed files with 192 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

203
src/Components/SideMenu/index.js
View File

@ -27,13 +27,120 @@ export default function SideMenu({ userSession, setUserSession }) {
const navigate = useNavigate();
function getCurrentUsedScannerName() {
const getCurrentUsedScannerName = () => {
const scannerName = webSocketContext.Scanners.find(
(scanner) => scanner.UsedByUserId === getUserId()
)?.Name;
return scannerName === undefined ? "No scanner selected" : scannerName;
}
};
const getFirstMenuItems = () => {
let items = [
{
label: "Dashboard",
icon: <AppstoreOutlined />,
key: "/",
},
{
label: "Group Tasks",
type: "group",
children: [
{
label: "Overview",
icon: <SnippetsOutlined />,
key: "/group-tasks",
},
{
label: "History",
icon: <HistoryOutlined />,
key: "/group-tasks-history",
},
],
},
{
type: "divider",
},
];
if (
webSocketContext.User.Permissions.includes(
Constants.PERMISSIONS.ADMIN_AREA.ADD_ROLE
)
) {
items.push({
label: "Admin Area",
icon: <SettingOutlined />,
key: "/admin-area",
children: [
{
label: "Roles",
icon: <UsergroupAddOutlined />,
key: "/admin-area/roles",
},
{
label: "Logs",
icon: <FileTextOutlined />,
key: "/admin-area/logs",
},
],
});
}
return items;
};
const getSecondMenuItems = () => {
let items = [
{
icon: <ScanOutlined />,
label: getCurrentUsedScannerName(),
key: "/scanners",
},
{
icon: (
<Badge
status={webSocketContext.ConnectionBadgeStatus}
text={`${webSocketContext.ConnectedWebSocketUsersCount} ${
webSocketContext.ConnectedWebSocketUsersCount === 1
? "user"
: "users"
} connected`}
/>
),
key: "/users",
},
{
label: ` ${webSocketContext.User.Username}`,
icon: (
<MyAvatar
allUsers={webSocketContext.AllUsers}
userId={webSocketContext.User.Id}
/>
),
key: "/user-profile",
},
{
label: "Logout",
icon: <LogoutOutlined />,
onClick: () => {
setUserSession();
window.location.href = "/";
fetch(`${Constants.API_ADDRESS}/user/auth/logout`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
"X-Authorization": userSession,
},
}).catch(console.error);
},
key: "/",
},
];
return items;
};
return (
<Sider
@ -64,49 +171,7 @@ export default function SideMenu({ userSession, setUserSession }) {
}}
theme="light"
selectedKeys={[selectedKeys]}
items={[
{
label: "Dashboard",
icon: <AppstoreOutlined />,
key: "/",
},
{
label: "Group Tasks",
type: "group",
children: [
{
label: "Overview",
icon: <SnippetsOutlined />,
key: "/group-tasks",
},
{
label: "History",
icon: <HistoryOutlined />,
key: "/group-tasks-history",
},
],
},
{
type: "divider",
},
{
label: "Admin Area",
icon: <SettingOutlined />,
key: "/admin-area",
children: [
{
label: "Roles",
icon: <UsergroupAddOutlined />,
key: "/admin-area/roles",
},
{
label: "Logs",
icon: <FileTextOutlined />,
key: "/admin-area/logs",
},
],
},
]}
items={getFirstMenuItems()}
/>
</div>
<div>
@ -116,53 +181,7 @@ export default function SideMenu({ userSession, setUserSession }) {
selectable={false}
mode="vertical"
onClick={(item) => navigate(item.key)}
items={[
{
icon: <ScanOutlined />,
label: getCurrentUsedScannerName(),
key: "/scanners",
},
{
icon: (
<Badge
status={webSocketContext.ConnectionBadgeStatus}
text={`${webSocketContext.ConnectedWebSocketUsersCount} ${
webSocketContext.ConnectedWebSocketUsersCount === 1
? "user"
: "users"
} connected`}
/>
),
key: "/users",
},
{
label: ` ${webSocketContext.User.Username}`,
icon: (
<MyAvatar
allUsers={webSocketContext.AllUsers}
userId={webSocketContext.User.Id}
/>
),
key: "/user-profile",
},
{
label: "Logout",
icon: <LogoutOutlined />,
onClick: () => {
setUserSession();
window.location.href = "/";
fetch(`${Constants.API_ADDRESS}/user/auth/logout`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
"X-Authorization": userSession,
},
}).catch(console.error);
},
key: "/",
},
]}
items={getSecondMenuItems()}
/>
</div>
</div>

49
src/Pages/Users/index.js
View File

@ -2,40 +2,13 @@ import { Popconfirm, Popover, Select, Space, Table, notification } from "antd";
import {
FormatDatetime,
MyAvatar,
SentMessagesCommands,
WebSocketContext,
getConnectionStatusItem,
} from "../../utils";
import { useContext, useState } from "react";
import { Link } from "react-router-dom";
const columns = [
{
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",
},
];
export default function Users() {
const webSocketContext = useContext(WebSocketContext);
const [selectedRoleId, setSelectedRoleId] = useState("");
@ -75,9 +48,16 @@ export default function Users() {
render: (_, record) => (
<Space size="middle">
<Popconfirm
title="Change role"
title="Change role to"
okText="Change"
onConfirm={() => onRoleChangeConfirm()}
onConfirm={() => onRoleChangeConfirm(record.key)}
okButtonProps={{
disabled:
selectedRoleId ===
webSocketContext.AllUsers.find(
(user) => user.Id === record.key
).RoleId,
}}
description={
<Select
style={{ width: 250 }}
@ -149,9 +129,7 @@ export default function Users() {
return items;
};
const onRoleChangeConfirm = () => {
console.log("onRoleChangeConfirm", selectedRoleId);
const onRoleChangeConfirm = (targetUserId) => {
const existsRole = webSocketContext.AllRoles.find(
(role) => role.Id === selectedRoleId
);
@ -164,7 +142,10 @@ export default function Users() {
return;
}
console.log("existsRole", existsRole);
webSocketContext.SendSocketMessage(SentMessagesCommands.UpdateUserRole, {
UserId: targetUserId,
RoleId: selectedRoleId,
});
};
return (

66
src/utils.js
View File

@ -40,6 +40,12 @@ export const Constants = {
},
MAX_AVATAR_SIZE: 5 * 1024 * 1024,
ACCEPTED_FILE_TYPES: ["image/png", "image/jpeg", "image/jpg"],
PERMISSIONS: {
ADMIN_AREA: {
ADD_ROLE: "admin_area.roles.add_role",
UPDATE_ROLE: "admin_area.roles.update_role",
},
},
};
/*
@ -102,6 +108,7 @@ let webSocketContextPreview = {
Username: l,
Email: l,
Sessions: [],
Permissions: [],
},
AllUsers: [],
AllRoles: [],
@ -142,6 +149,8 @@ const ReceivedMessagesCommands = {
AdminAreaRoleUpdated: 20,
AdminAreaUpdateRoleSortingOrder: 21,
AdminAreaRoleDeleted: 22,
UserRoleUpdated: 23,
RolePermissionsUpdated: 24,
};
// commands sent to the backend server
@ -156,6 +165,7 @@ export const SentMessagesCommands = {
AdminAreaUpdateRole: 8,
AdminAreaUpdateRoleSortingOrder: 9,
AdminAreaDeleteRole: 10,
UpdateUserRole: 11,
};
export function WebSocketProvider({
@ -212,6 +222,10 @@ export function WebSocketProvider({
switch (cmd) {
case ReceivedMessagesCommands.InitUserSocketConnection:
if (body.User.Permissions === null) {
body.User.Permissions = [];
}
setUser(body.User);
setUserProfileStateEmail(body.User.Email);
setUserProfileStateUsername(body.User.Username);
@ -669,6 +683,58 @@ export function WebSocketProvider({
return newArr;
});
break;
case ReceivedMessagesCommands.UserRoleUpdated:
setAllUsers((arr) => {
const newArr = [...arr];
newArr[newArr.findIndex((user) => user.Id === body.UserId)].RoleId =
body.RoleId;
return newArr;
});
if (body.Permissions !== undefined) {
setUser((user) => {
const updatedUser = { ...user };
if (body.Permissions === null) {
updatedUser.Permissions = [];
} else {
updatedUser.Permissions = body.Permissions;
}
return updatedUser;
});
}
break;
case ReceivedMessagesCommands.RolePermissionsUpdated:
if (
body.AddedPermissions !== undefined ||
body.RemovedPermissions !== undefined
) {
setUser((user) => {
const updatedUser = { ...user };
console.log("before update", updatedUser.Permissions);
if (body.AddedPermissions !== undefined) {
updatedUser.Permissions = updatedUser.Permissions.concat(
body.AddedPermissions
);
}
if (body.RemovedPermissions !== undefined) {
updatedUser.Permissions = updatedUser.Permissions.filter(
(permission) => !body.RemovedPermissions.includes(permission)
);
}
console.log("updatedUser", updatedUser.Permissions);
return updatedUser;
});
}
break;
default:
console.error("unknown command", cmd);