1
  2import {
  3  Box,
  4  HStack,
  5  Table,
  6  TableProps,
  7  Tbody,
  8  Td,
  9  Th,
 10  Thead,
 11  Tr,
 12} from '@chakra-ui/react';
 13
 14import classNames from 'classnames';
 15import { FC } from 'react';
 16import { useTranslation } from 'react-i18next';
 17import {
 18  EmptySection,
 19  handleSort,
 20  Pagination,
 21  Sort
 22} from 'components/table';
 23import { fetchServices, useServices } from 'stores';
 24import { pageSizeManagers } from 'utils/userPreferenceStorage';
 25import { useQuery } from '@tanstack/react-query';
 26import { queryIds } from 'constants/query-ids';
 27
 28type ServicesTableProps = {} & TableProps;
 29
 30export const ServicesTable: FC<ServicesTableProps> = (props) => {
 31  const {
 32    servicesFilters: filters,
 33    onEditingService,
 34    onCreateService,
 35    onFilterChange,
 36  } = useServices();
 37  const { data: services } = useQuery({
 38    queryKey: [queryIds.services],
 39    queryFn: () => { return fetchServices(filters) }
 40  });
 41  const { t } = useTranslation();
 42
 43  return (
 44    <Box id="services-table" h="45vh" overflowX={{ base: 'unset', md: 'unset' }} >
 45      <Table orientation="vertical" zIndex="docked" {...props}>
 46        <Thead zIndex="docked" position="relative">
 47          <Tr>
 48            <Th
 49              position="sticky"
 50              minW="200px"
 51              pl={4}
 52              pr={4}
 53              cursor={'pointer'}
 54              onClick={handleSort.bind(null, filters, 'name', onFilterChange)}
 55            >
 56              <HStack>
 57                <span>{t('services')}</span>
 58                <Sort sort={filters.sort} column="name" />
 59              </HStack>
 60            </Th>
 61            <Th
 62              position="sticky"
 63              minW="50px"
 64              cursor={'pointer'}
 65              pr={0}
 66              onClick={handleSort.bind(null, filters, 'users_number', onFilterChange)}
 67            >
 68              <HStack>
 69                <span>{t('servicesTable.usersNumber')}</span>
 70                <Sort sort={filters.sort} column="users_number" />
 71              </HStack>
 72            </Th>
 73            <Th
 74              position="sticky"
 75              minW="50px"
 76              cursor={'pointer'}
 77              pr={0}
 78              onClick={handleSort.bind(null, filters, 'inbounds_number', onFilterChange)}
 79            >
 80              <HStack>
 81                <span>{t('servicesTable.inboundsNumber')}</span>
 82                <Sort sort={filters.sort} column="inbounds_number" />
 83              </HStack>
 84            </Th>
 85          </Tr>
 86        </Thead>
 87        <Tbody>
 88          {services?.map((service, i) => {
 89            return (
 90              <Tr
 91                cursor="pointer"
 92                key={service.id}
 93                className={classNames('interactive', {
 94                  'last-row': i === (services.length - 1),
 95                })}
 96                onClick={(e) => {
 97                  e.stopPropagation();
 98                  onEditingService(service);
 99                }}
100              >
101                <Td borderBottom={0} minW="100px" pl={4} pr={4}>
102                  {service.name}
103                </Td>
104                <Td borderBottom={0} minW="50px" pl={6} pr={6}>
105                  {service.users.length}
106                </Td>
107                <Td borderBottom={0} minW="50px" pr={0}>
108                  {service.inbounds.length}
109                </Td>
110              </Tr>
111            );
112          })}
113          {services?.length == 0 && (
114            <Tr>
115              <Td colSpan={3}>
116                <EmptySection
117                  isFiltered={false}
118                  createObjectT='createService'
119                  onCreateObject={onCreateService}
120                  noObjectT="servicesTable.noService"
121                  noObjectMatchedT='servicesTable.noServiceMatched'
122                />
123              </Td>
124            </Tr>
125          )}
126        </Tbody>
127      </Table>
128      <Pagination
129        total={services?.length || 0}
130        onFilterChange={onFilterChange}
131        filters={filters}
132        pageSizeManager={pageSizeManagers.services}
133      />
134    </Box>
135  );
136};