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