@visns-studio/visns-components 5.1.11 → 5.1.14
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.14",
|
|
81
81
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
82
82
|
"main": "src/index.js",
|
|
83
83
|
"files": [
|
|
@@ -20,6 +20,15 @@ function Breadcrumb({ data, page }) {
|
|
|
20
20
|
? getNestedData(data, page.parentTitleKey)
|
|
21
21
|
: null;
|
|
22
22
|
|
|
23
|
+
// Function to handle titleKey when it's a nested path like 'event_detail.name'
|
|
24
|
+
const getTitleData = (data, titleKey) => {
|
|
25
|
+
if (typeof titleKey === 'string' && titleKey.includes('.')) {
|
|
26
|
+
const keys = titleKey.split('.'); // Split the nested path by "."
|
|
27
|
+
return getNestedData(data, keys); // Use getNestedData to fetch the nested value
|
|
28
|
+
}
|
|
29
|
+
return data[titleKey]; // If not nested, return the direct data
|
|
30
|
+
};
|
|
31
|
+
|
|
23
32
|
return (
|
|
24
33
|
<h1>
|
|
25
34
|
{page?.parentTitle && page?.parentUrl && (
|
|
@@ -332,6 +332,8 @@ function GenericDashboard({ setting }) {
|
|
|
332
332
|
const tableData = widgetData.data || widgetData;
|
|
333
333
|
const tableKeys = widgetData.keys || [];
|
|
334
334
|
|
|
335
|
+
console.info(tableKeys);
|
|
336
|
+
|
|
335
337
|
return (
|
|
336
338
|
<div className={styles['table-container']}>
|
|
337
339
|
{tableData.length > 0 ? (
|
|
@@ -339,120 +341,219 @@ function GenericDashboard({ setting }) {
|
|
|
339
341
|
<table>
|
|
340
342
|
<thead>
|
|
341
343
|
<tr>
|
|
342
|
-
<th>
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
344
|
+
<th>
|
|
345
|
+
{
|
|
346
|
+
widget.axisKeys
|
|
347
|
+
.columnHeading
|
|
348
|
+
}
|
|
349
|
+
</th>
|
|
350
|
+
{widget.axisKeys.xAxisHeadings
|
|
351
|
+
? widget.axisKeys.xAxisHeadings.map(
|
|
352
|
+
(heading, index) => (
|
|
353
|
+
<th
|
|
354
|
+
key={`${toSnakeCase(
|
|
355
|
+
heading
|
|
356
|
+
)}-${index}`}
|
|
357
|
+
>
|
|
358
|
+
{heading}
|
|
359
|
+
</th>
|
|
360
|
+
)
|
|
361
|
+
)
|
|
362
|
+
: widget.axisKeys.xAxis
|
|
363
|
+
? tableData.map(
|
|
364
|
+
(row, index) => (
|
|
365
|
+
<th
|
|
366
|
+
key={`${toSnakeCase(
|
|
367
|
+
row[
|
|
368
|
+
widget
|
|
369
|
+
.axisKeys
|
|
370
|
+
.xAxis
|
|
371
|
+
]
|
|
372
|
+
)}-${index}`}
|
|
373
|
+
>
|
|
374
|
+
{
|
|
375
|
+
row[
|
|
376
|
+
widget
|
|
377
|
+
.axisKeys
|
|
378
|
+
.xAxis
|
|
379
|
+
]
|
|
380
|
+
}
|
|
381
|
+
</th>
|
|
382
|
+
)
|
|
383
|
+
)
|
|
384
|
+
: null}
|
|
385
|
+
{widget.total.column && (
|
|
386
|
+
<th>Total</th>
|
|
387
|
+
)}
|
|
353
388
|
</tr>
|
|
354
389
|
</thead>
|
|
355
390
|
<tbody>
|
|
356
|
-
{tableKeys.
|
|
357
|
-
(
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
391
|
+
{tableKeys && tableKeys.length > 0
|
|
392
|
+
? tableKeys.map(
|
|
393
|
+
(type, typeIndex) => {
|
|
394
|
+
let total = 0; // Track total for the current form type
|
|
395
|
+
return (
|
|
396
|
+
<tr
|
|
397
|
+
key={`form-type-${toSnakeCase(
|
|
398
|
+
type
|
|
399
|
+
)}`}
|
|
400
|
+
>
|
|
401
|
+
{/* <td>{type}</td> */}
|
|
402
|
+
{widget.total
|
|
403
|
+
.column &&
|
|
404
|
+
tableData.map(
|
|
405
|
+
(
|
|
406
|
+
row,
|
|
407
|
+
rowIndex
|
|
408
|
+
) => {
|
|
409
|
+
const columnKey =
|
|
410
|
+
widget
|
|
411
|
+
.axisKeys
|
|
412
|
+
.columnKey[0];
|
|
413
|
+
const yAxisKey =
|
|
414
|
+
widget
|
|
415
|
+
.axisKeys
|
|
416
|
+
.yAxis;
|
|
417
|
+
const xAxisKey =
|
|
418
|
+
widget
|
|
419
|
+
.axisKeys
|
|
420
|
+
.xAxis;
|
|
421
|
+
|
|
422
|
+
const column =
|
|
423
|
+
row[
|
|
424
|
+
columnKey
|
|
425
|
+
]?.find(
|
|
426
|
+
(
|
|
427
|
+
col
|
|
428
|
+
) =>
|
|
429
|
+
col.form_template_label ===
|
|
430
|
+
type
|
|
431
|
+
);
|
|
432
|
+
const count =
|
|
433
|
+
column
|
|
434
|
+
? column[
|
|
435
|
+
yAxisKey
|
|
436
|
+
]
|
|
437
|
+
: 0;
|
|
438
|
+
total +=
|
|
439
|
+
count;
|
|
440
|
+
|
|
441
|
+
return (
|
|
442
|
+
<td
|
|
443
|
+
key={`${toSnakeCase(
|
|
444
|
+
row[
|
|
445
|
+
xAxisKey
|
|
446
|
+
]
|
|
447
|
+
)}-${typeIndex}-${rowIndex}`}
|
|
448
|
+
>
|
|
449
|
+
{
|
|
450
|
+
count
|
|
451
|
+
}
|
|
452
|
+
</td>
|
|
453
|
+
);
|
|
454
|
+
}
|
|
455
|
+
)}
|
|
456
|
+
<td>
|
|
457
|
+
<strong>
|
|
458
|
+
{
|
|
459
|
+
total
|
|
460
|
+
}
|
|
461
|
+
</strong>
|
|
462
|
+
</td>
|
|
463
|
+
</tr>
|
|
464
|
+
);
|
|
465
|
+
}
|
|
466
|
+
)
|
|
467
|
+
: tableData.map(
|
|
468
|
+
(row, rowIndex) => (
|
|
469
|
+
<tr
|
|
470
|
+
key={`table-data-${rowIndex}`}
|
|
471
|
+
>
|
|
472
|
+
{widget.axisKeys
|
|
473
|
+
.columnKey &&
|
|
474
|
+
widget.axisKeys.columnKey.map(
|
|
475
|
+
(
|
|
476
|
+
column,
|
|
477
|
+
columnIndex
|
|
478
|
+
) => (
|
|
479
|
+
<td
|
|
480
|
+
key={`table-data-${rowIndex}-${columnIndex}`}
|
|
481
|
+
>
|
|
482
|
+
{
|
|
483
|
+
row[
|
|
484
|
+
column
|
|
485
|
+
]
|
|
486
|
+
}
|
|
487
|
+
</td>
|
|
488
|
+
)
|
|
489
|
+
)}
|
|
490
|
+
</tr>
|
|
491
|
+
)
|
|
492
|
+
)}
|
|
379
493
|
|
|
380
|
-
const count =
|
|
381
|
-
form
|
|
382
|
-
? form.form_count
|
|
383
|
-
: 0;
|
|
384
|
-
|
|
385
|
-
total +=
|
|
386
|
-
count;
|
|
387
|
-
|
|
388
|
-
return (
|
|
389
|
-
<td
|
|
390
|
-
key={`${toSnakeCase(
|
|
391
|
-
row.supervisor_name
|
|
392
|
-
)}-${typeIndex}-${rowIndex}`}
|
|
393
|
-
>
|
|
394
|
-
{
|
|
395
|
-
count
|
|
396
|
-
}
|
|
397
|
-
</td>
|
|
398
|
-
);
|
|
399
|
-
}
|
|
400
|
-
)}
|
|
401
|
-
<td>
|
|
402
|
-
<strong>
|
|
403
|
-
{total}
|
|
404
|
-
</strong>
|
|
405
|
-
</td>
|
|
406
|
-
</tr>
|
|
407
|
-
);
|
|
408
|
-
}
|
|
409
|
-
)}
|
|
410
494
|
{/* Add a total row for supervisors */}
|
|
411
|
-
|
|
412
|
-
<
|
|
413
|
-
<
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
(
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
(
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
495
|
+
{widget.total.column && (
|
|
496
|
+
<tr>
|
|
497
|
+
<td>
|
|
498
|
+
<strong>Total</strong>
|
|
499
|
+
</td>
|
|
500
|
+
{tableData.map(
|
|
501
|
+
(row, rowIndex) => {
|
|
502
|
+
const tableTotal =
|
|
503
|
+
tableKeys.reduce(
|
|
504
|
+
(
|
|
505
|
+
sum,
|
|
506
|
+
type
|
|
507
|
+
) => {
|
|
508
|
+
const column =
|
|
509
|
+
row[
|
|
510
|
+
widget
|
|
511
|
+
.axisKeys
|
|
512
|
+
.columnKey
|
|
513
|
+
].find(
|
|
514
|
+
(
|
|
515
|
+
column
|
|
516
|
+
) =>
|
|
517
|
+
column.form_template_label ===
|
|
518
|
+
type
|
|
519
|
+
);
|
|
520
|
+
|
|
521
|
+
return (
|
|
522
|
+
sum +
|
|
523
|
+
(column
|
|
524
|
+
? column[
|
|
525
|
+
widget
|
|
526
|
+
.axisKeys
|
|
527
|
+
.yAxis
|
|
528
|
+
]
|
|
529
|
+
: 0)
|
|
427
530
|
);
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
531
|
+
},
|
|
532
|
+
0
|
|
533
|
+
);
|
|
534
|
+
|
|
535
|
+
return (
|
|
536
|
+
<td
|
|
537
|
+
key={`${toSnakeCase(
|
|
538
|
+
row[
|
|
539
|
+
widget
|
|
540
|
+
.axisKeys
|
|
541
|
+
.xAxis
|
|
542
|
+
]
|
|
543
|
+
)}-total-${rowIndex}`}
|
|
544
|
+
>
|
|
545
|
+
<strong>
|
|
546
|
+
{
|
|
547
|
+
tableTotal
|
|
548
|
+
}
|
|
549
|
+
</strong>
|
|
550
|
+
</td>
|
|
437
551
|
);
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
)}-total-${rowIndex}`}
|
|
444
|
-
>
|
|
445
|
-
<strong>
|
|
446
|
-
{
|
|
447
|
-
supervisorTotal
|
|
448
|
-
}
|
|
449
|
-
</strong>
|
|
450
|
-
</td>
|
|
451
|
-
);
|
|
452
|
-
}
|
|
453
|
-
)}
|
|
454
|
-
<td />
|
|
455
|
-
</tr>
|
|
552
|
+
}
|
|
553
|
+
)}
|
|
554
|
+
<td />
|
|
555
|
+
</tr>
|
|
556
|
+
)}
|
|
456
557
|
</tbody>
|
|
457
558
|
</table>
|
|
458
559
|
</div>
|
|
@@ -170,7 +170,6 @@ const GenericEditableTable = ({
|
|
|
170
170
|
};
|
|
171
171
|
|
|
172
172
|
const handleFieldChange = (value, fieldId, keyCounter) => {
|
|
173
|
-
console.info('handleFieldChange', value, fieldId, keyCounter);
|
|
174
173
|
setLocalData((prev) => {
|
|
175
174
|
const updatedDetail = [...prev];
|
|
176
175
|
updatedDetail[keyCounter] = {
|
|
@@ -157,7 +157,7 @@
|
|
|
157
157
|
border-top: 1px solid transparent !important;
|
|
158
158
|
border-left: 1px solid transparent !important;
|
|
159
159
|
border-right: 1px solid transparent !important;
|
|
160
|
-
border-bottom:
|
|
160
|
+
border-bottom: 2px solid rgba(var(--secondary-rgb), 0.9) !important;
|
|
161
161
|
|
|
162
162
|
h2 {
|
|
163
163
|
color: var(--highlight-color) !important;
|
|
@@ -165,13 +165,13 @@
|
|
|
165
165
|
|
|
166
166
|
.widgetTitle {
|
|
167
167
|
padding-bottom: 10px;
|
|
168
|
-
border-bottom:
|
|
168
|
+
border-bottom: 2px solid rgba(var(--secondary-rgb), 0.5);
|
|
169
169
|
}
|
|
170
170
|
}
|
|
171
171
|
|
|
172
172
|
.dashwidget--highlight {
|
|
173
173
|
background: var(--secondary-color) !important;
|
|
174
|
-
border-bottom:
|
|
174
|
+
border-bottom: 2px solid rgba(var(--secondary-rgb), 0.85) !important;
|
|
175
175
|
}
|
|
176
176
|
|
|
177
177
|
.widgetNo {
|
|
@@ -341,6 +341,10 @@
|
|
|
341
341
|
text-align: center;
|
|
342
342
|
}
|
|
343
343
|
|
|
344
|
+
.table-container th {
|
|
345
|
+
text-align: center;
|
|
346
|
+
}
|
|
347
|
+
|
|
344
348
|
.table-container tbody tr:hover {
|
|
345
349
|
background-color: #f9f9f9;
|
|
346
350
|
}
|