@visns-studio/visns-components 4.8.4 → 4.8.6
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 +1 -1
- package/src/components/crm/Field.jsx +46 -3
- package/src/components/crm/generic/GenericDetail.jsx +2 -3
- package/src/components/crm/generic/GenericDynamic.jsx +9 -5
- package/src/components/crm/generic/GenericFormBuilder.jsx +0 -2
- package/src/components/crm/styles/Field.module.scss +35 -0
package/package.json
CHANGED
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
76
76
|
},
|
|
77
77
|
"name": "@visns-studio/visns-components",
|
|
78
|
-
"version": "4.8.
|
|
78
|
+
"version": "4.8.6",
|
|
79
79
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
80
80
|
"main": "src/index.js",
|
|
81
81
|
"files": [
|
|
@@ -305,6 +305,12 @@ function Field({
|
|
|
305
305
|
}
|
|
306
306
|
} else if (['plaintextheading'].includes(settings.type)) {
|
|
307
307
|
return <h2>{settings.label ? settings.label : ''}</h2>;
|
|
308
|
+
} else if (['section'].includes(settings.type)) {
|
|
309
|
+
return (
|
|
310
|
+
<div className={styles.gridtxt__header}>
|
|
311
|
+
<span>{settings.label}</span>
|
|
312
|
+
</div>
|
|
313
|
+
);
|
|
308
314
|
}
|
|
309
315
|
};
|
|
310
316
|
|
|
@@ -1237,7 +1243,6 @@ function Field({
|
|
|
1237
1243
|
for (const key in formData) {
|
|
1238
1244
|
if (formData[key].id === settings.id) {
|
|
1239
1245
|
if (formData[key].hasOwnProperty('options')) {
|
|
1240
|
-
console.info(formData[key].rows, 'test form');
|
|
1241
1246
|
tableRadioColumns = formData[key].options;
|
|
1242
1247
|
tableRadioRows = formData[key].rows;
|
|
1243
1248
|
break; // Assuming there's only one match needed, break out of the loop
|
|
@@ -1254,6 +1259,7 @@ function Field({
|
|
|
1254
1259
|
checked={cell[cellKey] || false}
|
|
1255
1260
|
data-id={settings.id}
|
|
1256
1261
|
onChange={(e) => {
|
|
1262
|
+
e.stopPropagation(); // Stop event bubbling
|
|
1257
1263
|
onChangeTableRadio(e, rowKey, cellKey);
|
|
1258
1264
|
}}
|
|
1259
1265
|
/>
|
|
@@ -1332,7 +1338,7 @@ function Field({
|
|
|
1332
1338
|
}}
|
|
1333
1339
|
/>
|
|
1334
1340
|
);
|
|
1335
|
-
|
|
1341
|
+
case 'text':
|
|
1336
1342
|
return (
|
|
1337
1343
|
<input
|
|
1338
1344
|
type={'text'}
|
|
@@ -1343,6 +1349,22 @@ function Field({
|
|
|
1343
1349
|
}
|
|
1344
1350
|
/>
|
|
1345
1351
|
);
|
|
1352
|
+
default:
|
|
1353
|
+
return (
|
|
1354
|
+
<input
|
|
1355
|
+
type={'checkbox'}
|
|
1356
|
+
checked={cell[cellKey] || false}
|
|
1357
|
+
data-id={settings.id}
|
|
1358
|
+
style={{
|
|
1359
|
+
transform: 'scale(1.5)', // Scale the checkbox to make it bigger
|
|
1360
|
+
margin: '5px', // Optional: Add some margin around the checkbox
|
|
1361
|
+
}}
|
|
1362
|
+
onChange={(e) => {
|
|
1363
|
+
e.stopPropagation(); // Stop event bubbling
|
|
1364
|
+
onChangeTableRadio(e, rowKey, cellKey);
|
|
1365
|
+
}}
|
|
1366
|
+
/>
|
|
1367
|
+
);
|
|
1346
1368
|
}
|
|
1347
1369
|
};
|
|
1348
1370
|
|
|
@@ -1351,12 +1373,21 @@ function Field({
|
|
|
1351
1373
|
<thead>
|
|
1352
1374
|
<tr>
|
|
1353
1375
|
<th></th>
|
|
1354
|
-
{tableRadioColumns.map((column) => (
|
|
1376
|
+
{tableRadioColumns.map((column, columnKey) => (
|
|
1355
1377
|
<th
|
|
1356
1378
|
key={`${settings.id}-${column.id}`}
|
|
1357
1379
|
style={{
|
|
1358
1380
|
width: '250px',
|
|
1359
1381
|
whiteSpace: 'nowrap',
|
|
1382
|
+
textAlign:
|
|
1383
|
+
tableRadioColumns[columnKey]
|
|
1384
|
+
.type === '' ||
|
|
1385
|
+
tableRadioColumns[columnKey]
|
|
1386
|
+
.type === null ||
|
|
1387
|
+
tableRadioColumns[columnKey]
|
|
1388
|
+
.type === 'checkbox'
|
|
1389
|
+
? 'center'
|
|
1390
|
+
: 'left',
|
|
1360
1391
|
}}
|
|
1361
1392
|
>
|
|
1362
1393
|
{column.label}
|
|
@@ -1379,6 +1410,17 @@ function Field({
|
|
|
1379
1410
|
{tableRadioColumns.map((cell, cellKey) => (
|
|
1380
1411
|
<td
|
|
1381
1412
|
key={`table-radio-cell-${settings.id}-${row.id}-${cell.id}`}
|
|
1413
|
+
style={{
|
|
1414
|
+
textAlign:
|
|
1415
|
+
tableRadioColumns[cellKey]
|
|
1416
|
+
.type === '' ||
|
|
1417
|
+
tableRadioColumns[cellKey]
|
|
1418
|
+
.type === null ||
|
|
1419
|
+
tableRadioColumns[cellKey]
|
|
1420
|
+
.type === 'checkbox'
|
|
1421
|
+
? 'center'
|
|
1422
|
+
: 'left',
|
|
1423
|
+
}}
|
|
1382
1424
|
>
|
|
1383
1425
|
{renderTableRadioField(
|
|
1384
1426
|
tableRadioColumns[cellKey],
|
|
@@ -1620,6 +1662,7 @@ function Field({
|
|
|
1620
1662
|
'radio',
|
|
1621
1663
|
'radio-ajax',
|
|
1622
1664
|
'richeditor',
|
|
1665
|
+
'section',
|
|
1623
1666
|
'signature',
|
|
1624
1667
|
'table_radio',
|
|
1625
1668
|
'table_text',
|
|
@@ -236,11 +236,10 @@ function GenericDetail({
|
|
|
236
236
|
{size === 'full' && truncatedValue
|
|
237
237
|
? parse(`<br /><p>${truncatedValue}</p>`)
|
|
238
238
|
: truncatedValue}
|
|
239
|
-
aaa
|
|
240
239
|
<CopyToClipboard
|
|
241
240
|
text={
|
|
242
|
-
|
|
243
|
-
?
|
|
241
|
+
stringValue && stringValue !== 'null'
|
|
242
|
+
? stringValue
|
|
244
243
|
: ''
|
|
245
244
|
}
|
|
246
245
|
onCopy={() => console.info('copied')}
|
|
@@ -269,10 +269,6 @@ const GenericDynamic = ({
|
|
|
269
269
|
});
|
|
270
270
|
};
|
|
271
271
|
|
|
272
|
-
useEffect(() => {
|
|
273
|
-
console.info(activeForm);
|
|
274
|
-
}, [activeForm]);
|
|
275
|
-
|
|
276
272
|
const handleChangeAddTableTextRow = (id) => {
|
|
277
273
|
setActiveForm((prevActiveForm) => {
|
|
278
274
|
// Find the key of the form that matches the id
|
|
@@ -539,10 +535,18 @@ const GenericDynamic = ({
|
|
|
539
535
|
try {
|
|
540
536
|
let error = '';
|
|
541
537
|
|
|
538
|
+
const excludedTypes = [
|
|
539
|
+
'dynamicdata',
|
|
540
|
+
'plaintext',
|
|
541
|
+
'plaintextheading',
|
|
542
|
+
'section',
|
|
543
|
+
'table_radio',
|
|
544
|
+
];
|
|
545
|
+
|
|
542
546
|
Object.entries(activeForm).forEach(([key, field]) => {
|
|
543
547
|
if (
|
|
544
548
|
field.required === true &&
|
|
545
|
-
field.type
|
|
549
|
+
!excludedTypes.includes(field.type) &&
|
|
546
550
|
(field.value === null || field.value === '')
|
|
547
551
|
) {
|
|
548
552
|
error += `<p>${field.label} is required</p>`;
|
|
@@ -309,3 +309,38 @@ input[type='file']:hover {
|
|
|
309
309
|
.contentTable tbody tr:nth-of-type(even) {
|
|
310
310
|
background: rgba(var(--item-color-rgb), 1.02);
|
|
311
311
|
}
|
|
312
|
+
|
|
313
|
+
.gridtxt__header {
|
|
314
|
+
width: 100%;
|
|
315
|
+
display: block;
|
|
316
|
+
background: var(--border-color);
|
|
317
|
+
box-sizing: border-box;
|
|
318
|
+
padding: 10px 20px;
|
|
319
|
+
border-top-left-radius: var(--br);
|
|
320
|
+
border-top-right-radius: var(--br);
|
|
321
|
+
margin-bottom: 0;
|
|
322
|
+
font-weight: 700;
|
|
323
|
+
text-align: center;
|
|
324
|
+
color: var(--paragraph-color);
|
|
325
|
+
position: relative;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.gridtxt__header span {
|
|
329
|
+
font-weight: 700;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.gridtxt__header .btn {
|
|
333
|
+
font-size: 0.85em;
|
|
334
|
+
padding: 0.25em;
|
|
335
|
+
display: flex;
|
|
336
|
+
flex-wrap: nowrap;
|
|
337
|
+
align-items: center;
|
|
338
|
+
float: left;
|
|
339
|
+
position: relative;
|
|
340
|
+
top: -4px;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.gridtxt__header .btn svg {
|
|
344
|
+
max-width: 15px;
|
|
345
|
+
margin-right: 5px;
|
|
346
|
+
}
|