gitscope
/
← marzneshin / dashboard/src/features/nodes/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/nodes/dialogs/mutation/index.tsx · v0.5.0
Source
1 d42c6e6 Mardin 2y ago import { type FC, useMemo } from "react";
2 03b3dbc Mardin 2y ago import {
3 03b3dbc Mardin 2y ago DialogTitle,
4 03b3dbc Mardin 2y ago DialogContent,
5 03b3dbc Mardin 2y ago Dialog,
6 03b3dbc Mardin 2y ago DialogHeader,
7 03b3dbc Mardin 2y ago Form,
8 03b3dbc Mardin 2y ago FormItem,
9 03b3dbc Mardin 2y ago FormControl,
10 03b3dbc Mardin 2y ago FormMessage,
11 03b3dbc Mardin 2y ago FormLabel,
12 03b3dbc Mardin 2y ago Input,
13 03b3dbc Mardin 2y ago FormField,
14 03b3dbc Mardin 2y ago Button,
15 03b3dbc Mardin 2y ago Select,
16 03b3dbc Mardin 2y ago SelectContent,
17 03b3dbc Mardin 2y ago SelectItem,
18 03b3dbc Mardin 2y ago SelectTrigger,
19 03b3dbc Mardin 2y ago SelectValue,
20 03b3dbc Mardin 2y ago FormDescription,
21 03b3dbc Mardin 2y ago HStack,
22 03b3dbc Mardin 2y ago } from "@marzneshin/components";
23 03b3dbc Mardin 2y ago import { useTranslation } from "react-i18next";
24 03b3dbc Mardin 2y ago import {
25 03b3dbc Mardin 2y ago NodeSchema,
26 03b3dbc Mardin 2y ago useNodesCreationMutation,
27 03b3dbc Mardin 2y ago useNodesUpdateMutation,
28 03b3dbc Mardin 2y ago } from "../..";
29 03b3dbc Mardin 2y ago import type { NodeType } from "../..";
30 d42c6e6 Mardin 2y ago import { useMutationDialog, MutationDialogProps } from "@marzneshin/hooks";
31 03b3dbc Mardin 2y ago
32 d42c6e6 Mardin 2y ago export const MutationDialog: FC<MutationDialogProps<NodeType>> = ({
33 03b3dbc Mardin 2y ago entity,
34 03b3dbc Mardin 2y ago onClose,
35 03b3dbc Mardin 2y ago }) => {
36 03b3dbc Mardin 2y ago const updateMutation = useNodesUpdateMutation();
37 03b3dbc Mardin 2y ago const createMutation = useNodesCreationMutation();
38 03b3dbc Mardin 2y ago const { t } = useTranslation();
39 d42c6e6 Mardin 2y ago
40 d42c6e6 Mardin 2y ago const defaultValue = useMemo(() => ({
41 d0daa61 Mardin 2y ago id: 0,
42 d42c6e6 Mardin 2y ago name: "",
43 d42c6e6 Mardin 2y ago address: "",
44 d42c6e6 Mardin 2y ago status: "none",
45 d42c6e6 Mardin 2y ago port: 62050,
46 d42c6e6 Mardin 2y ago usage_coefficient: 1,
47 d42c6e6 Mardin 2y ago connection_backend: "grpclib",
48 d42c6e6 Mardin 2y ago }), []);
49 d42c6e6 Mardin 2y ago
50 d42c6e6 Mardin 2y ago const { onOpenChange, open, form, handleSubmit } = useMutationDialog({
51 03b3dbc Mardin 2y ago entity,
52 d42c6e6 Mardin 2y ago onClose,
53 03b3dbc Mardin 2y ago schema: NodeSchema,
54 03b3dbc Mardin 2y ago createMutation,
55 03b3dbc Mardin 2y ago updateMutation,
56 d42c6e6 Mardin 2y ago defaultValue,
57 03b3dbc Mardin 2y ago });
58 03b3dbc Mardin 2y ago
59 03b3dbc Mardin 2y ago return (
60 03b3dbc Mardin 2y ago <Dialog open={open} onOpenChange={onOpenChange} defaultOpen={true}>
61 03b3dbc Mardin 2y ago <DialogContent>
62 03b3dbc Mardin 2y ago <DialogHeader>
63 03b3dbc Mardin 2y ago <DialogTitle className="text-primary">
64 03b3dbc Mardin 2y ago {entity
65 03b3dbc Mardin 2y ago ? t("page.nodes.dialogs.edition.title")
66 03b3dbc Mardin 2y ago : t("page.nodes.dialogs.creation.title")}
67 03b3dbc Mardin 2y ago </DialogTitle>
68 03b3dbc Mardin 2y ago </DialogHeader>
69 03b3dbc Mardin 2y ago <Form {...form}>
70 03b3dbc Mardin 2y ago <form onSubmit={handleSubmit}>
71 03b3dbc Mardin 2y ago <FormField
72 03b3dbc Mardin 2y ago control={form.control}
73 03b3dbc Mardin 2y ago name="name"
74 03b3dbc Mardin 2y ago render={({ field }) => (
75 03b3dbc Mardin 2y ago <FormItem className="w-full">
76 03b3dbc Mardin 2y ago <FormLabel>{t("name")}</FormLabel>
77 03b3dbc Mardin 2y ago <FormControl>
78 03b3dbc Mardin 2y ago <Input {...field} />
79 03b3dbc Mardin 2y ago </FormControl>
80 03b3dbc Mardin 2y ago <FormMessage />
81 03b3dbc Mardin 2y ago </FormItem>
82 03b3dbc Mardin 2y ago )}
83 03b3dbc Mardin 2y ago />
84 03b3dbc Mardin 2y ago <div className="flex flex-row gap-2 items-center">
85 03b3dbc Mardin 2y ago <FormField
86 03b3dbc Mardin 2y ago control={form.control}
87 03b3dbc Mardin 2y ago name="address"
88 03b3dbc Mardin 2y ago render={({ field }) => (
89 03b3dbc Mardin 2y ago <FormItem className="w-2/3">
90 03b3dbc Mardin 2y ago <FormLabel>{t("address")}</FormLabel>
91 03b3dbc Mardin 2y ago <FormControl>
92 03b3dbc Mardin 2y ago <Input {...field} />
93 03b3dbc Mardin 2y ago </FormControl>
94 03b3dbc Mardin 2y ago <FormMessage />
95 03b3dbc Mardin 2y ago </FormItem>
96 03b3dbc Mardin 2y ago )}
97 03b3dbc Mardin 2y ago />
98 03b3dbc Mardin 2y ago <FormField
99 03b3dbc Mardin 2y ago control={form.control}
100 03b3dbc Mardin 2y ago name="port"
101 03b3dbc Mardin 2y ago render={({ field }) => (
102 03b3dbc Mardin 2y ago <FormItem className="w-1/3">
103 03b3dbc Mardin 2y ago <FormLabel>{t("port")}</FormLabel>
104 03b3dbc Mardin 2y ago <FormControl>
105 03b3dbc Mardin 2y ago <Input type="number" {...field} />
106 03b3dbc Mardin 2y ago </FormControl>
107 03b3dbc Mardin 2y ago <FormMessage />
108 03b3dbc Mardin 2y ago </FormItem>
109 03b3dbc Mardin 2y ago )}
110 03b3dbc Mardin 2y ago />
111 03b3dbc Mardin 2y ago </div>
112 03b3dbc Mardin 2y ago <HStack>
113 03b3dbc Mardin 2y ago <FormField
114 03b3dbc Mardin 2y ago control={form.control}
115 03b3dbc Mardin 2y ago name="connection_backend"
116 03b3dbc Mardin 2y ago render={({ field }) => (
117 03b3dbc Mardin 2y ago <FormItem className="w-full">
118 03b3dbc Mardin 2y ago <FormLabel>{t("page.nodes.connection_backend")}</FormLabel>
119 03b3dbc Mardin 2y ago <Select
120 03b3dbc Mardin 2y ago onValueChange={field.onChange}
121 03b3dbc Mardin 2y ago defaultValue={field.value}
122 03b3dbc Mardin 2y ago >
123 03b3dbc Mardin 2y ago <FormControl>
124 03b3dbc Mardin 2y ago <SelectTrigger>
125 03b3dbc Mardin 2y ago <SelectValue placeholder="Nodes Connection" />
126 03b3dbc Mardin 2y ago </SelectTrigger>
127 03b3dbc Mardin 2y ago </FormControl>
128 03b3dbc Mardin 2y ago <SelectContent>
129 03b3dbc Mardin 2y ago <SelectItem value="grpclib">grpclib</SelectItem>
130 03b3dbc Mardin 2y ago <SelectItem value="grpcio">grpcio</SelectItem>
131 03b3dbc Mardin 2y ago </SelectContent>
132 03b3dbc Mardin 2y ago </Select>
133 03b3dbc Mardin 2y ago <FormDescription>
134 03b3dbc Mardin 2y ago {t("page.nodes.connection_backend_desc")}
135 03b3dbc Mardin 2y ago </FormDescription>
136 03b3dbc Mardin 2y ago <FormMessage />
137 03b3dbc Mardin 2y ago </FormItem>
138 03b3dbc Mardin 2y ago )}
139 03b3dbc Mardin 2y ago />
140 03b3dbc Mardin 2y ago <FormField
141 03b3dbc Mardin 2y ago control={form.control}
142 03b3dbc Mardin 2y ago name="usage_coefficient"
143 03b3dbc Mardin 2y ago render={({ field }) => (
144 03b3dbc Mardin 2y ago <FormItem className="w-1/2">
145 03b3dbc Mardin 2y ago <FormLabel>{t("page.nodes.usage_coefficient")}</FormLabel>
146 03b3dbc Mardin 2y ago <FormControl>
147 03b3dbc Mardin 2y ago <Input {...field} />
148 03b3dbc Mardin 2y ago </FormControl>
149 03b3dbc Mardin 2y ago <FormMessage />
150 03b3dbc Mardin 2y ago </FormItem>
151 03b3dbc Mardin 2y ago )}
152 03b3dbc Mardin 2y ago />
153 03b3dbc Mardin 2y ago </HStack>
154 03b3dbc Mardin 2y ago <Button
155 03b3dbc Mardin 2y ago className="mt-3 w-full font-semibold"
156 03b3dbc Mardin 2y ago type="submit"
157 03b3dbc Mardin 2y ago disabled={form.formState.isSubmitting}
158 03b3dbc Mardin 2y ago >
159 03b3dbc Mardin 2y ago {t("submit")}
160 03b3dbc Mardin 2y ago </Button>
161 03b3dbc Mardin 2y ago </form>
162 03b3dbc Mardin 2y ago </Form>
163 03b3dbc Mardin 2y ago </DialogContent>
164 03b3dbc Mardin 2y ago </Dialog>
165 03b3dbc Mardin 2y ago );
166 03b3dbc Mardin 2y ago };