@visns-studio/visns-components 5.3.9 → 5.3.11
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 +32 -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.11",
|
|
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,16 @@ 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
|
-
if (fds.id ===
|
|
1441
|
+
if (fds.id === columnId) {
|
|
1435
1442
|
return fds.dataset;
|
|
1436
1443
|
}
|
|
1437
1444
|
return acc;
|
|
@@ -1560,6 +1567,8 @@ const DataGrid = forwardRef(
|
|
|
1560
1567
|
case 'boolean':
|
|
1561
1568
|
return {
|
|
1562
1569
|
...commonProps,
|
|
1570
|
+
filterEditor: filterEditor,
|
|
1571
|
+
filterEditorProps: filterEditorProps,
|
|
1563
1572
|
name: `${column.type}.${column.id}`,
|
|
1564
1573
|
sortable: false,
|
|
1565
1574
|
render: ({ data }) => {
|
|
@@ -1789,6 +1798,8 @@ const DataGrid = forwardRef(
|
|
|
1789
1798
|
return {
|
|
1790
1799
|
...commonProps,
|
|
1791
1800
|
name: columnId,
|
|
1801
|
+
filterEditor: filterEditor,
|
|
1802
|
+
filterEditorProps: filterEditorProps,
|
|
1792
1803
|
render: ({ data }) => {
|
|
1793
1804
|
return (
|
|
1794
1805
|
<select
|
|
@@ -2670,16 +2681,28 @@ const DataGrid = forwardRef(
|
|
|
2670
2681
|
.map((column) => {
|
|
2671
2682
|
// Map these filtered columns to a new object array
|
|
2672
2683
|
let filterName = '';
|
|
2684
|
+
|
|
2673
2685
|
if (Array.isArray(column.id)) {
|
|
2674
2686
|
filterName = column.id.reduce(
|
|
2675
2687
|
(acc, id) => acc + `${id}.`,
|
|
2676
2688
|
''
|
|
2677
2689
|
);
|
|
2690
|
+
|
|
2691
|
+
if (
|
|
2692
|
+
column.type === 'dropdown' &&
|
|
2693
|
+
filterName.endsWith('.')
|
|
2694
|
+
) {
|
|
2695
|
+
filterName = filterName.slice(0, -1);
|
|
2696
|
+
}
|
|
2678
2697
|
} else {
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2698
|
+
switch (column.type) {
|
|
2699
|
+
case 'address':
|
|
2700
|
+
case 'boolean':
|
|
2701
|
+
filterName = `${column.type}.${column.id}`;
|
|
2702
|
+
break;
|
|
2703
|
+
default:
|
|
2704
|
+
filterName = column.id;
|
|
2705
|
+
break;
|
|
2683
2706
|
}
|
|
2684
2707
|
}
|
|
2685
2708
|
|
|
@@ -2762,6 +2785,10 @@ const DataGrid = forwardRef(
|
|
|
2762
2785
|
...filterDataSource.slice(filterIndex + 1),
|
|
2763
2786
|
]);
|
|
2764
2787
|
} else {
|
|
2788
|
+
if (filterName.endsWith('.')) {
|
|
2789
|
+
filterName = filterName.slice(0, -1);
|
|
2790
|
+
}
|
|
2791
|
+
|
|
2765
2792
|
const newFilter = {
|
|
2766
2793
|
id: filterName,
|
|
2767
2794
|
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
|
+
}
|