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.3.2
Source
1 03b3dbc Mardin 2y ago import { type FC, useEffect } 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 03b3dbc Mardin 2y ago import { useMutationDialog } from "@marzneshin/hooks";
31 03b3dbc Mardin 2y ago
32 03b3dbc Mardin 2y ago interface MutationDialogProps {
33 03b3dbc Mardin 2y ago entity: NodeType | null;
34 03b3dbc Mardin 2y ago open: boolean;
35 03b3dbc Mardin 2y ago onOpenChange: (state: boolean) => void;
36 03b3dbc Mardin 2y ago onClose: () => void;
37 03b3dbc Mardin 2y ago }
38 03b3dbc Mardin 2y ago
39 03b3dbc Mardin 2y ago const getDefaultValue = (): NodeType => ({
40 03b3dbc Mardin 2y ago name: "",
41 03b3dbc Mardin 2y ago address: "",
42 03b3dbc Mardin 2y ago status: "none",
43 03b3dbc Mardin 2y ago port: 62050,
44 03b3dbc Mardin 2y ago usage_coefficient: 1,
45 03b3dbc Mardin 2y ago connection_backend: "grpclib",
46 03b3dbc Mardin 2y ago });
47 03b3dbc Mardin 2y ago
48 03b3dbc Mardin 2y ago export const MutationDialog: FC<MutationDialogProps> = ({
49 03b3dbc Mardin 2y ago entity,
50 03b3dbc Mardin 2y ago open,
51 03b3dbc Mardin 2y ago onOpenChange,
52 03b3dbc Mardin 2y ago onClose,
53 03b3dbc Mardin 2y ago }) => {
54 03b3dbc Mardin 2y ago const updateMutation = useNodesUpdateMutation();
55 03b3dbc Mardin 2y ago const createMutation = useNodesCreationMutation();
56 03b3dbc Mardin 2y ago const { t } = useTranslation();
57 03b3dbc Mardin 2y ago const { form, handleSubmit } = useMutationDialog({
58 03b3dbc Mardin 2y ago onOpenChange,
59 03b3dbc Mardin 2y ago entity,
60 03b3dbc Mardin 2y ago schema: NodeSchema,
61 03b3dbc Mardin 2y ago createMutation,
62 03b3dbc Mardin 2y ago updateMutation,
63 03b3dbc Mardin 2y ago getDefaultValue,
64 03b3dbc Mardin 2y ago });
65 03b3dbc Mardin 2y ago
66 03b3dbc Mardin 2y ago useEffect(() => {
67 03b3dbc Mardin 2y ago if (!open) onClose();
68 03b3dbc Mardin 2y ago }, [open, onClose]);
69 03b3dbc Mardin 2y ago
70 03b3dbc Mardin 2y ago return (
71 03b3dbc Mardin 2y ago <Dialog open={open} onOpenChange={onOpenChange} defaultOpen={true}>
72 03b3dbc Mardin 2y ago <DialogContent>
73 03b3dbc Mardin 2y ago <DialogHeader>
74 03b3dbc Mardin 2y ago <DialogTitle className="text-primary">
75 03b3dbc Mardin 2y ago {entity
76 03b3dbc Mardin 2y ago ? t("page.nodes.dialogs.edition.title")
77 03b3dbc Mardin 2y ago : t("page.nodes.dialogs.creation.title")}
78 03b3dbc Mardin 2y ago </DialogTitle>
79 03b3dbc Mardin 2y ago </DialogHeader>
80 03b3dbc Mardin 2y ago <Form {...form}>
81 03b3dbc Mardin 2y ago <form onSubmit={handleSubmit}>
82 03b3dbc Mardin 2y ago <FormField
83 03b3dbc Mardin 2y ago control={form.control}
84 03b3dbc Mardin 2y ago name="name"
85 03b3dbc Mardin 2y ago render={({ field }) => (
86 03b3dbc Mardin 2y ago <FormItem className="w-full">
87 03b3dbc Mardin 2y ago <FormLabel>{t("name")}</FormLabel>
88 03b3dbc Mardin 2y ago <FormControl>
89 03b3dbc Mardin 2y ago <Input {...field} />
90 03b3dbc Mardin 2y ago </FormControl>
91 03b3dbc Mardin 2y ago <FormMessage />
92 03b3dbc Mardin 2y ago </FormItem>
93 03b3dbc Mardin 2y ago )}
94 03b3dbc Mardin 2y ago />
95 03b3dbc Mardin 2y ago <div className="flex flex-row gap-2 items-center">
96 03b3dbc Mardin 2y ago <FormField
97 03b3dbc Mardin 2y ago control={form.control}
98 03b3dbc Mardin 2y ago name="address"
99 03b3dbc Mardin 2y ago render={({ field }) => (
100 03b3dbc Mardin 2y ago <FormItem className="w-2/3">
101 03b3dbc Mardin 2y ago <FormLabel>{t("address")}</FormLabel>
102 03b3dbc Mardin 2y ago <FormControl>
103 03b3dbc Mardin 2y ago <Input {...field} />
104 03b3dbc Mardin 2y ago </FormControl>
105 03b3dbc Mardin 2y ago <FormMessage />
106 03b3dbc Mardin 2y ago </FormItem>
107 03b3dbc Mardin 2y ago )}
108 03b3dbc Mardin 2y ago />
109 03b3dbc Mardin 2y ago <FormField
110 03b3dbc Mardin 2y ago control={form.control}
111 03b3dbc Mardin 2y ago name="port"
112 03b3dbc Mardin 2y ago render={({ field }) => (
113 03b3dbc Mardin 2y ago <FormItem className="w-1/3">
114 03b3dbc Mardin 2y ago <FormLabel>{t("port")}</FormLabel>
115 03b3dbc Mardin 2y ago <FormControl>
116 03b3dbc Mardin 2y ago <Input type="number" {...field} />
117 03b3dbc Mardin 2y ago </FormControl>
118 03b3dbc Mardin 2y ago <FormMessage />
119 03b3dbc Mardin 2y ago </FormItem>
120 03b3dbc Mardin 2y ago )}
121 03b3dbc Mardin 2y ago />
122 03b3dbc Mardin 2y ago </div>
123 03b3dbc Mardin 2y ago <HStack>
124 03b3dbc Mardin 2y ago <FormField
125 03b3dbc Mardin 2y ago control={form.control}
126 03b3dbc Mardin 2y ago name="connection_backend"
127 03b3dbc Mardin 2y ago render={({ field }) => (
128 03b3dbc Mardin 2y ago <FormItem className="w-full">
129 03b3dbc Mardin 2y ago <FormLabel>{t("page.nodes.connection_backend")}</FormLabel>
130 03b3dbc Mardin 2y ago <Select
131 03b3dbc Mardin 2y ago onValueChange={field.onChange}
132 03b3dbc Mardin 2y ago defaultValue={field.value}
133 03b3dbc Mardin 2y ago >
134 03b3dbc Mardin 2y ago <FormControl>
135 03b3dbc Mardin 2y ago <SelectTrigger>
136 03b3dbc Mardin 2y ago <SelectValue placeholder="Nodes Connection" />
137 03b3dbc Mardin 2y ago </SelectTrigger>
138 03b3dbc Mardin 2y ago </FormControl>
139 03b3dbc Mardin 2y ago <SelectContent>
140 03b3dbc Mardin 2y ago <SelectItem value="grpclib">grpclib</SelectItem>
141 03b3dbc Mardin 2y ago <SelectItem value="grpcio">grpcio</SelectItem>
142 03b3dbc Mardin 2y ago </SelectContent>
143 03b3dbc Mardin 2y ago </Select>
144 03b3dbc Mardin 2y ago <FormDescription>
145 03b3dbc Mardin 2y ago {t("page.nodes.connection_backend_desc")}
146 03b3dbc Mardin 2y ago </FormDescription>
147 03b3dbc Mardin 2y ago <FormMessage />
148 03b3dbc Mardin 2y ago </FormItem>
149 03b3dbc Mardin 2y ago )}
150 03b3dbc Mardin 2y ago />
151 03b3dbc Mardin 2y ago <FormField
152 03b3dbc Mardin 2y ago control={form.control}
153 03b3dbc Mardin 2y ago name="usage_coefficient"
154 03b3dbc Mardin 2y ago render={({ field }) => (
155 03b3dbc Mardin 2y ago <FormItem className="w-1/2">
156 03b3dbc Mardin 2y ago <FormLabel>{t("page.nodes.usage_coefficient")}</FormLabel>
157 03b3dbc Mardin 2y ago <FormControl>
158 03b3dbc Mardin 2y ago <Input {...field} />
159 03b3dbc Mardin 2y ago </FormControl>
160 03b3dbc Mardin 2y ago <FormMessage />
161 03b3dbc Mardin 2y ago </FormItem>
162 03b3dbc Mardin 2y ago )}
163 03b3dbc Mardin 2y ago />
164 03b3dbc Mardin 2y ago </HStack>
165 03b3dbc Mardin 2y ago <Button
166 03b3dbc Mardin 2y ago className="mt-3 w-full font-semibold"
167 03b3dbc Mardin 2y ago type="submit"
168 03b3dbc Mardin 2y ago disabled={form.formState.isSubmitting}
169 03b3dbc Mardin 2y ago >
170 03b3dbc Mardin 2y ago {t("submit")}
171 03b3dbc Mardin 2y ago </Button>
172 03b3dbc Mardin 2y ago </form>
173 03b3dbc Mardin 2y ago </Form>
174 03b3dbc Mardin 2y ago </DialogContent>
175 03b3dbc Mardin 2y ago </Dialog>
176 03b3dbc Mardin 2y ago );
177 03b3dbc Mardin 2y ago };