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