@visns-studio/visns-components 5.0.1-8.1 → 5.0.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/package.json +1 -3
- package/src/components/crm/AsyncSelect.jsx +15 -121
- package/src/components/crm/DataGrid.jsx +5 -25
- package/src/components/crm/Field.jsx +148 -174
- package/src/components/crm/Form.jsx +28 -41
- package/src/components/crm/MultiSelect.jsx +29 -96
- package/src/components/crm/Navigation.jsx +40 -2
- package/src/components/crm/QrCode.jsx +8 -12
- package/src/components/crm/auth/Login.jsx +1 -9
- package/src/components/crm/auth/styles/Login.module.scss +3 -4
- package/src/components/crm/auth/styles/Profile.module.scss +14 -56
- package/src/components/crm/generic/GenericAuth.jsx +2 -5
- package/src/components/crm/generic/GenericDetail.jsx +18 -509
- package/src/components/crm/generic/styles/AuditLog.module.scss +0 -4
- package/src/components/crm/generic/styles/GenericDetail.module.scss +121 -261
- package/src/components/crm/generic/styles/GenericDynamic.module.scss +67 -35
- package/src/components/crm/generic/styles/GenericFormBuilder.module.scss +43 -4
- package/src/components/crm/generic/styles/GenericIndex.module.scss +1 -1
- package/src/components/crm/styles/Autocomplete.module.scss +20 -12
- package/src/components/crm/styles/DataGrid.module.scss +3 -2
- package/src/components/crm/styles/Field.module.scss +13 -19
- package/src/components/crm/styles/Form.module.scss +5 -5
- package/src/components/crm/styles/Navigation.module.scss +61 -11
- package/src/components/crm/styles/QrCode.module.scss +0 -4
- package/src/components/styles/global.css +5 -95
- package/src/components/crm/generic/GenericEditableTable.jsx +0 -407
- package/src/components/crm/generic/styles/GenericEditableTable.module.scss +0 -178
package/package.json
CHANGED
|
@@ -16,7 +16,6 @@
|
|
|
16
16
|
"awesome-debounce-promise": "^2.1.0",
|
|
17
17
|
"axios": "^1.7.7",
|
|
18
18
|
"dayjs": "^1.11.13",
|
|
19
|
-
"fabric": "^6.5.4",
|
|
20
19
|
"file-saver": "^2.0.5",
|
|
21
20
|
"framer-motion": "^11.11.9",
|
|
22
21
|
"html-react-parser": "^5.1.18",
|
|
@@ -27,7 +26,6 @@
|
|
|
27
26
|
"numeral": "^2.0.6",
|
|
28
27
|
"pluralize": "^8.0.0",
|
|
29
28
|
"quill-image-uploader": "^1.3.0",
|
|
30
|
-
"react-big-calendar": "^1.17.1",
|
|
31
29
|
"react-color": "^2.19.3",
|
|
32
30
|
"react-confirm-alert": "^3.0.6",
|
|
33
31
|
"react-copy-to-clipboard": "^5.1.0",
|
|
@@ -77,7 +75,7 @@
|
|
|
77
75
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
78
76
|
},
|
|
79
77
|
"name": "@visns-studio/visns-components",
|
|
80
|
-
"version": "5.0.
|
|
78
|
+
"version": "5.0.2",
|
|
81
79
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
82
80
|
"main": "src/index.js",
|
|
83
81
|
"files": [
|
|
@@ -1,28 +1,11 @@
|
|
|
1
|
-
import React, { useCallback } from 'react';
|
|
1
|
+
import React, { useEffect, useState, useCallback } from 'react';
|
|
2
2
|
import CustomFetch from './Fetch';
|
|
3
3
|
import SelectList from './SelectList';
|
|
4
4
|
import AsyncSelect from 'react-select/async';
|
|
5
|
-
import AsyncCreatableSelect from 'react-select/async-creatable';
|
|
6
5
|
import { debounce } from 'lodash';
|
|
7
6
|
import styles from './styles/AsyncSelect.module.scss';
|
|
8
|
-
import { components } from 'react-select';
|
|
9
|
-
|
|
10
|
-
// Custom Option component to add a second line of text
|
|
11
|
-
const CustomOption = (props) => (
|
|
12
|
-
<components.Option {...props}>
|
|
13
|
-
<div>
|
|
14
|
-
{props.data.label}
|
|
15
|
-
{props.data.description && props.data.description !== '' && (
|
|
16
|
-
<div style={{ fontSize: '0.85em', color: '#888' }}>
|
|
17
|
-
{props.data.description}
|
|
18
|
-
</div>
|
|
19
|
-
)}
|
|
20
|
-
</div>
|
|
21
|
-
</components.Option>
|
|
22
|
-
);
|
|
23
7
|
|
|
24
8
|
function VisnsAsyncSelect({
|
|
25
|
-
className,
|
|
26
9
|
fields = [],
|
|
27
10
|
inputValue,
|
|
28
11
|
onChange,
|
|
@@ -31,7 +14,6 @@ function VisnsAsyncSelect({
|
|
|
31
14
|
placeholder,
|
|
32
15
|
settings,
|
|
33
16
|
style,
|
|
34
|
-
isCreatable = false, // New prop to toggle creatable functionality
|
|
35
17
|
}) {
|
|
36
18
|
const loadSuggestedOptions = useCallback(
|
|
37
19
|
debounce((inputValue, callback) => {
|
|
@@ -49,6 +31,7 @@ function VisnsAsyncSelect({
|
|
|
49
31
|
return new Promise((resolve, reject) => {
|
|
50
32
|
let data = [];
|
|
51
33
|
|
|
34
|
+
// Prepare payload
|
|
52
35
|
let payload = {
|
|
53
36
|
where: [
|
|
54
37
|
{
|
|
@@ -58,50 +41,38 @@ function VisnsAsyncSelect({
|
|
|
58
41
|
],
|
|
59
42
|
};
|
|
60
43
|
|
|
44
|
+
// Check and set fields from settings if fields prop is null or empty
|
|
61
45
|
if (fields && fields.length > 0) {
|
|
62
46
|
payload.fields = fields;
|
|
63
47
|
} else if (settings.fields && settings.fields.length > 0) {
|
|
64
48
|
payload.fields = settings.fields;
|
|
65
49
|
}
|
|
66
50
|
|
|
51
|
+
// Check and set orderBy from settings if orderBy prop is null or empty
|
|
67
52
|
if (orderBy) {
|
|
68
53
|
payload.orderBy = orderBy;
|
|
69
54
|
} else if (settings.orderBy) {
|
|
70
55
|
payload.orderBy = settings.orderBy;
|
|
71
56
|
}
|
|
72
57
|
|
|
58
|
+
// Fetch data
|
|
73
59
|
CustomFetch(
|
|
74
60
|
settings.url,
|
|
75
61
|
'POST',
|
|
76
62
|
payload,
|
|
77
63
|
function (result) {
|
|
78
64
|
result.data.forEach((a) => {
|
|
79
|
-
let mainLabel = a.label || a[Object.keys(a)[0]];
|
|
80
|
-
|
|
81
|
-
if (settings.fields && settings.fields.length > 2) {
|
|
82
|
-
const additionalFields =
|
|
83
|
-
settings.fields.slice(2);
|
|
84
|
-
const additionalLabels = additionalFields
|
|
85
|
-
.filter(
|
|
86
|
-
(field) =>
|
|
87
|
-
field !== settings.descriptionKey
|
|
88
|
-
)
|
|
89
|
-
.map((field) => a[field] || '')
|
|
90
|
-
.join(' ');
|
|
91
|
-
mainLabel += ` ${additionalLabels}`;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
65
|
let _optionItem = {
|
|
95
66
|
value: a.id,
|
|
96
|
-
label:
|
|
97
|
-
description: settings.descriptionKey
|
|
98
|
-
? a[settings.descriptionKey]
|
|
99
|
-
: '',
|
|
67
|
+
label: a.label,
|
|
100
68
|
};
|
|
101
69
|
|
|
102
70
|
Object.keys(a).forEach((b) => {
|
|
103
|
-
if (b !== 'id'
|
|
104
|
-
_optionItem
|
|
71
|
+
if (b !== 'id') {
|
|
72
|
+
_optionItem = {
|
|
73
|
+
..._optionItem,
|
|
74
|
+
[b]: a[b],
|
|
75
|
+
};
|
|
105
76
|
}
|
|
106
77
|
});
|
|
107
78
|
|
|
@@ -116,92 +87,17 @@ function VisnsAsyncSelect({
|
|
|
116
87
|
);
|
|
117
88
|
});
|
|
118
89
|
} else {
|
|
119
|
-
return Promise.resolve([]);
|
|
90
|
+
return Promise.resolve([]); // Return empty array if input is less than 3 characters
|
|
120
91
|
}
|
|
121
92
|
};
|
|
122
93
|
|
|
123
|
-
const handleCreateOption = async (inputValue) => {
|
|
124
|
-
if (
|
|
125
|
-
settings.creatableConfig &&
|
|
126
|
-
settings.creatableConfig.url &&
|
|
127
|
-
settings.creatableConfig.method
|
|
128
|
-
) {
|
|
129
|
-
let payload;
|
|
130
|
-
let firstNameField, lastNameField;
|
|
131
|
-
|
|
132
|
-
if (
|
|
133
|
-
settings.creatableConfig.type === 'name' &&
|
|
134
|
-
Array.isArray(settings.creatableConfig.fields)
|
|
135
|
-
) {
|
|
136
|
-
[firstNameField, lastNameField] =
|
|
137
|
-
settings.creatableConfig.fields;
|
|
138
|
-
|
|
139
|
-
const nameParts = inputValue.trim().split(' ');
|
|
140
|
-
let firstname = '';
|
|
141
|
-
let lastname = '';
|
|
142
|
-
|
|
143
|
-
if (nameParts.length === 1) {
|
|
144
|
-
firstname = nameParts[0];
|
|
145
|
-
} else if (nameParts.length === 2) {
|
|
146
|
-
firstname = nameParts[0];
|
|
147
|
-
lastname = nameParts[1];
|
|
148
|
-
} else {
|
|
149
|
-
firstname = nameParts[0];
|
|
150
|
-
lastname = nameParts.slice(1).join(' ');
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
payload = {
|
|
154
|
-
[firstNameField || 'firstname']: firstname,
|
|
155
|
-
[lastNameField || 'lastname']: lastname,
|
|
156
|
-
};
|
|
157
|
-
} else {
|
|
158
|
-
payload = { label: inputValue };
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
const newOption = await CustomFetch(
|
|
162
|
-
settings.creatableConfig.url,
|
|
163
|
-
settings.creatableConfig.method,
|
|
164
|
-
payload
|
|
165
|
-
);
|
|
166
|
-
|
|
167
|
-
if (newOption && newOption.data && newOption.data.data) {
|
|
168
|
-
const newOptionData = newOption.data.data;
|
|
169
|
-
const option = {
|
|
170
|
-
value: newOptionData.id,
|
|
171
|
-
label:
|
|
172
|
-
settings.creatableConfig.type === 'name'
|
|
173
|
-
? `${
|
|
174
|
-
newOptionData[firstNameField] ||
|
|
175
|
-
newOptionData.firstname
|
|
176
|
-
} ${
|
|
177
|
-
newOptionData[lastNameField] ||
|
|
178
|
-
newOptionData.lastname
|
|
179
|
-
}`
|
|
180
|
-
: newOptionData.label || inputValue,
|
|
181
|
-
description: settings.descriptionKey
|
|
182
|
-
? newOptionData[settings.descriptionKey]
|
|
183
|
-
: 'Placeholder text for description',
|
|
184
|
-
...newOptionData,
|
|
185
|
-
};
|
|
186
|
-
|
|
187
|
-
onChange(option, { action: 'create-option' }, settings.id); // Directly call onChange with new option
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
};
|
|
191
|
-
|
|
192
|
-
const SelectComponent = isCreatable ? AsyncCreatableSelect : AsyncSelect;
|
|
193
|
-
|
|
194
94
|
return (
|
|
195
|
-
<
|
|
95
|
+
<AsyncSelect
|
|
196
96
|
isClearable
|
|
197
97
|
cacheOptions
|
|
198
98
|
loadOptions={loadSuggestedOptions}
|
|
199
99
|
defaultOptions
|
|
200
|
-
className={
|
|
201
|
-
className
|
|
202
|
-
? `${styles.visns__ms} ${className}`
|
|
203
|
-
: styles.visns__ms
|
|
204
|
-
}
|
|
100
|
+
className={styles.visns__ms}
|
|
205
101
|
onChange={(inputValue, action) => {
|
|
206
102
|
onChange(inputValue, action, settings.id);
|
|
207
103
|
}}
|
|
@@ -210,9 +106,7 @@ function VisnsAsyncSelect({
|
|
|
210
106
|
onKeyDown(e);
|
|
211
107
|
}
|
|
212
108
|
}}
|
|
213
|
-
|
|
214
|
-
onCreateOption={isCreatable ? handleCreateOption : undefined}
|
|
215
|
-
components={{ Option: CustomOption }}
|
|
109
|
+
components={{ SelectList }}
|
|
216
110
|
styles={{
|
|
217
111
|
menu: (styles) => ({
|
|
218
112
|
...styles,
|
|
@@ -2382,32 +2382,12 @@ const DataGrid = forwardRef(
|
|
|
2382
2382
|
data[column.id] &&
|
|
2383
2383
|
data[column.id] !== ''
|
|
2384
2384
|
) {
|
|
2385
|
-
let content = String(
|
|
2386
|
-
data[column.id]
|
|
2387
|
-
);
|
|
2388
|
-
|
|
2389
|
-
// If removeFormat is true, strip HTML tags
|
|
2390
|
-
if (column.removeFormat) {
|
|
2391
|
-
content = content.replace(
|
|
2392
|
-
/<\/?[^>]+(>|$)/g,
|
|
2393
|
-
''
|
|
2394
|
-
); // Simple regex to strip HTML tags
|
|
2395
|
-
}
|
|
2396
|
-
|
|
2397
|
-
// If truncate has a value, limit content to specified number of characters
|
|
2398
|
-
if (column.truncate) {
|
|
2399
|
-
content =
|
|
2400
|
-
content.length >
|
|
2401
|
-
column.truncate
|
|
2402
|
-
? content.substring(
|
|
2403
|
-
0,
|
|
2404
|
-
column.truncate
|
|
2405
|
-
) + '...'
|
|
2406
|
-
: content;
|
|
2407
|
-
}
|
|
2408
|
-
|
|
2409
2385
|
return (
|
|
2410
|
-
<span>
|
|
2386
|
+
<span>
|
|
2387
|
+
{parse(
|
|
2388
|
+
String(data[column.id])
|
|
2389
|
+
)}
|
|
2390
|
+
</span>
|
|
2411
2391
|
);
|
|
2412
2392
|
} else {
|
|
2413
2393
|
return null;
|