gitscope
/
← marzneshin / dashboard/src/features/services/components/form-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/services/components/form-fields/services.tsx · v0.5.3
Source
1 857e289 Mrdn 2y ago import {
2 314c2ee Mardin 2y ago Alert,
3 314c2ee Mardin 2y ago AlertDescription,
4 314c2ee Mardin 2y ago AlertTitle,
5 3072f60 Mrdn 2y ago Checkbox,
6 3072f60 Mrdn 2y ago FormControl,
7 3072f60 Mrdn 2y ago FormField,
8 3072f60 Mrdn 2y ago FormItem,
9 3072f60 Mrdn 2y ago FormLabel,
10 3072f60 Mrdn 2y ago FormMessage,
11 3072f60 Mrdn 2y ago ScrollArea,
12 314c2ee Mardin 2y ago Skeleton,
13 89eec32 Dawsh 2y ago Awaiting
14 f64f3dc Mrdn 2y ago } from "@marzneshin/components";
15 314c2ee Mardin 2y ago import { Link } from "@tanstack/react-router";
16 314c2ee Mardin 2y ago import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
17 3072f60 Mrdn 2y ago import {
18 3072f60 Mrdn 2y ago useServicesQuery,
19 3072f60 Mrdn 2y ago type ServiceType,
20 3072f60 Mrdn 2y ago } from "@marzneshin/features/services";
21 f64f3dc Mrdn 2y ago import { ServiceCard } from "@marzneshin/features/users";
22 f64f3dc Mrdn 2y ago import { cn } from "@marzneshin/utils";
23 f64f3dc Mrdn 2y ago import type { FC } from "react";
24 3072f60 Mrdn 2y ago import {
25 3072f60 Mrdn 2y ago useFormContext,
26 3072f60 Mrdn 2y ago type FieldValues,
27 3072f60 Mrdn 2y ago type ControllerRenderProps,
28 3072f60 Mrdn 2y ago } from "react-hook-form";
29 f64f3dc Mrdn 2y ago import { useTranslation } from "react-i18next";
30 857e289 Mrdn 2y ago
31 3072f60 Mrdn 2y ago interface ServiceCheckboxCardProps {
32 3072f60 Mrdn 2y ago service: ServiceType;
33 db68a58 Dawsh 2y ago field: ControllerRenderProps<FieldValues, "service_ids">;
34 3072f60 Mrdn 2y ago }
35 3072f60 Mrdn 2y ago
36 3072f60 Mrdn 2y ago const ServiceCheckboxCard: FC<ServiceCheckboxCardProps> = ({
37 3072f60 Mrdn 2y ago service,
38 3072f60 Mrdn 2y ago field,
39 314c2ee Mardin 2y ago }) => (
40 314c2ee Mardin 2y ago <div
41 314c2ee Mardin 2y ago className={cn(
42 314c2ee Mardin 2y ago "flex mb-2 flex-row gap-2 items-center p-3 rounded-md border",
43 314c2ee Mardin 2y ago { "bg-secondary": field.value?.includes(service.id) },
44 314c2ee Mardin 2y ago )}
45 314c2ee Mardin 2y ago >
46 314c2ee Mardin 2y ago <Checkbox
47 314c2ee Mardin 2y ago checked={field.value?.includes(service.id)}
48 314c2ee Mardin 2y ago onCheckedChange={(checked) =>
49 314c2ee Mardin 2y ago checked
50 314c2ee Mardin 2y ago ? field.onChange([...field.value, service.id])
51 314c2ee Mardin 2y ago : field.onChange(
52 314c2ee Mardin 2y ago field.value?.filter((value: number) => value !== service.id),
53 314c2ee Mardin 2y ago )
54 314c2ee Mardin 2y ago }
55 314c2ee Mardin 2y ago />
56 314c2ee Mardin 2y ago <FormLabel className="flex flex-row justify-between items-center w-full">
57 314c2ee Mardin 2y ago <ServiceCard service={service} />
58 314c2ee Mardin 2y ago </FormLabel>
59 314c2ee Mardin 2y ago </div>
60 314c2ee Mardin 2y ago );
61 314c2ee Mardin 2y ago
62 314c2ee Mardin 2y ago const ServiceSkeletons: FC = () => (
63 314c2ee Mardin 2y ago <>
64 314c2ee Mardin 2y ago <Skeleton className="w-full h-[2.4rem]" />
65 314c2ee Mardin 2y ago <Skeleton className="w-full h-[2.4rem]" />
66 314c2ee Mardin 2y ago <Skeleton className="w-full h-[2.4rem]" />
67 314c2ee Mardin 2y ago </>
68 314c2ee Mardin 2y ago );
69 314c2ee Mardin 2y ago
70 314c2ee Mardin 2y ago const ServicesList: FC<{ services: ServiceType[] }> = ({ services }) => {
71 314c2ee Mardin 2y ago const form = useFormContext();
72 314c2ee Mardin 2y ago
73 3072f60 Mrdn 2y ago return (
74 314c2ee Mardin 2y ago <ScrollArea className="flex flex-col justify-start px-1 h-full max-h-[20rem]">
75 314c2ee Mardin 2y ago {services.map((service) => (
76 314c2ee Mardin 2y ago <FormField
77 314c2ee Mardin 2y ago key={service.id}
78 314c2ee Mardin 2y ago control={form.control}
79 314c2ee Mardin 2y ago name="service_ids"
80 314c2ee Mardin 2y ago render={({ field }) => (
81 314c2ee Mardin 2y ago <FormItem key={service.id}>
82 314c2ee Mardin 2y ago <FormControl>
83 314c2ee Mardin 2y ago <ServiceCheckboxCard service={service} field={field} />
84 314c2ee Mardin 2y ago </FormControl>
85 314c2ee Mardin 2y ago <FormMessage />
86 314c2ee Mardin 2y ago </FormItem>
87 314c2ee Mardin 2y ago )}
88 314c2ee Mardin 2y ago />
89 314c2ee Mardin 2y ago ))}
90 314c2ee Mardin 2y ago </ScrollArea>
91 314c2ee Mardin 2y ago );
92 314c2ee Mardin 2y ago };
93 314c2ee Mardin 2y ago
94 314c2ee Mardin 2y ago const ServicesAlert: FC = () => {
95 314c2ee Mardin 2y ago const { t } = useTranslation();
96 314c2ee Mardin 2y ago
97 314c2ee Mardin 2y ago return (
98 314c2ee Mardin 2y ago <Alert className="ring-1 ring-destructive-accent">
99 314c2ee Mardin 2y ago <ExclamationTriangleIcon color="#E5484D" className="mr-2 text-destructive-accent" />
100 314c2ee Mardin 2y ago <AlertTitle className="font-semibold text-destructive">{t('page.users.services-alert.title')}</AlertTitle>
101 314c2ee Mardin 2y ago <AlertDescription>
102 314c2ee Mardin 2y ago {t('page.users.services-alert.desc')}
103 314c2ee Mardin 2y ago <Link className="m-1 font-semibold text-secondary-foreground" to="/services">
104 314c2ee Mardin 2y ago {t('page.users.services-alert.click')}
105 314c2ee Mardin 2y ago </Link>
106 314c2ee Mardin 2y ago </AlertDescription>
107 314c2ee Mardin 2y ago </Alert>
108 3072f60 Mrdn 2y ago );
109 3072f60 Mrdn 2y ago };
110 3072f60 Mrdn 2y ago
111 f64f3dc Mrdn 2y ago export const ServicesField: FC = () => {
112 3072f60 Mrdn 2y ago const form = useFormContext();
113 314c2ee Mardin 2y ago const { data, isFetching } = useServicesQuery({ page: 1, size: 100 });
114 3072f60 Mrdn 2y ago const { t } = useTranslation();
115 857e289 Mrdn 2y ago
116 3072f60 Mrdn 2y ago return (
117 3072f60 Mrdn 2y ago <FormField
118 3072f60 Mrdn 2y ago control={form.control}
119 db68a58 Dawsh 2y ago name="service_ids"
120 3072f60 Mrdn 2y ago render={() => (
121 3072f60 Mrdn 2y ago <FormItem>
122 3072f60 Mrdn 2y ago <FormLabel>{t("services")}</FormLabel>
123 89eec32 Dawsh 2y ago <Awaiting
124 89eec32 Dawsh 2y ago isFetching={isFetching}
125 89eec32 Dawsh 2y ago Skeleton={<ServiceSkeletons />}
126 89eec32 Dawsh 2y ago isNotFound={data.entity.length === 0}
127 89eec32 Dawsh 2y ago NotFound={<ServicesAlert />}
128 89eec32 Dawsh 2y ago Component={<ServicesList services={data.entity} />}
129 89eec32 Dawsh 2y ago />
130 3072f60 Mrdn 2y ago </FormItem>
131 3072f60 Mrdn 2y ago )}
132 3072f60 Mrdn 2y ago />
133 3072f60 Mrdn 2y ago );
134 857e289 Mrdn 2y ago };