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.0-alpha10
Source
1 7428e12 Mrdn 2y ago import { 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 3b7feef Mrdn 2y ago } from '@marzneshin/components';
10 3b7feef Mrdn 2y ago import { useForm } from 'react-hook-form';
11 3b7feef Mrdn 2y ago import { zodResolver } from '@hookform/resolvers/zod';
12 3b7feef Mrdn 2y ago import { useTranslation } from 'react-i18next';
13 3b7feef Mrdn 2y ago import {
14 3b7feef Mrdn 2y ago HostSchema,
15 3b7feef Mrdn 2y ago HostType,
16 3b7feef Mrdn 2y ago getDefaultValues,
17 3b7feef Mrdn 2y ago useHostsCreationMutation,
18 3b7feef Mrdn 2y ago useHostsUpdateMutation
19 3b7feef Mrdn 2y ago } from "@marzneshin/features/hosts";
20 7428e12 Mrdn 2y ago import { RemarkField } from "./fields/remark";
21 7428e12 Mrdn 2y ago import {
22 7428e12 Mrdn 2y ago AddressField,
23 7428e12 Mrdn 2y ago PortField,
24 7428e12 Mrdn 2y ago HostField,
25 7428e12 Mrdn 2y ago PathField,
26 7428e12 Mrdn 2y ago SecurityFields,
27 7428e12 Mrdn 2y ago } from "./fields";
28 3b7feef Mrdn 2y ago
29 3b7feef Mrdn 2y ago interface MutationDialogProps {
30 3b7feef Mrdn 2y ago entity: HostType | null
31 3b7feef Mrdn 2y ago open: boolean
32 3b7feef Mrdn 2y ago inboundId: number
33 3b7feef Mrdn 2y ago onOpenChange: (state: boolean) => void
34 3b7feef Mrdn 2y ago }
35 3b7feef Mrdn 2y ago
36 7428e12 Mrdn 2y ago const transformFormValue = (values: HostType) => {
37 7428e12 Mrdn 2y ago const alpn = values.alpn === "none" ? "" : values.alpn
38 7428e12 Mrdn 2y ago const fingerprint = values.fingerprint === "none" ? "" : values.fingerprint
39 7428e12 Mrdn 2y ago return { ...values, alpn, fingerprint }
40 7428e12 Mrdn 2y ago }
41 3b7feef Mrdn 2y ago
42 3b7feef Mrdn 2y ago export const HostsMutationDialog: FC<MutationDialogProps> = ({
43 3b7feef Mrdn 2y ago inboundId,
44 3b7feef Mrdn 2y ago entity,
45 3b7feef Mrdn 2y ago open,
46 3b7feef Mrdn 2y ago onOpenChange,
47 3b7feef Mrdn 2y ago }) => {
48 3b7feef Mrdn 2y ago const form = useForm({
49 3b7feef Mrdn 2y ago defaultValues: entity ? entity : getDefaultValues(),
50 3b7feef Mrdn 2y ago resolver: zodResolver(HostSchema)
51 3b7feef Mrdn 2y ago });
52 3b7feef Mrdn 2y ago const updateMutation = useHostsUpdateMutation();
53 3b7feef Mrdn 2y ago const createMutation = useHostsCreationMutation();
54 3b7feef Mrdn 2y ago const { t } = useTranslation();
55 3b7feef Mrdn 2y ago
56 3b7feef Mrdn 2y ago const submit = (values: HostType) => {
57 7428e12 Mrdn 2y ago const host = transformFormValue(values)
58 7428e12 Mrdn 2y ago if (entity && entity.id !== undefined) {
59 7428e12 Mrdn 2y ago updateMutation.mutate({ hostId: entity.id, host });
60 3b7feef Mrdn 2y ago } else {
61 7428e12 Mrdn 2y ago createMutation.mutate({ inboundId, host });
62 3b7feef Mrdn 2y ago }
63 3b7feef Mrdn 2y ago onOpenChange(false);
64 3b7feef Mrdn 2y ago };
65 3b7feef Mrdn 2y ago
66 3b7feef Mrdn 2y ago useEffect(() => {
67 3b7feef Mrdn 2y ago if (entity) form.reset(entity);
68 3b7feef Mrdn 2y ago else form.reset(getDefaultValues());
69 3b7feef Mrdn 2y ago }, [entity, form]);
70 3b7feef Mrdn 2y ago
71 3b7feef Mrdn 2y ago return (
72 3b7feef Mrdn 2y ago <Dialog open={open} onOpenChange={onOpenChange} defaultOpen={true}>
73 3b7feef Mrdn 2y ago <DialogContent>
74 3b7feef Mrdn 2y ago <DialogHeader>
75 3b7feef Mrdn 2y ago <DialogTitle className="text-primary">
76 3b7feef Mrdn 2y ago {entity
77 3b7feef Mrdn 2y ago ? t('page.hosts.dialogs.edition.title')
78 3b7feef Mrdn 2y ago : t('page.hosts.dialogs.creation.title')}
79 3b7feef Mrdn 2y ago </DialogTitle>
80 3b7feef Mrdn 2y ago </DialogHeader>
81 3b7feef Mrdn 2y ago <Form {...form}>
82 3b7feef Mrdn 2y ago <form onSubmit={form.handleSubmit(submit)}>
83 7428e12 Mrdn 2y ago <RemarkField />
84 3b7feef Mrdn 2y ago <div className="flex flex-row gap-1 items-center">
85 7428e12 Mrdn 2y ago <AddressField />
86 7428e12 Mrdn 2y ago <PortField />
87 3b7feef Mrdn 2y ago </div>
88 7428e12 Mrdn 2y ago <PathField />
89 7428e12 Mrdn 2y ago <HostField />
90 7428e12 Mrdn 2y ago <SecurityFields />
91 3b7feef Mrdn 2y ago <Button
92 3b7feef Mrdn 2y ago className="mt-3 w-full font-semibold"
93 3b7feef Mrdn 2y ago type="submit"
94 3b7feef Mrdn 2y ago disabled={form.formState.isSubmitting}
95 3b7feef Mrdn 2y ago >
96 3b7feef Mrdn 2y ago {t('submit')}
97 3b7feef Mrdn 2y ago </Button>
98 3b7feef Mrdn 2y ago </form>
99 3b7feef Mrdn 2y ago </Form>
100 3b7feef Mrdn 2y ago </DialogContent>
101 3b7feef Mrdn 2y ago </Dialog>
102 3b7feef Mrdn 2y ago );
103 3b7feef Mrdn 2y ago };