@visns-studio/visns-components 5.1.12 → 5.1.15
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.15",
|
|
81
81
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
82
82
|
"main": "src/index.js",
|
|
83
83
|
"files": [
|
|
@@ -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>
|
|
@@ -515,9 +515,13 @@ function GenericDetail({
|
|
|
515
515
|
if (item.relation?.length > 0) {
|
|
516
516
|
item.relation.forEach((r, rKey) => {
|
|
517
517
|
if (rKey === 0) {
|
|
518
|
-
|
|
518
|
+
if (data[r]) {
|
|
519
|
+
fileData = data[r];
|
|
520
|
+
}
|
|
519
521
|
} else {
|
|
520
|
-
|
|
522
|
+
if (fileData[r]) {
|
|
523
|
+
fileData = fileData[r];
|
|
524
|
+
}
|
|
521
525
|
}
|
|
522
526
|
});
|
|
523
527
|
}
|
|
@@ -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
|
}
|