gitscope
/
← marzneshin / dashboard/src/features/services/dialogs/mutation/fields/inbounds.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/services/dialogs/mutation/fields/inbounds.tsx · v0.3.0
Source
1 3072f60 Mrdn 2y ago import {
2 3072f60 Mrdn 2y ago FormItem,
3 3072f60 Mrdn 2y ago FormControl,
4 3072f60 Mrdn 2y ago FormMessage,
5 3072f60 Mrdn 2y ago FormLabel,
6 3072f60 Mrdn 2y ago FormField,
7 3072f60 Mrdn 2y ago Checkbox,
8 3072f60 Mrdn 2y ago Badge,
9 3072f60 Mrdn 2y ago } from "@marzneshin/components";
10 3072f60 Mrdn 2y ago import {
11 3072f60 Mrdn 2y ago useInboundsQuery,
12 3072f60 Mrdn 2y ago type InboundType,
13 3072f60 Mrdn 2y ago } from "@marzneshin/features/inbounds";
14 3072f60 Mrdn 2y ago import {
15 3072f60 Mrdn 2y ago useFormContext,
16 3072f60 Mrdn 2y ago type FieldValues,
17 3072f60 Mrdn 2y ago type ControllerRenderProps,
18 3072f60 Mrdn 2y ago } from "react-hook-form";
19 3072f60 Mrdn 2y ago import { useTranslation } from "react-i18next";
20 3072f60 Mrdn 2y ago import { cn } from "@marzneshin/utils";
21 3072f60 Mrdn 2y ago import { Box, GlobeLock } from "lucide-react";
22 3072f60 Mrdn 2y ago
23 3072f60 Mrdn 2y ago export const InboundCard = ({
24 3072f60 Mrdn 2y ago inbound,
25 3072f60 Mrdn 2y ago field,
26 3072f60 Mrdn 2y ago }: {
27 3072f60 Mrdn 2y ago inbound: InboundType;
28 3072f60 Mrdn 2y ago field: ControllerRenderProps<FieldValues, "inbounds">;
29 3072f60 Mrdn 2y ago }) => {
30 3072f60 Mrdn 2y ago return (
31 3072f60 Mrdn 2y ago <div
32 3072f60 Mrdn 2y ago className={cn(
33 3072f60 Mrdn 2y ago "flex flex-row items-center p-3 space-y-0 space-x-3 rounded-md border",
34 3072f60 Mrdn 2y ago {
35 3072f60 Mrdn 2y ago "bg-secondary": field.value?.includes(inbound.id),
36 3072f60 Mrdn 2y ago },
37 3072f60 Mrdn 2y ago )}
38 3072f60 Mrdn 2y ago >
39 3072f60 Mrdn 2y ago <Checkbox
40 3072f60 Mrdn 2y ago checked={field.value?.includes(inbound.id)}
41 3072f60 Mrdn 2y ago onCheckedChange={(checked) => {
42 3072f60 Mrdn 2y ago return checked
43 3072f60 Mrdn 2y ago ? field.onChange([...field.value, inbound.id])
44 3072f60 Mrdn 2y ago : field.onChange(
45 3072f60 Mrdn 2y ago field.value?.filter((value: number) => value !== inbound.id),
46 3072f60 Mrdn 2y ago );
47 3072f60 Mrdn 2y ago }}
48 3072f60 Mrdn 2y ago />
49 3072f60 Mrdn 2y ago <FormLabel className="flex flex-row justify-between items-center w-full">
50 3072f60 Mrdn 2y ago {inbound.tag}
51 3072f60 Mrdn 2y ago <div className="flex gap-2">
52 3072f60 Mrdn 2y ago <Badge className="py-1 px-2">
53 3072f60 Mrdn 2y ago {" "}
54 3072f60 Mrdn 2y ago <GlobeLock className="mr-1 w-4" /> {inbound.protocol}{" "}
55 3072f60 Mrdn 2y ago </Badge>
56 3072f60 Mrdn 2y ago <Badge className="py-1 px-2">
57 3072f60 Mrdn 2y ago {" "}
58 3072f60 Mrdn 2y ago <Box className="mr-1 w-4" /> {inbound.node.name}{" "}
59 3072f60 Mrdn 2y ago </Badge>
60 3072f60 Mrdn 2y ago </div>
61 3072f60 Mrdn 2y ago </FormLabel>
62 3072f60 Mrdn 2y ago </div>
63 3072f60 Mrdn 2y ago );
64 3072f60 Mrdn 2y ago };
65 3072f60 Mrdn 2y ago
66 3072f60 Mrdn 2y ago export const InboundsField = () => {
67 3072f60 Mrdn 2y ago const { data: inbounds } = useInboundsQuery();
68 3072f60 Mrdn 2y ago const form = useFormContext();
69 3072f60 Mrdn 2y ago const { t } = useTranslation();
70 3072f60 Mrdn 2y ago
71 3072f60 Mrdn 2y ago return (
72 3072f60 Mrdn 2y ago <FormField
73 3072f60 Mrdn 2y ago control={form.control}
74 3072f60 Mrdn 2y ago name="inbounds"
75 3072f60 Mrdn 2y ago render={() => (
76 3072f60 Mrdn 2y ago <FormItem>
77 3072f60 Mrdn 2y ago <FormLabel>{t("inbounds")}</FormLabel>
78 3072f60 Mrdn 2y ago {inbounds.map((inbound) => (
79 3072f60 Mrdn 2y ago <FormField
80 3072f60 Mrdn 2y ago key={inbound.id}
81 3072f60 Mrdn 2y ago control={form.control}
82 3072f60 Mrdn 2y ago name="inbounds"
83 3072f60 Mrdn 2y ago render={({ field }) => (
84 3072f60 Mrdn 2y ago <FormItem key={inbound.id}>
85 3072f60 Mrdn 2y ago <FormControl>
86 3072f60 Mrdn 2y ago <InboundCard inbound={inbound} field={field} />
87 3072f60 Mrdn 2y ago </FormControl>
88 3072f60 Mrdn 2y ago </FormItem>
89 3072f60 Mrdn 2y ago )}
90 3072f60 Mrdn 2y ago />
91 3072f60 Mrdn 2y ago ))}
92 3072f60 Mrdn 2y ago <FormMessage />
93 3072f60 Mrdn 2y ago </FormItem>
94 3072f60 Mrdn 2y ago )}
95 3072f60 Mrdn 2y ago />
96 3072f60 Mrdn 2y ago );
97 3072f60 Mrdn 2y ago };