@visns-studio/visns-components 5.1.20 → 5.1.21
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
CHANGED
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
78
78
|
},
|
|
79
79
|
"name": "@visns-studio/visns-components",
|
|
80
|
-
"version": "5.1.
|
|
80
|
+
"version": "5.1.21",
|
|
81
81
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
82
82
|
"main": "src/index.js",
|
|
83
83
|
"files": [
|
|
@@ -206,8 +206,15 @@ const GenericEditableTable = ({
|
|
|
206
206
|
}, [localData, hasCategory]);
|
|
207
207
|
|
|
208
208
|
// Copy all values from a column to the clipboard
|
|
209
|
-
const handleColumnCopy = (column) => {
|
|
210
|
-
|
|
209
|
+
const handleColumnCopy = (column, group = null) => {
|
|
210
|
+
let values;
|
|
211
|
+
|
|
212
|
+
if (group) {
|
|
213
|
+
values = group.entries.map((entry) => entry[column.id]);
|
|
214
|
+
} else {
|
|
215
|
+
values = localData.map((entry) => entry[column.id]);
|
|
216
|
+
}
|
|
217
|
+
|
|
211
218
|
const textToCopy = values
|
|
212
219
|
.filter((val) => val !== undefined && val !== null)
|
|
213
220
|
.join('\n');
|
|
@@ -218,7 +225,9 @@ const GenericEditableTable = ({
|
|
|
218
225
|
toast.success(
|
|
219
226
|
`Copied ${values.length} value${
|
|
220
227
|
values.length !== 1 ? 's' : ''
|
|
221
|
-
} from "${column.label}"
|
|
228
|
+
} from "${column.label}"${
|
|
229
|
+
group ? ` (Group: ${group.category})` : ''
|
|
230
|
+
}`
|
|
222
231
|
)
|
|
223
232
|
)
|
|
224
233
|
.catch(() => toast.error('Failed to copy to clipboard'));
|
|
@@ -420,7 +429,7 @@ const GenericEditableTable = ({
|
|
|
420
429
|
const multiOptions = preloadedOptions[column.id] || [];
|
|
421
430
|
return (
|
|
422
431
|
<MultiSelect
|
|
423
|
-
settings={{ id: column.id }}
|
|
432
|
+
settings={{ id: column.id, compact: true }}
|
|
424
433
|
className={styles.selectFullWidth}
|
|
425
434
|
multi={false}
|
|
426
435
|
onChange={(value) =>
|
|
@@ -459,8 +468,11 @@ const GenericEditableTable = ({
|
|
|
459
468
|
};
|
|
460
469
|
|
|
461
470
|
// Render header cell with a label and copy icon
|
|
462
|
-
const renderHeaderCell = (column) => (
|
|
463
|
-
<th
|
|
471
|
+
const renderHeaderCell = (column, group = null) => (
|
|
472
|
+
<th
|
|
473
|
+
key={`${column.id}${group ? `-${group.id}` : ''}`}
|
|
474
|
+
style={{ width: column.width || 'auto' }}
|
|
475
|
+
>
|
|
464
476
|
<div
|
|
465
477
|
style={{
|
|
466
478
|
display: 'flex',
|
|
@@ -473,7 +485,7 @@ const GenericEditableTable = ({
|
|
|
473
485
|
<span
|
|
474
486
|
onClick={(e) => {
|
|
475
487
|
e.stopPropagation();
|
|
476
|
-
handleColumnCopy(column);
|
|
488
|
+
handleColumnCopy(column, group);
|
|
477
489
|
}}
|
|
478
490
|
style={{ cursor: 'pointer' }}
|
|
479
491
|
>
|
|
@@ -492,14 +504,6 @@ const GenericEditableTable = ({
|
|
|
492
504
|
{hasCategory ? (
|
|
493
505
|
groupedCategories.length > 0 ? (
|
|
494
506
|
<table className={styles.schedulingTable}>
|
|
495
|
-
<thead>
|
|
496
|
-
<tr>
|
|
497
|
-
{columns.map((column) =>
|
|
498
|
-
renderHeaderCell(column)
|
|
499
|
-
)}
|
|
500
|
-
<th style={{ width: '5%' }}></th>
|
|
501
|
-
</tr>
|
|
502
|
-
</thead>
|
|
503
507
|
<tbody>
|
|
504
508
|
{groupedCategories.map((group) => (
|
|
505
509
|
<React.Fragment key={group.id}>
|
|
@@ -508,6 +512,12 @@ const GenericEditableTable = ({
|
|
|
508
512
|
{group.category}
|
|
509
513
|
</td>
|
|
510
514
|
</tr>
|
|
515
|
+
<tr>
|
|
516
|
+
{columns.map((column) =>
|
|
517
|
+
renderHeaderCell(column, group)
|
|
518
|
+
)}
|
|
519
|
+
<th style={{ width: '5%' }}></th>
|
|
520
|
+
</tr>
|
|
511
521
|
{group.entries.map((entry, idx) => (
|
|
512
522
|
<tr
|
|
513
523
|
key={entry.id}
|
|
@@ -520,9 +530,6 @@ const GenericEditableTable = ({
|
|
|
520
530
|
<td
|
|
521
531
|
key={column.id}
|
|
522
532
|
style={{
|
|
523
|
-
width:
|
|
524
|
-
column.width ||
|
|
525
|
-
'auto',
|
|
526
533
|
textAlign:
|
|
527
534
|
column.type ===
|
|
528
535
|
'currency'
|
|
@@ -588,55 +595,6 @@ const GenericEditableTable = ({
|
|
|
588
595
|
</td>
|
|
589
596
|
</tr>
|
|
590
597
|
))}
|
|
591
|
-
<tr className={styles.subtotalRow}>
|
|
592
|
-
{columns.map((column, index) => (
|
|
593
|
-
<td key={column.id}>
|
|
594
|
-
{index === columns.length - 1
|
|
595
|
-
? group.entries
|
|
596
|
-
.reduce(
|
|
597
|
-
(sum, entry) => {
|
|
598
|
-
const subtotal =
|
|
599
|
-
Array.isArray(
|
|
600
|
-
column.keys
|
|
601
|
-
)
|
|
602
|
-
? column.keys.reduce(
|
|
603
|
-
(
|
|
604
|
-
rowSum,
|
|
605
|
-
key
|
|
606
|
-
) =>
|
|
607
|
-
rowSum +
|
|
608
|
-
(parseFloat(
|
|
609
|
-
entry[
|
|
610
|
-
key
|
|
611
|
-
]
|
|
612
|
-
) ||
|
|
613
|
-
0),
|
|
614
|
-
0
|
|
615
|
-
)
|
|
616
|
-
: 0;
|
|
617
|
-
return (
|
|
618
|
-
sum +
|
|
619
|
-
subtotal
|
|
620
|
-
);
|
|
621
|
-
},
|
|
622
|
-
0
|
|
623
|
-
)
|
|
624
|
-
.toLocaleString(
|
|
625
|
-
'en-AU',
|
|
626
|
-
{
|
|
627
|
-
style: 'currency',
|
|
628
|
-
currency:
|
|
629
|
-
'AUD',
|
|
630
|
-
}
|
|
631
|
-
)
|
|
632
|
-
: index ===
|
|
633
|
-
columns.length - 2
|
|
634
|
-
? 'Subtotal'
|
|
635
|
-
: ''}
|
|
636
|
-
</td>
|
|
637
|
-
))}
|
|
638
|
-
<td></td>
|
|
639
|
-
</tr>
|
|
640
598
|
</React.Fragment>
|
|
641
599
|
))}
|
|
642
600
|
</tbody>
|
|
@@ -11,8 +11,8 @@
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
th {
|
|
14
|
-
padding: 0.
|
|
15
|
-
font-size:
|
|
14
|
+
padding: 0.25rem 0.5rem; // Less padding than before
|
|
15
|
+
font-size: 0.9rem; // Slightly smaller font size
|
|
16
16
|
font-weight: bold;
|
|
17
17
|
background-color: var(--primary-color);
|
|
18
18
|
color: white;
|
|
@@ -220,8 +220,8 @@
|
|
|
220
220
|
flex: 1;
|
|
221
221
|
|
|
222
222
|
button {
|
|
223
|
-
width:
|
|
224
|
-
height:
|
|
223
|
+
width: 32px;
|
|
224
|
+
height: 32px;
|
|
225
225
|
font-size: 1.5rem;
|
|
226
226
|
font-weight: 600;
|
|
227
227
|
color: #fff;
|
|
@@ -248,3 +248,42 @@
|
|
|
248
248
|
}
|
|
249
249
|
}
|
|
250
250
|
}
|
|
251
|
+
|
|
252
|
+
/* Compact styling for native input and select elements */
|
|
253
|
+
input,
|
|
254
|
+
select {
|
|
255
|
+
padding: 0.25rem 0.5rem;
|
|
256
|
+
margin: 0;
|
|
257
|
+
font-size: 0.85rem;
|
|
258
|
+
height: 28px;
|
|
259
|
+
line-height: 1;
|
|
260
|
+
border: 1px solid rgba(var(--primary-rgb), 0.1);
|
|
261
|
+
box-sizing: border-box;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
/* Compact styling for react-select components */
|
|
265
|
+
.react-select__control {
|
|
266
|
+
min-height: 28px;
|
|
267
|
+
padding: 0;
|
|
268
|
+
font-size: 0.85rem;
|
|
269
|
+
border: 1px solid rgba(var(--primary-rgb), 0.1);
|
|
270
|
+
box-sizing: border-box;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.react-select__value-container {
|
|
274
|
+
padding: 0 0.5rem;
|
|
275
|
+
margin: 0;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.react-select__input {
|
|
279
|
+
margin: 0;
|
|
280
|
+
padding: 0;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.react-select__indicator-separator {
|
|
284
|
+
display: none;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.react-select__indicators {
|
|
288
|
+
padding: 0 0.25rem;
|
|
289
|
+
}
|