gitscope
/
← marzneshin / dashboard/src/features/users/dialogs/mutation/fields/services.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/users/dialogs/mutation/fields/services.tsx · v0.3.0-alpha5
Source
1 857e289 Mrdn 2y ago import {
2 39380ee Mrdn 2y ago Checkbox,
3 39380ee Mrdn 2y ago FormControl,
4 39380ee Mrdn 2y ago FormField,
5 39380ee Mrdn 2y ago FormItem,
6 39380ee Mrdn 2y ago FormLabel,
7 39380ee Mrdn 2y ago FormMessage,
8 39380ee Mrdn 2y ago ScrollArea,
9 857e289 Mrdn 2y ago } from '@marzneshin/components';
10 857e289 Mrdn 2y ago import { useServicesQuery } from '@marzneshin/features/services';
11 857e289 Mrdn 2y ago import { ServiceCard } from '@marzneshin/features/users';
12 39380ee Mrdn 2y ago import { cn } from '@marzneshin/utils';
13 857e289 Mrdn 2y ago import { FC } from 'react'
14 857e289 Mrdn 2y ago import { useFormContext } from 'react-hook-form';
15 857e289 Mrdn 2y ago import { useTranslation } from 'react-i18next';
16 857e289 Mrdn 2y ago
17 97ed755 Mrdn 2y ago interface ServicesFieldProps { }
18 857e289 Mrdn 2y ago
19 97ed755 Mrdn 2y ago export const ServicesField: FC<ServicesFieldProps> = () => {
20 39380ee Mrdn 2y ago const form = useFormContext();
21 39380ee Mrdn 2y ago const { data } = useServicesQuery({ page: 1, size: 100 });
22 39380ee Mrdn 2y ago const { t } = useTranslation();
23 857e289 Mrdn 2y ago
24 39380ee Mrdn 2y ago console.log(form.getValues().services)
25 39380ee Mrdn 2y ago return (
26 39380ee Mrdn 2y ago <FormField
27 97ed755 Mrdn 2y ago control={form.control}
28 39380ee Mrdn 2y ago name="services"
29 39380ee Mrdn 2y ago render={() => (
30 39380ee Mrdn 2y ago <FormItem>
31 39380ee Mrdn 2y ago <FormLabel>{t('services')}</FormLabel>
32 39380ee Mrdn 2y ago <ScrollArea className="flex flex-col justify-start px-1 h-[22rem]">
33 39380ee Mrdn 2y ago {data.entity.map(service => (
34 39380ee Mrdn 2y ago <FormField
35 39380ee Mrdn 2y ago control={form.control}
36 39380ee Mrdn 2y ago name='services'
37 39380ee Mrdn 2y ago render={({ field }) => (
38 39380ee Mrdn 2y ago <FormItem key={service.id}>
39 39380ee Mrdn 2y ago <FormControl>
40 39380ee Mrdn 2y ago <div
41 39380ee Mrdn 2y ago className={cn("flex mb-2 flex-row gap-2 items-center p-3 rounded-md border", { "bg-secondary": field.value?.includes(service.id) })}>
42 39380ee Mrdn 2y ago <Checkbox
43 39380ee Mrdn 2y ago checked={field.value?.includes(service.id)}
44 39380ee Mrdn 2y ago onCheckedChange={(checked) => {
45 39380ee Mrdn 2y ago return checked
46 39380ee Mrdn 2y ago ? field.onChange([...field.value, service.id])
47 39380ee Mrdn 2y ago : field.onChange(
48 39380ee Mrdn 2y ago field.value?.filter(
49 39380ee Mrdn 2y ago (value: number) => value !== service.id
50 39380ee Mrdn 2y ago )
51 39380ee Mrdn 2y ago )
52 39380ee Mrdn 2y ago }}
53 39380ee Mrdn 2y ago />
54 39380ee Mrdn 2y ago <FormLabel className="flex flex-row justify-between items-center w-full">
55 39380ee Mrdn 2y ago <ServiceCard service={service} />
56 39380ee Mrdn 2y ago </FormLabel>
57 39380ee Mrdn 2y ago </div>
58 39380ee Mrdn 2y ago </FormControl>
59 39380ee Mrdn 2y ago <FormMessage />
60 39380ee Mrdn 2y ago </FormItem>
61 39380ee Mrdn 2y ago )}
62 39380ee Mrdn 2y ago />
63 39380ee Mrdn 2y ago ))}
64 39380ee Mrdn 2y ago </ScrollArea>
65 39380ee Mrdn 2y ago </FormItem>
66 97ed755 Mrdn 2y ago )}
67 39380ee Mrdn 2y ago />
68 39380ee Mrdn 2y ago );
69 857e289 Mrdn 2y ago };