gitscope
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/users/dialogs/mutation/index.tsx · v0.3.0-alpha11
Source
1 5875753 Mrdn 2y ago import { FC, useCallback } from "react";
2 857e289 Mrdn 2y ago import {
3 857e289 Mrdn 2y ago DialogTitle,
4 857e289 Mrdn 2y ago DialogContent,
5 857e289 Mrdn 2y ago Dialog,
6 857e289 Mrdn 2y ago DialogHeader,
7 857e289 Mrdn 2y ago Form,
8 857e289 Mrdn 2y ago Button,
9 857e289 Mrdn 2y ago } from '@marzneshin/components';
10 857e289 Mrdn 2y ago import { useTranslation } from 'react-i18next';
11 857e289 Mrdn 2y ago import {
12 2e6c8cb Mrdn 2y ago DATA_LIMIT_METRIC,
13 857e289 Mrdn 2y ago UserMutationType,
14 857e289 Mrdn 2y ago useUsersCreationMutation,
15 857e289 Mrdn 2y ago useUsersUpdateMutation
16 857e289 Mrdn 2y ago } from "@marzneshin/features/users";
17 857e289 Mrdn 2y ago import { UserSchema } from "./schema";
18 857e289 Mrdn 2y ago import {
19 857e289 Mrdn 2y ago UsernameField,
20 857e289 Mrdn 2y ago NoteField,
21 857e289 Mrdn 2y ago ServicesField,
22 857e289 Mrdn 2y ago } from "./fields";
23 857e289 Mrdn 2y ago import { useMutationDialog } from "@marzneshin/hooks";
24 5875753 Mrdn 2y ago import { DataLimitFields, ExpirationMethodFields } from "./sections";
25 857e289 Mrdn 2y ago
26 857e289 Mrdn 2y ago interface UsersMutationDialogProps {
27 857e289 Mrdn 2y ago entity: UserMutationType | null;
28 857e289 Mrdn 2y ago open: boolean;
29 857e289 Mrdn 2y ago onOpenChange: (state: boolean) => void;
30 857e289 Mrdn 2y ago }
31 857e289 Mrdn 2y ago
32 857e289 Mrdn 2y ago export const UsersMutationDialog: FC<UsersMutationDialogProps> = ({
33 857e289 Mrdn 2y ago entity,
34 857e289 Mrdn 2y ago open,
35 857e289 Mrdn 2y ago onOpenChange,
36 857e289 Mrdn 2y ago }) => {
37 857e289 Mrdn 2y ago const { t } = useTranslation();
38 857e289 Mrdn 2y ago const getDefaultValues = useCallback((): UserMutationType => ({
39 857e289 Mrdn 2y ago services: [],
40 79c373b Mrdn 2y ago data_limit: 1,
41 857e289 Mrdn 2y ago expire: null,
42 857e289 Mrdn 2y ago username: '',
43 857e289 Mrdn 2y ago data_limit_reset_strategy: 'no_reset',
44 857e289 Mrdn 2y ago status: 'active',
45 857e289 Mrdn 2y ago note: '',
46 857e289 Mrdn 2y ago on_hold_expire_duration: 0,
47 766b9d1 Mrdn 2y ago on_hold_timeout: undefined,
48 857e289 Mrdn 2y ago }), []);
49 857e289 Mrdn 2y ago
50 857e289 Mrdn 2y ago const { form, handleSubmit } = useMutationDialog({
51 857e289 Mrdn 2y ago entity,
52 857e289 Mrdn 2y ago onOpenChange,
53 857e289 Mrdn 2y ago createMutation: useUsersCreationMutation(),
54 857e289 Mrdn 2y ago updateMutation: useUsersUpdateMutation(),
55 857e289 Mrdn 2y ago schema: UserSchema,
56 857e289 Mrdn 2y ago getDefaultValue: getDefaultValues,
57 2e6c8cb Mrdn 2y ago loadFormtter: (d) => ({ ...d, data_limit: (d.data_limit ? d.data_limit : 0) / DATA_LIMIT_METRIC })
58 857e289 Mrdn 2y ago })
59 857e289 Mrdn 2y ago
60 857e289 Mrdn 2y ago return (
61 857e289 Mrdn 2y ago <Dialog open={open} onOpenChange={onOpenChange} defaultOpen={true}>
62 7707f15 Mrdn 2y ago <DialogContent className="sm:max-w-full md:max-w-[600px]">
63 857e289 Mrdn 2y ago <DialogHeader>
64 857e289 Mrdn 2y ago <DialogTitle className="text-primary">
65 857e289 Mrdn 2y ago {entity
66 857e289 Mrdn 2y ago ? t('page.users.dialogs.edition.title')
67 857e289 Mrdn 2y ago : t('page.users.dialogs.creation.title')}
68 857e289 Mrdn 2y ago </DialogTitle>
69 857e289 Mrdn 2y ago </DialogHeader>
70 857e289 Mrdn 2y ago <Form {...form}>
71 857e289 Mrdn 2y ago <form onSubmit={handleSubmit}>
72 857e289 Mrdn 2y ago <div className="flex-col grid-cols-2 gap-2 sm:flex md:grid">
73 857e289 Mrdn 2y ago <div>
74 54b7df5 Mrdn 2y ago <UsernameField disabled={(entity && entity.username) ? true : false} />
75 5875753 Mrdn 2y ago <DataLimitFields />
76 5875753 Mrdn 2y ago <ExpirationMethodFields entity={entity} />
77 857e289 Mrdn 2y ago <NoteField />
78 857e289 Mrdn 2y ago </div>
79 857e289 Mrdn 2y ago <div>
80 97ed755 Mrdn 2y ago <ServicesField />
81 857e289 Mrdn 2y ago </div>
82 857e289 Mrdn 2y ago </div>
83 857e289 Mrdn 2y ago <Button
84 857e289 Mrdn 2y ago className="mt-3 w-full font-semibold"
85 857e289 Mrdn 2y ago type="submit"
86 857e289 Mrdn 2y ago disabled={form.formState.isSubmitting}
87 857e289 Mrdn 2y ago >
88 857e289 Mrdn 2y ago {t('submit')}
89 857e289 Mrdn 2y ago </Button>
90 857e289 Mrdn 2y ago </form>
91 857e289 Mrdn 2y ago </Form>
92 857e289 Mrdn 2y ago </DialogContent>
93 857e289 Mrdn 2y ago </Dialog>
94 857e289 Mrdn 2y ago );
95 857e289 Mrdn 2y ago };