gitscope
/
← marzneshin / dashboard/src/features/hosts/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/hosts/dialogs/mutation/index.tsx · v0.4.0
Source
1 d42c6e6 Mardin 2y ago import { type FC, useEffect } from "react";
2 3b7feef Mrdn 2y ago import {
3 3b7feef Mrdn 2y ago DialogTitle,
4 3b7feef Mrdn 2y ago DialogContent,
5 3b7feef Mrdn 2y ago Dialog,
6 3b7feef Mrdn 2y ago DialogHeader,
7 3b7feef Mrdn 2y ago Form,
8 3b7feef Mrdn 2y ago Button,
9 0b152b5 Mrdn 2y ago Accordion,
10 0b152b5 Mrdn 2y ago AccordionContent,
11 0b152b5 Mrdn 2y ago AccordionItem,
12 0b152b5 Mrdn 2y ago AccordionTrigger,
13 aa14012 Mrdn 2y ago ScrollArea,
14 aa14012 Mrdn 2y ago HStack,
15 0b152b5 Mrdn 2y ago } from "@marzneshin/components";
16 0b152b5 Mrdn 2y ago import { useForm } from "react-hook-form";
17 0b152b5 Mrdn 2y ago import { zodResolver } from "@hookform/resolvers/zod";
18 0b152b5 Mrdn 2y ago import { useTranslation } from "react-i18next";
19 3b7feef Mrdn 2y ago import {
20 3b7feef Mrdn 2y ago HostSchema,
21 3b7feef Mrdn 2y ago getDefaultValues,
22 3b7feef Mrdn 2y ago useHostsCreationMutation,
23 0b152b5 Mrdn 2y ago useHostsUpdateMutation,
24 d42c6e6 Mardin 2y ago type HostType,
25 3b7feef Mrdn 2y ago } from "@marzneshin/features/hosts";
26 7428e12 Mrdn 2y ago import {
27 d42c6e6 Mardin 2y ago RemarkField,
28 7428e12 Mrdn 2y ago AddressField,
29 7428e12 Mrdn 2y ago PortField,
30 7428e12 Mrdn 2y ago HostField,
31 0b152b5 Mrdn 2y ago MuxField,
32 0b152b5 Mrdn 2y ago FragmentField,
33 7428e12 Mrdn 2y ago PathField,
34 7428e12 Mrdn 2y ago SecurityFields,
35 7428e12 Mrdn 2y ago } from "./fields";
36 d42c6e6 Mardin 2y ago import { useDialog, MutationDialogProps } from "@marzneshin/hooks";
37 3b7feef Mrdn 2y ago
38 d42c6e6 Mardin 2y ago interface HostMutationDialogProps extends MutationDialogProps<HostType> {
39 03b3dbc Mardin 2y ago inboundId?: number;
40 3b7feef Mrdn 2y ago }
41 3b7feef Mrdn 2y ago
42 7428e12 Mrdn 2y ago const transformFormValue = (values: HostType) => {
43 ec7410a Mardin 2y ago const port = values.port === "" ? null : values.port;
44 0b152b5 Mrdn 2y ago const alpn = values.alpn === "none" ? "" : values.alpn;
45 0b152b5 Mrdn 2y ago const fingerprint = values.fingerprint === "none" ? "" : values.fingerprint;
46 ec7410a Mardin 2y ago return { ...values, alpn, fingerprint, port };
47 0b152b5 Mrdn 2y ago };
48 3b7feef Mrdn 2y ago
49 d42c6e6 Mardin 2y ago export const HostsMutationDialog: FC<HostMutationDialogProps> = ({
50 3b7feef Mrdn 2y ago inboundId,
51 3b7feef Mrdn 2y ago entity,
52 03b3dbc Mardin 2y ago onClose,
53 3b7feef Mrdn 2y ago }) => {
54 d42c6e6 Mardin 2y ago const [open, onOpenChange] = useDialog(true);
55 3b7feef Mrdn 2y ago const form = useForm({
56 3b7feef Mrdn 2y ago defaultValues: entity ? entity : getDefaultValues(),
57 0b152b5 Mrdn 2y ago resolver: zodResolver(HostSchema),
58 3b7feef Mrdn 2y ago });
59 3b7feef Mrdn 2y ago const updateMutation = useHostsUpdateMutation();
60 3b7feef Mrdn 2y ago const createMutation = useHostsCreationMutation();
61 3b7feef Mrdn 2y ago const { t } = useTranslation();
62 3b7feef Mrdn 2y ago
63 3b7feef Mrdn 2y ago const submit = (values: HostType) => {
64 0b152b5 Mrdn 2y ago const host = transformFormValue(values);
65 7428e12 Mrdn 2y ago if (entity && entity.id !== undefined) {
66 7428e12 Mrdn 2y ago updateMutation.mutate({ hostId: entity.id, host });
67 03b3dbc Mardin 2y ago onOpenChange(false);
68 03b3dbc Mardin 2y ago } else if (inboundId !== undefined) {
69 7428e12 Mrdn 2y ago createMutation.mutate({ inboundId, host });
70 03b3dbc Mardin 2y ago onOpenChange(false);
71 3b7feef Mrdn 2y ago }
72 3b7feef Mrdn 2y ago };
73 3b7feef Mrdn 2y ago
74 03b3dbc Mardin 2y ago useEffect(() => {
75 03b3dbc Mardin 2y ago if (!open) onClose();
76 03b3dbc Mardin 2y ago }, [open, onClose]);
77 03b3dbc Mardin 2y ago
78 3b7feef Mrdn 2y ago useEffect(() => {
79 3b7feef Mrdn 2y ago if (entity) form.reset(entity);
80 3b7feef Mrdn 2y ago else form.reset(getDefaultValues());
81 f9ed408 Mardin 2y ago }, [entity, form, open]);
82 3b7feef Mrdn 2y ago
83 3b7feef Mrdn 2y ago return (
84 3b7feef Mrdn 2y ago <Dialog open={open} onOpenChange={onOpenChange} defaultOpen={true}>
85 aa14012 Mrdn 2y ago <DialogContent className="min-w-full h-full md:h-auto md:min-w-[32rem]">
86 aa14012 Mrdn 2y ago <ScrollArea className="flex flex-col h-full p-0">
87 aa14012 Mrdn 2y ago <DialogHeader className="mb-3">
88 aa14012 Mrdn 2y ago <DialogTitle className="text-primary">
89 aa14012 Mrdn 2y ago {entity
90 aa14012 Mrdn 2y ago ? t("page.hosts.dialogs.edition.title")
91 aa14012 Mrdn 2y ago : t("page.hosts.dialogs.creation.title")}
92 aa14012 Mrdn 2y ago </DialogTitle>
93 aa14012 Mrdn 2y ago </DialogHeader>
94 aa14012 Mrdn 2y ago <Form {...form}>
95 aa14012 Mrdn 2y ago <form
96 aa14012 Mrdn 2y ago onSubmit={form.handleSubmit(submit)}
97 aa14012 Mrdn 2y ago className="h-full flex flex-col justify-between"
98 3b7feef Mrdn 2y ago >
99 aa14012 Mrdn 2y ago <RemarkField />
100 aa14012 Mrdn 2y ago <HStack className="gap-2 items-start">
101 aa14012 Mrdn 2y ago <AddressField />
102 aa14012 Mrdn 2y ago <PortField />
103 aa14012 Mrdn 2y ago </HStack>
104 aa14012 Mrdn 2y ago <Accordion type="single" collapsible>
105 aa14012 Mrdn 2y ago <AccordionItem value="item-1">
106 aa14012 Mrdn 2y ago <AccordionTrigger>{t("advanced-options")}</AccordionTrigger>
107 aa14012 Mrdn 2y ago <AccordionContent>
108 aa14012 Mrdn 2y ago <div className="flex flex-row gap-2 items-start">
109 aa14012 Mrdn 2y ago <HostField />
110 aa14012 Mrdn 2y ago <PathField />
111 aa14012 Mrdn 2y ago </div>
112 aa14012 Mrdn 2y ago <FragmentField />
113 aa14012 Mrdn 2y ago <MuxField />
114 aa14012 Mrdn 2y ago <SecurityFields />
115 aa14012 Mrdn 2y ago </AccordionContent>
116 aa14012 Mrdn 2y ago </AccordionItem>
117 aa14012 Mrdn 2y ago </Accordion>
118 aa14012 Mrdn 2y ago <Button
119 aa14012 Mrdn 2y ago className="mt-3 w-full font-semibold"
120 aa14012 Mrdn 2y ago type="submit"
121 aa14012 Mrdn 2y ago disabled={form.formState.isSubmitting}
122 aa14012 Mrdn 2y ago >
123 aa14012 Mrdn 2y ago {t("submit")}
124 aa14012 Mrdn 2y ago </Button>
125 aa14012 Mrdn 2y ago </form>
126 aa14012 Mrdn 2y ago </Form>
127 aa14012 Mrdn 2y ago </ScrollArea>
128 3b7feef Mrdn 2y ago </DialogContent>
129 3b7feef Mrdn 2y ago </Dialog>
130 3b7feef Mrdn 2y ago );
131 3b7feef Mrdn 2y ago };