gitscope
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/users/dialogs/mutation/fields/services.tsx · v0.3.0
Source
1 857e289 Mrdn 2y ago import {
2 3072f60 Mrdn 2y ago Checkbox,
3 3072f60 Mrdn 2y ago FormControl,
4 3072f60 Mrdn 2y ago FormField,
5 3072f60 Mrdn 2y ago FormItem,
6 3072f60 Mrdn 2y ago FormLabel,
7 3072f60 Mrdn 2y ago FormMessage,
8 3072f60 Mrdn 2y ago ScrollArea,
9 f64f3dc Mrdn 2y ago } from "@marzneshin/components";
10 3072f60 Mrdn 2y ago import {
11 3072f60 Mrdn 2y ago useServicesQuery,
12 3072f60 Mrdn 2y ago type ServiceType,
13 3072f60 Mrdn 2y ago } from "@marzneshin/features/services";
14 f64f3dc Mrdn 2y ago import { ServiceCard } from "@marzneshin/features/users";
15 f64f3dc Mrdn 2y ago import { cn } from "@marzneshin/utils";
16 f64f3dc Mrdn 2y ago import type { FC } from "react";
17 3072f60 Mrdn 2y ago import {
18 3072f60 Mrdn 2y ago useFormContext,
19 3072f60 Mrdn 2y ago type FieldValues,
20 3072f60 Mrdn 2y ago type ControllerRenderProps,
21 3072f60 Mrdn 2y ago } from "react-hook-form";
22 f64f3dc Mrdn 2y ago import { useTranslation } from "react-i18next";
23 857e289 Mrdn 2y ago
24 3072f60 Mrdn 2y ago interface ServiceCheckboxCardProps {
25 3072f60 Mrdn 2y ago service: ServiceType;
26 3072f60 Mrdn 2y ago field: ControllerRenderProps<FieldValues, "services">;
27 3072f60 Mrdn 2y ago }
28 3072f60 Mrdn 2y ago
29 3072f60 Mrdn 2y ago const ServiceCheckboxCard: FC<ServiceCheckboxCardProps> = ({
30 3072f60 Mrdn 2y ago service,
31 3072f60 Mrdn 2y ago field,
32 3072f60 Mrdn 2y ago }) => {
33 3072f60 Mrdn 2y ago return (
34 3072f60 Mrdn 2y ago <div
35 3072f60 Mrdn 2y ago className={cn(
36 3072f60 Mrdn 2y ago "flex mb-2 flex-row gap-2 items-center p-3 rounded-md border",
37 3072f60 Mrdn 2y ago { "bg-secondary": field.value?.includes(service.id) },
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(service.id)}
42 3072f60 Mrdn 2y ago onCheckedChange={(checked) => {
43 3072f60 Mrdn 2y ago return checked
44 3072f60 Mrdn 2y ago ? field.onChange([...field.value, service.id])
45 3072f60 Mrdn 2y ago : field.onChange(
46 3072f60 Mrdn 2y ago field.value?.filter((value: number) => value !== service.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 3072f60 Mrdn 2y ago <ServiceCard service={service} />
52 3072f60 Mrdn 2y ago </FormLabel>
53 3072f60 Mrdn 2y ago </div>
54 3072f60 Mrdn 2y ago );
55 3072f60 Mrdn 2y ago };
56 3072f60 Mrdn 2y ago
57 f64f3dc Mrdn 2y ago export const ServicesField: FC = () => {
58 3072f60 Mrdn 2y ago const form = useFormContext();
59 3072f60 Mrdn 2y ago const { data } = useServicesQuery({ page: 1, size: 100 });
60 3072f60 Mrdn 2y ago const { t } = useTranslation();
61 857e289 Mrdn 2y ago
62 3072f60 Mrdn 2y ago return (
63 3072f60 Mrdn 2y ago <FormField
64 3072f60 Mrdn 2y ago control={form.control}
65 3072f60 Mrdn 2y ago name="services"
66 3072f60 Mrdn 2y ago render={() => (
67 3072f60 Mrdn 2y ago <FormItem>
68 3072f60 Mrdn 2y ago <FormLabel>{t("services")}</FormLabel>
69 3072f60 Mrdn 2y ago <ScrollArea className="flex flex-col justify-start px-1 h-full max-h-[20rem]">
70 3072f60 Mrdn 2y ago {data.entity.map((service) => (
71 3072f60 Mrdn 2y ago <FormField
72 3072f60 Mrdn 2y ago key={service.id}
73 3072f60 Mrdn 2y ago control={form.control}
74 3072f60 Mrdn 2y ago name="services"
75 3072f60 Mrdn 2y ago render={({ field }) => (
76 3072f60 Mrdn 2y ago <FormItem key={service.id}>
77 3072f60 Mrdn 2y ago <FormControl>
78 3072f60 Mrdn 2y ago <ServiceCheckboxCard service={service} field={field} />
79 3072f60 Mrdn 2y ago </FormControl>
80 3072f60 Mrdn 2y ago <FormMessage />
81 3072f60 Mrdn 2y ago </FormItem>
82 3072f60 Mrdn 2y ago )}
83 3072f60 Mrdn 2y ago />
84 3072f60 Mrdn 2y ago ))}
85 3072f60 Mrdn 2y ago </ScrollArea>
86 3072f60 Mrdn 2y ago </FormItem>
87 3072f60 Mrdn 2y ago )}
88 3072f60 Mrdn 2y ago />
89 3072f60 Mrdn 2y ago );
90 857e289 Mrdn 2y ago };