gitscope
/
← marzneshin / app/dashboard/src/pages/users/dialog/services-select-list.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
app/dashboard/src/pages/users/dialog/services-select-list.tsx · v0.1.3
Source
1 a47eb4c Dawsh 2y ago
2 a47eb4c Dawsh 2y ago import {
3 bf7c131 Mardin 2y ago Box,
4 bf7c131 Mardin 2y ago Flex,
5 bf7c131 Mardin 2y ago Stack,
6 bf7c131 Mardin 2y ago } from '@chakra-ui/react';
7 bedeeff Mardin 2y ago import { ListCheckBox } from 'components/list-check-box';
8 912788f Mardin 2y ago import { forwardRef, ReactNode } from 'react';
9 a47eb4c Dawsh 2y ago import {
10 bf7c131 Mardin 2y ago useFormContext,
11 bf7c131 Mardin 2y ago } from 'react-hook-form';
12 89f8f93 Mardin 2y ago import { Service } from 'types';
13 a47eb4c Dawsh 2y ago
14 a47eb4c Dawsh 2y ago interface ServicesSelectListProps {
15 bedeeff Mardin 2y ago list: Service[];
16 bedeeff Mardin 2y ago renderCheckboxContent: (service: Service) => ReactNode;
17 a47eb4c Dawsh 2y ago }
18 a47eb4c Dawsh 2y ago
19 a47eb4c Dawsh 2y ago export const ServicesSelectList = forwardRef<HTMLDivElement, ServicesSelectListProps>(
20 912788f Mardin 2y ago function({ list, renderCheckboxContent }, ref) {
21 bf7c131 Mardin 2y ago const form = useFormContext();
22 a47eb4c Dawsh 2y ago
23 bf7c131 Mardin 2y ago const handleServiceToggle = (serviceId: number) => {
24 bf7c131 Mardin 2y ago const currentServices = form.getValues('services');
25 bf7c131 Mardin 2y ago const isSelected = currentServices.includes(serviceId);
26 a47eb4c Dawsh 2y ago
27 bf7c131 Mardin 2y ago let updatedServices;
28 a47eb4c Dawsh 2y ago
29 bf7c131 Mardin 2y ago if (isSelected) {
30 bf7c131 Mardin 2y ago updatedServices = currentServices.filter((id: number) => id !== serviceId);
31 bf7c131 Mardin 2y ago } else {
32 bf7c131 Mardin 2y ago updatedServices = [...currentServices, serviceId];
33 bf7c131 Mardin 2y ago }
34 a47eb4c Dawsh 2y ago
35 bf7c131 Mardin 2y ago form.setValue('services', updatedServices, { shouldValidate: true });
36 bf7c131 Mardin 2y ago };
37 a47eb4c Dawsh 2y ago
38 bf7c131 Mardin 2y ago return (
39 bf7c131 Mardin 2y ago <Stack spacing={3} ref={ref}>
40 bf7c131 Mardin 2y ago {list.map((service: Service) => (
41 bf7c131 Mardin 2y ago <Box key={service.id}>
42 bf7c131 Mardin 2y ago <Flex align="center">
43 912788f Mardin 2y ago <ListCheckBox
44 bf7c131 Mardin 2y ago isChecked={form.getValues('services').includes(service.id)}
45 bf7c131 Mardin 2y ago onChange={() => handleServiceToggle(service.id)}
46 bf7c131 Mardin 2y ago value={String(service.id)}
47 912788f Mardin 2y ago renderContent={() => renderCheckboxContent(service)}
48 bf7c131 Mardin 2y ago />
49 bf7c131 Mardin 2y ago </Flex>
50 bf7c131 Mardin 2y ago </Box>
51 bf7c131 Mardin 2y ago ))}
52 bf7c131 Mardin 2y ago </Stack>
53 bf7c131 Mardin 2y ago );
54 912788f Mardin 2y ago }
55 912788f Mardin 2y ago );