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