1import { FC } from "react";
2import {
3 DialogTitle,
4 DialogContent,
5 Dialog,
6 DialogHeader,
7 Form,
8 FormItem,
9 FormControl,
10 FormMessage,
11 FormLabel,
12 Input,
13 FormField,
14 Checkbox,
15 Button
16} from '@marzneshin/components';
17import { useTranslation } from 'react-i18next';
18import { NodeType, NodeSchema, useNodesCreationMutation, useNodesUpdateMutation } from "..";
19import { useMutationDialog } from "@marzneshin/hooks";
20
21interface MutationDialogProps {
22 entity: NodeType | null;
23 open: boolean;
24 onOpenChange: (state: boolean) => void;
25}
26
27const getDefaultValue = (): NodeType => ({
28 name: '',
29 address: '',
30 status: 'none',
31 port: 62050,
32 usage_coefficient: 1,
33 add_as_new_host: true,
34});
35
36export const MutationDialog: FC<MutationDialogProps> = ({
37 entity,
38 open,
39 onOpenChange,
40}) => {
41 const updateMutation = useNodesUpdateMutation();
42 const createMutation = useNodesCreationMutation();
43 const { t } = useTranslation();
44 const { form, handleSubmit } = useMutationDialog({
45 onOpenChange,
46 entity,
47 schema: NodeSchema,
48 createMutation,
49 updateMutation,
50 getDefaultValue
51 })
52 return (
53 <Dialog open={open} onOpenChange={onOpenChange} defaultOpen={true}>
54 <DialogContent>
55 <DialogHeader>
56 <DialogTitle className="text-primary">
57 {entity
58 ? t('page.nodes.dialogs.edition.title')
59 : t('page.nodes.dialogs.creation.title')}
60 </DialogTitle>
61 </DialogHeader>
62 <Form {...form}>
63 <form onSubmit={handleSubmit}>
64 <FormField
65 control={form.control}
66 name="name"
67 render={({ field }) => (
68 <FormItem>
69 <FormLabel>{t('name')}</FormLabel>
70 <FormControl>
71 <Input {...field} />
72 </FormControl>
73 <FormMessage />
74 </FormItem>
75 )}
76 />
77 <div className="flex flex-row gap-2 items-center">
78 <FormField
79 control={form.control}
80 name="address"
81 render={({ field }) => (
82 <FormItem className="w-2/4">
83 <FormLabel>{t('address')}</FormLabel>
84 <FormControl>
85 <Input {...field} />
86 </FormControl>
87 <FormMessage />
88 </FormItem>
89 )}
90 />
91 <FormField
92 control={form.control}
93 name="port"
94 render={({ field }) => (
95 <FormItem className="w-1/4">
96 <FormLabel>{t('port')}</FormLabel>
97 <FormControl>
98 <Input type="number" {...field} />
99 </FormControl>
100 <FormMessage />
101 </FormItem>
102 )}
103 />
104 <FormField
105 control={form.control}
106 name="usage_coefficient"
107 render={({ field }) => (
108 <FormItem className="w-1/4">
109 <FormLabel>{t('page.nodes.usage_coefficient')}</FormLabel>
110 <FormControl>
111 <Input {...field} />
112 </FormControl>
113 <FormMessage />
114 </FormItem>
115 )}
116 />
117 </div>
118 <FormField
119 control={form.control}
120 name="add_as_new_host"
121 render={({ field }) => (
122 <FormItem className="mt-4">
123 <FormControl>
124 <div className="flex flex-row gap-1 items-center">
125 <Checkbox
126 checked={field.value}
127 onCheckedChange={field.onChange}
128 />
129 <FormLabel>
130 {t('page.nodes.add_as_new_host')}
131 </FormLabel>
132 </div>
133 </FormControl>
134 <FormMessage />
135 </FormItem>
136 )}
137 />
138 <Button
139 className="mt-3 w-full font-semibold"
140 type="submit"
141 disabled={form.formState.isSubmitting}
142 >
143 {t('submit')}
144 </Button>
145 </form>
146 </Form>
147 </DialogContent>
148 </Dialog>
149 );
150};