gitscope
/
← marzneshin / app/dashboard/src/pages/users/dialog/services-field.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-field.tsx · v0.2.0
Source
1 fcfb963 Mardin 2y ago import { FormControl, FormLabel, FormErrorMessage, Center, Spinner, Text, Flex, chakra } from '@chakra-ui/react';
2 912788f Mardin 2y ago import { UsersIcon, ServerStackIcon } from '@heroicons/react/24/outline';
3 912788f Mardin 2y ago import { IconBaseStyle } from 'constants/IconBaseStyle';
4 b366afa Mardin 2y ago import { TFunction } from 'i18next';
5 b366afa Mardin 2y ago import { Controller } from 'react-hook-form';
6 89f8f93 Mardin 2y ago import { Service } from 'types';
7 2ae554f Mardin 2y ago import { SystemPropertyStatus } from 'components/system-property-status';
8 bedeeff Mardin 2y ago import { ServicesSelectList } from './services-select-list';
9 b366afa Mardin 2y ago
10 912788f Mardin 2y ago const UsersServiceIcon = chakra(UsersIcon, IconBaseStyle);
11 912788f Mardin 2y ago const InboundsServiceIcon = chakra(ServerStackIcon, IconBaseStyle);
12 912788f Mardin 2y ago
13 b366afa Mardin 2y ago interface ServicesFieldProps {
14 bedeeff Mardin 2y ago form: any;
15 bedeeff Mardin 2y ago services: Service[];
16 bedeeff Mardin 2y ago t: TFunction<'translation', undefined, 'translation'>;
17 b366afa Mardin 2y ago }
18 b366afa Mardin 2y ago
19 bf7c131 Mardin 2y ago export const ServicesField = ({ form, t, services }: ServicesFieldProps) => {
20 bf7c131 Mardin 2y ago return services.length === 0 ? (
21 bf7c131 Mardin 2y ago <Center><Spinner /></Center>
22 bf7c131 Mardin 2y ago ) : (
23 bf7c131 Mardin 2y ago <FormControl
24 bf7c131 Mardin 2y ago isInvalid={
25 bf7c131 Mardin 2y ago !!form.formState.errors.services?.message
26 bf7c131 Mardin 2y ago }
27 bf7c131 Mardin 2y ago >
28 bf7c131 Mardin 2y ago <FormLabel>{t('userDialog.services')}</FormLabel>
29 bf7c131 Mardin 2y ago <Controller
30 bf7c131 Mardin 2y ago control={form.control}
31 bf7c131 Mardin 2y ago name="services"
32 912788f Mardin 2y ago render={() => {
33 bf7c131 Mardin 2y ago return (
34 bf7c131 Mardin 2y ago <ServicesSelectList
35 bf7c131 Mardin 2y ago list={services}
36 912788f Mardin 2y ago renderCheckboxContent={(service) => (
37 fcfb963 Mardin 2y ago <Flex alignItems="center" justifyContent="space-between" flexDir="row" w="full">
38 fcfb963 Mardin 2y ago <Text fontSize="sm" color="gray.700" _dark={{ color: 'gray.100' }} fontWeight="medium">
39 912788f Mardin 2y ago {service.name}
40 912788f Mardin 2y ago </Text>
41 912788f Mardin 2y ago <Flex flexDirection="row" alignItems="center">
42 2ae554f Mardin 2y ago <SystemPropertyStatus value={service.users.length} StatusIcon={UsersServiceIcon} />
43 fcfb963 Mardin 2y ago <Text color="primary.600" _dark={{ color: 'gray.100' }} mx="8px" fontSize="sm">/</Text>
44 2ae554f Mardin 2y ago <SystemPropertyStatus value={service.inbounds.length} StatusIcon={InboundsServiceIcon} />
45 912788f Mardin 2y ago </Flex>
46 fcfb963 Mardin 2y ago </Flex>
47 912788f Mardin 2y ago )}
48 b366afa Mardin 2y ago />
49 bf7c131 Mardin 2y ago );
50 bf7c131 Mardin 2y ago }}
51 bf7c131 Mardin 2y ago />
52 bf7c131 Mardin 2y ago <FormErrorMessage>
53 bf7c131 Mardin 2y ago {t(
54 bedeeff Mardin 2y ago form.formState.errors.services
55 bedeeff Mardin 2y ago ?.message as string
56 bf7c131 Mardin 2y ago )}
57 bf7c131 Mardin 2y ago </FormErrorMessage>
58 bf7c131 Mardin 2y ago </FormControl>
59 bf7c131 Mardin 2y ago );
60 b366afa Mardin 2y ago }