@visns-studio/visns-components 2.9.2 → 2.9.4
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.
|
@@ -4,7 +4,7 @@ import SelectList from './SelectList';
|
|
|
4
4
|
import AsyncSelect from 'react-select/async';
|
|
5
5
|
import { debounce } from 'lodash';
|
|
6
6
|
|
|
7
|
-
function VisnsAsyncSelect({ inputValue, onChange, settings }) {
|
|
7
|
+
function VisnsAsyncSelect({ inputValue, onChange, placeholder, settings }) {
|
|
8
8
|
const loadSuggestedOptions = useCallback(
|
|
9
9
|
debounce((inputValue, callback) => {
|
|
10
10
|
if (inputValue !== '') {
|
|
@@ -81,6 +81,7 @@ function VisnsAsyncSelect({ inputValue, onChange, settings }) {
|
|
|
81
81
|
}),
|
|
82
82
|
}}
|
|
83
83
|
value={inputValue}
|
|
84
|
+
placeholder={placeholder ? placeholder : 'Select...'}
|
|
84
85
|
/>
|
|
85
86
|
);
|
|
86
87
|
}
|
|
@@ -2,8 +2,15 @@ import React, { useEffect, useState } from 'react';
|
|
|
2
2
|
import SelectList from './SelectList';
|
|
3
3
|
import Select, { createFilter } from 'react-select';
|
|
4
4
|
|
|
5
|
-
function MultiSelect(
|
|
6
|
-
|
|
5
|
+
function MultiSelect({
|
|
6
|
+
inputValue,
|
|
7
|
+
multi,
|
|
8
|
+
onChange,
|
|
9
|
+
options,
|
|
10
|
+
placeholder,
|
|
11
|
+
settings,
|
|
12
|
+
style,
|
|
13
|
+
}) {
|
|
7
14
|
const [selectOptions, setSelectOptions] = useState([]);
|
|
8
15
|
|
|
9
16
|
useEffect(() => {
|
|
@@ -56,6 +63,7 @@ function MultiSelect(props) {
|
|
|
56
63
|
}),
|
|
57
64
|
}}
|
|
58
65
|
value={inputValue}
|
|
66
|
+
placeholder={placeholder ? placeholder : 'Select...'}
|
|
59
67
|
/>
|
|
60
68
|
);
|
|
61
69
|
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { useEffect, useRef, useState } from 'react';
|
|
2
|
+
import ReactToPrint from 'react-to-print';
|
|
3
|
+
|
|
4
|
+
import CustomFetch from './Fetch';
|
|
5
|
+
|
|
6
|
+
const QrCode = ({ config, dataId }) => {
|
|
7
|
+
const printComponentRef = useRef();
|
|
8
|
+
const [qrCodeData, setQrCodeData] = useState({
|
|
9
|
+
logo: '',
|
|
10
|
+
qrCode: '',
|
|
11
|
+
title: '',
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
const fetchQrCode = async ({ url }) => {
|
|
15
|
+
try {
|
|
16
|
+
const res = await CustomFetch(`${url}/${dataId}`, 'POST', {});
|
|
17
|
+
|
|
18
|
+
setQrCodeData((prevState) => ({ ...prevState, ...res.data }));
|
|
19
|
+
} catch (error) {
|
|
20
|
+
console.error(error);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
fetchQrCode(config);
|
|
26
|
+
}, []);
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<>
|
|
30
|
+
<div className="gridtxt" ref={printComponentRef}>
|
|
31
|
+
{qrCodeData.logo && qrCodeData.logo !== '' && (
|
|
32
|
+
<ul className="customer__overview">
|
|
33
|
+
<li
|
|
34
|
+
className="fw-grid-item"
|
|
35
|
+
style={{
|
|
36
|
+
textAlign: 'center',
|
|
37
|
+
}}
|
|
38
|
+
>
|
|
39
|
+
<img
|
|
40
|
+
src={qrCodeData.logo}
|
|
41
|
+
alt="Dawn Projects"
|
|
42
|
+
width="40%"
|
|
43
|
+
/>
|
|
44
|
+
</li>
|
|
45
|
+
</ul>
|
|
46
|
+
)}
|
|
47
|
+
<ul className="customer__overview">
|
|
48
|
+
<li
|
|
49
|
+
className="fw-grid-item"
|
|
50
|
+
style={{
|
|
51
|
+
textAlign: 'center',
|
|
52
|
+
}}
|
|
53
|
+
>
|
|
54
|
+
{qrCodeData.title}
|
|
55
|
+
</li>
|
|
56
|
+
</ul>
|
|
57
|
+
<ul className="customer__overview">
|
|
58
|
+
<li
|
|
59
|
+
className="fw-grid-item"
|
|
60
|
+
style={{ textAlign: 'center' }}
|
|
61
|
+
>
|
|
62
|
+
{qrCodeData.qrCode && qrCodeData.qrCode !== '' && (
|
|
63
|
+
<img
|
|
64
|
+
src={`data:image/svg+xml;base64, ${qrCodeData.qrCode}`}
|
|
65
|
+
alt="SVG Image"
|
|
66
|
+
width="80%"
|
|
67
|
+
/>
|
|
68
|
+
)}
|
|
69
|
+
</li>
|
|
70
|
+
</ul>
|
|
71
|
+
</div>
|
|
72
|
+
<div className="polActions">
|
|
73
|
+
<ReactToPrint
|
|
74
|
+
trigger={() => <button className="btn">Print</button>}
|
|
75
|
+
content={() => printComponentRef.current}
|
|
76
|
+
/>
|
|
77
|
+
</div>
|
|
78
|
+
</>
|
|
79
|
+
);
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
export default QrCode;
|
|
@@ -20,12 +20,14 @@ import 'react-confirm-alert/src/react-confirm-alert.css';
|
|
|
20
20
|
|
|
21
21
|
import CustomFetch from '../Fetch';
|
|
22
22
|
import Form from '../Form';
|
|
23
|
+
import QrCode from '../QrCode';
|
|
23
24
|
import Table from '../DataGrid';
|
|
24
25
|
import TableFilter from '../TableFilter';
|
|
25
26
|
import { toast } from 'react-toastify';
|
|
26
27
|
|
|
27
28
|
function GenericDetail({ setting, urlParam, userProfile }) {
|
|
28
29
|
const routeParams = useParams();
|
|
30
|
+
|
|
29
31
|
const { filters, page, stages, tabs } = setting;
|
|
30
32
|
|
|
31
33
|
/** Fileupload states */
|
|
@@ -93,10 +95,6 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
93
95
|
path.reduce((result, key) => (result ? result[key] : ''), data) ??
|
|
94
96
|
'';
|
|
95
97
|
|
|
96
|
-
if (path[0] && path[0] === 'insurance_types') {
|
|
97
|
-
console.info(value);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
98
|
if (value) {
|
|
101
99
|
if (Array.isArray(value)) {
|
|
102
100
|
return value
|
|
@@ -626,6 +624,13 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
626
624
|
)}
|
|
627
625
|
</>
|
|
628
626
|
);
|
|
627
|
+
case 'qrCode':
|
|
628
|
+
return (
|
|
629
|
+
<QrCode
|
|
630
|
+
config={activeTabConfig}
|
|
631
|
+
dataId={routeParams[urlParam]}
|
|
632
|
+
/>
|
|
633
|
+
);
|
|
629
634
|
case 'table':
|
|
630
635
|
if (
|
|
631
636
|
config.ajaxSetting &&
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"array-move": "^4.0.0",
|
|
7
7
|
"awesome-debounce-promise": "^2.1.0",
|
|
8
8
|
"axios": "^1.6.2",
|
|
9
|
-
"framer-motion": "^10.16.
|
|
9
|
+
"framer-motion": "^10.16.12",
|
|
10
10
|
"html-react-parser": "^5.0.6",
|
|
11
11
|
"lodash": "^4.17.21",
|
|
12
12
|
"moment": "^2.29.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.24.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",
|
|
@@ -26,10 +26,11 @@
|
|
|
26
26
|
"react-select": "^5.8.0",
|
|
27
27
|
"react-slugify": "^3.0.3",
|
|
28
28
|
"react-sortable-hoc": "^2.0.0",
|
|
29
|
+
"react-to-print": "^2.14.15",
|
|
29
30
|
"react-toastify": "^9.1.3",
|
|
30
31
|
"react-toggle": "^4.1.3",
|
|
31
32
|
"react-tooltip": "^5.24.0",
|
|
32
|
-
"react-window": "^1.8.
|
|
33
|
+
"react-window": "^1.8.10",
|
|
33
34
|
"reactjs-popup": "^2.0.6",
|
|
34
35
|
"truncate": "^3.0.0",
|
|
35
36
|
"validator": "^13.11.0",
|
|
@@ -44,7 +45,7 @@
|
|
|
44
45
|
"react-dom": "^17.0.1"
|
|
45
46
|
},
|
|
46
47
|
"name": "@visns-studio/visns-components",
|
|
47
|
-
"version": "2.9.
|
|
48
|
+
"version": "2.9.4",
|
|
48
49
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
49
50
|
"main": "index.js",
|
|
50
51
|
"scripts": {
|