hamzus-ui 0.0.30 → 0.0.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/hamzus-ui/MonthPicker/MonthPicker.svelte +136 -0
- package/src/components/hamzus-ui/Skeleton/Skeleton.svelte +25 -0
- package/src/components/hamzus-ui/Table/ActionsBar.svelte +510 -26
- package/src/components/hamzus-ui/Table/Content.svelte +155 -23
- package/src/components/hamzus-ui/Table/FilterDropdown.svelte +332 -0
- package/src/components/hamzus-ui/Table/Header.svelte +232 -93
- package/src/components/hamzus-ui/Table/Root.svelte +109 -14
- package/src/components/hamzus-ui/Table/TableLoader.svelte +61 -0
- package/src/components/hamzus-ui/Table/table.js +1 -0
|
@@ -1,19 +1,27 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
// import
|
|
3
|
-
import { tableData } from './table';
|
|
4
|
-
import Input from
|
|
5
|
-
|
|
3
|
+
import { mobileFormat, tableData } from './table';
|
|
4
|
+
import Input from "../Input/Input.svelte"
|
|
5
|
+
import Button from '../Button/Button.svelte';
|
|
6
6
|
import * as DropdownMenu from '../DropdownMenu';
|
|
7
|
-
import { Content } from '.';
|
|
8
7
|
import Checkbox from '../Checkboxes/Checkbox/Checkbox.svelte';
|
|
8
|
+
import IconButton from '../IconButton/IconButton.svelte';
|
|
9
|
+
import { onMount } from 'svelte';
|
|
10
|
+
import * as Tooltip from '../AdvancedTooltip';
|
|
11
|
+
import FilterDropdown from './FilterDropdown.svelte';
|
|
9
12
|
// props
|
|
10
13
|
export let tableId = null;
|
|
14
|
+
export let pagination = true;
|
|
11
15
|
|
|
12
16
|
// local var
|
|
13
|
-
let globalSearch = $tableData[tableId].globalSearch;
|
|
17
|
+
// let globalSearch = $tableData[tableId].globalSearch;
|
|
18
|
+
let globalSearch = '';
|
|
19
|
+
let targetPage = '';
|
|
20
|
+
let canChangePage = true;
|
|
14
21
|
$: updateGlobalSearch(globalSearch);
|
|
15
|
-
|
|
16
|
-
|
|
22
|
+
$: canPassToLeft = checkCanPassToLeft($tableData);
|
|
23
|
+
$: canPassToRight = checkCanPassToRight($tableData);
|
|
24
|
+
// life cycle
|
|
17
25
|
// function
|
|
18
26
|
function updateGlobalSearch(value) {
|
|
19
27
|
if (!$tableData || !$tableData[tableId] || $tableData[tableId].globalSearch === undefined) {
|
|
@@ -21,6 +29,8 @@
|
|
|
21
29
|
}
|
|
22
30
|
tableData.update((actualValue) => {
|
|
23
31
|
actualValue[tableId].globalSearch = value;
|
|
32
|
+
|
|
33
|
+
actualValue[tableId].offset = 0;
|
|
24
34
|
return actualValue;
|
|
25
35
|
});
|
|
26
36
|
document.dispatchEvent(new Event('updateTableResult'));
|
|
@@ -36,15 +46,38 @@
|
|
|
36
46
|
|
|
37
47
|
return actualValue;
|
|
38
48
|
});
|
|
49
|
+
|
|
50
|
+
document.dispatchEvent(new Event('saveTableData'));
|
|
39
51
|
}
|
|
40
|
-
function handleRemoveFilter(columnName) {
|
|
52
|
+
function handleRemoveFilter(columnName, position) {
|
|
41
53
|
let foundedColumn = false;
|
|
42
54
|
tableData.update((actualValue) => {
|
|
43
55
|
for (let i = 0; i < actualValue[tableId].columns.length; i++) {
|
|
44
56
|
const element = actualValue[tableId].columns[i];
|
|
45
57
|
if (element.name === columnName) {
|
|
46
|
-
|
|
47
|
-
|
|
58
|
+
if (position === 'after') {
|
|
59
|
+
actualValue[tableId].columns[i].filterAfter = '';
|
|
60
|
+
// si son filtre befoire n est pas set obn surtpimme le filtrer general
|
|
61
|
+
if (!actualValue[tableId].columns[i].filterBefore) {
|
|
62
|
+
actualValue[tableId].columns[i].filter = '';
|
|
63
|
+
delete actualValue[tableId].filters[columnName];
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
if (position === 'before') {
|
|
67
|
+
actualValue[tableId].columns[i].filterBefore = '';
|
|
68
|
+
// si son filtre befoire n est pas set obn surtpimme le filtrer general
|
|
69
|
+
console.log(actualValue[tableId].columns[i].filterAfter);
|
|
70
|
+
|
|
71
|
+
if (!actualValue[tableId].columns[i].filterAfter) {
|
|
72
|
+
actualValue[tableId].columns[i].filter = '';
|
|
73
|
+
delete actualValue[tableId].filters[columnName];
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
if (!position) {
|
|
77
|
+
actualValue[tableId].columns[i].filter = '';
|
|
78
|
+
delete actualValue[tableId].filters[columnName];
|
|
79
|
+
}
|
|
80
|
+
|
|
48
81
|
foundedColumn = true;
|
|
49
82
|
break;
|
|
50
83
|
}
|
|
@@ -59,13 +92,296 @@
|
|
|
59
92
|
}
|
|
60
93
|
}
|
|
61
94
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
95
|
+
function checkCanPassToLeft(table) {
|
|
96
|
+
return Math.floor(table[tableId].offset / table[tableId].limit) + 1 <= 1;
|
|
97
|
+
}
|
|
98
|
+
function checkCanPassToRight(table) {
|
|
99
|
+
return (
|
|
100
|
+
Math.floor(table[tableId].offset / table[tableId].limit) + 1 >=
|
|
101
|
+
Math.ceil(table[tableId].totalOfRows / table[tableId].limit)
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
function handleChangePage() {
|
|
105
|
+
if (isNaN(parseInt(targetPage))) {
|
|
106
|
+
return
|
|
107
|
+
}
|
|
108
|
+
const min = Math.floor($tableData[tableId].offset / $tableData[tableId].limit) + 1;
|
|
109
|
+
const max = Math.ceil($tableData[tableId].totalOfRows / $tableData[tableId].limit);
|
|
110
|
+
|
|
111
|
+
if (1 > parseInt(targetPage) || parseInt(targetPage) > max) {
|
|
112
|
+
return
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
tableData.update((actualValue) => {
|
|
116
|
+
actualValue[tableId].offset = actualValue[tableId].limit * parseInt(targetPage) - actualValue[tableId].limit;
|
|
117
|
+
|
|
118
|
+
console.log(actualValue[tableId].offset);
|
|
119
|
+
|
|
120
|
+
return actualValue;
|
|
121
|
+
});
|
|
122
|
+
document.dispatchEvent(new Event('updateTableResult'));
|
|
123
|
+
}
|
|
124
|
+
// aller a la page suivante
|
|
125
|
+
function handleGoRight() {
|
|
126
|
+
const table = $tableData[tableId];
|
|
127
|
+
// recuperer la page actuelle
|
|
128
|
+
const actualPage = Math.floor(table.offset / table.limit) + 1;
|
|
129
|
+
// verifier si il est possible de passer a droite
|
|
130
|
+
const totalPage = Math.ceil(table.totalOfRows / table.limit);
|
|
131
|
+
console.log(actualPage);
|
|
132
|
+
console.log(totalPage);
|
|
133
|
+
|
|
134
|
+
// si la page actual est plus petit que le total de page alors on peut passer
|
|
135
|
+
if (actualPage >= totalPage) {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
tableData.update((actualValue) => {
|
|
140
|
+
actualValue[tableId].offset = actualValue[tableId].offset + actualValue[tableId].limit;
|
|
141
|
+
console.log(actualValue[tableId].offset);
|
|
142
|
+
|
|
143
|
+
return actualValue;
|
|
144
|
+
});
|
|
145
|
+
document.dispatchEvent(new Event('updateTableResult'));
|
|
146
|
+
}
|
|
147
|
+
// aller a la page suivante
|
|
148
|
+
function handleGoLeft() {
|
|
149
|
+
const table = $tableData[tableId];
|
|
150
|
+
// recuperer la page actuelle
|
|
151
|
+
const actualPage = Math.floor(table.offset / table.limit) + 1;
|
|
152
|
+
// si la page actual est plus petit ou egal a 1 on peut pas passer
|
|
153
|
+
if (actualPage <= 1) {
|
|
154
|
+
return;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
tableData.update((actualValue) => {
|
|
158
|
+
actualValue[tableId].offset = actualValue[tableId].offset - actualValue[tableId].limit;
|
|
159
|
+
|
|
160
|
+
return actualValue;
|
|
161
|
+
});
|
|
162
|
+
document.dispatchEvent(new Event('updateTableResult'));
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
function handleResetSettings() {
|
|
166
|
+
document.dispatchEvent(new Event('resetTableColumnsSettings'));
|
|
167
|
+
}
|
|
168
|
+
async function handleClickAction(action) {
|
|
169
|
+
if ($tableData[tableId].selection.length === 0) {
|
|
170
|
+
return;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
const request = await action.function($tableData[tableId].selection);
|
|
174
|
+
|
|
175
|
+
if (request) {
|
|
176
|
+
const monEvenement = new CustomEvent('successOperation', {
|
|
177
|
+
detail: {
|
|
178
|
+
message: request.message ?? '',
|
|
179
|
+
type: request.statusCode === 200 ? 'success' : 'error'
|
|
180
|
+
}
|
|
181
|
+
});
|
|
182
|
+
document.dispatchEvent(monEvenement);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
tableData.update((actualValue) => {
|
|
186
|
+
actualValue[tableId].selection = [];
|
|
187
|
+
|
|
188
|
+
return actualValue;
|
|
189
|
+
});
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
function handleSwitchFormat(newValue) {
|
|
193
|
+
mobileFormat.set(newValue);
|
|
194
|
+
localStorage.setItem(`table_format`, $mobileFormat ? '1' : '0');
|
|
195
|
+
}
|
|
65
196
|
</script>
|
|
66
197
|
|
|
67
198
|
<div class="actions-bar">
|
|
68
|
-
<
|
|
199
|
+
<div class="format">
|
|
200
|
+
<Tooltip.Root direction="bottom">
|
|
201
|
+
<Tooltip.Trigger slot="trigger">
|
|
202
|
+
{#if $mobileFormat}
|
|
203
|
+
<IconButton
|
|
204
|
+
size="22px"
|
|
205
|
+
variant="ghost"
|
|
206
|
+
onClick={() => {
|
|
207
|
+
handleSwitchFormat(false);
|
|
208
|
+
}}
|
|
209
|
+
>
|
|
210
|
+
<svg
|
|
211
|
+
width="24"
|
|
212
|
+
height="24"
|
|
213
|
+
viewBox="0 0 24 24"
|
|
214
|
+
fill="none"
|
|
215
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
216
|
+
>
|
|
217
|
+
<path
|
|
218
|
+
d="M1.25 15L1.25 9C1.25 3.57 3.57 1.25 9 1.25L15 1.25C20.43 1.25 22.75 3.57 22.75 9L22.75 15C22.75 20.43 20.43 22.75 15 22.75L9 22.75C3.57 22.75 1.25 20.43 1.25 15ZM21.25 9C21.25 4.39 19.61 2.75 15 2.75L9 2.75C4.39 2.75 2.75 4.39 2.75 9L2.75 15C2.75 19.61 4.39 21.25 9 21.25L15 21.25C19.61 21.25 21.25 19.61 21.25 15L21.25 9Z"
|
|
219
|
+
fill="#292D32"
|
|
220
|
+
/>
|
|
221
|
+
<path
|
|
222
|
+
d="M11.25 22L11.25 2C11.25 1.59 11.59 1.25 12 1.25C12.41 1.25 12.75 1.59 12.75 2L12.75 22C12.75 22.41 12.41 22.75 12 22.75C11.59 22.75 11.25 22.41 11.25 22Z"
|
|
223
|
+
fill="#292D32"
|
|
224
|
+
/>
|
|
225
|
+
<path
|
|
226
|
+
d="M1.75 8.25C1.75 7.84 2.09 7.5 2.5 7.5L12 7.5C12.41 7.5 12.75 7.84 12.75 8.25C12.75 8.66 12.41 9 12 9L2.5 9C2.09 9 1.75 8.66 1.75 8.25Z"
|
|
227
|
+
fill="#292D32"
|
|
228
|
+
/>
|
|
229
|
+
<path
|
|
230
|
+
d="M1.25 15.75C1.25 15.34 1.59 15 2 15L12 15C12.41 15 12.75 15.34 12.75 15.75C12.75 16.16 12.41 16.5 12 16.5L2 16.5C1.59 16.5 1.25 16.16 1.25 15.75Z"
|
|
231
|
+
fill="#292D32"
|
|
232
|
+
/>
|
|
233
|
+
<path
|
|
234
|
+
d="M11.25 8.25C11.25 7.84 11.59 7.5 12 7.5L22 7.5C22.41 7.5 22.75 7.84 22.75 8.25C22.75 8.66 22.41 9 22 9L12 9C11.59 9 11.25 8.66 11.25 8.25Z"
|
|
235
|
+
fill="#292D32"
|
|
236
|
+
/>
|
|
237
|
+
<path
|
|
238
|
+
d="M11.2509 15.75C11.2509 15.34 11.5909 15 12.0009 15L21.4609 15C21.8709 15 22.2109 15.34 22.2109 15.75C22.2109 16.16 21.8709 16.5 21.4609 16.5L12.0009 16.5C11.5909 16.5 11.2509 16.16 11.2509 15.75Z"
|
|
239
|
+
fill="#292D32"
|
|
240
|
+
/>
|
|
241
|
+
</svg>
|
|
242
|
+
</IconButton>
|
|
243
|
+
{:else}
|
|
244
|
+
<IconButton
|
|
245
|
+
size="22px"
|
|
246
|
+
variant="secondary"
|
|
247
|
+
onClick={() => {
|
|
248
|
+
handleSwitchFormat(false);
|
|
249
|
+
}}
|
|
250
|
+
>
|
|
251
|
+
<svg
|
|
252
|
+
width="24"
|
|
253
|
+
height="24"
|
|
254
|
+
viewBox="0 0 24 24"
|
|
255
|
+
fill="none"
|
|
256
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
257
|
+
>
|
|
258
|
+
<path
|
|
259
|
+
d="M1.25 15L1.25 9C1.25 3.57 3.57 1.25 9 1.25L15 1.25C20.43 1.25 22.75 3.57 22.75 9L22.75 15C22.75 20.43 20.43 22.75 15 22.75L9 22.75C3.57 22.75 1.25 20.43 1.25 15ZM21.25 9C21.25 4.39 19.61 2.75 15 2.75L9 2.75C4.39 2.75 2.75 4.39 2.75 9L2.75 15C2.75 19.61 4.39 21.25 9 21.25L15 21.25C19.61 21.25 21.25 19.61 21.25 15L21.25 9Z"
|
|
260
|
+
fill="#292D32"
|
|
261
|
+
/>
|
|
262
|
+
<path
|
|
263
|
+
d="M11.25 22L11.25 2C11.25 1.59 11.59 1.25 12 1.25C12.41 1.25 12.75 1.59 12.75 2L12.75 22C12.75 22.41 12.41 22.75 12 22.75C11.59 22.75 11.25 22.41 11.25 22Z"
|
|
264
|
+
fill="#292D32"
|
|
265
|
+
/>
|
|
266
|
+
<path
|
|
267
|
+
d="M1.75 8.25C1.75 7.84 2.09 7.5 2.5 7.5L12 7.5C12.41 7.5 12.75 7.84 12.75 8.25C12.75 8.66 12.41 9 12 9L2.5 9C2.09 9 1.75 8.66 1.75 8.25Z"
|
|
268
|
+
fill="#292D32"
|
|
269
|
+
/>
|
|
270
|
+
<path
|
|
271
|
+
d="M1.25 15.75C1.25 15.34 1.59 15 2 15L12 15C12.41 15 12.75 15.34 12.75 15.75C12.75 16.16 12.41 16.5 12 16.5L2 16.5C1.59 16.5 1.25 16.16 1.25 15.75Z"
|
|
272
|
+
fill="#292D32"
|
|
273
|
+
/>
|
|
274
|
+
<path
|
|
275
|
+
d="M11.25 8.25C11.25 7.84 11.59 7.5 12 7.5L22 7.5C22.41 7.5 22.75 7.84 22.75 8.25C22.75 8.66 22.41 9 22 9L12 9C11.59 9 11.25 8.66 11.25 8.25Z"
|
|
276
|
+
fill="#292D32"
|
|
277
|
+
/>
|
|
278
|
+
<path
|
|
279
|
+
d="M11.2509 15.75C11.2509 15.34 11.5909 15 12.0009 15L21.4609 15C21.8709 15 22.2109 15.34 22.2109 15.75C22.2109 16.16 21.8709 16.5 21.4609 16.5L12.0009 16.5C11.5909 16.5 11.2509 16.16 11.2509 15.75Z"
|
|
280
|
+
fill="#292D32"
|
|
281
|
+
/>
|
|
282
|
+
</svg>
|
|
283
|
+
</IconButton>
|
|
284
|
+
{/if}
|
|
285
|
+
</Tooltip.Trigger>
|
|
286
|
+
<Tooltip.Content slot="content" style="background-color:var(--bg-2)">
|
|
287
|
+
<h5>vue tableau</h5>
|
|
288
|
+
</Tooltip.Content>
|
|
289
|
+
</Tooltip.Root>
|
|
290
|
+
|
|
291
|
+
|
|
292
|
+
<Tooltip.Root direction="bottom">
|
|
293
|
+
<Tooltip.Trigger slot="trigger">
|
|
294
|
+
{#if !$mobileFormat}
|
|
295
|
+
<IconButton
|
|
296
|
+
size="22px"
|
|
297
|
+
variant="ghost"
|
|
298
|
+
onClick={() => {
|
|
299
|
+
handleSwitchFormat(true);
|
|
300
|
+
}}
|
|
301
|
+
>
|
|
302
|
+
<svg
|
|
303
|
+
width="24"
|
|
304
|
+
height="24"
|
|
305
|
+
viewBox="0 0 24 24"
|
|
306
|
+
fill="none"
|
|
307
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
308
|
+
>
|
|
309
|
+
<path
|
|
310
|
+
d="M19.9 22.75H4.1C2.18 22.75 1.25 21.77 1.25 19.77V15.73C1.25 13.72 2.18 12.75 4.1 12.75H19.9C21.82 12.75 22.75 13.73 22.75 15.73V19.77C22.75 21.77 21.82 22.75 19.9 22.75ZM4.1 14.25C3.09 14.25 2.75 14.46 2.75 15.73V19.77C2.75 21.04 3.09 21.25 4.1 21.25H19.9C20.91 21.25 21.25 21.04 21.25 19.77V15.73C21.25 14.46 20.91 14.25 19.9 14.25H4.1Z"
|
|
311
|
+
fill="#292D32"
|
|
312
|
+
/>
|
|
313
|
+
<path
|
|
314
|
+
d="M19.9 11.25H4.1C2.18 11.25 1.25 10.27 1.25 8.27V4.23C1.25 2.22 2.18 1.25 4.1 1.25H19.9C21.82 1.25 22.75 2.23 22.75 4.23V8.27C22.75 10.27 21.82 11.25 19.9 11.25ZM4.1 2.75C3.09 2.75 2.75 2.96 2.75 4.23V8.27C2.75 9.54 3.09 9.75 4.1 9.75H19.9C20.91 9.75 21.25 9.54 21.25 8.27V4.23C21.25 2.96 20.91 2.75 19.9 2.75H4.1Z"
|
|
315
|
+
fill="#292D32"
|
|
316
|
+
/>
|
|
317
|
+
</svg>
|
|
318
|
+
</IconButton>
|
|
319
|
+
{:else}
|
|
320
|
+
<IconButton
|
|
321
|
+
size="22px"
|
|
322
|
+
variant="secondary"
|
|
323
|
+
onClick={() => {
|
|
324
|
+
handleSwitchFormat(true);
|
|
325
|
+
}}
|
|
326
|
+
>
|
|
327
|
+
<svg
|
|
328
|
+
width="24"
|
|
329
|
+
height="24"
|
|
330
|
+
viewBox="0 0 24 24"
|
|
331
|
+
fill="none"
|
|
332
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
333
|
+
>
|
|
334
|
+
<path
|
|
335
|
+
d="M19.9 22.75H4.1C2.18 22.75 1.25 21.77 1.25 19.77V15.73C1.25 13.72 2.18 12.75 4.1 12.75H19.9C21.82 12.75 22.75 13.73 22.75 15.73V19.77C22.75 21.77 21.82 22.75 19.9 22.75ZM4.1 14.25C3.09 14.25 2.75 14.46 2.75 15.73V19.77C2.75 21.04 3.09 21.25 4.1 21.25H19.9C20.91 21.25 21.25 21.04 21.25 19.77V15.73C21.25 14.46 20.91 14.25 19.9 14.25H4.1Z"
|
|
336
|
+
fill="#292D32"
|
|
337
|
+
/>
|
|
338
|
+
<path
|
|
339
|
+
d="M19.9 11.25H4.1C2.18 11.25 1.25 10.27 1.25 8.27V4.23C1.25 2.22 2.18 1.25 4.1 1.25H19.9C21.82 1.25 22.75 2.23 22.75 4.23V8.27C22.75 10.27 21.82 11.25 19.9 11.25ZM4.1 2.75C3.09 2.75 2.75 2.96 2.75 4.23V8.27C2.75 9.54 3.09 9.75 4.1 9.75H19.9C20.91 9.75 21.25 9.54 21.25 8.27V4.23C21.25 2.96 20.91 2.75 19.9 2.75H4.1Z"
|
|
340
|
+
fill="#292D32"
|
|
341
|
+
/>
|
|
342
|
+
</svg>
|
|
343
|
+
</IconButton>
|
|
344
|
+
{/if}
|
|
345
|
+
</Tooltip.Trigger>
|
|
346
|
+
<Tooltip.Content slot="content" style="background-color:var(--bg-2)">
|
|
347
|
+
<h5>vue mobile</h5>
|
|
348
|
+
</Tooltip.Content>
|
|
349
|
+
</Tooltip.Root>
|
|
350
|
+
</div>
|
|
351
|
+
{#if $tableData[tableId].actions.length > 0 && $tableData[tableId].selection.length > 0}
|
|
352
|
+
<DropdownMenu.Root>
|
|
353
|
+
<DropdownMenu.Trigger slot="trigger">
|
|
354
|
+
<IconButton variant="secondary">
|
|
355
|
+
<svg
|
|
356
|
+
width="24"
|
|
357
|
+
height="24"
|
|
358
|
+
viewBox="0 0 24 24"
|
|
359
|
+
fill="none"
|
|
360
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
361
|
+
>
|
|
362
|
+
<path
|
|
363
|
+
d="M9.99057 22.7499C9.79057 22.7499 9.63057 22.7099 9.51057 22.6599C9.11057 22.5099 8.43057 22.0199 8.43057 20.4699V14.0199H6.09057C4.75057 14.0199 4.27057 13.3899 4.10057 13.0199C3.93057 12.6399 3.78057 11.8699 4.66057 10.8599L12.2306 2.25988C13.2506 1.09988 14.0806 1.17988 14.4806 1.32988C14.8806 1.47988 15.5606 1.96988 15.5606 3.51988V9.96988H17.9006C19.2406 9.96988 19.7206 10.5999 19.8906 10.9699C20.0606 11.3499 20.2106 12.1199 19.3306 13.1299L11.7606 21.7299C11.0506 22.5399 10.4306 22.7499 9.99057 22.7499ZM13.9306 2.73988C13.9006 2.77988 13.6906 2.87988 13.3606 3.25988L5.79057 11.8599C5.51057 12.1799 5.47057 12.3799 5.47057 12.4199C5.49057 12.4299 5.67057 12.5299 6.09057 12.5299H9.18057C9.59057 12.5299 9.93057 12.8699 9.93057 13.2799V20.4799C9.93057 20.9799 10.0206 21.1999 10.0606 21.2599C10.0906 21.2199 10.3006 21.1199 10.6306 20.7399L18.2006 12.1399C18.4806 11.8199 18.5206 11.6199 18.5206 11.5799C18.5006 11.5699 18.3206 11.4699 17.9006 11.4699H14.8106C14.4006 11.4699 14.0606 11.1299 14.0606 10.7199V3.51988C14.0706 3.01988 13.9706 2.80988 13.9306 2.73988Z"
|
|
364
|
+
fill="#292D32"
|
|
365
|
+
/>
|
|
366
|
+
</svg>
|
|
367
|
+
</IconButton>
|
|
368
|
+
</DropdownMenu.Trigger>
|
|
369
|
+
<DropdownMenu.Content slot="content">
|
|
370
|
+
<DropdownMenu.Label>Selection</DropdownMenu.Label>
|
|
371
|
+
{#each $tableData[tableId].actions as action}
|
|
372
|
+
<DropdownMenu.Button
|
|
373
|
+
onClick={() => {
|
|
374
|
+
handleClickAction(action);
|
|
375
|
+
}}
|
|
376
|
+
style="justify-content:space-between;"
|
|
377
|
+
>
|
|
378
|
+
<h4>{action.label}</h4>
|
|
379
|
+
</DropdownMenu.Button>
|
|
380
|
+
{/each}
|
|
381
|
+
</DropdownMenu.Content>
|
|
382
|
+
</DropdownMenu.Root>
|
|
383
|
+
{/if}
|
|
384
|
+
<!-- <Input placeholder="recherche" bind:value={globalSearch}>
|
|
69
385
|
<svg
|
|
70
386
|
slot="endContent"
|
|
71
387
|
width="24"
|
|
@@ -83,7 +399,7 @@
|
|
|
83
399
|
fill="#292D32"
|
|
84
400
|
/>
|
|
85
401
|
</svg>
|
|
86
|
-
</Input>
|
|
402
|
+
</Input> -->
|
|
87
403
|
|
|
88
404
|
<DropdownMenu.Root>
|
|
89
405
|
<DropdownMenu.Trigger slot="trigger">
|
|
@@ -124,30 +440,157 @@
|
|
|
124
440
|
></Checkbox>
|
|
125
441
|
</DropdownMenu.Button>
|
|
126
442
|
{/each}
|
|
127
|
-
|
|
443
|
+
<DropdownMenu.Separator></DropdownMenu.Separator>
|
|
128
444
|
|
|
129
|
-
|
|
445
|
+
<DropdownMenu.Button onClick={handleResetSettings} style="justify-content:space-between;"
|
|
446
|
+
><h4>paramètres par defauts</h4></DropdownMenu.Button
|
|
447
|
+
>
|
|
130
448
|
</DropdownMenu.Content>
|
|
131
449
|
</DropdownMenu.Root>
|
|
450
|
+
<slot name="left" />
|
|
451
|
+
<!-- pagination -->
|
|
452
|
+
{#if pagination}
|
|
453
|
+
<div class="pagination">
|
|
454
|
+
<IconButton
|
|
455
|
+
onClick={handleGoLeft}
|
|
456
|
+
desabled={canPassToLeft}
|
|
457
|
+
variant="secondary"
|
|
458
|
+
style="border-top-right-radius: 0px;border-bottom-right-radius: 0px;"
|
|
459
|
+
>
|
|
460
|
+
<svg
|
|
461
|
+
width="24"
|
|
462
|
+
height="24"
|
|
463
|
+
viewBox="0 0 24 24"
|
|
464
|
+
fill="none"
|
|
465
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
466
|
+
>
|
|
467
|
+
<path
|
|
468
|
+
d="M9.56945 18.8201C9.37945 18.8201 9.18945 18.7501 9.03945 18.6001L2.96945 12.5301C2.67945 12.2401 2.67945 11.7601 2.96945 11.4701L9.03945 5.40012C9.32945 5.11012 9.80945 5.11012 10.0995 5.40012C10.3895 5.69012 10.3895 6.17012 10.0995 6.46012L4.55945 12.0001L10.0995 17.5401C10.3895 17.8301 10.3895 18.3101 10.0995 18.6001C9.95945 18.7501 9.75945 18.8201 9.56945 18.8201Z"
|
|
469
|
+
fill="#292D32"
|
|
470
|
+
/>
|
|
471
|
+
<path
|
|
472
|
+
d="M20.4999 12.75H3.66992C3.25992 12.75 2.91992 12.41 2.91992 12C2.91992 11.59 3.25992 11.25 3.66992 11.25H20.4999C20.9099 11.25 21.2499 11.59 21.2499 12C21.2499 12.41 20.9099 12.75 20.4999 12.75Z"
|
|
473
|
+
fill="#292D32"
|
|
474
|
+
/>
|
|
475
|
+
</svg>
|
|
476
|
+
</IconButton>
|
|
477
|
+
<DropdownMenu.Root>
|
|
478
|
+
<DropdownMenu.Trigger slot="trigger">
|
|
479
|
+
<IconButton variant="secondary" style="border-radius:0px;"
|
|
480
|
+
><h4>
|
|
481
|
+
{Math.floor($tableData[tableId].offset / $tableData[tableId].limit) + 1}
|
|
482
|
+
</h4></IconButton
|
|
483
|
+
>
|
|
484
|
+
</DropdownMenu.Trigger>
|
|
485
|
+
<DropdownMenu.Content slot="content">
|
|
486
|
+
<DropdownMenu.Label>Naviguer</DropdownMenu.Label>
|
|
487
|
+
<Input
|
|
488
|
+
type="number"
|
|
489
|
+
bind:value={targetPage}
|
|
490
|
+
onChange={(newValue) => {
|
|
491
|
+
canChangePage = isNaN(parseInt(newValue));
|
|
492
|
+
}}
|
|
493
|
+
label="page"
|
|
494
|
+
/>
|
|
495
|
+
<Button onClick={handleChangePage} style="width:100%;" desabled={canChangePage}
|
|
496
|
+
>aller à</Button
|
|
497
|
+
>
|
|
498
|
+
<DropdownMenu.Separator></DropdownMenu.Separator>
|
|
499
|
+
<h4>
|
|
500
|
+
Page <span style="color: var(--font-u);"
|
|
501
|
+
>{Math.floor($tableData[tableId].offset / $tableData[tableId].limit) + 1}</span
|
|
502
|
+
>/{Math.ceil($tableData[tableId].totalOfRows / $tableData[tableId].limit)} |
|
|
503
|
+
<span style="color: var(--font-u);">{$tableData[tableId].totalOfRows}</span> elements
|
|
504
|
+
</h4>
|
|
505
|
+
</DropdownMenu.Content>
|
|
506
|
+
</DropdownMenu.Root>
|
|
132
507
|
|
|
133
|
-
|
|
508
|
+
<IconButton
|
|
509
|
+
onClick={handleGoRight}
|
|
510
|
+
desabled={canPassToRight}
|
|
511
|
+
style="border-top-left-radius: 0px;border-bottom-left-radius: 0px;"
|
|
512
|
+
variant="secondary"
|
|
513
|
+
>
|
|
514
|
+
<svg
|
|
515
|
+
width="24"
|
|
516
|
+
height="24"
|
|
517
|
+
viewBox="0 0 24 24"
|
|
518
|
+
fill="none"
|
|
519
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
520
|
+
>
|
|
521
|
+
<path
|
|
522
|
+
d="M14.4291 18.8201C14.2391 18.8201 14.0491 18.7501 13.8991 18.6001C13.6091 18.3101 13.6091 17.8301 13.8991 17.5401L19.4391 12.0001L13.8991 6.46012C13.6091 6.17012 13.6091 5.69012 13.8991 5.40012C14.1891 5.11012 14.6691 5.11012 14.9591 5.40012L21.0291 11.4701C21.3191 11.7601 21.3191 12.2401 21.0291 12.5301L14.9591 18.6001C14.8091 18.7501 14.6191 18.8201 14.4291 18.8201Z"
|
|
523
|
+
fill="#292D32"
|
|
524
|
+
/>
|
|
525
|
+
<path
|
|
526
|
+
d="M20.33 12.75H3.5C3.09 12.75 2.75 12.41 2.75 12C2.75 11.59 3.09 11.25 3.5 11.25H20.33C20.74 11.25 21.08 11.59 21.08 12C21.08 12.41 20.74 12.75 20.33 12.75Z"
|
|
527
|
+
fill="#292D32"
|
|
528
|
+
/>
|
|
529
|
+
</svg>
|
|
530
|
+
</IconButton>
|
|
531
|
+
</div>
|
|
532
|
+
{/if}
|
|
533
|
+
|
|
534
|
+
<!-- actions -->
|
|
535
|
+
<div class="actions">
|
|
536
|
+
<slot name="actions" />
|
|
537
|
+
</div>
|
|
538
|
+
</div>
|
|
539
|
+
<!-- liste des filtres -->
|
|
540
|
+
<div
|
|
541
|
+
class="filters {$mobileFormat || Object.entries($tableData[tableId].filters).length > 0
|
|
542
|
+
? 'active'
|
|
543
|
+
: ''} {$mobileFormat ? 'mobile' : ''}"
|
|
544
|
+
>
|
|
545
|
+
{#if $mobileFormat}
|
|
546
|
+
<FilterDropdown {tableId}></FilterDropdown>
|
|
547
|
+
{/if}
|
|
134
548
|
{#if $tableData[tableId].filters}
|
|
135
549
|
{#each Object.entries($tableData[tableId].filters) as [key, filter]}
|
|
136
550
|
{@const column = $tableData[tableId].columns.filter((obj) => obj.name === key)[0]}
|
|
137
551
|
|
|
138
552
|
{#if column.searchChoices}
|
|
139
553
|
<Button
|
|
140
|
-
onClick={()=>{
|
|
141
|
-
|
|
554
|
+
onClick={() => {
|
|
555
|
+
handleRemoveFilter(column.name);
|
|
556
|
+
}}
|
|
557
|
+
style="border-radius:var(--radius-m);padding-left:3px;margin:7px 0 7px 0;"
|
|
142
558
|
variant="outline"
|
|
143
559
|
>
|
|
144
560
|
<h4 class="filter-column">{column.label}</h4>
|
|
145
561
|
<h4>: {column.searchChoices.filter((obj) => obj.value === filter)[0].label}</h4>
|
|
146
562
|
</Button>
|
|
563
|
+
{:else if column.datePicker}
|
|
564
|
+
{#if column.filterAfter}
|
|
565
|
+
<Button
|
|
566
|
+
onClick={() => {
|
|
567
|
+
handleRemoveFilter(column.name, 'after');
|
|
568
|
+
}}
|
|
569
|
+
style="border-radius:var(--radius-m);padding-left:3px;margin:7px 0 7px 0;"
|
|
570
|
+
variant="outline"
|
|
571
|
+
>
|
|
572
|
+
<h4 class="filter-column">{column.label} (à partir du)</h4>
|
|
573
|
+
<h4>: {column.filterAfter}</h4>
|
|
574
|
+
</Button>
|
|
575
|
+
{/if}
|
|
576
|
+
{#if column.filterBefore}
|
|
577
|
+
<Button
|
|
578
|
+
onClick={() => {
|
|
579
|
+
handleRemoveFilter(column.name, 'before');
|
|
580
|
+
}}
|
|
581
|
+
style="border-radius:var(--radius-m);padding-left:3px;margin:7px 0 7px 0;"
|
|
582
|
+
variant="outline"
|
|
583
|
+
>
|
|
584
|
+
<h4 class="filter-column">{column.label} (avant le)</h4>
|
|
585
|
+
<h4>: {column.filterBefore}</h4>
|
|
586
|
+
</Button>
|
|
587
|
+
{/if}
|
|
147
588
|
{:else}
|
|
148
589
|
<Button
|
|
149
|
-
onClick={()=>{
|
|
150
|
-
|
|
590
|
+
onClick={() => {
|
|
591
|
+
handleRemoveFilter(column.name);
|
|
592
|
+
}}
|
|
593
|
+
style="border-radius:var(--radius-m);padding-left:3px;margin:7px 0 7px 0;"
|
|
151
594
|
variant="outline"
|
|
152
595
|
>
|
|
153
596
|
<h4 class="filter-column">{column.label}</h4>
|
|
@@ -162,13 +605,54 @@
|
|
|
162
605
|
.actions-bar {
|
|
163
606
|
display: flex;
|
|
164
607
|
align-items: center;
|
|
165
|
-
column-gap:
|
|
166
|
-
margin
|
|
608
|
+
column-gap: 7px;
|
|
609
|
+
margin: 7px;
|
|
167
610
|
}
|
|
168
611
|
|
|
612
|
+
.format {
|
|
613
|
+
display: flex;
|
|
614
|
+
align-items: center;
|
|
615
|
+
column-gap: var(--pad-xs);
|
|
616
|
+
padding: var(--pad-xs);
|
|
617
|
+
border-radius: var(--radius-l);
|
|
618
|
+
border: 1px solid var(--stroke);
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
.filters {
|
|
622
|
+
padding: 0px 7px;
|
|
623
|
+
transition:
|
|
624
|
+
max-height 0.4s ease,
|
|
625
|
+
opacity 0.4s ease;
|
|
626
|
+
max-height: 0px;
|
|
627
|
+
display: flex;
|
|
628
|
+
align-items: center;
|
|
629
|
+
column-gap: 7px;
|
|
630
|
+
opacity: 0;
|
|
631
|
+
pointer-events: none;
|
|
632
|
+
overflow: hidden;
|
|
633
|
+
}
|
|
634
|
+
.filters.active {
|
|
635
|
+
max-height: 100px;
|
|
636
|
+
opacity: 1;
|
|
637
|
+
pointer-events: initial;
|
|
638
|
+
transition:
|
|
639
|
+
max-height 0.4s ease,
|
|
640
|
+
opacity 0.4s ease;
|
|
641
|
+
}
|
|
642
|
+
.filters.mobile {
|
|
643
|
+
border-bottom: 1px solid var(--stroke);
|
|
644
|
+
background-color: var(--bg-u);
|
|
645
|
+
}
|
|
169
646
|
.filter-column {
|
|
170
|
-
background-color: var(--bg-
|
|
171
|
-
padding: 0px
|
|
647
|
+
background-color: var(--bg-d);
|
|
648
|
+
padding: 0px 6px;
|
|
172
649
|
border-radius: var(--radius-s);
|
|
173
650
|
}
|
|
651
|
+
.pagination {
|
|
652
|
+
display: flex;
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
.actions {
|
|
656
|
+
margin-left: auto;
|
|
657
|
+
}
|
|
174
658
|
</style>
|