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