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