@visns-studio/visns-components 5.3.9 → 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 +34 -5
- 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
|
|
@@ -1429,9 +1429,18 @@ const DataGrid = forwardRef(
|
|
|
1429
1429
|
);
|
|
1430
1430
|
break;
|
|
1431
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
|
+
|
|
1432
1439
|
selectedDataSource = filterDataSource.reduce(
|
|
1433
1440
|
(acc, fds) => {
|
|
1434
|
-
|
|
1441
|
+
console.info(fds.id, columnId);
|
|
1442
|
+
|
|
1443
|
+
if (fds.id === columnId) {
|
|
1435
1444
|
return fds.dataset;
|
|
1436
1445
|
}
|
|
1437
1446
|
return acc;
|
|
@@ -1560,6 +1569,8 @@ const DataGrid = forwardRef(
|
|
|
1560
1569
|
case 'boolean':
|
|
1561
1570
|
return {
|
|
1562
1571
|
...commonProps,
|
|
1572
|
+
filterEditor: filterEditor,
|
|
1573
|
+
filterEditorProps: filterEditorProps,
|
|
1563
1574
|
name: `${column.type}.${column.id}`,
|
|
1564
1575
|
sortable: false,
|
|
1565
1576
|
render: ({ data }) => {
|
|
@@ -1789,6 +1800,8 @@ const DataGrid = forwardRef(
|
|
|
1789
1800
|
return {
|
|
1790
1801
|
...commonProps,
|
|
1791
1802
|
name: columnId,
|
|
1803
|
+
filterEditor: filterEditor,
|
|
1804
|
+
filterEditorProps: filterEditorProps,
|
|
1792
1805
|
render: ({ data }) => {
|
|
1793
1806
|
return (
|
|
1794
1807
|
<select
|
|
@@ -2670,16 +2683,28 @@ const DataGrid = forwardRef(
|
|
|
2670
2683
|
.map((column) => {
|
|
2671
2684
|
// Map these filtered columns to a new object array
|
|
2672
2685
|
let filterName = '';
|
|
2686
|
+
|
|
2673
2687
|
if (Array.isArray(column.id)) {
|
|
2674
2688
|
filterName = column.id.reduce(
|
|
2675
2689
|
(acc, id) => acc + `${id}.`,
|
|
2676
2690
|
''
|
|
2677
2691
|
);
|
|
2692
|
+
|
|
2693
|
+
if (
|
|
2694
|
+
column.type === 'dropdown' &&
|
|
2695
|
+
filterName.endsWith('.')
|
|
2696
|
+
) {
|
|
2697
|
+
filterName = filterName.slice(0, -1);
|
|
2698
|
+
}
|
|
2678
2699
|
} else {
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
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;
|
|
2683
2708
|
}
|
|
2684
2709
|
}
|
|
2685
2710
|
|
|
@@ -2762,6 +2787,10 @@ const DataGrid = forwardRef(
|
|
|
2762
2787
|
...filterDataSource.slice(filterIndex + 1),
|
|
2763
2788
|
]);
|
|
2764
2789
|
} else {
|
|
2790
|
+
if (filterName.endsWith('.')) {
|
|
2791
|
+
filterName = filterName.slice(0, -1);
|
|
2792
|
+
}
|
|
2793
|
+
|
|
2765
2794
|
const newFilter = {
|
|
2766
2795
|
id: filterName,
|
|
2767
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
|
+
}
|