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