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