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.1.2
Source
1 912788f Mardin 2y ago
2 912788f Mardin 2y ago import {
3 63b702d Mardin 2y ago Accordion,
4 912788f Mardin 2y ago Box,
5 912788f Mardin 2y ago HStack,
6 912788f Mardin 2y ago Table,
7 912788f Mardin 2y ago TableProps,
8 912788f Mardin 2y ago Tbody,
9 912788f Mardin 2y ago Td,
10 912788f Mardin 2y ago Th,
11 912788f Mardin 2y ago Thead,
12 912788f Mardin 2y ago Tr,
13 912788f Mardin 2y ago useBreakpointValue,
14 912788f Mardin 2y ago } from '@chakra-ui/react';
15 912788f Mardin 2y ago
16 912788f Mardin 2y ago import classNames from 'classnames';
17 63b702d Mardin 2y ago import { FC, useState, } from 'react';
18 912788f Mardin 2y ago import { useTranslation } from 'react-i18next';
19 89f8f93 Mardin 2y ago import {
20 89f8f93 Mardin 2y ago EmptySection,
21 63b702d Mardin 2y ago handleSort,
22 89f8f93 Mardin 2y ago Pagination,
23 89f8f93 Mardin 2y ago Sort
24 89f8f93 Mardin 2y ago } from 'components/table';
25 a61ba53 Mrdn 2y ago import { fetchServices, useServices } from 'stores';
26 6aab6f0 Mrdn 2y ago import { pageSizeManagers } from 'utils/userPreferenceStorage';
27 a61ba53 Mrdn 2y ago import { useQuery } from 'react-query';
28 a61ba53 Mrdn 2y ago import { queryIds } from 'constants/query-ids';
29 912788f Mardin 2y ago
30 63b702d Mardin 2y ago type ExpandedIndex = number | number[];
31 912788f Mardin 2y ago type ServicesTableProps = {} & TableProps;
32 912788f Mardin 2y ago
33 912788f Mardin 2y ago export const ServicesTable: FC<ServicesTableProps> = (props) => {
34 912788f Mardin 2y ago const {
35 912788f Mardin 2y ago servicesFilters: filters,
36 912788f Mardin 2y ago onEditingService,
37 4205669 Mardin 2y ago onCreateService,
38 912788f Mardin 2y ago onFilterChange,
39 4205669 Mardin 2y ago } = useServices();
40 a61ba53 Mrdn 2y ago const { data: services } = useQuery(queryIds.services, () => { return fetchServices(filters) });
41 63b702d Mardin 2y ago const useTable = useBreakpointValue({ base: false, md: true });
42 912788f Mardin 2y ago const { t } = useTranslation();
43 63b702d Mardin 2y ago const [selectedRow,] = useState<ExpandedIndex | undefined>(
44 63b702d Mardin 2y ago undefined
45 63b702d Mardin 2y ago );
46 912788f Mardin 2y ago
47 912788f Mardin 2y ago return (
48 5825ea4 Mardin 2y ago <Box id="services-table" h="45vh" overflowX={{ base: 'unset', md: 'unset' }} >
49 63b702d Mardin 2y ago <Accordion
50 63b702d Mardin 2y ago allowMultiple
51 63b702d Mardin 2y ago display={{ base: 'block', md: 'none' }}
52 63b702d Mardin 2y ago index={selectedRow}
53 63b702d Mardin 2y ago >
54 63b702d Mardin 2y ago <Table orientation="vertical" zIndex="docked" {...props}>
55 63b702d Mardin 2y ago <Thead zIndex="docked" position="relative">
56 63b702d Mardin 2y ago <Tr>
57 63b702d Mardin 2y ago <Tr>
58 63b702d Mardin 2y ago <Th
59 63b702d Mardin 2y ago position="sticky"
60 63b702d Mardin 2y ago minW="200px"
61 63b702d Mardin 2y ago pl={4}
62 63b702d Mardin 2y ago pr={4}
63 63b702d Mardin 2y ago cursor={'pointer'}
64 63b702d Mardin 2y ago onClick={handleSort.bind(null, filters, 'name', onFilterChange)}
65 63b702d Mardin 2y ago >
66 63b702d Mardin 2y ago <HStack>
67 63b702d Mardin 2y ago <span>{t('services')}</span>
68 63b702d Mardin 2y ago <Sort sort={filters.sort} column="name" />
69 63b702d Mardin 2y ago </HStack>
70 63b702d Mardin 2y ago </Th>
71 63b702d Mardin 2y ago <Th
72 63b702d Mardin 2y ago position="sticky"
73 63b702d Mardin 2y ago minW="50px"
74 63b702d Mardin 2y ago cursor={'pointer'}
75 63b702d Mardin 2y ago pr={0}
76 63b702d Mardin 2y ago onClick={handleSort.bind(null, filters, 'users_number', onFilterChange)}
77 63b702d Mardin 2y ago >
78 63b702d Mardin 2y ago <HStack>
79 63b702d Mardin 2y ago <span>{t('servicesTable.usersNumber')}</span>
80 63b702d Mardin 2y ago <Sort sort={filters.sort} column="users_number" />
81 63b702d Mardin 2y ago </HStack>
82 63b702d Mardin 2y ago </Th>
83 63b702d Mardin 2y ago <Th
84 63b702d Mardin 2y ago position="sticky"
85 63b702d Mardin 2y ago minW="50px"
86 63b702d Mardin 2y ago cursor={'pointer'}
87 63b702d Mardin 2y ago pr={0}
88 63b702d Mardin 2y ago onClick={handleSort.bind(null, filters, 'inbounds_number', onFilterChange)}
89 63b702d Mardin 2y ago >
90 63b702d Mardin 2y ago <HStack>
91 63b702d Mardin 2y ago <span>{t('servicesTable.inboundsNumber')}</span>
92 63b702d Mardin 2y ago <Sort sort={filters.sort} column="inbounds_number" />
93 63b702d Mardin 2y ago </HStack>
94 63b702d Mardin 2y ago </Th>
95 63b702d Mardin 2y ago </Tr>
96 63b702d Mardin 2y ago </Tr>
97 63b702d Mardin 2y ago </Thead>
98 63b702d Mardin 2y ago <Tbody>
99 63b702d Mardin 2y ago {!useTable &&
100 63b702d Mardin 2y ago services?.map((service, i) => {
101 63b702d Mardin 2y ago return (
102 63b702d Mardin 2y ago <Tr
103 63b702d Mardin 2y ago cursor="pointer"
104 63b702d Mardin 2y ago key={service.id}
105 63b702d Mardin 2y ago className={classNames('interactive', {
106 63b702d Mardin 2y ago 'last-row': i === (services.length - 1),
107 63b702d Mardin 2y ago })}
108 63b702d Mardin 2y ago onClick={(e) => {
109 63b702d Mardin 2y ago e.stopPropagation();
110 63b702d Mardin 2y ago onEditingService(service);
111 63b702d Mardin 2y ago }}
112 63b702d Mardin 2y ago >
113 63b702d Mardin 2y ago <Td borderBottom={0} minW="100px" pl={4} pr={4}>
114 63b702d Mardin 2y ago {service.name}
115 63b702d Mardin 2y ago </Td>
116 63b702d Mardin 2y ago <Td borderBottom={0} minW="50px" pl={6} pr={6}>
117 63b702d Mardin 2y ago {service.users.length}
118 63b702d Mardin 2y ago </Td>
119 63b702d Mardin 2y ago <Td borderBottom={0} minW="50px" pr={0}>
120 63b702d Mardin 2y ago {service.inbounds.length}
121 63b702d Mardin 2y ago </Td>
122 63b702d Mardin 2y ago </Tr>
123 63b702d Mardin 2y ago );
124 63b702d Mardin 2y ago })}
125 63b702d Mardin 2y ago </Tbody>
126 63b702d Mardin 2y ago </Table>
127 63b702d Mardin 2y ago </Accordion>
128 912788f Mardin 2y ago <Table orientation="vertical" zIndex="docked" {...props}>
129 912788f Mardin 2y ago <Thead zIndex="docked" position="relative">
130 912788f Mardin 2y ago <Tr>
131 912788f Mardin 2y ago <Th
132 912788f Mardin 2y ago position="sticky"
133 63b702d Mardin 2y ago minW="200px"
134 912788f Mardin 2y ago pl={4}
135 912788f Mardin 2y ago pr={4}
136 912788f Mardin 2y ago cursor={'pointer'}
137 63b702d Mardin 2y ago onClick={handleSort.bind(null, filters, 'name', onFilterChange)}
138 912788f Mardin 2y ago >
139 912788f Mardin 2y ago <HStack>
140 912788f Mardin 2y ago <span>{t('services')}</span>
141 912788f Mardin 2y ago <Sort sort={filters.sort} column="name" />
142 912788f Mardin 2y ago </HStack>
143 912788f Mardin 2y ago </Th>
144 912788f Mardin 2y ago <Th
145 912788f Mardin 2y ago position="sticky"
146 912788f Mardin 2y ago minW="50px"
147 912788f Mardin 2y ago cursor={'pointer'}
148 912788f Mardin 2y ago pr={0}
149 63b702d Mardin 2y ago onClick={handleSort.bind(null, filters, 'users_number', onFilterChange)}
150 912788f Mardin 2y ago >
151 912788f Mardin 2y ago <HStack>
152 912788f Mardin 2y ago <span>{t('servicesTable.usersNumber')}</span>
153 912788f Mardin 2y ago <Sort sort={filters.sort} column="users_number" />
154 912788f Mardin 2y ago </HStack>
155 912788f Mardin 2y ago </Th>
156 912788f Mardin 2y ago <Th
157 912788f Mardin 2y ago position="sticky"
158 912788f Mardin 2y ago minW="50px"
159 912788f Mardin 2y ago cursor={'pointer'}
160 912788f Mardin 2y ago pr={0}
161 63b702d Mardin 2y ago onClick={handleSort.bind(null, filters, 'inbounds_number', onFilterChange)}
162 912788f Mardin 2y ago >
163 912788f Mardin 2y ago <HStack>
164 912788f Mardin 2y ago <span>{t('servicesTable.inboundsNumber')}</span>
165 912788f Mardin 2y ago <Sort sort={filters.sort} column="inbounds_number" />
166 912788f Mardin 2y ago </HStack>
167 912788f Mardin 2y ago </Th>
168 912788f Mardin 2y ago </Tr>
169 912788f Mardin 2y ago </Thead>
170 912788f Mardin 2y ago <Tbody>
171 63b702d Mardin 2y ago {useTable &&
172 63b702d Mardin 2y ago services?.map((service, i) => {
173 63b702d Mardin 2y ago return (
174 912788f Mardin 2y ago <Tr
175 912788f Mardin 2y ago cursor="pointer"
176 912788f Mardin 2y ago key={service.id}
177 912788f Mardin 2y ago className={classNames('interactive', {
178 912788f Mardin 2y ago 'last-row': i === (services.length - 1),
179 912788f Mardin 2y ago })}
180 912788f Mardin 2y ago onClick={(e) => {
181 912788f Mardin 2y ago e.stopPropagation();
182 912788f Mardin 2y ago onEditingService(service);
183 912788f Mardin 2y ago }}
184 912788f Mardin 2y ago >
185 912788f Mardin 2y ago <Td borderBottom={0} minW="100px" pl={4} pr={4}>
186 912788f Mardin 2y ago {service.name}
187 912788f Mardin 2y ago </Td>
188 912788f Mardin 2y ago <Td borderBottom={0} minW="50px" pl={6} pr={6}>
189 912788f Mardin 2y ago {service.users.length}
190 912788f Mardin 2y ago </Td>
191 912788f Mardin 2y ago <Td borderBottom={0} minW="50px" pr={0}>
192 912788f Mardin 2y ago {service.inbounds.length}
193 912788f Mardin 2y ago </Td>
194 912788f Mardin 2y ago </Tr>
195 63b702d Mardin 2y ago );
196 63b702d Mardin 2y ago })}
197 a61ba53 Mrdn 2y ago {services?.length == 0 && (
198 912788f Mardin 2y ago <Tr>
199 912788f Mardin 2y ago <Td colSpan={3}>
200 4205669 Mardin 2y ago <EmptySection
201 4205669 Mardin 2y ago isFiltered={false}
202 4205669 Mardin 2y ago createObjectT='createService'
203 4205669 Mardin 2y ago onCreateObject={onCreateService}
204 4205669 Mardin 2y ago noObjectT="servicesTable.noService"
205 4205669 Mardin 2y ago noObjectMatchedT='servicesTable.noServiceMatched'
206 4205669 Mardin 2y ago />
207 912788f Mardin 2y ago </Td>
208 912788f Mardin 2y ago </Tr>
209 63b702d Mardin 2y ago )}
210 912788f Mardin 2y ago </Tbody>
211 912788f Mardin 2y ago </Table>
212 a61ba53 Mrdn 2y ago <Pagination
213 a61ba53 Mrdn 2y ago total={services?.length || 0}
214 6aab6f0 Mrdn 2y ago onFilterChange={onFilterChange}
215 6aab6f0 Mrdn 2y ago filters={filters}
216 6aab6f0 Mrdn 2y ago pageSizeManager={pageSizeManagers.services}
217 6aab6f0 Mrdn 2y ago />
218 912788f Mardin 2y ago </Box>
219 912788f Mardin 2y ago );
220 912788f Mardin 2y ago };