grav-svelte 0.0.39 → 0.0.40
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/dist/CRUD/CrudTable.svelte +139 -53
- package/dist/CRUD/interfaces.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import CrudTableButtons from "./CrudTableButtons.svelte";
|
|
3
|
-
import { openModal, closeModal } from "../Modals/index.js";
|
|
4
|
-
import ImageModal from "./ImageModal.svelte";
|
|
2
|
+
import CrudTableButtons from "./CrudTableButtons.svelte";
|
|
3
|
+
import { openModal, closeModal } from "../Modals/index.js";
|
|
4
|
+
import ImageModal from "./ImageModal.svelte";
|
|
5
5
|
|
|
6
6
|
// COMPONENTES imports
|
|
7
7
|
|
|
@@ -17,12 +17,12 @@ import ImageModal from "./ImageModal.svelte";
|
|
|
17
17
|
export let tableHeaders: TableHeader[];
|
|
18
18
|
export let loading: boolean = false;
|
|
19
19
|
export let dragEnabled: boolean = false;
|
|
20
|
-
export let orderField: string =
|
|
20
|
+
export let orderField: string = "inOrden";
|
|
21
21
|
|
|
22
22
|
let selectedAscOrDesc = "asc";
|
|
23
23
|
let selectedSort = "";
|
|
24
24
|
let selectedRowId: string | number | null = null;
|
|
25
|
-
|
|
25
|
+
|
|
26
26
|
// Drag and drop variables
|
|
27
27
|
let draggedIndex: number | null = null;
|
|
28
28
|
let dragOverIndex: number | null = null;
|
|
@@ -54,28 +54,33 @@ import ImageModal from "./ImageModal.svelte";
|
|
|
54
54
|
|
|
55
55
|
// Drag and drop functions
|
|
56
56
|
function handleDragStart(event: DragEvent, index: number) {
|
|
57
|
-
if (
|
|
57
|
+
if (
|
|
58
|
+
!dragEnabled ||
|
|
59
|
+
!todosLosRegistros ||
|
|
60
|
+
todosLosRegistros.length === 0 ||
|
|
61
|
+
loading
|
|
62
|
+
) {
|
|
58
63
|
event.preventDefault();
|
|
59
64
|
return;
|
|
60
65
|
}
|
|
61
|
-
|
|
66
|
+
|
|
62
67
|
draggedIndex = index;
|
|
63
68
|
isDragging = true;
|
|
64
|
-
|
|
69
|
+
|
|
65
70
|
if (event.dataTransfer) {
|
|
66
|
-
event.dataTransfer.effectAllowed =
|
|
67
|
-
event.dataTransfer.setData(
|
|
71
|
+
event.dataTransfer.effectAllowed = "move";
|
|
72
|
+
event.dataTransfer.setData("text/html", "");
|
|
68
73
|
}
|
|
69
74
|
}
|
|
70
75
|
|
|
71
76
|
function handleDragOver(event: DragEvent, index: number) {
|
|
72
77
|
if (!dragEnabled || draggedIndex === null) return;
|
|
73
|
-
|
|
78
|
+
|
|
74
79
|
event.preventDefault();
|
|
75
80
|
dragOverIndex = index;
|
|
76
|
-
|
|
81
|
+
|
|
77
82
|
if (event.dataTransfer) {
|
|
78
|
-
event.dataTransfer.dropEffect =
|
|
83
|
+
event.dataTransfer.dropEffect = "move";
|
|
79
84
|
}
|
|
80
85
|
}
|
|
81
86
|
|
|
@@ -84,54 +89,58 @@ import ImageModal from "./ImageModal.svelte";
|
|
|
84
89
|
}
|
|
85
90
|
|
|
86
91
|
function handleDrop(event: DragEvent, dropIndex: number) {
|
|
87
|
-
if (
|
|
92
|
+
if (
|
|
93
|
+
!dragEnabled ||
|
|
94
|
+
draggedIndex === null ||
|
|
95
|
+
draggedIndex === dropIndex
|
|
96
|
+
) {
|
|
88
97
|
resetDragState();
|
|
89
98
|
return;
|
|
90
99
|
}
|
|
91
|
-
|
|
100
|
+
|
|
92
101
|
// Prevent reordering if there's no data or data is still loading
|
|
93
102
|
if (!todosLosRegistros || todosLosRegistros.length === 0 || loading) {
|
|
94
103
|
resetDragState();
|
|
95
104
|
return;
|
|
96
105
|
}
|
|
97
|
-
|
|
106
|
+
|
|
98
107
|
event.preventDefault();
|
|
99
|
-
|
|
108
|
+
|
|
100
109
|
// Create a new array with reordered items
|
|
101
110
|
const newItems = [...todosLosRegistros];
|
|
102
111
|
const draggedItem = newItems[draggedIndex];
|
|
103
|
-
|
|
112
|
+
|
|
104
113
|
// Remove the dragged item from its original position
|
|
105
114
|
newItems.splice(draggedIndex, 1);
|
|
106
|
-
|
|
115
|
+
|
|
107
116
|
// Insert the dragged item at the new position
|
|
108
117
|
newItems.splice(dropIndex, 0, draggedItem);
|
|
109
|
-
|
|
118
|
+
|
|
110
119
|
// Update the order values and track changes
|
|
111
120
|
const changes: any[] = [];
|
|
112
|
-
|
|
121
|
+
|
|
113
122
|
newItems.forEach((item, index) => {
|
|
114
123
|
const newOrder = index + 1;
|
|
115
124
|
const originalOrder = item[orderField];
|
|
116
|
-
|
|
125
|
+
|
|
117
126
|
if (originalOrder !== newOrder) {
|
|
118
127
|
changes.push({
|
|
119
128
|
...item,
|
|
120
|
-
[orderField]: newOrder
|
|
129
|
+
[orderField]: newOrder,
|
|
121
130
|
});
|
|
122
131
|
}
|
|
123
|
-
|
|
132
|
+
|
|
124
133
|
// Update the item's order in the array
|
|
125
134
|
item[orderField] = newOrder;
|
|
126
135
|
});
|
|
127
|
-
|
|
136
|
+
|
|
128
137
|
// Update the items array
|
|
129
138
|
todosLosRegistros = newItems;
|
|
130
139
|
reorderedItems = changes;
|
|
131
|
-
|
|
140
|
+
|
|
132
141
|
// Emit the reorder event
|
|
133
142
|
dispatch("reorderChange", { reorderedItems: changes });
|
|
134
|
-
|
|
143
|
+
|
|
135
144
|
resetDragState();
|
|
136
145
|
}
|
|
137
146
|
|
|
@@ -152,7 +161,9 @@ import ImageModal from "./ImageModal.svelte";
|
|
|
152
161
|
<thead class="table-header">
|
|
153
162
|
<tr>
|
|
154
163
|
{#if dragEnabled}
|
|
155
|
-
<th
|
|
164
|
+
<th
|
|
165
|
+
class="table-header-cell drag-header borderleft non-sortable"
|
|
166
|
+
>
|
|
156
167
|
<div class="drag-handle-header">
|
|
157
168
|
<svg
|
|
158
169
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -178,20 +189,24 @@ import ImageModal from "./ImageModal.svelte";
|
|
|
178
189
|
{#each tableHeaders as tableHeader, index}
|
|
179
190
|
{#if tableHeader.biSort == false}
|
|
180
191
|
<th
|
|
181
|
-
class="table-header-cell {index == 0 &&
|
|
192
|
+
class="table-header-cell {index == 0 &&
|
|
193
|
+
!dragEnabled
|
|
182
194
|
? 'borderleft'
|
|
183
195
|
: ''} non-sortable"
|
|
184
|
-
style="text-align: {tableHeader.align ??
|
|
196
|
+
style="text-align: {tableHeader.align ??
|
|
197
|
+
'center'}"
|
|
185
198
|
>
|
|
186
199
|
{tableHeader.titulo}
|
|
187
200
|
</th>
|
|
188
201
|
{:else}
|
|
189
202
|
<th
|
|
190
203
|
on:click={() => dispatchSort(tableHeader.campo)}
|
|
191
|
-
class="table-header-cell {index == 0 &&
|
|
204
|
+
class="table-header-cell {index == 0 &&
|
|
205
|
+
!dragEnabled
|
|
192
206
|
? 'borderleft'
|
|
193
207
|
: ''} sortable"
|
|
194
|
-
style="text-align: {tableHeader.align ??
|
|
208
|
+
style="text-align: {tableHeader.align ??
|
|
209
|
+
'left'}"
|
|
195
210
|
>
|
|
196
211
|
<h1>{tableHeader.titulo}</h1>
|
|
197
212
|
{#if selectedSort == tableHeader.campo}
|
|
@@ -247,12 +262,18 @@ import ImageModal from "./ImageModal.svelte";
|
|
|
247
262
|
<tr
|
|
248
263
|
class="table-row {selectedRowId === index
|
|
249
264
|
? 'selected'
|
|
250
|
-
: ''} {dragEnabled &&
|
|
265
|
+
: ''} {dragEnabled &&
|
|
266
|
+
!loading &&
|
|
267
|
+
todosLosRegistros.length > 0
|
|
268
|
+
? 'draggable-row'
|
|
269
|
+
: ''} {draggedIndex === index
|
|
251
270
|
? 'dragging'
|
|
252
271
|
: ''} {dragOverIndex === index
|
|
253
272
|
? 'drag-over'
|
|
254
273
|
: ''}"
|
|
255
|
-
draggable={dragEnabled &&
|
|
274
|
+
draggable={dragEnabled &&
|
|
275
|
+
!loading &&
|
|
276
|
+
todosLosRegistros.length > 0}
|
|
256
277
|
on:click={() => handleRowClick(index)}
|
|
257
278
|
on:dragstart={(e) => handleDragStart(e, index)}
|
|
258
279
|
on:dragover={(e) => handleDragOver(e, index)}
|
|
@@ -261,8 +282,13 @@ import ImageModal from "./ImageModal.svelte";
|
|
|
261
282
|
on:dragend={handleDragEnd}
|
|
262
283
|
>
|
|
263
284
|
{#if dragEnabled}
|
|
264
|
-
<td
|
|
265
|
-
|
|
285
|
+
<td
|
|
286
|
+
class="table-cell drag-handle-cell sticky-cell"
|
|
287
|
+
>
|
|
288
|
+
<div
|
|
289
|
+
class="drag-handle"
|
|
290
|
+
title="Drag to reorder"
|
|
291
|
+
>
|
|
266
292
|
<svg
|
|
267
293
|
xmlns="http://www.w3.org/2000/svg"
|
|
268
294
|
width="16"
|
|
@@ -274,12 +300,18 @@ import ImageModal from "./ImageModal.svelte";
|
|
|
274
300
|
stroke-linecap="round"
|
|
275
301
|
stroke-linejoin="round"
|
|
276
302
|
>
|
|
277
|
-
<circle cx="9" cy="12" r="1"
|
|
278
|
-
|
|
279
|
-
<circle cx="9" cy="
|
|
280
|
-
|
|
281
|
-
<circle cx="
|
|
282
|
-
|
|
303
|
+
<circle cx="9" cy="12" r="1"
|
|
304
|
+
></circle>
|
|
305
|
+
<circle cx="9" cy="5" r="1"
|
|
306
|
+
></circle>
|
|
307
|
+
<circle cx="9" cy="19" r="1"
|
|
308
|
+
></circle>
|
|
309
|
+
<circle cx="15" cy="12" r="1"
|
|
310
|
+
></circle>
|
|
311
|
+
<circle cx="15" cy="5" r="1"
|
|
312
|
+
></circle>
|
|
313
|
+
<circle cx="15" cy="19" r="1"
|
|
314
|
+
></circle>
|
|
283
315
|
</svg>
|
|
284
316
|
</div>
|
|
285
317
|
</td>
|
|
@@ -287,7 +319,8 @@ import ImageModal from "./ImageModal.svelte";
|
|
|
287
319
|
{#each tableHeaders as tableBodyItem, i}
|
|
288
320
|
{#if tableBodyItem.tipo == "Text"}
|
|
289
321
|
<td
|
|
290
|
-
class="table-cell {i == 0 &&
|
|
322
|
+
class="table-cell {i == 0 &&
|
|
323
|
+
!dragEnabled
|
|
291
324
|
? 'sticky-cell'
|
|
292
325
|
: ''}"
|
|
293
326
|
>
|
|
@@ -295,14 +328,16 @@ import ImageModal from "./ImageModal.svelte";
|
|
|
295
328
|
class="cell-content {tableBodyItem.biBold
|
|
296
329
|
? 'bold'
|
|
297
330
|
: ''}"
|
|
298
|
-
style="text-align: {tableBodyItem.align ??
|
|
331
|
+
style="text-align: {tableBodyItem.align ??
|
|
332
|
+
'left'}"
|
|
299
333
|
>
|
|
300
334
|
{item[tableBodyItem.campo] ?? ""}
|
|
301
335
|
</p>
|
|
302
336
|
</td>
|
|
303
337
|
{:else if tableBodyItem.tipo == "Number"}
|
|
304
338
|
<td
|
|
305
|
-
class="table-cell {i == 0 &&
|
|
339
|
+
class="table-cell {i == 0 &&
|
|
340
|
+
!dragEnabled
|
|
306
341
|
? 'sticky-cell'
|
|
307
342
|
: ''}"
|
|
308
343
|
>
|
|
@@ -310,14 +345,55 @@ import ImageModal from "./ImageModal.svelte";
|
|
|
310
345
|
class="cell-content {tableBodyItem.biBold
|
|
311
346
|
? 'bold'
|
|
312
347
|
: ''}"
|
|
313
|
-
style="text-align: {tableBodyItem.align ??
|
|
348
|
+
style="text-align: {tableBodyItem.align ??
|
|
349
|
+
'left'}"
|
|
314
350
|
>
|
|
315
351
|
{item[tableBodyItem.campo] ?? ""}
|
|
316
352
|
</p>
|
|
317
353
|
</td>
|
|
354
|
+
{:else if tableBodyItem.tipo == "Datetime"}
|
|
355
|
+
<td
|
|
356
|
+
class="table-cell {i == 0 &&
|
|
357
|
+
!dragEnabled
|
|
358
|
+
? 'sticky-cell'
|
|
359
|
+
: ''}"
|
|
360
|
+
>
|
|
361
|
+
<p
|
|
362
|
+
class="cell-content {tableBodyItem.biBold
|
|
363
|
+
? 'bold'
|
|
364
|
+
: ''}"
|
|
365
|
+
style="text-align: {tableBodyItem.align ??
|
|
366
|
+
'left'}"
|
|
367
|
+
>
|
|
368
|
+
{item[tableBodyItem.campo]?.replace(
|
|
369
|
+
"T",
|
|
370
|
+
":"
|
|
371
|
+
) ?? ":"}
|
|
372
|
+
</p>
|
|
373
|
+
</td>
|
|
374
|
+
{:else if tableBodyItem.tipo == "Date"}
|
|
375
|
+
<td
|
|
376
|
+
class="table-cell {i == 0 &&
|
|
377
|
+
!dragEnabled
|
|
378
|
+
? 'sticky-cell'
|
|
379
|
+
: ''}"
|
|
380
|
+
>
|
|
381
|
+
<p
|
|
382
|
+
class="cell-content {tableBodyItem.biBold
|
|
383
|
+
? 'bold'
|
|
384
|
+
: ''}"
|
|
385
|
+
style="text-align: {tableBodyItem.align ??
|
|
386
|
+
'left'}"
|
|
387
|
+
>
|
|
388
|
+
{item[tableBodyItem.campo]?.split(
|
|
389
|
+
"T"
|
|
390
|
+
)[0] ?? ":"}
|
|
391
|
+
</p>
|
|
392
|
+
</td>
|
|
318
393
|
{:else if tableBodyItem.tipo == "Bool"}
|
|
319
394
|
<td
|
|
320
|
-
class="table-cell {i == 0 &&
|
|
395
|
+
class="table-cell {i == 0 &&
|
|
396
|
+
!dragEnabled
|
|
321
397
|
? 'sticky-cell'
|
|
322
398
|
: ''}"
|
|
323
399
|
>
|
|
@@ -325,7 +401,8 @@ import ImageModal from "./ImageModal.svelte";
|
|
|
325
401
|
class="cell-content {tableBodyItem.biBold
|
|
326
402
|
? 'bold'
|
|
327
403
|
: ''}"
|
|
328
|
-
style="text-align: {tableBodyItem.align ??
|
|
404
|
+
style="text-align: {tableBodyItem.align ??
|
|
405
|
+
'left'}"
|
|
329
406
|
>
|
|
330
407
|
{#if item[tableBodyItem.campo] === true}
|
|
331
408
|
<i class="fas fa-check"></i>
|
|
@@ -336,15 +413,20 @@ import ImageModal from "./ImageModal.svelte";
|
|
|
336
413
|
</td>
|
|
337
414
|
{:else if tableBodyItem.tipo == "Image"}
|
|
338
415
|
<td
|
|
339
|
-
class="table-cell {i == 0 &&
|
|
416
|
+
class="table-cell {i == 0 &&
|
|
417
|
+
!dragEnabled
|
|
340
418
|
? 'sticky-cell'
|
|
341
419
|
: ''}"
|
|
342
420
|
>
|
|
343
421
|
<img
|
|
344
422
|
class="crud-image cursor-pointer"
|
|
345
|
-
src={item[tableBodyItem.campo] ??
|
|
423
|
+
src={item[tableBodyItem.campo] ??
|
|
424
|
+
""}
|
|
346
425
|
alt="image"
|
|
347
|
-
on:click={() =>
|
|
426
|
+
on:click={() =>
|
|
427
|
+
openImageModal(
|
|
428
|
+
item[tableBodyItem.campo]
|
|
429
|
+
)}
|
|
348
430
|
/>
|
|
349
431
|
</td>
|
|
350
432
|
{:else if tableBodyItem.tipo == "Buttons"}
|
|
@@ -352,7 +434,7 @@ import ImageModal from "./ImageModal.svelte";
|
|
|
352
434
|
id={item[tableBodyItem.campo]}
|
|
353
435
|
buttonsConfig={tableBodyItem.buttonsConfig ??
|
|
354
436
|
[]}
|
|
355
|
-
align={tableBodyItem.align ??
|
|
437
|
+
align={tableBodyItem.align ?? "center"}
|
|
356
438
|
/>
|
|
357
439
|
{/if}
|
|
358
440
|
{/each}
|
|
@@ -362,7 +444,11 @@ import ImageModal from "./ImageModal.svelte";
|
|
|
362
444
|
{:else if !loading}
|
|
363
445
|
<tbody>
|
|
364
446
|
<tr>
|
|
365
|
-
<td
|
|
447
|
+
<td
|
|
448
|
+
colspan={tableHeaders.length +
|
|
449
|
+
(dragEnabled ? 1 : 0)}
|
|
450
|
+
class="no-data"
|
|
451
|
+
>
|
|
366
452
|
No hay datos disponibles
|
|
367
453
|
</td>
|
|
368
454
|
</tr>
|
|
@@ -11,7 +11,7 @@ export interface ButtonConfig {
|
|
|
11
11
|
export interface TableHeader {
|
|
12
12
|
titulo: string;
|
|
13
13
|
biSort: boolean;
|
|
14
|
-
tipo: 'Text' | 'Number' | 'Buttons' | 'Bool' | 'Image';
|
|
14
|
+
tipo: 'Text' | 'Number' | 'Buttons' | 'Bool' | 'Image' | 'Datetime' | 'Date';
|
|
15
15
|
biBold: boolean;
|
|
16
16
|
/**
|
|
17
17
|
* Alignment for the content of the cells belonging to this header.
|