gitscope
/
← marzneshin / dashboard/src/modules/hosts/dialogs/mutation/fields/noise.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/modules/hosts/dialogs/mutation/fields/noise.tsx · master
Source
1 4056c66 Dawsh 1y ago import {
2 4056c66 Dawsh 1y ago Button,
3 4056c66 Dawsh 1y ago FormControl,
4 4056c66 Dawsh 1y ago FormField,
5 4056c66 Dawsh 1y ago FormItem,
6 4056c66 Dawsh 1y ago FormLabel,
7 4056c66 Dawsh 1y ago Input,
8 4056c66 Dawsh 1y ago Popover,
9 4056c66 Dawsh 1y ago PopoverContent,
10 4056c66 Dawsh 1y ago PopoverTrigger,
11 4056c66 Dawsh 1y ago Select,
12 4056c66 Dawsh 1y ago SelectContent,
13 4056c66 Dawsh 1y ago SelectItem,
14 4056c66 Dawsh 1y ago SelectTrigger,
15 4056c66 Dawsh 1y ago SelectValue,
16 4056c66 Dawsh 1y ago } from "@marzneshin/common/components";
17 4056c66 Dawsh 1y ago import type { FieldError, FieldErrors } from "react-hook-form";
18 4056c66 Dawsh 1y ago import { useFormContext } from "react-hook-form";
19 4056c66 Dawsh 1y ago import { useTranslation } from "react-i18next";
20 4056c66 Dawsh 1y ago import { ListPlus, MailWarning, TrashIcon } from "lucide-react";
21 4056c66 Dawsh 1y ago import type { FC } from "react";
22 4056c66 Dawsh 1y ago import { useState } from "react";
23 4056c66 Dawsh 1y ago import { noiseTypes } from "../profiles";
24 4056c66 Dawsh 1y ago
25 4056c66 Dawsh 1y ago interface NoiseForm {
26 4056c66 Dawsh 1y ago noise: Array<{
27 4056c66 Dawsh 1y ago type: string;
28 4056c66 Dawsh 1y ago packet: string;
29 4056c66 Dawsh 1y ago delay: string;
30 4056c66 Dawsh 1y ago } | null>;
31 4056c66 Dawsh 1y ago }
32 4056c66 Dawsh 1y ago
33 4056c66 Dawsh 1y ago const NoiseErrorPopover: FC<{
34 4056c66 Dawsh 1y ago errors?: { packet?: FieldError; type?: FieldError; delay?: FieldError };
35 4056c66 Dawsh 1y ago }> = ({ errors }) => {
36 4056c66 Dawsh 1y ago const { t } = useTranslation();
37 4056c66 Dawsh 1y ago
38 4056c66 Dawsh 1y ago if (!errors || (!errors.packet && !errors.type && !errors.delay))
39 4056c66 Dawsh 1y ago return null;
40 4056c66 Dawsh 1y ago
41 4056c66 Dawsh 1y ago return (
42 4056c66 Dawsh 1y ago <Popover>
43 4056c66 Dawsh 1y ago <PopoverTrigger>
44 4056c66 Dawsh 1y ago <MailWarning className="p-0 size-5 text-destructive bg-primary-background" />
45 4056c66 Dawsh 1y ago </PopoverTrigger>
46 4056c66 Dawsh 1y ago <PopoverContent className="bg-destructive-accent text-sm">
47 4056c66 Dawsh 1y ago <ul className="my-6 ml-3 list-disc [&>li]:mt-1 mt-0">
48 4056c66 Dawsh 1y ago {errors.type?.message && (
49 4056c66 Dawsh 1y ago <li>
50 4056c66 Dawsh 1y ago <b>Type:</b> {t(errors.type.message as string)}
51 4056c66 Dawsh 1y ago </li>
52 4056c66 Dawsh 1y ago )}
53 4056c66 Dawsh 1y ago {errors.packet?.message && (
54 4056c66 Dawsh 1y ago <li>
55 4056c66 Dawsh 1y ago <b>Packet:</b> {t(errors.packet.message as string)}
56 4056c66 Dawsh 1y ago </li>
57 4056c66 Dawsh 1y ago )}
58 4056c66 Dawsh 1y ago {errors.delay?.message && (
59 4056c66 Dawsh 1y ago <li>
60 4056c66 Dawsh 1y ago <b>Interval:</b> {t(errors.delay.message as string)}
61 4056c66 Dawsh 1y ago </li>
62 4056c66 Dawsh 1y ago )}
63 4056c66 Dawsh 1y ago </ul>
64 4056c66 Dawsh 1y ago </PopoverContent>
65 4056c66 Dawsh 1y ago </Popover>
66 4056c66 Dawsh 1y ago );
67 4056c66 Dawsh 1y ago };
68 4056c66 Dawsh 1y ago
69 4056c66 Dawsh 1y ago export const NoiseField = () => {
70 4056c66 Dawsh 1y ago const { t } = useTranslation();
71 4056c66 Dawsh 1y ago const form = useFormContext();
72 4056c66 Dawsh 1y ago const [forms, setForms] = useState<NoiseForm["noise"][number][]>(
73 4056c66 Dawsh 1y ago form.getValues("noise") || [],
74 4056c66 Dawsh 1y ago );
75 4056c66 Dawsh 1y ago
76 4056c66 Dawsh 1y ago const errors = form.formState.errors as FieldErrors<NoiseForm>;
77 4056c66 Dawsh 1y ago
78 4056c66 Dawsh 1y ago const addForm = () => {
79 4056c66 Dawsh 1y ago if (forms.length < 5) {
80 4056c66 Dawsh 1y ago const newForms = [
81 4056c66 Dawsh 1y ago ...forms,
82 4056c66 Dawsh 1y ago { type: "rand", packet: "", delay: "" },
83 4056c66 Dawsh 1y ago ];
84 4056c66 Dawsh 1y ago setForms(newForms);
85 4056c66 Dawsh 1y ago form.setValue("noise", newForms, { shouldValidate: true });
86 4056c66 Dawsh 1y ago }
87 4056c66 Dawsh 1y ago };
88 4056c66 Dawsh 1y ago
89 4056c66 Dawsh 1y ago const removeForm = (index: number) => {
90 4056c66 Dawsh 1y ago const updatedForms = forms.filter((_, i) => i !== index);
91 4056c66 Dawsh 1y ago setForms(updatedForms);
92 4056c66 Dawsh 1y ago form.setValue("noise", updatedForms, { shouldValidate: true });
93 4056c66 Dawsh 1y ago };
94 4056c66 Dawsh 1y ago
95 4056c66 Dawsh 1y ago const enableForm = (index: number) => {
96 4056c66 Dawsh 1y ago const updatedForms = [...forms];
97 4056c66 Dawsh 1y ago updatedForms[index] = { type: "", packet: "", delay: "" };
98 4056c66 Dawsh 1y ago setForms(updatedForms);
99 4056c66 Dawsh 1y ago form.setValue("noise", updatedForms, { shouldValidate: true });
100 4056c66 Dawsh 1y ago };
101 4056c66 Dawsh 1y ago
102 4056c66 Dawsh 1y ago return (
103 4056c66 Dawsh 1y ago <div>
104 4056c66 Dawsh 1y ago {forms.length > 0 ? (
105 4056c66 Dawsh 1y ago forms.map((formData, index) => (
106 4056c66 Dawsh 1y ago <FormItem key={index} className="my-2 w-full">
107 4056c66 Dawsh 1y ago {index === 0 && (
108 4056c66 Dawsh 1y ago <FormLabel className="flex flex-row justify-between items-center">
109 4056c66 Dawsh 1y ago {t("Noise")}
110 4056c66 Dawsh 1y ago <div className="flex flex-row items-center gap-2">
111 4056c66 Dawsh 1y ago {errors.noise?.[index] && (
112 4056c66 Dawsh 1y ago <NoiseErrorPopover
113 4056c66 Dawsh 1y ago // errors={errors.noise[index]}
114 4056c66 Dawsh 1y ago />
115 4056c66 Dawsh 1y ago )}
116 4056c66 Dawsh 1y ago {forms.length < 5 && (
117 4056c66 Dawsh 1y ago <Button
118 4056c66 Dawsh 1y ago className="p-0 size-5 bg-primary-background"
119 4056c66 Dawsh 1y ago variant="secondary"
120 4056c66 Dawsh 1y ago onClick={(e) => {
121 4056c66 Dawsh 1y ago e.preventDefault();
122 4056c66 Dawsh 1y ago addForm();
123 4056c66 Dawsh 1y ago }}
124 4056c66 Dawsh 1y ago >
125 4056c66 Dawsh 1y ago <ListPlus />
126 4056c66 Dawsh 1y ago </Button>
127 4056c66 Dawsh 1y ago )}
128 4056c66 Dawsh 1y ago </div>
129 4056c66 Dawsh 1y ago </FormLabel>
130 4056c66 Dawsh 1y ago )}
131 4056c66 Dawsh 1y ago <FormControl>
132 4056c66 Dawsh 1y ago <div className="flex flex-row w-full items-center gap-2">
133 4056c66 Dawsh 1y ago {formData ? (
134 4056c66 Dawsh 1y ago <>
135 4056c66 Dawsh 1y ago <FormField
136 4056c66 Dawsh 1y ago name={`noise.${index}.type`}
137 4056c66 Dawsh 1y ago render={({ field }) => (
138 4056c66 Dawsh 1y ago <Select
139 4056c66 Dawsh 1y ago onValueChange={
140 4056c66 Dawsh 1y ago field.onChange
141 4056c66 Dawsh 1y ago }
142 4056c66 Dawsh 1y ago defaultValue={field.value}
143 4056c66 Dawsh 1y ago >
144 4056c66 Dawsh 1y ago <FormControl>
145 4056c66 Dawsh 1y ago <SelectTrigger className="w-2/5">
146 4056c66 Dawsh 1y ago <SelectValue placeholder="Noise Type" />
147 4056c66 Dawsh 1y ago </SelectTrigger>
148 4056c66 Dawsh 1y ago </FormControl>
149 4056c66 Dawsh 1y ago <SelectContent>
150 4056c66 Dawsh 1y ago {noiseTypes.map(
151 4056c66 Dawsh 1y ago (option) => (
152 4056c66 Dawsh 1y ago <SelectItem
153 4056c66 Dawsh 1y ago value={
154 4056c66 Dawsh 1y ago option
155 4056c66 Dawsh 1y ago }
156 4056c66 Dawsh 1y ago >
157 4056c66 Dawsh 1y ago {option}
158 4056c66 Dawsh 1y ago </SelectItem>
159 4056c66 Dawsh 1y ago ),
160 4056c66 Dawsh 1y ago )}
161 4056c66 Dawsh 1y ago </SelectContent>
162 4056c66 Dawsh 1y ago </Select>
163 4056c66 Dawsh 1y ago )}
164 4056c66 Dawsh 1y ago />
165 4056c66 Dawsh 1y ago <div className="w-full hstack">
166 4056c66 Dawsh 1y ago <FormField
167 4056c66 Dawsh 1y ago name={`noise.${index}.packet`}
168 4056c66 Dawsh 1y ago render={({ field }) => (
169 4056c66 Dawsh 1y ago <Input
170 4056c66 Dawsh 1y ago className="border rounded-none rounded-s-lg p-2 w-full"
171 4056c66 Dawsh 1y ago placeholder="Packet"
172 4056c66 Dawsh 1y ago {...field}
173 4056c66 Dawsh 1y ago />
174 4056c66 Dawsh 1y ago )}
175 4056c66 Dawsh 1y ago />
176 4056c66 Dawsh 1y ago <FormField
177 4056c66 Dawsh 1y ago name={`noise.${index}.delay`}
178 4056c66 Dawsh 1y ago render={({ field }) => (
179 4056c66 Dawsh 1y ago <Input
180 4056c66 Dawsh 1y ago placeholder="Delay"
181 4056c66 Dawsh 1y ago className="border w-full rounded-none rounded-e-lg p-2"
182 4056c66 Dawsh 1y ago {...field}
183 4056c66 Dawsh 1y ago />
184 4056c66 Dawsh 1y ago )}
185 4056c66 Dawsh 1y ago />
186 4056c66 Dawsh 1y ago </div>
187 4056c66 Dawsh 1y ago <Button
188 4056c66 Dawsh 1y ago variant="destructive"
189 4056c66 Dawsh 1y ago className="p-0 size-5 bg-primary-background"
190 4056c66 Dawsh 1y ago onClick={(e) => {
191 4056c66 Dawsh 1y ago e.preventDefault();
192 4056c66 Dawsh 1y ago removeForm(index);
193 4056c66 Dawsh 1y ago }}
194 4056c66 Dawsh 1y ago >
195 4056c66 Dawsh 1y ago <TrashIcon className="text-red-400" />
196 4056c66 Dawsh 1y ago </Button>
197 4056c66 Dawsh 1y ago </>
198 4056c66 Dawsh 1y ago ) : (
199 4056c66 Dawsh 1y ago <Button
200 4056c66 Dawsh 1y ago className="border w-full"
201 4056c66 Dawsh 1y ago variant="ghost"
202 4056c66 Dawsh 1y ago onClick={(e) => {
203 4056c66 Dawsh 1y ago e.preventDefault();
204 4056c66 Dawsh 1y ago enableForm(index);
205 4056c66 Dawsh 1y ago }}
206 4056c66 Dawsh 1y ago >
207 4056c66 Dawsh 1y ago {t("Enable Form")}
208 4056c66 Dawsh 1y ago </Button>
209 4056c66 Dawsh 1y ago )}
210 4056c66 Dawsh 1y ago </div>
211 4056c66 Dawsh 1y ago </FormControl>
212 4056c66 Dawsh 1y ago </FormItem>
213 4056c66 Dawsh 1y ago ))
214 4056c66 Dawsh 1y ago ) : (
215 4056c66 Dawsh 1y ago <FormItem className="my-2 w-full">
216 4056c66 Dawsh 1y ago <FormLabel className="flex flex-row justify-between items-center">
217 4056c66 Dawsh 1y ago {t("Noise")}
218 4056c66 Dawsh 1y ago </FormLabel>
219 4056c66 Dawsh 1y ago
220 4056c66 Dawsh 1y ago <Button
221 4056c66 Dawsh 1y ago className="border w-full"
222 4056c66 Dawsh 1y ago variant="ghost"
223 4056c66 Dawsh 1y ago onClick={(e) => {
224 4056c66 Dawsh 1y ago e.preventDefault();
225 4056c66 Dawsh 1y ago addForm();
226 4056c66 Dawsh 1y ago }}
227 4056c66 Dawsh 1y ago >
228 4056c66 Dawsh 1y ago {t("disabled")}
229 4056c66 Dawsh 1y ago </Button>
230 4056c66 Dawsh 1y ago </FormItem>
231 4056c66 Dawsh 1y ago )}
232 4056c66 Dawsh 1y ago </div>
233 4056c66 Dawsh 1y ago );
234 4056c66 Dawsh 1y ago };