@visns-studio/visns-components 5.3.8 → 5.3.10
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/Breadcrumb.jsx +1 -1
- package/src/components/crm/DataGrid.jsx +50 -6
- package/src/components/crm/Form.jsx +2 -2
- package/src/components/crm/generic/GenericDetail.jsx +65 -42
- package/src/components/crm/generic/GenericIndex.jsx +3 -2
- package/src/components/crm/generic/styles/GenericDetail.module.scss +28 -56
- package/src/components/crm/styles/Form.module.scss +38 -0
package/package.json
CHANGED
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
79
79
|
},
|
|
80
80
|
"name": "@visns-studio/visns-components",
|
|
81
|
-
"version": "5.3.
|
|
81
|
+
"version": "5.3.10",
|
|
82
82
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
83
83
|
"main": "src/index.js",
|
|
84
84
|
"files": [
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Link } from 'react-router-dom';
|
|
3
3
|
import dayjs from 'dayjs';
|
|
4
|
-
import { CircleChevronRight } from 'akar-icons';
|
|
5
4
|
import parse from 'html-react-parser';
|
|
5
|
+
import { CircleChevronRight } from 'akar-icons';
|
|
6
6
|
|
|
7
7
|
function Breadcrumb({ data, page }) {
|
|
8
8
|
// Function to get nested data, handling array of keys
|
|
@@ -931,7 +931,22 @@ const DataGrid = forwardRef(
|
|
|
931
931
|
|
|
932
932
|
if (form.create) {
|
|
933
933
|
if (form.create.url) {
|
|
934
|
-
|
|
934
|
+
// Check if URL is external
|
|
935
|
+
if (
|
|
936
|
+
form.create.url.startsWith(
|
|
937
|
+
'http://'
|
|
938
|
+
) ||
|
|
939
|
+
form.create.url.startsWith(
|
|
940
|
+
'https://'
|
|
941
|
+
)
|
|
942
|
+
) {
|
|
943
|
+
window.open(
|
|
944
|
+
form.create.url,
|
|
945
|
+
'_blank'
|
|
946
|
+
);
|
|
947
|
+
} else {
|
|
948
|
+
navigate(form.create.url);
|
|
949
|
+
}
|
|
935
950
|
} else {
|
|
936
951
|
modalOpen('create', 0);
|
|
937
952
|
}
|
|
@@ -1414,9 +1429,18 @@ const DataGrid = forwardRef(
|
|
|
1414
1429
|
);
|
|
1415
1430
|
break;
|
|
1416
1431
|
default:
|
|
1432
|
+
// Convert column.id to string if it's an array with single element
|
|
1433
|
+
const columnId =
|
|
1434
|
+
Array.isArray(column.id) &&
|
|
1435
|
+
column.id.length === 1
|
|
1436
|
+
? column.id[0]
|
|
1437
|
+
: column.id;
|
|
1438
|
+
|
|
1417
1439
|
selectedDataSource = filterDataSource.reduce(
|
|
1418
1440
|
(acc, fds) => {
|
|
1419
|
-
|
|
1441
|
+
console.info(fds.id, columnId);
|
|
1442
|
+
|
|
1443
|
+
if (fds.id === columnId) {
|
|
1420
1444
|
return fds.dataset;
|
|
1421
1445
|
}
|
|
1422
1446
|
return acc;
|
|
@@ -1545,6 +1569,8 @@ const DataGrid = forwardRef(
|
|
|
1545
1569
|
case 'boolean':
|
|
1546
1570
|
return {
|
|
1547
1571
|
...commonProps,
|
|
1572
|
+
filterEditor: filterEditor,
|
|
1573
|
+
filterEditorProps: filterEditorProps,
|
|
1548
1574
|
name: `${column.type}.${column.id}`,
|
|
1549
1575
|
sortable: false,
|
|
1550
1576
|
render: ({ data }) => {
|
|
@@ -1774,6 +1800,8 @@ const DataGrid = forwardRef(
|
|
|
1774
1800
|
return {
|
|
1775
1801
|
...commonProps,
|
|
1776
1802
|
name: columnId,
|
|
1803
|
+
filterEditor: filterEditor,
|
|
1804
|
+
filterEditorProps: filterEditorProps,
|
|
1777
1805
|
render: ({ data }) => {
|
|
1778
1806
|
return (
|
|
1779
1807
|
<select
|
|
@@ -2655,16 +2683,28 @@ const DataGrid = forwardRef(
|
|
|
2655
2683
|
.map((column) => {
|
|
2656
2684
|
// Map these filtered columns to a new object array
|
|
2657
2685
|
let filterName = '';
|
|
2686
|
+
|
|
2658
2687
|
if (Array.isArray(column.id)) {
|
|
2659
2688
|
filterName = column.id.reduce(
|
|
2660
2689
|
(acc, id) => acc + `${id}.`,
|
|
2661
2690
|
''
|
|
2662
2691
|
);
|
|
2692
|
+
|
|
2693
|
+
if (
|
|
2694
|
+
column.type === 'dropdown' &&
|
|
2695
|
+
filterName.endsWith('.')
|
|
2696
|
+
) {
|
|
2697
|
+
filterName = filterName.slice(0, -1);
|
|
2698
|
+
}
|
|
2663
2699
|
} else {
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2700
|
+
switch (column.type) {
|
|
2701
|
+
case 'address':
|
|
2702
|
+
case 'boolean':
|
|
2703
|
+
filterName = `${column.type}.${column.id}`;
|
|
2704
|
+
break;
|
|
2705
|
+
default:
|
|
2706
|
+
filterName = column.id;
|
|
2707
|
+
break;
|
|
2668
2708
|
}
|
|
2669
2709
|
}
|
|
2670
2710
|
|
|
@@ -2747,6 +2787,10 @@ const DataGrid = forwardRef(
|
|
|
2747
2787
|
...filterDataSource.slice(filterIndex + 1),
|
|
2748
2788
|
]);
|
|
2749
2789
|
} else {
|
|
2790
|
+
if (filterName.endsWith('.')) {
|
|
2791
|
+
filterName = filterName.slice(0, -1);
|
|
2792
|
+
}
|
|
2793
|
+
|
|
2750
2794
|
const newFilter = {
|
|
2751
2795
|
id: filterName,
|
|
2752
2796
|
dataset: data,
|
|
@@ -1243,7 +1243,7 @@ function Form({
|
|
|
1243
1243
|
|
|
1244
1244
|
return (
|
|
1245
1245
|
<div
|
|
1246
|
-
className={styles.
|
|
1246
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
1247
1247
|
key={
|
|
1248
1248
|
index +
|
|
1249
1249
|
'-fields-' +
|
|
@@ -1373,7 +1373,7 @@ function Form({
|
|
|
1373
1373
|
</button>
|
|
1374
1374
|
) : null}
|
|
1375
1375
|
|
|
1376
|
-
<button className={styles.
|
|
1376
|
+
<button className={styles.saveBtn} onClick={handleSubmit}>
|
|
1377
1377
|
{formSettings?.save?.button?.label
|
|
1378
1378
|
? formSettings.save.button.label
|
|
1379
1379
|
: 'Save'}
|
|
@@ -1212,48 +1212,71 @@ function GenericDetail({
|
|
|
1212
1212
|
styles.sortlist
|
|
1213
1213
|
}
|
|
1214
1214
|
>
|
|
1215
|
-
{
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1215
|
+
{data[
|
|
1216
|
+
activeTabConfig
|
|
1217
|
+
.key
|
|
1218
|
+
] &&
|
|
1219
|
+
Array.isArray(
|
|
1220
|
+
data[
|
|
1221
|
+
activeTabConfig
|
|
1222
|
+
.key
|
|
1223
|
+
]
|
|
1224
|
+
) &&
|
|
1225
|
+
data[
|
|
1226
|
+
activeTabConfig
|
|
1227
|
+
.key
|
|
1228
|
+
].map(
|
|
1229
|
+
(a, b) => {
|
|
1230
|
+
const imageSource =
|
|
1231
|
+
a.base64_encoded_image ||
|
|
1232
|
+
a.s3_url ||
|
|
1233
|
+
a.file_url;
|
|
1234
|
+
|
|
1235
|
+
return (
|
|
1236
|
+
imageSource && (
|
|
1237
|
+
<li
|
|
1238
|
+
key={`tf-${b}`}
|
|
1239
|
+
>
|
|
1240
|
+
<div
|
|
1241
|
+
className={
|
|
1242
|
+
styles.sortimg
|
|
1243
|
+
}
|
|
1244
|
+
>
|
|
1245
|
+
<img
|
|
1246
|
+
src={
|
|
1247
|
+
imageSource
|
|
1248
|
+
}
|
|
1249
|
+
width="300"
|
|
1250
|
+
alt={
|
|
1251
|
+
a.file_name
|
|
1252
|
+
}
|
|
1253
|
+
/>
|
|
1254
|
+
<TrashCan
|
|
1255
|
+
onClick={(
|
|
1256
|
+
event
|
|
1257
|
+
) => {
|
|
1258
|
+
deleteFile(
|
|
1259
|
+
event,
|
|
1260
|
+
a.id,
|
|
1261
|
+
a.file_name
|
|
1262
|
+
);
|
|
1263
|
+
}}
|
|
1264
|
+
strokeWidth={
|
|
1265
|
+
2
|
|
1266
|
+
}
|
|
1267
|
+
size={
|
|
1268
|
+
18
|
|
1269
|
+
}
|
|
1270
|
+
className={
|
|
1271
|
+
styles.delete
|
|
1272
|
+
}
|
|
1273
|
+
/>
|
|
1274
|
+
</div>
|
|
1275
|
+
</li>
|
|
1276
|
+
)
|
|
1277
|
+
);
|
|
1278
|
+
}
|
|
1279
|
+
)}
|
|
1257
1280
|
</ul>
|
|
1258
1281
|
</div>
|
|
1259
1282
|
) : (
|
|
@@ -5,6 +5,7 @@ import { useParams, Outlet } from 'react-router-dom';
|
|
|
5
5
|
import { toast } from 'react-toastify';
|
|
6
6
|
import { saveAs } from 'file-saver';
|
|
7
7
|
import _ from 'lodash';
|
|
8
|
+
import parse from 'html-react-parser';
|
|
8
9
|
import moment from 'moment';
|
|
9
10
|
|
|
10
11
|
import CustomFetch from '../Fetch';
|
|
@@ -411,7 +412,7 @@ function GenericIndex({
|
|
|
411
412
|
: styles.crmtitleSimple
|
|
412
413
|
}`}
|
|
413
414
|
>
|
|
414
|
-
<h1>{setting.page?.title}</h1>
|
|
415
|
+
<h1>{parse(setting.page?.title || '')}</h1>
|
|
415
416
|
<div className={styles.titleInfo}>
|
|
416
417
|
{setting.page?.tableInfo?.hasOwnProperty(
|
|
417
418
|
'heading'
|
|
@@ -425,7 +426,7 @@ function GenericIndex({
|
|
|
425
426
|
))}
|
|
426
427
|
<span>
|
|
427
428
|
[<strong>{total}</strong> Total{' '}
|
|
428
|
-
{setting.page?.title}]
|
|
429
|
+
{parse(setting.page?.title || '')}]
|
|
429
430
|
</span>
|
|
430
431
|
</div>
|
|
431
432
|
</div>
|
|
@@ -340,70 +340,42 @@
|
|
|
340
340
|
}
|
|
341
341
|
|
|
342
342
|
.sortlist {
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
grid-template-columns: repeat(4, 1fr);
|
|
347
|
-
box-sizing: border-box;
|
|
343
|
+
display: flex;
|
|
344
|
+
flex-wrap: wrap;
|
|
345
|
+
gap: 20px;
|
|
348
346
|
padding: 0;
|
|
349
|
-
margin: 0;
|
|
350
347
|
list-style: none;
|
|
351
348
|
|
|
352
349
|
li {
|
|
353
|
-
display: flex;
|
|
354
|
-
justify-content: center;
|
|
355
|
-
align-items: center;
|
|
356
|
-
flex-wrap: wrap;
|
|
357
|
-
border-radius: 5px;
|
|
358
|
-
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
|
359
|
-
box-shadow: 0px 0px 20px rgba(var(--primary-rgb), 0.1);
|
|
360
|
-
padding: 1.25rem 1.25rem 1.25rem 2rem;
|
|
361
|
-
box-sizing: border-box;
|
|
362
|
-
cursor: pointer;
|
|
363
|
-
list-style: none;
|
|
364
350
|
position: relative;
|
|
365
|
-
color: var(--paragraph-color);
|
|
366
|
-
user-select: none;
|
|
367
|
-
|
|
368
|
-
svg {
|
|
369
|
-
width: 100%;
|
|
370
|
-
max-width: 18px;
|
|
371
|
-
position: absolute;
|
|
372
|
-
left: 5px;
|
|
373
|
-
top: 5px;
|
|
374
|
-
}
|
|
375
351
|
|
|
376
|
-
.
|
|
377
|
-
width:
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
}
|
|
383
|
-
|
|
384
|
-
.delete {
|
|
385
|
-
width: 100%;
|
|
386
|
-
max-width: 18px;
|
|
387
|
-
position: absolute;
|
|
388
|
-
left: 5px;
|
|
389
|
-
top: 60px;
|
|
390
|
-
}
|
|
391
|
-
}
|
|
352
|
+
.sortimg {
|
|
353
|
+
width: 300px;
|
|
354
|
+
height: 300px;
|
|
355
|
+
border-radius: 8px;
|
|
356
|
+
overflow: hidden;
|
|
357
|
+
position: relative;
|
|
392
358
|
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
border-radius: 5px;
|
|
399
|
-
overflow: hidden;
|
|
359
|
+
img {
|
|
360
|
+
width: 100%;
|
|
361
|
+
height: 100%;
|
|
362
|
+
object-fit: cover;
|
|
363
|
+
}
|
|
400
364
|
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
365
|
+
.delete {
|
|
366
|
+
position: absolute;
|
|
367
|
+
top: 10px;
|
|
368
|
+
right: 10px;
|
|
369
|
+
background: rgba(255, 255, 255, 0.8);
|
|
370
|
+
border-radius: 50%;
|
|
371
|
+
padding: 5px;
|
|
372
|
+
cursor: pointer;
|
|
373
|
+
z-index: 2;
|
|
374
|
+
|
|
375
|
+
&:hover {
|
|
376
|
+
background: rgba(255, 255, 255, 1);
|
|
377
|
+
}
|
|
378
|
+
}
|
|
407
379
|
}
|
|
408
380
|
}
|
|
409
381
|
}
|
|
@@ -264,3 +264,41 @@ input[type='file'] {
|
|
|
264
264
|
}
|
|
265
265
|
}
|
|
266
266
|
}
|
|
267
|
+
|
|
268
|
+
.saveBtn {
|
|
269
|
+
width: max-content;
|
|
270
|
+
display: inline-block;
|
|
271
|
+
position: relative;
|
|
272
|
+
padding: 0.65rem 1rem;
|
|
273
|
+
cursor: pointer;
|
|
274
|
+
font-size: 1rem;
|
|
275
|
+
color: var(--tertiary-color);
|
|
276
|
+
text-decoration: none;
|
|
277
|
+
overflow: hidden;
|
|
278
|
+
background: var(--primary-color);
|
|
279
|
+
border: 1px solid rgba(var(--primary-color--rgb), 1.1);
|
|
280
|
+
border-radius: var(--br);
|
|
281
|
+
outline: none;
|
|
282
|
+
transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
|
|
283
|
+
font-size: 1.25em;
|
|
284
|
+
|
|
285
|
+
&:hover {
|
|
286
|
+
color: var(--primary-color);
|
|
287
|
+
background: var(--highlight-color);
|
|
288
|
+
border: 1px solid rgba(var(--highlight-rgb), 1.05);
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.polActions {
|
|
293
|
+
position: fixed;
|
|
294
|
+
bottom: 15px;
|
|
295
|
+
right: 20px;
|
|
296
|
+
width: auto;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.polActions button {
|
|
300
|
+
display: block;
|
|
301
|
+
float: left;
|
|
302
|
+
padding: 0.35em 1em;
|
|
303
|
+
margin: 0 0.15em;
|
|
304
|
+
}
|