@visns-studio/visns-components 5.12.16 → 5.13.0
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
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
88
88
|
},
|
|
89
89
|
"name": "@visns-studio/visns-components",
|
|
90
|
-
"version": "5.
|
|
90
|
+
"version": "5.13.0",
|
|
91
91
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
92
92
|
"main": "src/index.js",
|
|
93
93
|
"files": [
|
|
@@ -354,8 +354,14 @@ export const renderDropdownColumn = ({
|
|
|
354
354
|
return (
|
|
355
355
|
<select
|
|
356
356
|
name={column.id}
|
|
357
|
-
value={data[column.id]?.id || ''}
|
|
358
|
-
style={{
|
|
357
|
+
value={data[column.id]?.id || data[column.id] || ''}
|
|
358
|
+
style={{
|
|
359
|
+
padding: '7px',
|
|
360
|
+
width: '100%',
|
|
361
|
+
border: 'none',
|
|
362
|
+
backgroundColor: 'transparent',
|
|
363
|
+
outline: 'none',
|
|
364
|
+
}}
|
|
359
365
|
onChange={(e) => {
|
|
360
366
|
e.preventDefault();
|
|
361
367
|
|
|
@@ -384,10 +390,55 @@ export const renderDropdownColumn = ({
|
|
|
384
390
|
{option.label}
|
|
385
391
|
</option>
|
|
386
392
|
))
|
|
393
|
+
: column.options && column.options.length > 0
|
|
394
|
+
? column.options.map((option, index) => (
|
|
395
|
+
<option value={option.id} key={index}>
|
|
396
|
+
{option.label}
|
|
397
|
+
</option>
|
|
398
|
+
))
|
|
387
399
|
: null}
|
|
388
400
|
</select>
|
|
389
401
|
);
|
|
390
402
|
},
|
|
403
|
+
cellProps: ({ data }) => {
|
|
404
|
+
// Find the selected option to get its color
|
|
405
|
+
const selectedValue = data[column.id]?.id || data[column.id] || '';
|
|
406
|
+
let selectedOption = null;
|
|
407
|
+
|
|
408
|
+
// Debug logging
|
|
409
|
+
console.log('Dropdown cellProps debug:', {
|
|
410
|
+
columnId: column.id,
|
|
411
|
+
selectedValue,
|
|
412
|
+
dataValue: data[column.id],
|
|
413
|
+
dropdownData: dropdownData[column.id],
|
|
414
|
+
columnOptions: column.options
|
|
415
|
+
});
|
|
416
|
+
|
|
417
|
+
if (selectedValue && dropdownData[column.id]) {
|
|
418
|
+
selectedOption = dropdownData[column.id].find(option => option.id === selectedValue);
|
|
419
|
+
console.log('Found option in dropdownData:', selectedOption);
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
// If no option found in dropdownData, check if column has options array
|
|
423
|
+
if (!selectedOption && selectedValue && column.options) {
|
|
424
|
+
selectedOption = column.options.find(option => option.id === selectedValue);
|
|
425
|
+
console.log('Found option in column.options:', selectedOption);
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
// Return cell props with background color
|
|
429
|
+
if (selectedOption?.colour) {
|
|
430
|
+
console.log('Applying background color:', selectedOption.colour);
|
|
431
|
+
return {
|
|
432
|
+
style: {
|
|
433
|
+
backgroundColor: selectedOption.colour,
|
|
434
|
+
color: '#000',
|
|
435
|
+
}
|
|
436
|
+
};
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
console.log('No color found, returning empty props');
|
|
440
|
+
return {};
|
|
441
|
+
},
|
|
391
442
|
};
|
|
392
443
|
};
|
|
393
444
|
|
|
@@ -305,6 +305,55 @@ const GenericEditableTable = ({
|
|
|
305
305
|
return coloursValue ? `${coloursValue}40` : undefined; // Add 40% opacity
|
|
306
306
|
};
|
|
307
307
|
|
|
308
|
+
// Helper function to get background color for dropdown and total cells
|
|
309
|
+
const getCellBackground = (entry, column) => {
|
|
310
|
+
// For dropdown columns, get color from selected option
|
|
311
|
+
if (column.type === 'dropdown' && column.options) {
|
|
312
|
+
const selectedValue = entry[column.id];
|
|
313
|
+
if (!selectedValue) return undefined;
|
|
314
|
+
|
|
315
|
+
// Debug logging
|
|
316
|
+
console.log('GenericEditableTable dropdown debug:', {
|
|
317
|
+
columnId: column.id,
|
|
318
|
+
selectedValue,
|
|
319
|
+
columnOptions: column.options
|
|
320
|
+
});
|
|
321
|
+
|
|
322
|
+
const selectedOption = column.options.find(option => option.id === selectedValue);
|
|
323
|
+
console.log('Found selected option:', selectedOption);
|
|
324
|
+
|
|
325
|
+
return selectedOption?.colour || undefined;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
// For total columns, look for a status column with color information
|
|
329
|
+
if (column.type === 'total') {
|
|
330
|
+
// Find the status column (typically named 'status' and has dropdown type with options)
|
|
331
|
+
const statusColumn = columns.find(col =>
|
|
332
|
+
col.type === 'dropdown' &&
|
|
333
|
+
col.options &&
|
|
334
|
+
col.options.some(option => option.colour) &&
|
|
335
|
+
(col.id === 'status' || col.id.toLowerCase().includes('status'))
|
|
336
|
+
);
|
|
337
|
+
|
|
338
|
+
if (statusColumn) {
|
|
339
|
+
const statusValue = entry[statusColumn.id];
|
|
340
|
+
if (statusValue) {
|
|
341
|
+
const statusOption = statusColumn.options.find(option => option.id === statusValue);
|
|
342
|
+
console.log('Total column using status color:', {
|
|
343
|
+
totalColumnId: column.id,
|
|
344
|
+
statusColumnId: statusColumn.id,
|
|
345
|
+
statusValue,
|
|
346
|
+
statusOption
|
|
347
|
+
});
|
|
348
|
+
return statusOption?.colour || undefined;
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
return undefined;
|
|
354
|
+
};
|
|
355
|
+
|
|
356
|
+
|
|
308
357
|
// Calculate total for columns of type 'total'
|
|
309
358
|
const calculateTotal = (entry, keys) => {
|
|
310
359
|
let total = 0;
|
|
@@ -813,6 +862,22 @@ const GenericEditableTable = ({
|
|
|
813
862
|
readOnly={column.readOnly || false}
|
|
814
863
|
/>
|
|
815
864
|
);
|
|
865
|
+
case 'html5_date':
|
|
866
|
+
return (
|
|
867
|
+
<input
|
|
868
|
+
type="date"
|
|
869
|
+
value={entry[column.id] || ''}
|
|
870
|
+
onChange={(e) =>
|
|
871
|
+
handleFieldChange(
|
|
872
|
+
e.target.value,
|
|
873
|
+
column.id,
|
|
874
|
+
keyCounter
|
|
875
|
+
)
|
|
876
|
+
}
|
|
877
|
+
style={{ textAlign: 'right' }}
|
|
878
|
+
readOnly={column.readOnly || false}
|
|
879
|
+
/>
|
|
880
|
+
);
|
|
816
881
|
case 'dropdown':
|
|
817
882
|
return (
|
|
818
883
|
<select
|
|
@@ -951,6 +1016,21 @@ const GenericEditableTable = ({
|
|
|
951
1016
|
style={{ textAlign: 'right' }}
|
|
952
1017
|
/>
|
|
953
1018
|
);
|
|
1019
|
+
case 'html5_date':
|
|
1020
|
+
return (
|
|
1021
|
+
<input
|
|
1022
|
+
type="date"
|
|
1023
|
+
value={value || ''}
|
|
1024
|
+
onChange={(e) =>
|
|
1025
|
+
handleNewFieldChange(
|
|
1026
|
+
e.target.value,
|
|
1027
|
+
column.id,
|
|
1028
|
+
groupId
|
|
1029
|
+
)
|
|
1030
|
+
}
|
|
1031
|
+
style={{ textAlign: 'right' }}
|
|
1032
|
+
/>
|
|
1033
|
+
);
|
|
954
1034
|
case 'dropdown':
|
|
955
1035
|
return (
|
|
956
1036
|
<select
|
|
@@ -1211,24 +1291,29 @@ const GenericEditableTable = ({
|
|
|
1211
1291
|
}}
|
|
1212
1292
|
>
|
|
1213
1293
|
{renderRowCheckbox(entry)}
|
|
1214
|
-
{columns.map((column) =>
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1294
|
+
{columns.map((column) => {
|
|
1295
|
+
const cellBgColor = getCellBackground(entry, column);
|
|
1296
|
+
return (
|
|
1297
|
+
<td
|
|
1298
|
+
key={column.id}
|
|
1299
|
+
style={{
|
|
1300
|
+
textAlign:
|
|
1301
|
+
column.type ===
|
|
1302
|
+
'currency'
|
|
1303
|
+
? 'right'
|
|
1304
|
+
: 'left',
|
|
1305
|
+
backgroundColor: cellBgColor,
|
|
1306
|
+
color: cellBgColor ? '#000' : 'inherit',
|
|
1307
|
+
}}
|
|
1308
|
+
>
|
|
1309
|
+
{renderScheduledTableField(
|
|
1310
|
+
entry,
|
|
1311
|
+
column,
|
|
1312
|
+
entry.keyCounter
|
|
1313
|
+
)}
|
|
1314
|
+
</td>
|
|
1315
|
+
);
|
|
1316
|
+
})}
|
|
1232
1317
|
<td>
|
|
1233
1318
|
<div
|
|
1234
1319
|
className={styles.tdactions}
|
|
@@ -1388,36 +1473,31 @@ const GenericEditableTable = ({
|
|
|
1388
1473
|
}}
|
|
1389
1474
|
>
|
|
1390
1475
|
{renderRowCheckbox(entry)}
|
|
1391
|
-
{columns.map((column) =>
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
column.
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1476
|
+
{columns.map((column) => {
|
|
1477
|
+
const cellBgColor = getCellBackground(entry, column);
|
|
1478
|
+
return (
|
|
1479
|
+
<td
|
|
1480
|
+
key={column.id}
|
|
1481
|
+
style={{
|
|
1482
|
+
width: column.width || 'auto',
|
|
1483
|
+
textAlign:
|
|
1484
|
+
column.type === 'currency'
|
|
1485
|
+
? 'right'
|
|
1486
|
+
: 'left',
|
|
1487
|
+
backgroundColor: cellBgColor,
|
|
1488
|
+
color: cellBgColor ? '#000' : 'inherit',
|
|
1489
|
+
}}
|
|
1490
|
+
>
|
|
1491
|
+
{renderScheduledTableField(
|
|
1492
|
+
entry,
|
|
1493
|
+
column,
|
|
1494
|
+
idx
|
|
1495
|
+
)}
|
|
1496
|
+
</td>
|
|
1497
|
+
);
|
|
1498
|
+
})}
|
|
1409
1499
|
<td>
|
|
1410
1500
|
<div className={styles.tdactions}>
|
|
1411
|
-
{!hasColourColumn && (
|
|
1412
|
-
<ColourPicker
|
|
1413
|
-
value={
|
|
1414
|
-
entry.row_colour || ''
|
|
1415
|
-
}
|
|
1416
|
-
columnId={'row_colour'}
|
|
1417
|
-
keyCounter={idx}
|
|
1418
|
-
onChange={handleFieldChange}
|
|
1419
|
-
/>
|
|
1420
|
-
)}
|
|
1421
1501
|
{idx > 0 && (
|
|
1422
1502
|
<Tooltip text="Move up">
|
|
1423
1503
|
<ArrowUp
|