jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

✨ Add tooltip for promotion and demotion of users

Browse Source
This commit is contained in:
Manuel
2023-08-11 19:29:06 +02:00
parent edb48135d6
commit 74bf117fe3
2 changed files with 44 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/locales/en/manage/users.json
View File

@@ -10,6 +10,11 @@
"user": "User" "user": "User"
} }
}, },
"tooltips": {
"deleteUser": "Delete user",
"demoteAdmin": "Demote administrator",
"promoteToAdmin": "Promote to administrator"
},
"modals": { "modals": {
"delete": { "delete": {
"title": "Delete user {{name}}", "title": "Delete user {{name}}",

70
src/pages/manage/users/index.tsx
View File

@@ -11,6 +11,7 @@ import {
Table, Table,
Text, Text,
Title, Title,
Tooltip,
} from '@mantine/core'; } from '@mantine/core';
import { useDebouncedValue } from '@mantine/hooks'; import { useDebouncedValue } from '@mantine/hooks';
import { IconPlus, IconTrash, IconUserDown, IconUserUp } from '@tabler/icons-react'; import { IconPlus, IconTrash, IconUserDown, IconUserUp } from '@tabler/icons-react';
@@ -88,52 +89,59 @@ const ManageUsersPage = () => {
<Group spacing="xs"> <Group spacing="xs">
<Avatar size="sm" /> <Avatar size="sm" />
<Text>{user.name}</Text> <Text>{user.name}</Text>
{user.isOwner ? ( {user.isOwner && (
<Badge color="pink" size="sm"> <Badge color="pink" size="sm">
Owner Owner
</Badge> </Badge>
) : user.isAdmin ? ( )}
{user.isAdmin && (
<Badge color="red" size="sm"> <Badge color="red" size="sm">
Admin Admin
</Badge> </Badge>
) : null} )}
</Group> </Group>
<Group> <Group>
{user.isAdmin ? ( {user.isAdmin ? (
<Tooltip label={t('tooltips.demoteAdmin')} withinPortal withArrow>
<ActionIcon
disabled={user.id === sessionData?.user?.id || user.isOwner}
onClick={() => {
openRoleChangeModal({
...user,
type: 'demote',
});
}}
>
<IconUserDown size="1rem" />
</ActionIcon>
</Tooltip>
) : (
<Tooltip label={t('tooltips.promoteToAdmin')} withinPortal withArrow>
<ActionIcon
onClick={() => {
openRoleChangeModal({
...user,
type: 'promote',
});
}}
>
<IconUserUp size="1rem" />
</ActionIcon>
</Tooltip>
)}
<Tooltip label={t('tooltips.deleteUser')} withinPortal withArrow>
<ActionIcon <ActionIcon
disabled={user.id === sessionData?.user?.id || user.isOwner} disabled={user.id === sessionData?.user?.id || user.isOwner}
onClick={() => { onClick={() => {
openRoleChangeModal({ openDeleteUserModal(user);
...user,
type: 'demote',
});
}} }}
color="red"
variant="light"
> >
<IconUserDown size="1rem" /> <IconTrash size="1rem" />
</ActionIcon> </ActionIcon>
) : ( </Tooltip>
<ActionIcon
onClick={() => {
openRoleChangeModal({
...user,
type: 'promote',
});
}}
>
<IconUserUp size="1rem" />
</ActionIcon>
)}
<ActionIcon
disabled={user.id === sessionData?.user?.id || user.isOwner}
onClick={() => {
openDeleteUserModal(user);
}}
color="red"
variant="light"
>
<IconTrash size="1rem" />
</ActionIcon>
</Group> </Group>
</Group> </Group>
</td> </td>