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

role sorting order and show user avatars that are in role

main
alex 2023-06-20 23:23:10 +02:00
parent 090e50240a
commit 5a953a606f
2 changed files with 124 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/Pages/AdminArea/Roles/index.js
View File

@ -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 [roleDescription, setRoleDescription] = useState(role.Description);
const [roleDisplayName, setRoleDisplayName] = useState("");
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>
) : (
<Space style={{ paddingLeft: 10 }} size="small" align="start">
<UserAvatarsInRole />
<Tooltip title="Edit">
<EditOutlined onClick={() => onEditClick()} />
</Tooltip>
</Space>
),
label: (
<>

49
src/utils.js
View File

@ -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: