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