@visns-studio/visns-components 4.10.42 → 4.10.43
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": "4.10.
|
|
80
|
+
"version": "4.10.43",
|
|
81
81
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
82
82
|
"main": "src/index.js",
|
|
83
83
|
"files": [
|
|
@@ -571,20 +571,11 @@ const DataGrid = forwardRef(
|
|
|
571
571
|
break;
|
|
572
572
|
case 'form':
|
|
573
573
|
if (s.key) {
|
|
574
|
-
console.info('Form Setting Data:', formSettingData);
|
|
575
574
|
let fsd = s.form;
|
|
576
575
|
|
|
577
576
|
if (fsd.fields && fsd.fields.length > 0) {
|
|
578
|
-
console.info(
|
|
579
|
-
'Form Setting Data Fields:',
|
|
580
|
-
fsd.fields.length
|
|
581
|
-
);
|
|
582
577
|
fsd.fields.forEach((fItem, fKey) => {
|
|
583
578
|
if (fItem.id === s.key) {
|
|
584
|
-
console.info(
|
|
585
|
-
'Form Setting Data Fields ID:',
|
|
586
|
-
fItem.id
|
|
587
|
-
);
|
|
588
579
|
fsd.fields[fKey].value = d.id;
|
|
589
580
|
}
|
|
590
581
|
});
|
|
@@ -765,7 +756,9 @@ const DataGrid = forwardRef(
|
|
|
765
756
|
} else {
|
|
766
757
|
const column = rowProps.columns[columnIndex];
|
|
767
758
|
|
|
768
|
-
|
|
759
|
+
const excludedColumnTypes = ['dropdown', 'text_input'];
|
|
760
|
+
|
|
761
|
+
if (!excludedColumnTypes.includes(column.type)) {
|
|
769
762
|
if (column.id !== '__checkbox-column') {
|
|
770
763
|
if (column.link && column.link.hasOwnProperty('url')) {
|
|
771
764
|
if (column.link.url) {
|
|
@@ -2344,6 +2337,51 @@ const DataGrid = forwardRef(
|
|
|
2344
2337
|
return <span>{stage}</span>;
|
|
2345
2338
|
},
|
|
2346
2339
|
};
|
|
2340
|
+
case 'text_input':
|
|
2341
|
+
columnId = Array.isArray(column.id)
|
|
2342
|
+
? column.id.join('-')
|
|
2343
|
+
: column.id;
|
|
2344
|
+
|
|
2345
|
+
return {
|
|
2346
|
+
...commonProps,
|
|
2347
|
+
name: columnId,
|
|
2348
|
+
render: ({ data }) => {
|
|
2349
|
+
const debouncedOnChange = debounce(
|
|
2350
|
+
(name, value) => {
|
|
2351
|
+
if (
|
|
2352
|
+
column.update?.key &&
|
|
2353
|
+
column.update?.url &&
|
|
2354
|
+
column.update?.method
|
|
2355
|
+
) {
|
|
2356
|
+
handleDropdownUpdate(
|
|
2357
|
+
column.update.key,
|
|
2358
|
+
`${column.update.url}/${data.id}`,
|
|
2359
|
+
column.update.method,
|
|
2360
|
+
value
|
|
2361
|
+
);
|
|
2362
|
+
}
|
|
2363
|
+
},
|
|
2364
|
+
1000
|
|
2365
|
+
);
|
|
2366
|
+
|
|
2367
|
+
const handleChange = (e) => {
|
|
2368
|
+
const { name, value } = e.target;
|
|
2369
|
+
debouncedOnChange(name, value);
|
|
2370
|
+
};
|
|
2371
|
+
|
|
2372
|
+
return (
|
|
2373
|
+
<input
|
|
2374
|
+
name={column.id}
|
|
2375
|
+
defaultValue={
|
|
2376
|
+
data[column.id] || ''
|
|
2377
|
+
}
|
|
2378
|
+
style={{ padding: '7px' }}
|
|
2379
|
+
onChange={handleChange}
|
|
2380
|
+
type="text"
|
|
2381
|
+
/>
|
|
2382
|
+
);
|
|
2383
|
+
},
|
|
2384
|
+
};
|
|
2347
2385
|
case 'time':
|
|
2348
2386
|
return {
|
|
2349
2387
|
...commonProps,
|
|
@@ -619,7 +619,6 @@ function Form({
|
|
|
619
619
|
validation += `${item.label} is a required field.<br/>`;
|
|
620
620
|
_inputClass[item.id] = styles.inputError;
|
|
621
621
|
} else {
|
|
622
|
-
console.info('b', formData, item.id);
|
|
623
622
|
validation += `${item.label} is a required field.<br/>`;
|
|
624
623
|
_inputClass[item.id] = styles.inputError;
|
|
625
624
|
}
|
|
@@ -192,6 +192,7 @@ function GenericDetail({
|
|
|
192
192
|
relationKey,
|
|
193
193
|
size,
|
|
194
194
|
truncateLength,
|
|
195
|
+
checkboxLabel,
|
|
195
196
|
} = item;
|
|
196
197
|
const value =
|
|
197
198
|
relation && relation.length > 0 && type !== 'total'
|
|
@@ -264,16 +265,22 @@ function GenericDetail({
|
|
|
264
265
|
return '';
|
|
265
266
|
}
|
|
266
267
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
268
|
+
// Create a lookup map for checkbox labels if it exists
|
|
269
|
+
const labelMap = checkboxLabel
|
|
270
|
+
? checkboxLabel.reduce((map, item) => {
|
|
271
|
+
map[item.id] = item.label;
|
|
272
|
+
return map;
|
|
273
|
+
}, {})
|
|
274
|
+
: {};
|
|
274
275
|
|
|
275
276
|
const keys = Object.keys(value)
|
|
276
|
-
.filter(
|
|
277
|
+
.filter(
|
|
278
|
+
(key) =>
|
|
279
|
+
(typeof value[key] === 'boolean' ||
|
|
280
|
+
typeof value[key] === 'string') &&
|
|
281
|
+
value[key] &&
|
|
282
|
+
key !== 'notes'
|
|
283
|
+
)
|
|
277
284
|
.sort((a, b) => {
|
|
278
285
|
if (a === 'other') return 1;
|
|
279
286
|
if (b === 'other') return -1;
|
|
@@ -281,25 +288,30 @@ function GenericDetail({
|
|
|
281
288
|
});
|
|
282
289
|
|
|
283
290
|
const formattedKeys = keys.map((key) => {
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
type
|
|
291
|
-
);
|
|
292
|
-
|
|
293
|
-
if (otherValue) {
|
|
294
|
-
formattedKey += `: ${otherValue}`;
|
|
295
|
-
}
|
|
291
|
+
// Use the label if available; otherwise, fallback to the formatted key
|
|
292
|
+
let label = labelMap[key] || formatKey(key);
|
|
293
|
+
|
|
294
|
+
// If the value is a string, append it directly to the label
|
|
295
|
+
if (typeof value[key] === 'string') {
|
|
296
|
+
return `${label}: ${value[key]}`;
|
|
296
297
|
}
|
|
297
|
-
|
|
298
|
+
|
|
299
|
+
// Return the label for boolean values
|
|
300
|
+
return label;
|
|
298
301
|
});
|
|
299
302
|
|
|
300
303
|
return formattedKeys.join(', ');
|
|
301
304
|
};
|
|
302
305
|
|
|
306
|
+
// Helper function to format the key as a fallback
|
|
307
|
+
const formatKey = (key) => {
|
|
308
|
+
return key
|
|
309
|
+
.toLowerCase()
|
|
310
|
+
.split('_')
|
|
311
|
+
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
312
|
+
.join(' ');
|
|
313
|
+
};
|
|
314
|
+
|
|
303
315
|
const renderDate = () => formatDateValue(value);
|
|
304
316
|
|
|
305
317
|
const renderDateTime = () => formatDateTimeValue(value);
|