@visns-studio/visns-components 2.6.12 → 2.7.0
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.
|
@@ -20,6 +20,7 @@ import ReactDataGrid from '@inovua/reactdatagrid-community';
|
|
|
20
20
|
import { confirmAlert } from 'react-confirm-alert';
|
|
21
21
|
import { toast } from 'react-toastify';
|
|
22
22
|
import {
|
|
23
|
+
Alarm,
|
|
23
24
|
ArrowCounterClockwise,
|
|
24
25
|
Backspace,
|
|
25
26
|
Check,
|
|
@@ -104,6 +105,7 @@ const DataGrid = forwardRef(
|
|
|
104
105
|
columns,
|
|
105
106
|
form,
|
|
106
107
|
gridHeight,
|
|
108
|
+
mapbox,
|
|
107
109
|
settings,
|
|
108
110
|
setConfig,
|
|
109
111
|
setFilterData,
|
|
@@ -183,6 +185,30 @@ const DataGrid = forwardRef(
|
|
|
183
185
|
},
|
|
184
186
|
}));
|
|
185
187
|
|
|
188
|
+
const handleTimer = async (id, key) => {
|
|
189
|
+
try {
|
|
190
|
+
const res = await CustomFetch(`${form.url}/${id}`, 'PUT', {
|
|
191
|
+
[key]: moment().toDate(),
|
|
192
|
+
});
|
|
193
|
+
|
|
194
|
+
if (res.data.error === '') {
|
|
195
|
+
toast.success('Timer has been updated.');
|
|
196
|
+
|
|
197
|
+
const min = 0;
|
|
198
|
+
const max = 999999999;
|
|
199
|
+
const randomNumber = Math.floor(
|
|
200
|
+
Math.random() * (max - min + 1) + min
|
|
201
|
+
);
|
|
202
|
+
|
|
203
|
+
setDataReload(randomNumber);
|
|
204
|
+
} else {
|
|
205
|
+
toast.error(res.data.error);
|
|
206
|
+
}
|
|
207
|
+
} catch (error) {
|
|
208
|
+
console.info(error);
|
|
209
|
+
}
|
|
210
|
+
};
|
|
211
|
+
|
|
186
212
|
const handleSelectionChange = useCallback((param) => {
|
|
187
213
|
if (param.selected === true) {
|
|
188
214
|
const s = {};
|
|
@@ -1621,6 +1647,88 @@ const DataGrid = forwardRef(
|
|
|
1621
1647
|
|
|
1622
1648
|
return <span>{data}</span>;
|
|
1623
1649
|
} else {
|
|
1650
|
+
return null;
|
|
1651
|
+
}
|
|
1652
|
+
},
|
|
1653
|
+
};
|
|
1654
|
+
case 'timer':
|
|
1655
|
+
return {
|
|
1656
|
+
...commonProps,
|
|
1657
|
+
name: column.id,
|
|
1658
|
+
render: ({ data }) => {
|
|
1659
|
+
if (
|
|
1660
|
+
data &&
|
|
1661
|
+
data[column.id] &&
|
|
1662
|
+
moment(data[column.id]).isValid() &&
|
|
1663
|
+
moment(data[column.id]).format(
|
|
1664
|
+
'YYYY-MM-DD'
|
|
1665
|
+
) !== '1970-01-01'
|
|
1666
|
+
) {
|
|
1667
|
+
data = moment(data[column.id]).format(
|
|
1668
|
+
column.format
|
|
1669
|
+
? column.format
|
|
1670
|
+
: 'DD-MM-YYYY hh:mm A'
|
|
1671
|
+
);
|
|
1672
|
+
|
|
1673
|
+
return <span>{data}</span>;
|
|
1674
|
+
} else {
|
|
1675
|
+
let shouldRenderButton = false;
|
|
1676
|
+
|
|
1677
|
+
if (
|
|
1678
|
+
!column.hasOwnProperty('require') ||
|
|
1679
|
+
column.require.length === 0
|
|
1680
|
+
) {
|
|
1681
|
+
shouldRenderButton = true;
|
|
1682
|
+
} else {
|
|
1683
|
+
for (const req of column.require) {
|
|
1684
|
+
if (req.hasOwnProperty('id')) {
|
|
1685
|
+
const hasValue =
|
|
1686
|
+
req.hasOwnProperty('value');
|
|
1687
|
+
if (
|
|
1688
|
+
(hasValue &&
|
|
1689
|
+
data[req.id] ===
|
|
1690
|
+
req.value) ||
|
|
1691
|
+
(!hasValue && data[req.id])
|
|
1692
|
+
) {
|
|
1693
|
+
shouldRenderButton = true;
|
|
1694
|
+
} else {
|
|
1695
|
+
shouldRenderButton = false;
|
|
1696
|
+
break;
|
|
1697
|
+
}
|
|
1698
|
+
}
|
|
1699
|
+
}
|
|
1700
|
+
}
|
|
1701
|
+
|
|
1702
|
+
|
|
1703
|
+
if (shouldRenderButton) {
|
|
1704
|
+
return (
|
|
1705
|
+
<button
|
|
1706
|
+
className="btn"
|
|
1707
|
+
style={{
|
|
1708
|
+
padding:
|
|
1709
|
+
'0.2em 1em 0.05em 1em',
|
|
1710
|
+
}}
|
|
1711
|
+
onClick={(e) => {
|
|
1712
|
+
e.stopPropagation();
|
|
1713
|
+
e.preventDefault();
|
|
1714
|
+
|
|
1715
|
+
handleTimer(
|
|
1716
|
+
data[form.primaryKey],
|
|
1717
|
+
column.id
|
|
1718
|
+
);
|
|
1719
|
+
}}
|
|
1720
|
+
>
|
|
1721
|
+
<Alarm
|
|
1722
|
+
data-tooltip-id="system-tooltip"
|
|
1723
|
+
data-tooltip-content={`${column.label} Timer`}
|
|
1724
|
+
strokeWidth={2}
|
|
1725
|
+
size={18}
|
|
1726
|
+
className="tdaction"
|
|
1727
|
+
/>
|
|
1728
|
+
</button>
|
|
1729
|
+
);
|
|
1730
|
+
}
|
|
1731
|
+
|
|
1624
1732
|
return null;
|
|
1625
1733
|
}
|
|
1626
1734
|
},
|
package/components/crm/Form.jsx
CHANGED
|
@@ -21,6 +21,7 @@ function Form({
|
|
|
21
21
|
style,
|
|
22
22
|
type,
|
|
23
23
|
updateForm,
|
|
24
|
+
userProfile,
|
|
24
25
|
}) {
|
|
25
26
|
const navigate = useNavigate();
|
|
26
27
|
const [inputClass, setInputClass] = useState({});
|
|
@@ -212,6 +213,9 @@ function Form({
|
|
|
212
213
|
case 'clear':
|
|
213
214
|
updateFormData({ [id]: '' });
|
|
214
215
|
break;
|
|
216
|
+
case 'remove-value':
|
|
217
|
+
updateFormData({ [id]: inputValue });
|
|
218
|
+
break;
|
|
215
219
|
}
|
|
216
220
|
};
|
|
217
221
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import React, {useEffect, useState} from 'react';
|
|
2
|
-
import {useParams, Link} from 'react-router-dom';
|
|
1
|
+
import React, { useEffect, useState } from 'react';
|
|
2
|
+
import { useParams, Link } from 'react-router-dom';
|
|
3
3
|
import moment from 'moment';
|
|
4
4
|
import parse from 'html-react-parser';
|
|
5
5
|
import Popup from 'reactjs-popup';
|
|
6
|
-
import {motion} from 'framer-motion';
|
|
6
|
+
import { motion } from 'framer-motion';
|
|
7
7
|
import Dropzone from 'react-dropzone';
|
|
8
|
-
import {confirmAlert} from 'react-confirm-alert';
|
|
8
|
+
import { confirmAlert } from 'react-confirm-alert';
|
|
9
9
|
import truncate from 'truncate';
|
|
10
|
-
import {CopyToClipboard} from 'react-copy-to-clipboard';
|
|
10
|
+
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
|
11
11
|
import {
|
|
12
12
|
CircleCheck,
|
|
13
13
|
CircleChevronRight,
|
|
@@ -22,11 +22,11 @@ import CustomFetch from '../Fetch';
|
|
|
22
22
|
import Form from '../Form';
|
|
23
23
|
import Table from '../DataGrid';
|
|
24
24
|
import TableFilter from '../TableFilter';
|
|
25
|
-
import {toast} from 'react-toastify';
|
|
25
|
+
import { toast } from 'react-toastify';
|
|
26
26
|
|
|
27
|
-
function GenericDetail({setting, urlParam, userProfile}) {
|
|
27
|
+
function GenericDetail({ setting, urlParam, userProfile }) {
|
|
28
28
|
const routeParams = useParams();
|
|
29
|
-
const {filters, page, stages, tabs} = setting;
|
|
29
|
+
const { filters, page, stages, tabs } = setting;
|
|
30
30
|
|
|
31
31
|
/** Fileupload states */
|
|
32
32
|
const [files, setFiles] = useState([]);
|
|
@@ -117,7 +117,7 @@ function GenericDetail({setting, urlParam, userProfile}) {
|
|
|
117
117
|
};
|
|
118
118
|
|
|
119
119
|
const renderValue = (item, data) => {
|
|
120
|
-
const {type, id, relation, relationKey, size, truncateLength} = item;
|
|
120
|
+
const { type, id, relation, relationKey, size, truncateLength } = item;
|
|
121
121
|
const value =
|
|
122
122
|
relation && relation.length > 0
|
|
123
123
|
? getValueFromData(data, [...relation], id)
|
|
@@ -141,8 +141,8 @@ function GenericDetail({setting, urlParam, userProfile}) {
|
|
|
141
141
|
|
|
142
142
|
return name !== '' && description !== '' && formattedDate !== ''
|
|
143
143
|
? parse(
|
|
144
|
-
|
|
145
|
-
|
|
144
|
+
`<br /><p>${name} - ${formattedDate}</p><p>${description}</p>`
|
|
145
|
+
)
|
|
146
146
|
: null;
|
|
147
147
|
};
|
|
148
148
|
|
|
@@ -290,7 +290,7 @@ function GenericDetail({setting, urlParam, userProfile}) {
|
|
|
290
290
|
<div className="progress">
|
|
291
291
|
<motion.div
|
|
292
292
|
className="progress__bar"
|
|
293
|
-
initial={{width: '0%'}}
|
|
293
|
+
initial={{ width: '0%' }}
|
|
294
294
|
animate={{
|
|
295
295
|
width: loadingProgress + '%',
|
|
296
296
|
}}
|
|
@@ -318,7 +318,7 @@ function GenericDetail({setting, urlParam, userProfile}) {
|
|
|
318
318
|
name: file.name,
|
|
319
319
|
size: file.size,
|
|
320
320
|
extension:
|
|
321
|
-
|
|
321
|
+
response.extension,
|
|
322
322
|
};
|
|
323
323
|
|
|
324
324
|
CustomFetch(
|
|
@@ -339,7 +339,7 @@ function GenericDetail({setting, urlParam, userProfile}) {
|
|
|
339
339
|
});
|
|
340
340
|
}}
|
|
341
341
|
>
|
|
342
|
-
{({getRootProps, getInputProps}) => (
|
|
342
|
+
{({ getRootProps, getInputProps }) => (
|
|
343
343
|
<section className="dropzone__container">
|
|
344
344
|
<div {...getRootProps()}>
|
|
345
345
|
<input
|
|
@@ -430,7 +430,7 @@ function GenericDetail({setting, urlParam, userProfile}) {
|
|
|
430
430
|
routeParams[
|
|
431
431
|
formField
|
|
432
432
|
.urlParam
|
|
433
|
-
|
|
433
|
+
]
|
|
434
434
|
);
|
|
435
435
|
}
|
|
436
436
|
);
|
|
@@ -460,7 +460,9 @@ function GenericDetail({setting, urlParam, userProfile}) {
|
|
|
460
460
|
<div className="grid__full">
|
|
461
461
|
{formConfig.stages.data.map(
|
|
462
462
|
(stage) =>
|
|
463
|
-
parseInt(
|
|
463
|
+
parseInt(
|
|
464
|
+
activeStage
|
|
465
|
+
) === stage.id && (
|
|
464
466
|
<React.Fragment
|
|
465
467
|
key={`stage-form-${stage.id}`}
|
|
466
468
|
>
|
|
@@ -485,7 +487,7 @@ function GenericDetail({setting, urlParam, userProfile}) {
|
|
|
485
487
|
columnId={
|
|
486
488
|
routeParams[
|
|
487
489
|
urlParam
|
|
488
|
-
|
|
490
|
+
]
|
|
489
491
|
}
|
|
490
492
|
formSettings={
|
|
491
493
|
stage.form
|
|
@@ -530,6 +532,7 @@ function GenericDetail({setting, urlParam, userProfile}) {
|
|
|
530
532
|
}
|
|
531
533
|
updateForm={setFormData}
|
|
532
534
|
type="inline"
|
|
535
|
+
userProfile={userProfile}
|
|
533
536
|
/>
|
|
534
537
|
</div>
|
|
535
538
|
)}
|
|
@@ -549,7 +552,7 @@ function GenericDetail({setting, urlParam, userProfile}) {
|
|
|
549
552
|
'update',
|
|
550
553
|
routeParams[
|
|
551
554
|
urlParam
|
|
552
|
-
|
|
555
|
+
]
|
|
553
556
|
)
|
|
554
557
|
}
|
|
555
558
|
>
|
|
@@ -573,7 +576,7 @@ function GenericDetail({setting, urlParam, userProfile}) {
|
|
|
573
576
|
</div>
|
|
574
577
|
{section.content &&
|
|
575
578
|
section.content.length >
|
|
576
|
-
|
|
579
|
+
0 && (
|
|
577
580
|
<ul className="customer__overview">
|
|
578
581
|
{section.content.map(
|
|
579
582
|
(
|
|
@@ -707,21 +710,21 @@ function GenericDetail({setting, urlParam, userProfile}) {
|
|
|
707
710
|
(field.type ===
|
|
708
711
|
'multi-dropdown-ajax' ||
|
|
709
712
|
field.type ===
|
|
710
|
-
|
|
713
|
+
'multi-dropdown')
|
|
711
714
|
) {
|
|
712
715
|
field.value = {
|
|
713
716
|
value: routeParams[
|
|
714
717
|
field.urlParam
|
|
715
|
-
|
|
718
|
+
],
|
|
716
719
|
label: data[
|
|
717
720
|
field.relationName
|
|
718
|
-
|
|
721
|
+
],
|
|
719
722
|
};
|
|
720
723
|
} else {
|
|
721
724
|
field.value =
|
|
722
725
|
routeParams[
|
|
723
726
|
field.urlParam
|
|
724
|
-
|
|
727
|
+
];
|
|
725
728
|
}
|
|
726
729
|
}
|
|
727
730
|
|
|
@@ -762,7 +765,6 @@ function GenericDetail({setting, urlParam, userProfile}) {
|
|
|
762
765
|
}
|
|
763
766
|
}, [subnav, tabs, routeParams]);
|
|
764
767
|
|
|
765
|
-
|
|
766
768
|
useEffect(() => {
|
|
767
769
|
if (tabs && tabs.length > 0 && data && data.id) {
|
|
768
770
|
const activeTab = subnav.find((s) => s.show === true);
|
|
@@ -850,7 +852,7 @@ function GenericDetail({setting, urlParam, userProfile}) {
|
|
|
850
852
|
>
|
|
851
853
|
{page && page.title ? page.title : null}
|
|
852
854
|
</Link>{' '}
|
|
853
|
-
<CircleChevronRight strokeWidth={2} size={18}/>{' '}
|
|
855
|
+
<CircleChevronRight strokeWidth={2} size={18} />{' '}
|
|
854
856
|
{data && data[page.titleKey]
|
|
855
857
|
? data[page.titleKey]
|
|
856
858
|
: null}
|
|
@@ -891,7 +893,10 @@ function GenericDetail({setting, urlParam, userProfile}) {
|
|
|
891
893
|
onClick={(e) => {
|
|
892
894
|
e.preventDefault();
|
|
893
895
|
|
|
894
|
-
handleStageUpdate(
|
|
896
|
+
handleStageUpdate(
|
|
897
|
+
stage,
|
|
898
|
+
stages.type
|
|
899
|
+
);
|
|
895
900
|
}}
|
|
896
901
|
>
|
|
897
902
|
<a>
|
|
@@ -916,7 +921,7 @@ function GenericDetail({setting, urlParam, userProfile}) {
|
|
|
916
921
|
<div className="grid">
|
|
917
922
|
<div className="grid__subrow">
|
|
918
923
|
<div className="grid__subnav">
|
|
919
|
-
<TableFilter filters={subnav} setFilters={setSubnav}/>
|
|
924
|
+
<TableFilter filters={subnav} setFilters={setSubnav} />
|
|
920
925
|
</div>
|
|
921
926
|
<div className="grid__subcontent">
|
|
922
927
|
{config ? renderContent() : null}
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"awesome-debounce-promise": "^2.1.0",
|
|
8
8
|
"axios": "^1.5.1",
|
|
9
9
|
"framer-motion": "^10.16.4",
|
|
10
|
-
"html-react-parser": "^4.2.
|
|
10
|
+
"html-react-parser": "^4.2.5",
|
|
11
11
|
"lodash": "^4.17.21",
|
|
12
12
|
"moment": "^2.29.4",
|
|
13
13
|
"motion": "^10.16.4",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"react-color": "^2.19.3",
|
|
17
17
|
"react-confirm-alert": "^3.0.6",
|
|
18
18
|
"react-copy-to-clipboard": "^5.1.0",
|
|
19
|
-
"react-datepicker": "^4.
|
|
19
|
+
"react-datepicker": "^4.21.0",
|
|
20
20
|
"react-dropzone": "^14.2.3",
|
|
21
21
|
"react-number-format": "^5.3.1",
|
|
22
22
|
"react-password-strength-bar": "^0.4.1",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"react-dom": "^17.0.1"
|
|
45
45
|
},
|
|
46
46
|
"name": "@visns-studio/visns-components",
|
|
47
|
-
"version": "2.
|
|
47
|
+
"version": "2.7.0",
|
|
48
48
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
49
49
|
"main": "index.js",
|
|
50
50
|
"scripts": {
|