61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import { Button, Group, Stack, Text, Title } from '@mantine/core';
|
|
import { ContextModalProps, modals } from '@mantine/modals';
|
|
import { Trans, useTranslation } from 'next-i18next';
|
|
import { api } from '~/utils/api';
|
|
|
|
type InnerProps = { id: string; name: string; type: 'promote' | 'demote' };
|
|
|
|
export const ChangeUserRoleModal = ({ id, innerProps }: ContextModalProps<InnerProps>) => {
|
|
const { t } = useTranslation('manage/users');
|
|
const utils = api.useContext();
|
|
const { isLoading, mutateAsync } = api.user.changeRole.useMutation({
|
|
onSuccess: async () => {
|
|
await utils.user.all.invalidate();
|
|
await utils.user.details.invalidate();
|
|
modals.close(id);
|
|
},
|
|
});
|
|
return (
|
|
<Stack>
|
|
<Text>{t(`modals.change-role.${innerProps.type}.text`, innerProps)} </Text>
|
|
|
|
<Group grow>
|
|
<Button
|
|
onClick={() => {
|
|
modals.close(id);
|
|
}}
|
|
variant="light"
|
|
color="gray"
|
|
>
|
|
{t('common:cancel')}
|
|
</Button>
|
|
<Button
|
|
onClick={async () => {
|
|
await mutateAsync(innerProps);
|
|
}}
|
|
disabled={isLoading}
|
|
variant="light"
|
|
color="red"
|
|
>
|
|
{t('modals.change-role.confirm')}
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export const openRoleChangeModal = (user: InnerProps) => {
|
|
modals.openContextModal({
|
|
modal: 'changeUserRoleModal',
|
|
title: (
|
|
<Title order={4}>
|
|
<Trans
|
|
i18nKey={`manage/users:modals.change-role.${user.type}.title`}
|
|
values={{ name: user.name }}
|
|
/>
|
|
</Title>
|
|
),
|
|
innerProps: user,
|
|
});
|
|
};
|