From ed23e388f958e045439e5c18259616966b1819f2 Mon Sep 17 00:00:00 2001 From: Manuel Date: Sat, 29 Jul 2023 20:12:49 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Improve=20UX=20on=20create=20use?= =?UTF-8?q?r=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modals/delete-user/delete-user.modal.tsx | 45 ++++++++++++++++++++ src/modals/modals.ts | 26 +++++++++++ src/pages/_app.tsx | 23 ++-------- src/pages/manage/users/create.tsx | 7 ++- src/pages/manage/users/index.tsx | 20 +++++++-- src/server/api/routers/user.ts | 14 ++++++ 6 files changed, 111 insertions(+), 24 deletions(-) create mode 100644 src/modals/delete-user/delete-user.modal.tsx create mode 100644 src/modals/modals.ts diff --git a/src/modals/delete-user/delete-user.modal.tsx b/src/modals/delete-user/delete-user.modal.tsx new file mode 100644 index 000000000..92d473c49 --- /dev/null +++ b/src/modals/delete-user/delete-user.modal.tsx @@ -0,0 +1,45 @@ +import { Button, Group, Stack, Text } from '@mantine/core'; +import { ContextModalProps, modals } from '@mantine/modals'; +import { api } from '~/utils/api'; + +export const DeleteUserModal = ({ + context, + id, + innerProps, +}: ContextModalProps<{ userId: string; username: string }>) => { + const apiContext = api.useContext(); + const { isLoading, mutateAsync } = api.user.deleteUser.useMutation({ + onSuccess: async () => { + await apiContext.user.getAll.invalidate(); + modals.close(id); + }, + }); + return ( + + + Are you sure, that you want to delete the user {innerProps.username}? This will delete data + associated with this account, but not any created dashboards by this user. + + + + + + + + ); +}; diff --git a/src/modals/modals.ts b/src/modals/modals.ts new file mode 100644 index 000000000..c5ace5220 --- /dev/null +++ b/src/modals/modals.ts @@ -0,0 +1,26 @@ +import { ChangeAppPositionModal } from '~/components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal'; +import { ChangeWidgetPositionModal } from '~/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal'; +import { EditAppModal } from '~/components/Dashboard/Modals/EditAppModal/EditAppModal'; +import { SelectElementModal } from '~/components/Dashboard/Modals/SelectElement/SelectElementModal'; +import { WidgetsEditModal } from '~/components/Dashboard/Tiles/Widgets/WidgetsEditModal'; +import { WidgetsRemoveModal } from '~/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal'; +import { CategoryEditModal } from '~/components/Dashboard/Wrappers/Category/CategoryEditModal'; + +import { DeleteUserModal } from './delete-user/delete-user.modal'; + +export const modals = { + editApp: EditAppModal, + selectElement: SelectElementModal, + integrationOptions: WidgetsEditModal, + integrationRemove: WidgetsRemoveModal, + categoryEditModal: CategoryEditModal, + changeAppPositionModal: ChangeAppPositionModal, + changeIntegrationPositionModal: ChangeWidgetPositionModal, + deleteUserModal: DeleteUserModal, +}; + +declare module '@mantine/modals' { + export interface MantineModalsOverride { + modals: typeof modals; + } +} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index bac770a93..57003c9a3 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -16,22 +16,15 @@ import Head from 'next/head'; import { useEffect, useState } from 'react'; import 'video.js/dist/video-js.css'; import { env } from '~/env.js'; -import { ColorScheme, ColorSchemeProvider } from '~/hooks/use-colorscheme'; +import { ColorSchemeProvider } from '~/hooks/use-colorscheme'; +import { modals } from '~/modals/modals'; import { ConfigType } from '~/types/config'; import { api } from '~/utils/api'; import { colorSchemeParser } from '~/validations/user'; import { COOKIE_COLOR_SCHEME_KEY, COOKIE_LOCALE_KEY } from '../../data/constants'; import nextI18nextConfig from '../../next-i18next.config.js'; -import { ChangeAppPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal'; -import { ChangeWidgetPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal'; -import { EditAppModal } from '../components/Dashboard/Modals/EditAppModal/EditAppModal'; -import { SelectElementModal } from '../components/Dashboard/Modals/SelectElement/SelectElementModal'; -import { WidgetsEditModal } from '../components/Dashboard/Tiles/Widgets/WidgetsEditModal'; -import { WidgetsRemoveModal } from '../components/Dashboard/Tiles/Widgets/WidgetsRemoveModal'; -import { CategoryEditModal } from '../components/Dashboard/Wrappers/Category/CategoryEditModal'; import { ConfigProvider } from '../config/provider'; -import { useEditModeInformationStore } from '../hooks/useEditModeInformation'; import '../styles/global.scss'; import { usePackageAttributesStore } from '../tools/client/zustands/usePackageAttributesStore'; import { ColorTheme } from '../tools/color'; @@ -123,17 +116,7 @@ function App( > - + diff --git a/src/pages/manage/users/create.tsx b/src/pages/manage/users/create.tsx index 115d4cf24..bf09576d2 100644 --- a/src/pages/manage/users/create.tsx +++ b/src/pages/manage/users/create.tsx @@ -48,7 +48,12 @@ const CreateNewUserPage = () => { ), }); - const { mutateAsync, isSuccess } = api.user.createUser.useMutation(); + const context = api.useContext(); + const { mutateAsync, isSuccess } = api.user.createUser.useMutation({ + onSettled: () => { + void context.user.getAll.invalidate(); + } + }); return ( diff --git a/src/pages/manage/users/index.tsx b/src/pages/manage/users/index.tsx index d60f421d2..f4f4c0207 100644 --- a/src/pages/manage/users/index.tsx +++ b/src/pages/manage/users/index.tsx @@ -11,6 +11,7 @@ import { Text, Title, } from '@mantine/core'; +import { openContextModal } from '@mantine/modals'; import { IconPlus, IconTrash } from '@tabler/icons-react'; import Head from 'next/head'; import Link from 'next/link'; @@ -28,9 +29,9 @@ const ManageUsersPage = () => { } ); - const [activePage, _] = useState(0); + const { mutateAsync: deleteUserMutateAsync } = api.user.deleteUser.useMutation(); - console.log(data?.pages); + const [activePage, _] = useState(0); return ( @@ -82,7 +83,20 @@ const ManageUsersPage = () => { {user.name} - + { + openContextModal({ + modal: 'deleteUserModal', + title: Delete user ${user.name}, + innerProps: { + userId: user.id, + username: user.name ?? '' + } + }); + }} + color="red" + variant="light" + > diff --git a/src/server/api/routers/user.ts b/src/server/api/routers/user.ts index 02fa3b340..402e2e505 100644 --- a/src/server/api/routers/user.ts +++ b/src/server/api/routers/user.ts @@ -185,4 +185,18 @@ export const userRouter = createTRPCRouter({ }, }); }), + + deleteUser: publicProcedure + .input( + z.object({ + userId: z.string(), + }) + ) + .mutation(async ({ ctx, input }) => { + await ctx.prisma.user.delete({ + where: { + id: input.userId, + }, + }); + }), });