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