196 lines
5.9 KiB
TypeScript
196 lines
5.9 KiB
TypeScript
import {
|
|
ActionIcon,
|
|
Autocomplete,
|
|
Avatar,
|
|
Badge,
|
|
Box,
|
|
Button,
|
|
Flex,
|
|
Group,
|
|
Pagination,
|
|
Table,
|
|
Text,
|
|
Title,
|
|
} from '@mantine/core';
|
|
import { useDebouncedValue } from '@mantine/hooks';
|
|
import { IconPlus, IconTrash, IconUserDown, IconUserUp } from '@tabler/icons-react';
|
|
import { GetServerSideProps } from 'next';
|
|
import { useSession } from 'next-auth/react';
|
|
import { useTranslation } from 'next-i18next';
|
|
import Head from 'next/head';
|
|
import Link from 'next/link';
|
|
import { useState } from 'react';
|
|
import { openRoleChangeModal } from '~/components/Manage/User/change-user-role.modal';
|
|
import { openDeleteUserModal } from '~/components/Manage/User/delete-user.modal';
|
|
import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
|
|
import { getServerAuthSession } from '~/server/auth';
|
|
import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
|
|
import { manageNamespaces } from '~/tools/server/translation-namespaces';
|
|
import { api } from '~/utils/api';
|
|
|
|
const ManageUsersPage = () => {
|
|
const [activePage, setActivePage] = useState(0);
|
|
const [nonDebouncedSearch, setNonDebouncedSearch] = useState<string | undefined>('');
|
|
const [debouncedSearch] = useDebouncedValue<string | undefined>(nonDebouncedSearch, 200);
|
|
const { data } = api.user.all.useQuery({
|
|
page: activePage,
|
|
search: debouncedSearch,
|
|
});
|
|
const { data: sessionData } = useSession();
|
|
|
|
const { t } = useTranslation('manage/users');
|
|
|
|
const metaTitle = `${t('metaTitle')} • Homarr`;
|
|
|
|
return (
|
|
<ManageLayout>
|
|
<Head>
|
|
<title>{metaTitle}</title>
|
|
</Head>
|
|
|
|
<Title mb="md">{t('pageTitle')}</Title>
|
|
<Text mb="xl">{t('text')}</Text>
|
|
|
|
<Flex columnGap={10} justify="end" mb="md">
|
|
<Autocomplete
|
|
placeholder="Filter"
|
|
data={
|
|
(data?.users.map((user) => user.name).filter((name) => name !== null) as string[]) ?? []
|
|
}
|
|
variant="filled"
|
|
onChange={(value) => {
|
|
setNonDebouncedSearch(value);
|
|
}}
|
|
/>
|
|
<Button
|
|
component={Link}
|
|
leftIcon={<IconPlus size="1rem" />}
|
|
href="/manage/users/create"
|
|
variant="default"
|
|
>
|
|
{t('buttons.create')}
|
|
</Button>
|
|
</Flex>
|
|
|
|
{data && (
|
|
<>
|
|
<Table mb="md" withBorder highlightOnHover>
|
|
<thead>
|
|
<tr>
|
|
<th>{t('table.header.user')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.users.map((user, index) => (
|
|
<tr key={index}>
|
|
<td>
|
|
<Group position="apart">
|
|
<Group spacing="xs">
|
|
<Avatar size="sm" />
|
|
<Text>{user.name}</Text>
|
|
{user.isOwner ? (
|
|
<Badge color="pink" size="sm">
|
|
Owner
|
|
</Badge>
|
|
) : user.isAdmin ? (
|
|
<Badge color="red" size="sm">
|
|
Admin
|
|
</Badge>
|
|
) : null}
|
|
</Group>
|
|
<Group>
|
|
{user.isAdmin ? (
|
|
<ActionIcon
|
|
disabled={user.id === sessionData?.user?.id || user.isOwner}
|
|
onClick={() => {
|
|
openRoleChangeModal({
|
|
...user,
|
|
type: 'demote',
|
|
});
|
|
}}
|
|
>
|
|
<IconUserDown size="1rem" />
|
|
</ActionIcon>
|
|
) : (
|
|
<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>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
|
|
{debouncedSearch && debouncedSearch.length > 0 && (
|
|
<tr>
|
|
<td colSpan={1}>
|
|
<Box p={15}>
|
|
<Text>{t('searchDoesntMatch')}</Text>
|
|
</Box>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</Table>
|
|
<Pagination
|
|
total={data.countPages}
|
|
value={activePage + 1}
|
|
onNextPage={() => {
|
|
setActivePage((prev) => prev + 1);
|
|
}}
|
|
onPreviousPage={() => {
|
|
setActivePage((prev) => prev - 1);
|
|
}}
|
|
onChange={(targetPage) => {
|
|
setActivePage(targetPage - 1);
|
|
}}
|
|
/>
|
|
</>
|
|
)}
|
|
</ManageLayout>
|
|
);
|
|
};
|
|
|
|
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
|
const session = await getServerAuthSession(ctx);
|
|
|
|
if (!session?.user.isAdmin) {
|
|
return {
|
|
notFound: true,
|
|
};
|
|
}
|
|
|
|
const translations = await getServerSideTranslations(
|
|
manageNamespaces,
|
|
ctx.locale,
|
|
undefined,
|
|
undefined
|
|
);
|
|
return {
|
|
props: {
|
|
...translations,
|
|
},
|
|
};
|
|
};
|
|
|
|
export default ManageUsersPage;
|