@visns-studio/visns-components 4.4.0 → 4.4.2
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/components/crm/AsyncSelect.jsx +2 -1
- package/components/crm/Autocomplete.jsx +6 -5
- package/components/crm/DataGrid.jsx +30 -21
- package/components/crm/Form.jsx +49 -61
- package/components/crm/Loader.jsx +1 -0
- package/components/crm/MultiSelect.jsx +2 -1
- package/components/crm/QrCode.jsx +9 -8
- package/components/crm/auth/Profile.jsx +5 -6
- package/components/crm/auth/styles/Profile.module.css +20 -17
- package/components/crm/generic/GenericDetail.jsx +7 -0
- package/components/crm/generic/GenericIndex.jsx +20 -14
- package/components/crm/generic/styles/GenericIndex.module.css +232 -0
- package/components/crm/styles/AsyncSelect.module.css +12 -0
- package/components/crm/styles/Autocomplete.module.css +44 -0
- package/components/crm/styles/DataGrid.module.css +215 -0
- package/components/crm/styles/Form.module.css +476 -0
- package/components/crm/styles/Loader.module.css +94 -0
- package/components/crm/styles/MultiSelect.module.css +12 -0
- package/components/crm/styles/QrCode.module.css +87 -0
- package/components/styles/global.css +31 -0
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@ import CustomFetch from './Fetch';
|
|
|
3
3
|
import SelectList from './SelectList';
|
|
4
4
|
import AsyncSelect from 'react-select/async';
|
|
5
5
|
import { debounce } from 'lodash';
|
|
6
|
+
import styles from './styles/AsyncSelect.module.css';
|
|
6
7
|
|
|
7
8
|
function VisnsAsyncSelect({
|
|
8
9
|
fields = [],
|
|
@@ -95,7 +96,7 @@ function VisnsAsyncSelect({
|
|
|
95
96
|
cacheOptions
|
|
96
97
|
loadOptions={loadSuggestedOptions}
|
|
97
98
|
defaultOptions
|
|
98
|
-
className=
|
|
99
|
+
className={styles.visns__ms}
|
|
99
100
|
onChange={(inputValue, action) => {
|
|
100
101
|
onChange(inputValue, action, settings.id);
|
|
101
102
|
}}
|
|
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
|
|
|
2
2
|
import axios from 'axios';
|
|
3
3
|
import AwesomeDebouncePromise from 'awesome-debounce-promise';
|
|
4
4
|
import { ToggleOffFill, ToggleOnFill } from 'akar-icons';
|
|
5
|
+
import styles from './styles/Autocomplete.module.css';
|
|
5
6
|
|
|
6
7
|
const VisnsAutocomplete = (props) => {
|
|
7
8
|
const {
|
|
@@ -113,9 +114,9 @@ const VisnsAutocomplete = (props) => {
|
|
|
113
114
|
|
|
114
115
|
return (
|
|
115
116
|
<>
|
|
116
|
-
<div className=
|
|
117
|
+
<div className={styles.AutocompletePlace}>
|
|
117
118
|
<input
|
|
118
|
-
className=
|
|
119
|
+
className={styles['AutocompletePlace-input']}
|
|
119
120
|
style={{
|
|
120
121
|
height:
|
|
121
122
|
style && style.multi_select_height
|
|
@@ -143,7 +144,7 @@ const VisnsAutocomplete = (props) => {
|
|
|
143
144
|
strokeWidth={2}
|
|
144
145
|
size={24}
|
|
145
146
|
onClick={handleOverwrite}
|
|
146
|
-
className=
|
|
147
|
+
className={styles.toggleActive}
|
|
147
148
|
/>
|
|
148
149
|
)}
|
|
149
150
|
{results.length > 0 ? (
|
|
@@ -151,7 +152,7 @@ const VisnsAutocomplete = (props) => {
|
|
|
151
152
|
{results.map((place) => (
|
|
152
153
|
<li
|
|
153
154
|
key={place.id}
|
|
154
|
-
className=
|
|
155
|
+
className={styles['AutocompletePlace-items']}
|
|
155
156
|
onClick={() => handleItemClicked(place)}
|
|
156
157
|
>
|
|
157
158
|
{place.place_name}
|
|
@@ -159,7 +160,7 @@ const VisnsAutocomplete = (props) => {
|
|
|
159
160
|
))}
|
|
160
161
|
|
|
161
162
|
{isLoading && (
|
|
162
|
-
<li className=
|
|
163
|
+
<li className={styles['AutocompletePlace-items']}>
|
|
163
164
|
Loading...
|
|
164
165
|
</li>
|
|
165
166
|
)}
|
|
@@ -44,6 +44,7 @@ import {
|
|
|
44
44
|
SoundOn,
|
|
45
45
|
TriangleAlert,
|
|
46
46
|
} from 'akar-icons';
|
|
47
|
+
import styles from './styles/DataGrid.module.css';
|
|
47
48
|
|
|
48
49
|
import '@inovua/reactdatagrid-community/index.css';
|
|
49
50
|
import 'react-confirm-alert/src/react-confirm-alert.css';
|
|
@@ -741,14 +742,14 @@ const DataGrid = forwardRef(
|
|
|
741
742
|
}
|
|
742
743
|
|
|
743
744
|
return (
|
|
744
|
-
<div className=
|
|
745
|
+
<div className={styles['filterAction--alt']}>
|
|
745
746
|
{form.export && form.export.url && (
|
|
746
|
-
<button className=
|
|
747
|
+
<button className={styles.btn} onClick={exportTrigger}>
|
|
747
748
|
Export
|
|
748
749
|
</button>
|
|
749
750
|
)}
|
|
750
751
|
{form.sort && form.sort.title && (
|
|
751
|
-
<button className=
|
|
752
|
+
<button className={styles.btn} onClick={sortTrigger}>
|
|
752
753
|
<div className="icon-plus"></div> Sort Order
|
|
753
754
|
</button>
|
|
754
755
|
)}
|
|
@@ -758,7 +759,7 @@ const DataGrid = forwardRef(
|
|
|
758
759
|
form.create.title !== '') ||
|
|
759
760
|
(form.url && form.create?.title !== '') ? (
|
|
760
761
|
<button
|
|
761
|
-
className=
|
|
762
|
+
className={styles.btn}
|
|
762
763
|
onClick={(e) => {
|
|
763
764
|
e.preventDefault();
|
|
764
765
|
|
|
@@ -783,7 +784,7 @@ const DataGrid = forwardRef(
|
|
|
783
784
|
</button>
|
|
784
785
|
) : form.url && form.modal === false ? (
|
|
785
786
|
<button
|
|
786
|
-
className=
|
|
787
|
+
className={styles.btn}
|
|
787
788
|
onClick={(e) => {
|
|
788
789
|
e.preventDefault();
|
|
789
790
|
|
|
@@ -807,8 +808,8 @@ const DataGrid = forwardRef(
|
|
|
807
808
|
|
|
808
809
|
if (isSearchEnabled) {
|
|
809
810
|
return (
|
|
810
|
-
<div className=
|
|
811
|
-
<div className=
|
|
811
|
+
<div className={styles['filterInput--alt']}>
|
|
812
|
+
<div className={styles['icon-search']}>
|
|
812
813
|
<Search strokeWidth={2} size={18} />
|
|
813
814
|
</div>
|
|
814
815
|
<input
|
|
@@ -822,7 +823,7 @@ const DataGrid = forwardRef(
|
|
|
822
823
|
} else if (!isCreateDisabled) {
|
|
823
824
|
return (
|
|
824
825
|
<div
|
|
825
|
-
className=
|
|
826
|
+
className={styles['filterInput--alt']}
|
|
826
827
|
style={{
|
|
827
828
|
height: style.data_grid_search_height
|
|
828
829
|
? style.data_grid_search_height
|
|
@@ -896,7 +897,7 @@ const DataGrid = forwardRef(
|
|
|
896
897
|
data-tooltip-content={tooltipContent}
|
|
897
898
|
strokeWidth={2}
|
|
898
899
|
size={18}
|
|
899
|
-
className=
|
|
900
|
+
className={styles.tdaction}
|
|
900
901
|
key={key}
|
|
901
902
|
/>
|
|
902
903
|
);
|
|
@@ -1051,7 +1052,7 @@ const DataGrid = forwardRef(
|
|
|
1051
1052
|
data-tooltip-content={tooltipContent}
|
|
1052
1053
|
strokeWidth={2}
|
|
1053
1054
|
size={18}
|
|
1054
|
-
className=
|
|
1055
|
+
className={styles.tdaction}
|
|
1055
1056
|
style={iconStyle}
|
|
1056
1057
|
/>
|
|
1057
1058
|
</span>
|
|
@@ -1634,7 +1635,9 @@ const DataGrid = forwardRef(
|
|
|
1634
1635
|
data-tooltip-content={`Download File ${file.file_name}`}
|
|
1635
1636
|
strokeWidth={2}
|
|
1636
1637
|
size={18}
|
|
1637
|
-
className=
|
|
1638
|
+
className={
|
|
1639
|
+
styles.tdaction
|
|
1640
|
+
}
|
|
1638
1641
|
/>
|
|
1639
1642
|
</span>
|
|
1640
1643
|
)
|
|
@@ -1664,7 +1667,9 @@ const DataGrid = forwardRef(
|
|
|
1664
1667
|
}`}
|
|
1665
1668
|
strokeWidth={2}
|
|
1666
1669
|
size={18}
|
|
1667
|
-
className=
|
|
1670
|
+
className={
|
|
1671
|
+
styles.tdaction
|
|
1672
|
+
}
|
|
1668
1673
|
/>
|
|
1669
1674
|
</span>
|
|
1670
1675
|
);
|
|
@@ -2188,7 +2193,7 @@ const DataGrid = forwardRef(
|
|
|
2188
2193
|
if (shouldRenderButton) {
|
|
2189
2194
|
return (
|
|
2190
2195
|
<button
|
|
2191
|
-
className=
|
|
2196
|
+
className={styles.btn}
|
|
2192
2197
|
style={{
|
|
2193
2198
|
padding:
|
|
2194
2199
|
'0.2em 1em 0.05em 1em',
|
|
@@ -2224,7 +2229,9 @@ const DataGrid = forwardRef(
|
|
|
2224
2229
|
data-tooltip-content={`${column.label} Timer`}
|
|
2225
2230
|
strokeWidth={2}
|
|
2226
2231
|
size={18}
|
|
2227
|
-
className=
|
|
2232
|
+
className={
|
|
2233
|
+
styles.tdaction
|
|
2234
|
+
}
|
|
2228
2235
|
/>
|
|
2229
2236
|
</button>
|
|
2230
2237
|
);
|
|
@@ -2300,7 +2307,7 @@ const DataGrid = forwardRef(
|
|
|
2300
2307
|
: 'center',
|
|
2301
2308
|
render: ({ data }) => {
|
|
2302
2309
|
return (
|
|
2303
|
-
<div className=
|
|
2310
|
+
<div className={styles.tdactions}>
|
|
2304
2311
|
{settings.map((setting) =>
|
|
2305
2312
|
renderSetting(setting, data)
|
|
2306
2313
|
)}
|
|
@@ -2574,19 +2581,21 @@ const DataGrid = forwardRef(
|
|
|
2574
2581
|
onClose={modalGalleryClose}
|
|
2575
2582
|
closeOnDocumentClick={false}
|
|
2576
2583
|
>
|
|
2577
|
-
<div
|
|
2578
|
-
|
|
2579
|
-
|
|
2584
|
+
<div
|
|
2585
|
+
className={`${styles.modalwrap} ${styles['top--modal']}`}
|
|
2586
|
+
>
|
|
2587
|
+
<div className={styles.modal}>
|
|
2588
|
+
<div className={styles.modal__header}>
|
|
2580
2589
|
<h1>Gallery</h1>
|
|
2581
2590
|
<button
|
|
2582
|
-
className=
|
|
2591
|
+
className={styles.modal__close}
|
|
2583
2592
|
onClick={modalGalleryClose}
|
|
2584
2593
|
>
|
|
2585
2594
|
<CircleX strokeWidth={1} size={24} />
|
|
2586
2595
|
</button>
|
|
2587
2596
|
</div>
|
|
2588
|
-
<div className=
|
|
2589
|
-
<div className=
|
|
2597
|
+
<div className={styles.modal__content}>
|
|
2598
|
+
<div className={styles.formcontainer}>
|
|
2590
2599
|
<Gallery
|
|
2591
2600
|
images={galleryData}
|
|
2592
2601
|
enableImageSelection={false}
|
package/components/crm/Form.jsx
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import '../styles/global.css';
|
|
2
|
+
|
|
1
3
|
import React, { useState, useEffect } from 'react';
|
|
2
4
|
import { useNavigate } from 'react-router-dom';
|
|
3
5
|
import { motion } from 'framer-motion';
|
|
@@ -18,6 +20,8 @@ import Download from './Download';
|
|
|
18
20
|
import Field from './Field';
|
|
19
21
|
import Table from './DataGrid';
|
|
20
22
|
|
|
23
|
+
import styles from './styles/Form.module.css';
|
|
24
|
+
|
|
21
25
|
function Form({
|
|
22
26
|
ajaxSetting,
|
|
23
27
|
api,
|
|
@@ -150,12 +154,11 @@ function Form({
|
|
|
150
154
|
const handleChangeCheckbox = (e) => {
|
|
151
155
|
const { checked, name, value } = e.target;
|
|
152
156
|
|
|
153
|
-
// If the checkbox is checked and not already in the array, add it to the state
|
|
154
157
|
setFormData((prevFormData) => ({
|
|
155
158
|
...prevFormData,
|
|
156
159
|
[name]: checked
|
|
157
|
-
? [...prevFormData.options, value]
|
|
158
|
-
: prevFormData.options.filter((item) => item !== value),
|
|
160
|
+
? [...prevFormData.options, value]
|
|
161
|
+
: prevFormData.options.filter((item) => item !== value),
|
|
159
162
|
}));
|
|
160
163
|
};
|
|
161
164
|
|
|
@@ -434,17 +437,11 @@ function Form({
|
|
|
434
437
|
|
|
435
438
|
// Helper function to transform snake_case to Title Case
|
|
436
439
|
const transformKey = (key) => {
|
|
437
|
-
return
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
.split(' ')
|
|
443
|
-
// Capitalize the first letter of each word
|
|
444
|
-
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
445
|
-
// Join the words back into a string
|
|
446
|
-
.join(' ')
|
|
447
|
-
);
|
|
440
|
+
return key
|
|
441
|
+
.replace(/_/g, ' ')
|
|
442
|
+
.split(' ')
|
|
443
|
+
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
444
|
+
.join(' ');
|
|
448
445
|
};
|
|
449
446
|
|
|
450
447
|
const handleDownload = async (e) => {
|
|
@@ -460,7 +457,6 @@ function Form({
|
|
|
460
457
|
|
|
461
458
|
const res = await Download(url, method, formData);
|
|
462
459
|
|
|
463
|
-
// Using file-saver to save the file
|
|
464
460
|
const blob = new Blob([res.data], {
|
|
465
461
|
type: 'application/octet-stream',
|
|
466
462
|
});
|
|
@@ -556,9 +552,8 @@ function Form({
|
|
|
556
552
|
|
|
557
553
|
if (['create', 'update'].includes(formType)) {
|
|
558
554
|
fields.forEach((item) => {
|
|
559
|
-
// Skip validation if formType is 'update' and field has createOnly property
|
|
560
555
|
if (formType === 'update' && item.createOnly) {
|
|
561
|
-
return;
|
|
556
|
+
return;
|
|
562
557
|
}
|
|
563
558
|
|
|
564
559
|
if (item.required === true) {
|
|
@@ -581,7 +576,8 @@ function Form({
|
|
|
581
576
|
item.label +
|
|
582
577
|
' is a required field.<br/>';
|
|
583
578
|
}
|
|
584
|
-
_inputClass[item.id] =
|
|
579
|
+
_inputClass[item.id] =
|
|
580
|
+
styles.inputError;
|
|
585
581
|
}
|
|
586
582
|
} else {
|
|
587
583
|
if (
|
|
@@ -594,7 +590,7 @@ function Form({
|
|
|
594
590
|
item.label +
|
|
595
591
|
' is a required field.<br/>';
|
|
596
592
|
}
|
|
597
|
-
_inputClass[item.id] =
|
|
593
|
+
_inputClass[item.id] = styles.inputError;
|
|
598
594
|
}
|
|
599
595
|
} else {
|
|
600
596
|
if (
|
|
@@ -624,7 +620,8 @@ function Form({
|
|
|
624
620
|
item.label +
|
|
625
621
|
' is a required field.<br/>';
|
|
626
622
|
}
|
|
627
|
-
_inputClass[item.id] =
|
|
623
|
+
_inputClass[item.id] =
|
|
624
|
+
styles.inputError;
|
|
628
625
|
} else {
|
|
629
626
|
_inputClass[item.id] = '';
|
|
630
627
|
}
|
|
@@ -702,12 +699,9 @@ function Form({
|
|
|
702
699
|
}
|
|
703
700
|
|
|
704
701
|
if (fileUpload === true && formData[fileKey] !== null) {
|
|
705
|
-
// Check if formData[fileKey] is an array of file objects
|
|
706
702
|
if (Array.isArray(formData[fileKey])) {
|
|
707
|
-
// Already an array, so no need to convert
|
|
708
703
|
const files = formData[fileKey];
|
|
709
704
|
|
|
710
|
-
// Use Promise.all to wait for all file uploads to complete
|
|
711
705
|
const uploadPromises = files.map(async (file) => {
|
|
712
706
|
const fileRes = await Vapor.store(file, {
|
|
713
707
|
progress: (progress) => {
|
|
@@ -715,7 +709,6 @@ function Form({
|
|
|
715
709
|
},
|
|
716
710
|
});
|
|
717
711
|
|
|
718
|
-
// Return an object for each file with its upload details
|
|
719
712
|
return {
|
|
720
713
|
uuid: fileRes.uuid,
|
|
721
714
|
key: fileRes.key,
|
|
@@ -727,15 +720,12 @@ function Form({
|
|
|
727
720
|
};
|
|
728
721
|
});
|
|
729
722
|
|
|
730
|
-
// Wait for all file uploads to complete
|
|
731
723
|
const uploadedFiles = await Promise.all(
|
|
732
724
|
uploadPromises
|
|
733
725
|
);
|
|
734
726
|
|
|
735
|
-
// Store the details of uploaded files in formData, under a specific key
|
|
736
727
|
formData['uploadedFiles'] = uploadedFiles;
|
|
737
728
|
} else if (formData[fileKey] instanceof File) {
|
|
738
|
-
// Handle single file upload (original logic remains the same)
|
|
739
729
|
const fileRes = await Vapor.store(
|
|
740
730
|
formData[fileKey],
|
|
741
731
|
{
|
|
@@ -768,9 +758,7 @@ function Form({
|
|
|
768
758
|
const value = formData[key];
|
|
769
759
|
const field = fieldMap[key];
|
|
770
760
|
|
|
771
|
-
// Check if the field exists and is of type 'multi-dropdown-ajax'
|
|
772
761
|
if (field && field.type === 'multi-dropdown-ajax') {
|
|
773
|
-
// First check if 'value' is an object and then check if 'value' and 'label' exist in it
|
|
774
762
|
if (
|
|
775
763
|
typeof value === 'object' &&
|
|
776
764
|
value !== null &&
|
|
@@ -853,7 +841,7 @@ function Form({
|
|
|
853
841
|
};
|
|
854
842
|
|
|
855
843
|
const fetchData = async () => {
|
|
856
|
-
let _formData = { ...formData };
|
|
844
|
+
let _formData = { ...formData };
|
|
857
845
|
|
|
858
846
|
if (formSettings.fields.length > 0) {
|
|
859
847
|
formSettings.fields.forEach((item) => {
|
|
@@ -892,7 +880,6 @@ function Form({
|
|
|
892
880
|
method,
|
|
893
881
|
payload = {};
|
|
894
882
|
|
|
895
|
-
// Function to extract dataId from ajaxSetting
|
|
896
883
|
const getDataId = () => {
|
|
897
884
|
for (const item of ajaxSetting.where) {
|
|
898
885
|
if (
|
|
@@ -926,7 +913,7 @@ function Form({
|
|
|
926
913
|
? result.data
|
|
927
914
|
: result;
|
|
928
915
|
|
|
929
|
-
const updatedFormData = { ..._formData };
|
|
916
|
+
const updatedFormData = { ..._formData };
|
|
930
917
|
|
|
931
918
|
Object.keys(updatedFormData).forEach((item) => {
|
|
932
919
|
let tempRes = '';
|
|
@@ -1048,17 +1035,14 @@ function Form({
|
|
|
1048
1035
|
}
|
|
1049
1036
|
|
|
1050
1037
|
if (item.includes('.')) {
|
|
1051
|
-
// Split the item string by the dot
|
|
1052
1038
|
let keys = item.split('.');
|
|
1053
1039
|
|
|
1054
|
-
// Access the nested property
|
|
1055
1040
|
let value = data;
|
|
1056
1041
|
|
|
1057
1042
|
for (let key of keys) {
|
|
1058
1043
|
value = value[key];
|
|
1059
1044
|
}
|
|
1060
1045
|
|
|
1061
|
-
// Update the updatedFormData object
|
|
1062
1046
|
updatedFormData[item] = value;
|
|
1063
1047
|
}
|
|
1064
1048
|
} else {
|
|
@@ -1146,7 +1130,6 @@ function Form({
|
|
|
1146
1130
|
|
|
1147
1131
|
setFetchTrigger(!fetchTrigger);
|
|
1148
1132
|
} catch (error) {
|
|
1149
|
-
// Handle error here
|
|
1150
1133
|
toast.error('Failed to fetch data:', error);
|
|
1151
1134
|
}
|
|
1152
1135
|
} else {
|
|
@@ -1194,8 +1177,8 @@ function Form({
|
|
|
1194
1177
|
|
|
1195
1178
|
if (type && type === 'inline') {
|
|
1196
1179
|
return (
|
|
1197
|
-
<div className=
|
|
1198
|
-
<form className=
|
|
1180
|
+
<div className={styles.formcontainer}>
|
|
1181
|
+
<form className={styles.modalForm}>
|
|
1199
1182
|
{formSettings.fields.map((item, index) => {
|
|
1200
1183
|
if (item.hasOwnProperty('hide') && item.hide === true) {
|
|
1201
1184
|
return null;
|
|
@@ -1227,7 +1210,7 @@ function Form({
|
|
|
1227
1210
|
|
|
1228
1211
|
return (
|
|
1229
1212
|
<div
|
|
1230
|
-
className=
|
|
1213
|
+
className={styles.grid__full}
|
|
1231
1214
|
key={
|
|
1232
1215
|
index +
|
|
1233
1216
|
'-fields-' +
|
|
@@ -1298,13 +1281,11 @@ function Form({
|
|
|
1298
1281
|
);
|
|
1299
1282
|
}
|
|
1300
1283
|
})}
|
|
1301
|
-
<div className=
|
|
1284
|
+
<div className={`${styles.formItem} ${styles.fwItem}`}>
|
|
1302
1285
|
<motion.div
|
|
1303
|
-
className=
|
|
1286
|
+
className={styles.progress__bar}
|
|
1304
1287
|
initial={{ width: '0%' }}
|
|
1305
|
-
animate={{
|
|
1306
|
-
width: uploadProgress + '%',
|
|
1307
|
-
}}
|
|
1288
|
+
animate={{ width: uploadProgress + '%' }}
|
|
1308
1289
|
transition={{
|
|
1309
1290
|
duration: 3,
|
|
1310
1291
|
ease: [0.165, 0.84, 0.44, 1.0],
|
|
@@ -1312,7 +1293,7 @@ function Form({
|
|
|
1312
1293
|
/>
|
|
1313
1294
|
</div>
|
|
1314
1295
|
{tableData?.dataSource?.length > 0 && (
|
|
1315
|
-
<div className=
|
|
1296
|
+
<div className={`${styles.formItem} ${styles.fwItem}`}>
|
|
1316
1297
|
<ReactDataGrid
|
|
1317
1298
|
idProperty="form-table-result"
|
|
1318
1299
|
columns={tableData.columns}
|
|
@@ -1323,14 +1304,13 @@ function Form({
|
|
|
1323
1304
|
</div>
|
|
1324
1305
|
)}
|
|
1325
1306
|
</form>
|
|
1326
|
-
<div className=
|
|
1307
|
+
<div className={styles.polActions}>
|
|
1327
1308
|
{formSettings.hasOwnProperty('customButton') &&
|
|
1328
1309
|
formSettings.customButton.url ? (
|
|
1329
1310
|
<button
|
|
1330
|
-
className=
|
|
1311
|
+
className={styles.btn}
|
|
1331
1312
|
onClick={(e) => {
|
|
1332
1313
|
e.preventDefault();
|
|
1333
|
-
|
|
1334
1314
|
handleCustom(formSettings);
|
|
1335
1315
|
}}
|
|
1336
1316
|
>
|
|
@@ -1341,21 +1321,21 @@ function Form({
|
|
|
1341
1321
|
) : null}
|
|
1342
1322
|
|
|
1343
1323
|
{formSettings?.download?.button?.label && (
|
|
1344
|
-
<button className=
|
|
1324
|
+
<button className={styles.btn} onClick={handleDownload}>
|
|
1345
1325
|
{formSettings.download.button.label}
|
|
1346
1326
|
</button>
|
|
1347
1327
|
)}
|
|
1348
1328
|
|
|
1349
1329
|
{formSettings.hasOwnProperty('sortButton') &&
|
|
1350
1330
|
formSettings.sortButton.url ? (
|
|
1351
|
-
<button className=
|
|
1331
|
+
<button className={styles.btn} onClick={handleSort}>
|
|
1352
1332
|
{formSettings.sortButton.label
|
|
1353
1333
|
? formSettings.sortButton.label
|
|
1354
1334
|
: 'Sort'}
|
|
1355
1335
|
</button>
|
|
1356
1336
|
) : null}
|
|
1357
1337
|
|
|
1358
|
-
<button className=
|
|
1338
|
+
<button className={styles.btn} onClick={handleSubmit}>
|
|
1359
1339
|
{formSettings?.save?.button?.label
|
|
1360
1340
|
? formSettings.save.button.label
|
|
1361
1341
|
: 'Save'}
|
|
@@ -1374,8 +1354,8 @@ function Form({
|
|
|
1374
1354
|
</button>
|
|
1375
1355
|
</div>
|
|
1376
1356
|
<div className="modal__content">
|
|
1377
|
-
<div className=
|
|
1378
|
-
<form className=
|
|
1357
|
+
<div className={styles.formcontainer}>
|
|
1358
|
+
<form className={styles.modalForm}>
|
|
1379
1359
|
{formSettings.fields.map((item, index) => {
|
|
1380
1360
|
if (
|
|
1381
1361
|
item.hasOwnProperty('hide') &&
|
|
@@ -1448,9 +1428,11 @@ function Form({
|
|
|
1448
1428
|
/>
|
|
1449
1429
|
);
|
|
1450
1430
|
})}
|
|
1451
|
-
<div
|
|
1431
|
+
<div
|
|
1432
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
1433
|
+
>
|
|
1452
1434
|
<motion.div
|
|
1453
|
-
className=
|
|
1435
|
+
className={styles.progress__bar}
|
|
1454
1436
|
initial={{ width: '0%' }}
|
|
1455
1437
|
animate={{
|
|
1456
1438
|
width: uploadProgress + '%',
|
|
@@ -1466,18 +1448,22 @@ function Form({
|
|
|
1466
1448
|
'saveAnother'
|
|
1467
1449
|
) ? (
|
|
1468
1450
|
<>
|
|
1469
|
-
<div
|
|
1451
|
+
<div
|
|
1452
|
+
className={`${styles.formItem} ${styles.lastItem}`}
|
|
1453
|
+
>
|
|
1470
1454
|
<button
|
|
1471
|
-
className=
|
|
1455
|
+
className={styles.btn}
|
|
1472
1456
|
onClick={handleSubmit}
|
|
1473
1457
|
data-type="save"
|
|
1474
1458
|
>
|
|
1475
1459
|
Save & Close
|
|
1476
1460
|
</button>
|
|
1477
1461
|
</div>
|
|
1478
|
-
<div
|
|
1462
|
+
<div
|
|
1463
|
+
className={`${styles.formItem} ${styles.lastItem}`}
|
|
1464
|
+
>
|
|
1479
1465
|
<button
|
|
1480
|
-
className=
|
|
1466
|
+
className={styles.btn}
|
|
1481
1467
|
onClick={handleSubmit}
|
|
1482
1468
|
data-type="saveAnother"
|
|
1483
1469
|
>
|
|
@@ -1486,9 +1472,11 @@ function Form({
|
|
|
1486
1472
|
</div>
|
|
1487
1473
|
</>
|
|
1488
1474
|
) : (
|
|
1489
|
-
<div
|
|
1475
|
+
<div
|
|
1476
|
+
className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
|
|
1477
|
+
>
|
|
1490
1478
|
<button
|
|
1491
|
-
className=
|
|
1479
|
+
className={styles.btn}
|
|
1492
1480
|
onClick={handleSubmit}
|
|
1493
1481
|
data-type="save"
|
|
1494
1482
|
>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { useEffect, useState } from 'react';
|
|
2
2
|
import SelectList from './SelectList';
|
|
3
3
|
import Select, { createFilter } from 'react-select';
|
|
4
|
+
import styles from './styles/AsyncSelect.module.css';
|
|
4
5
|
|
|
5
6
|
function MultiSelect({
|
|
6
7
|
inputValue,
|
|
@@ -51,7 +52,7 @@ function MultiSelect({
|
|
|
51
52
|
onChange={(inputValue, action) => {
|
|
52
53
|
onChange(inputValue, action, settings.id);
|
|
53
54
|
}}
|
|
54
|
-
className=
|
|
55
|
+
className={styles.visns__ms}
|
|
55
56
|
classNamePrefix="visns-select"
|
|
56
57
|
styles={{
|
|
57
58
|
menu: (provided) => ({ ...provided, zIndex: 9999 }),
|
|
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
|
|
|
2
2
|
import ReactToPrint from 'react-to-print';
|
|
3
3
|
|
|
4
4
|
import CustomFetch from './Fetch';
|
|
5
|
+
import styles from './styles/QrCode.module.css';
|
|
5
6
|
|
|
6
7
|
const QrCode = ({ config, dataId }) => {
|
|
7
8
|
const printComponentRef = useRef();
|
|
@@ -27,11 +28,11 @@ const QrCode = ({ config, dataId }) => {
|
|
|
27
28
|
|
|
28
29
|
return (
|
|
29
30
|
<>
|
|
30
|
-
<div className=
|
|
31
|
+
<div className={styles.gridtxt} ref={printComponentRef}>
|
|
31
32
|
{qrCodeData.logo && qrCodeData.logo !== '' && (
|
|
32
|
-
<ul className=
|
|
33
|
+
<ul className={styles.customer__overview}>
|
|
33
34
|
<li
|
|
34
|
-
className=
|
|
35
|
+
className={styles['fw-grid-item']}
|
|
35
36
|
style={{
|
|
36
37
|
textAlign: 'center',
|
|
37
38
|
}}
|
|
@@ -44,9 +45,9 @@ const QrCode = ({ config, dataId }) => {
|
|
|
44
45
|
</li>
|
|
45
46
|
</ul>
|
|
46
47
|
)}
|
|
47
|
-
<ul className=
|
|
48
|
+
<ul className={styles.customer__overview}>
|
|
48
49
|
<li
|
|
49
|
-
className=
|
|
50
|
+
className={styles['fw-grid-item']}
|
|
50
51
|
style={{
|
|
51
52
|
textAlign: 'center',
|
|
52
53
|
}}
|
|
@@ -54,9 +55,9 @@ const QrCode = ({ config, dataId }) => {
|
|
|
54
55
|
{qrCodeData.title}
|
|
55
56
|
</li>
|
|
56
57
|
</ul>
|
|
57
|
-
<ul className=
|
|
58
|
+
<ul className={styles.customer__overview}>
|
|
58
59
|
<li
|
|
59
|
-
className=
|
|
60
|
+
className={styles['fw-grid-item']}
|
|
60
61
|
style={{ textAlign: 'center' }}
|
|
61
62
|
>
|
|
62
63
|
{qrCodeData.qrCode && qrCodeData.qrCode !== '' && (
|
|
@@ -69,7 +70,7 @@ const QrCode = ({ config, dataId }) => {
|
|
|
69
70
|
</li>
|
|
70
71
|
</ul>
|
|
71
72
|
</div>
|
|
72
|
-
<div className=
|
|
73
|
+
<div className={styles.polActions}>
|
|
73
74
|
<ReactToPrint
|
|
74
75
|
trigger={() => <button className="btn">Print</button>}
|
|
75
76
|
content={() => printComponentRef.current}
|