gitscope
/
← marzneshin / dashboard/src/features/users/dialogs/mutation/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/users/dialogs/mutation/index.tsx · v0.3.0-alpha1
Source
1 857e289 Mrdn 2y ago import { FC, useCallback, useEffect, useState } 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 Tabs,
10 857e289 Mrdn 2y ago TabsTrigger,
11 857e289 Mrdn 2y ago TabsContent
12 857e289 Mrdn 2y ago } from '@marzneshin/components';
13 857e289 Mrdn 2y ago import { useTranslation } from 'react-i18next';
14 857e289 Mrdn 2y ago import {
15 857e289 Mrdn 2y ago UserMutationType,
16 857e289 Mrdn 2y ago useUsersCreationMutation,
17 857e289 Mrdn 2y ago useUsersUpdateMutation
18 857e289 Mrdn 2y ago } from "@marzneshin/features/users";
19 857e289 Mrdn 2y ago import { UserSchema } from "./schema";
20 857e289 Mrdn 2y ago import {
21 857e289 Mrdn 2y ago UsernameField,
22 857e289 Mrdn 2y ago DataLimitField,
23 857e289 Mrdn 2y ago ExpireDateField,
24 857e289 Mrdn 2y ago DataLimitResetStrategyField,
25 857e289 Mrdn 2y ago NoteField,
26 857e289 Mrdn 2y ago ServicesField,
27 857e289 Mrdn 2y ago } from "./fields";
28 857e289 Mrdn 2y ago import { useMutationDialog } from "@marzneshin/hooks";
29 857e289 Mrdn 2y ago import { TabsList } from "@radix-ui/react-tabs";
30 857e289 Mrdn 2y ago import { OnHoldExpireDurationField } from "./fields/onhold-expire-duration";
31 857e289 Mrdn 2y ago import { OnHoldTimeoutField } from "./fields/onhold-timeout";
32 857e289 Mrdn 2y ago
33 857e289 Mrdn 2y ago interface UsersMutationDialogProps {
34 857e289 Mrdn 2y ago entity: UserMutationType | null;
35 857e289 Mrdn 2y ago open: boolean;
36 857e289 Mrdn 2y ago onOpenChange: (state: boolean) => void;
37 857e289 Mrdn 2y ago }
38 857e289 Mrdn 2y ago
39 857e289 Mrdn 2y ago export const UsersMutationDialog: FC<UsersMutationDialogProps> = ({
40 857e289 Mrdn 2y ago entity,
41 857e289 Mrdn 2y ago open,
42 857e289 Mrdn 2y ago onOpenChange,
43 857e289 Mrdn 2y ago }) => {
44 857e289 Mrdn 2y ago const { t } = useTranslation();
45 857e289 Mrdn 2y ago const getDefaultValues = useCallback((): UserMutationType => ({
46 857e289 Mrdn 2y ago services: [],
47 857e289 Mrdn 2y ago data_limit: 0,
48 857e289 Mrdn 2y ago expire: null,
49 857e289 Mrdn 2y ago username: '',
50 857e289 Mrdn 2y ago data_limit_reset_strategy: 'no_reset',
51 857e289 Mrdn 2y ago status: 'active',
52 857e289 Mrdn 2y ago note: '',
53 857e289 Mrdn 2y ago on_hold_expire_duration: 0,
54 857e289 Mrdn 2y ago on_hold_timeout: null,
55 857e289 Mrdn 2y ago }), []);
56 857e289 Mrdn 2y ago
57 857e289 Mrdn 2y ago const [services, setServices] = useState<number[]>(entity ? entity.services : [])
58 857e289 Mrdn 2y ago
59 857e289 Mrdn 2y ago const { form, handleSubmit } = useMutationDialog({
60 857e289 Mrdn 2y ago entity,
61 857e289 Mrdn 2y ago onOpenChange,
62 857e289 Mrdn 2y ago createMutation: useUsersCreationMutation(),
63 857e289 Mrdn 2y ago updateMutation: useUsersUpdateMutation(),
64 857e289 Mrdn 2y ago schema: UserSchema,
65 857e289 Mrdn 2y ago getDefaultValue: getDefaultValues,
66 857e289 Mrdn 2y ago })
67 857e289 Mrdn 2y ago
68 857e289 Mrdn 2y ago useEffect(() => {
69 857e289 Mrdn 2y ago form.setValue("services", services.map(Number).filter(item => typeof item === 'number'))
70 857e289 Mrdn 2y ago }, [services, form])
71 857e289 Mrdn 2y ago
72 857e289 Mrdn 2y ago
73 857e289 Mrdn 2y ago const [selectedTab, setSelectedTab] = useState<'determined' | 'onhold' | string>('determined');
74 857e289 Mrdn 2y ago
75 857e289 Mrdn 2y ago useEffect(() => {
76 857e289 Mrdn 2y ago if (selectedTab === 'onhold') {
77 857e289 Mrdn 2y ago form.setValue("status", "on_hold")
78 857e289 Mrdn 2y ago form.setValue("expire", null);
79 857e289 Mrdn 2y ago form.clearErrors("expire");
80 857e289 Mrdn 2y ago } else {
81 857e289 Mrdn 2y ago form.setValue("status", "active")
82 857e289 Mrdn 2y ago form.setValue("on_hold_expire_duration", 0);
83 857e289 Mrdn 2y ago form.setValue("on_hold_timeout", null);
84 857e289 Mrdn 2y ago form.clearErrors("on_hold_expire_duration");
85 857e289 Mrdn 2y ago form.clearErrors("on_hold_timeout");
86 857e289 Mrdn 2y ago }
87 857e289 Mrdn 2y ago }, [selectedTab, form]);
88 857e289 Mrdn 2y ago
89 857e289 Mrdn 2y ago return (
90 857e289 Mrdn 2y ago <Dialog open={open} onOpenChange={onOpenChange} defaultOpen={true}>
91 857e289 Mrdn 2y ago <DialogContent>
92 857e289 Mrdn 2y ago <DialogHeader>
93 857e289 Mrdn 2y ago <DialogTitle className="text-primary">
94 857e289 Mrdn 2y ago {entity
95 857e289 Mrdn 2y ago ? t('page.users.dialogs.edition.title')
96 857e289 Mrdn 2y ago : t('page.users.dialogs.creation.title')}
97 857e289 Mrdn 2y ago </DialogTitle>
98 857e289 Mrdn 2y ago </DialogHeader>
99 857e289 Mrdn 2y ago <Form {...form}>
100 857e289 Mrdn 2y ago <form onSubmit={handleSubmit}>
101 857e289 Mrdn 2y ago <div className="flex-col grid-cols-2 gap-2 sm:flex md:grid">
102 857e289 Mrdn 2y ago <div>
103 857e289 Mrdn 2y ago <UsernameField />
104 857e289 Mrdn 2y ago <div className="flex gap-2 items-center w-full sm:flex-row md:flex-col">
105 857e289 Mrdn 2y ago <DataLimitField />
106 857e289 Mrdn 2y ago {form.watch().data_limit !== 0 && <DataLimitResetStrategyField />}
107 857e289 Mrdn 2y ago </div>
108 857e289 Mrdn 2y ago <Tabs defaultValue="determined" onValueChange={setSelectedTab} className="mt-2 w-full">
109 857e289 Mrdn 2y ago <TabsList className="flex flex-row items-center p-1 w-full rounded-md bg-accent">
110 857e289 Mrdn 2y ago <TabsTrigger
111 857e289 Mrdn 2y ago className="w-full"
112 857e289 Mrdn 2y ago value="determined">
113 857e289 Mrdn 2y ago {t('page.users.determined_expire')}
114 857e289 Mrdn 2y ago </TabsTrigger>
115 857e289 Mrdn 2y ago <TabsTrigger
116 857e289 Mrdn 2y ago className="w-full"
117 857e289 Mrdn 2y ago value="onhold">
118 857e289 Mrdn 2y ago {t('page.users.onhold_expire')}
119 857e289 Mrdn 2y ago </TabsTrigger>
120 857e289 Mrdn 2y ago </TabsList>
121 857e289 Mrdn 2y ago <TabsContent value="determined">
122 857e289 Mrdn 2y ago <ExpireDateField />
123 857e289 Mrdn 2y ago </TabsContent>
124 857e289 Mrdn 2y ago <TabsContent value="onhold">
125 857e289 Mrdn 2y ago <OnHoldExpireDurationField />
126 857e289 Mrdn 2y ago <OnHoldTimeoutField />
127 857e289 Mrdn 2y ago </TabsContent>
128 857e289 Mrdn 2y ago </Tabs>
129 857e289 Mrdn 2y ago <NoteField />
130 857e289 Mrdn 2y ago </div>
131 857e289 Mrdn 2y ago <div>
132 857e289 Mrdn 2y ago <ServicesField services={services} setServices={setServices} />
133 857e289 Mrdn 2y ago </div>
134 857e289 Mrdn 2y ago </div>
135 857e289 Mrdn 2y ago <Button
136 857e289 Mrdn 2y ago className="mt-3 w-full font-semibold"
137 857e289 Mrdn 2y ago type="submit"
138 857e289 Mrdn 2y ago disabled={form.formState.isSubmitting}
139 857e289 Mrdn 2y ago >
140 857e289 Mrdn 2y ago {t('submit')}
141 857e289 Mrdn 2y ago </Button>
142 857e289 Mrdn 2y ago </form>
143 857e289 Mrdn 2y ago </Form>
144 857e289 Mrdn 2y ago </DialogContent>
145 857e289 Mrdn 2y ago </Dialog>
146 857e289 Mrdn 2y ago );
147 857e289 Mrdn 2y ago };