@visns-studio/visns-components 4.2.3 → 4.2.5
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.
|
@@ -29,6 +29,7 @@ function VisnsAsyncSelect({
|
|
|
29
29
|
return new Promise((resolve, reject) => {
|
|
30
30
|
let data = [];
|
|
31
31
|
|
|
32
|
+
// Prepare payload
|
|
32
33
|
let payload = {
|
|
33
34
|
where: [
|
|
34
35
|
{
|
|
@@ -38,14 +39,21 @@ function VisnsAsyncSelect({
|
|
|
38
39
|
],
|
|
39
40
|
};
|
|
40
41
|
|
|
41
|
-
if
|
|
42
|
+
// Check and set fields from settings if fields prop is null or empty
|
|
43
|
+
if (fields && fields.length > 0) {
|
|
42
44
|
payload.fields = fields;
|
|
45
|
+
} else if (settings.fields && settings.fields.length > 0) {
|
|
46
|
+
payload.fields = settings.fields;
|
|
43
47
|
}
|
|
44
48
|
|
|
49
|
+
// Check and set orderBy from settings if orderBy prop is null or empty
|
|
45
50
|
if (orderBy) {
|
|
46
51
|
payload.orderBy = orderBy;
|
|
52
|
+
} else if (settings.orderBy) {
|
|
53
|
+
payload.orderBy = settings.orderBy;
|
|
47
54
|
}
|
|
48
55
|
|
|
56
|
+
// Fetch data
|
|
49
57
|
CustomFetch(
|
|
50
58
|
settings.url,
|
|
51
59
|
'POST',
|
|
@@ -92,7 +100,9 @@ function VisnsAsyncSelect({
|
|
|
92
100
|
onChange(inputValue, action, settings.id);
|
|
93
101
|
}}
|
|
94
102
|
onKeyDown={(e) => {
|
|
95
|
-
onKeyDown
|
|
103
|
+
if (onKeyDown) {
|
|
104
|
+
onKeyDown(e);
|
|
105
|
+
}
|
|
96
106
|
}}
|
|
97
107
|
components={{ SelectList }}
|
|
98
108
|
styles={{
|
package/components/crm/Field.jsx
CHANGED
|
@@ -8,7 +8,8 @@ import { BlockPicker } from 'react-color';
|
|
|
8
8
|
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
|
9
9
|
import { NumericFormat, PatternFormat } from 'react-number-format';
|
|
10
10
|
import { Editor } from '@tinymce/tinymce-react';
|
|
11
|
-
import { CloudDownload, Copy, TrashCan } from 'akar-icons';
|
|
11
|
+
import { CirclePlus, CloudDownload, Copy, TrashCan } from 'akar-icons';
|
|
12
|
+
import { toast } from 'react-toastify';
|
|
12
13
|
import styles from './styles/Field.module.css';
|
|
13
14
|
|
|
14
15
|
import CustomFetch from './Fetch';
|
|
@@ -38,6 +39,9 @@ function Field({
|
|
|
38
39
|
onChangeSelect,
|
|
39
40
|
onChangeSignature,
|
|
40
41
|
onChangeRicheditor,
|
|
42
|
+
onChangeTableRadio,
|
|
43
|
+
onChangeAddTableTextRow,
|
|
44
|
+
onChangeTableText,
|
|
41
45
|
onChangeToggle,
|
|
42
46
|
onFileDownload,
|
|
43
47
|
setFormData,
|
|
@@ -159,6 +163,14 @@ function Field({
|
|
|
159
163
|
],
|
|
160
164
|
};
|
|
161
165
|
|
|
166
|
+
if (a.fields) {
|
|
167
|
+
filter.fields = a.fields;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
if (a.orderBy) {
|
|
171
|
+
filter.orderBy = a.orderBy;
|
|
172
|
+
}
|
|
173
|
+
|
|
162
174
|
CustomFetch(
|
|
163
175
|
a.url,
|
|
164
176
|
'POST',
|
|
@@ -181,6 +193,14 @@ function Field({
|
|
|
181
193
|
],
|
|
182
194
|
};
|
|
183
195
|
|
|
196
|
+
if (settings.fields) {
|
|
197
|
+
filter.fields = settings.fields;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
if (settings.orderBy) {
|
|
201
|
+
filter.orderBy = settings.orderBy;
|
|
202
|
+
}
|
|
203
|
+
|
|
184
204
|
CustomFetch(
|
|
185
205
|
settings.child.url,
|
|
186
206
|
'POST',
|
|
@@ -1090,7 +1110,20 @@ function Field({
|
|
|
1090
1110
|
onClick={(e) => {
|
|
1091
1111
|
e.preventDefault();
|
|
1092
1112
|
|
|
1093
|
-
|
|
1113
|
+
if (settings.role) {
|
|
1114
|
+
if (
|
|
1115
|
+
userProfile?.roles[0]?.name ===
|
|
1116
|
+
settings.role
|
|
1117
|
+
) {
|
|
1118
|
+
onChangeSignature(settings.id);
|
|
1119
|
+
} else {
|
|
1120
|
+
toast.error(
|
|
1121
|
+
`A user with the role of ${settings.role} is required to sign this document`
|
|
1122
|
+
);
|
|
1123
|
+
}
|
|
1124
|
+
} else {
|
|
1125
|
+
onChangeSignature(settings.id);
|
|
1126
|
+
}
|
|
1094
1127
|
}}
|
|
1095
1128
|
>
|
|
1096
1129
|
Click to Sign
|
|
@@ -1112,6 +1145,8 @@ function Field({
|
|
|
1112
1145
|
}
|
|
1113
1146
|
}
|
|
1114
1147
|
|
|
1148
|
+
console.info(inputValue);
|
|
1149
|
+
|
|
1115
1150
|
return (
|
|
1116
1151
|
<table className={styles.contentTable}>
|
|
1117
1152
|
<thead>
|
|
@@ -1148,8 +1183,17 @@ function Field({
|
|
|
1148
1183
|
key={`table-radio-cell-${settings.id}-${rowKey}-${columnKey}`}
|
|
1149
1184
|
>
|
|
1150
1185
|
<input
|
|
1151
|
-
type="
|
|
1152
|
-
name={
|
|
1186
|
+
type="checkbox"
|
|
1187
|
+
name={row.id}
|
|
1188
|
+
data-id={settings.id}
|
|
1189
|
+
onChange={
|
|
1190
|
+
onChangeTableRadio
|
|
1191
|
+
}
|
|
1192
|
+
checked={
|
|
1193
|
+
row.value === true
|
|
1194
|
+
? true
|
|
1195
|
+
: false
|
|
1196
|
+
}
|
|
1153
1197
|
/>
|
|
1154
1198
|
</td>
|
|
1155
1199
|
)
|
|
@@ -1161,11 +1205,13 @@ function Field({
|
|
|
1161
1205
|
);
|
|
1162
1206
|
case 'table_text':
|
|
1163
1207
|
let tableTextColumns = [];
|
|
1208
|
+
let tableTextValues = [];
|
|
1164
1209
|
|
|
1165
1210
|
for (const key in formData) {
|
|
1166
1211
|
if (formData[key].id === settings.id) {
|
|
1167
1212
|
if (formData[key].hasOwnProperty('options')) {
|
|
1168
1213
|
tableTextColumns = formData[key].options;
|
|
1214
|
+
tableTextValues = formData[key].value;
|
|
1169
1215
|
break; // Assuming there's only one match needed, break out of the loop
|
|
1170
1216
|
}
|
|
1171
1217
|
}
|
|
@@ -1175,22 +1221,51 @@ function Field({
|
|
|
1175
1221
|
<thead>
|
|
1176
1222
|
<tr>
|
|
1177
1223
|
{tableTextColumns.map((column, columnKey) => (
|
|
1178
|
-
<th
|
|
1224
|
+
<th
|
|
1225
|
+
key={`${settings.id}-${column.id}-${columnKey}`}
|
|
1226
|
+
>
|
|
1179
1227
|
{column.label}
|
|
1180
1228
|
</th>
|
|
1181
1229
|
))}
|
|
1230
|
+
<th style={{ textAlign: 'center' }}>
|
|
1231
|
+
<CirclePlus
|
|
1232
|
+
onClick={() => {
|
|
1233
|
+
onChangeAddTableTextRow(
|
|
1234
|
+
settings.id
|
|
1235
|
+
);
|
|
1236
|
+
}}
|
|
1237
|
+
size={24}
|
|
1238
|
+
data-id={settings.id}
|
|
1239
|
+
/>
|
|
1240
|
+
</th>
|
|
1182
1241
|
</tr>
|
|
1183
1242
|
</thead>
|
|
1184
1243
|
<tbody>
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
<
|
|
1188
|
-
key={`${settings.id}-${
|
|
1244
|
+
{tableTextValues?.length > 0 &&
|
|
1245
|
+
tableTextValues?.map((row, rowKey) => (
|
|
1246
|
+
<tr
|
|
1247
|
+
key={`${settings.id}-${row.id}-${rowKey}-row`}
|
|
1189
1248
|
>
|
|
1190
|
-
|
|
1191
|
-
|
|
1249
|
+
{row?.map((cell, cellKey) => (
|
|
1250
|
+
<td
|
|
1251
|
+
key={`${settings.id}}-${cellKey}-input`}
|
|
1252
|
+
>
|
|
1253
|
+
<input
|
|
1254
|
+
type="text"
|
|
1255
|
+
value={cell || ''}
|
|
1256
|
+
data-id={settings.id}
|
|
1257
|
+
onChange={(e) =>
|
|
1258
|
+
onChangeTableText(
|
|
1259
|
+
e,
|
|
1260
|
+
rowKey,
|
|
1261
|
+
cellKey
|
|
1262
|
+
)
|
|
1263
|
+
}
|
|
1264
|
+
/>
|
|
1265
|
+
</td>
|
|
1266
|
+
))}
|
|
1267
|
+
</tr>
|
|
1192
1268
|
))}
|
|
1193
|
-
</tr>
|
|
1194
1269
|
</tbody>
|
|
1195
1270
|
</table>
|
|
1196
1271
|
);
|
|
@@ -209,6 +209,111 @@ const GenericDynamic = ({
|
|
|
209
209
|
}
|
|
210
210
|
};
|
|
211
211
|
|
|
212
|
+
const handleChangeTableRadio = (e) => {
|
|
213
|
+
const {
|
|
214
|
+
name,
|
|
215
|
+
dataset: { id },
|
|
216
|
+
} = e.target;
|
|
217
|
+
|
|
218
|
+
// console.info('Checkbox changed:', { name, id });
|
|
219
|
+
|
|
220
|
+
setActiveForm((prevActiveForm) => {
|
|
221
|
+
// console.info('Previous activeForm:', prevActiveForm);
|
|
222
|
+
|
|
223
|
+
// Find the form that matches the given id
|
|
224
|
+
const formKey = Object.keys(prevActiveForm).find(
|
|
225
|
+
(key) => prevActiveForm[key].id === id
|
|
226
|
+
);
|
|
227
|
+
|
|
228
|
+
if (!formKey || !prevActiveForm[formKey]?.rows) {
|
|
229
|
+
console.info(
|
|
230
|
+
`Form with id ${id} does not exist or has no rows`
|
|
231
|
+
);
|
|
232
|
+
return prevActiveForm;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
// console.info('Found formKey:', formKey);
|
|
236
|
+
|
|
237
|
+
// Create a new rows array with toggled value properties
|
|
238
|
+
const updatedRows = prevActiveForm[formKey].rows.map((row) => ({
|
|
239
|
+
...row,
|
|
240
|
+
value: row.id === name ? !row.value : row.value ?? false, // Toggle value if it exists, else set default to false
|
|
241
|
+
}));
|
|
242
|
+
|
|
243
|
+
// console.info('Updated rows:', updatedRows);
|
|
244
|
+
|
|
245
|
+
// Return the updated activeForm state
|
|
246
|
+
return {
|
|
247
|
+
...prevActiveForm,
|
|
248
|
+
[formKey]: {
|
|
249
|
+
...prevActiveForm[formKey],
|
|
250
|
+
rows: updatedRows,
|
|
251
|
+
},
|
|
252
|
+
};
|
|
253
|
+
});
|
|
254
|
+
};
|
|
255
|
+
|
|
256
|
+
const handleChangeAddTableTextRow = (id) => {
|
|
257
|
+
setActiveForm((prevActiveForm) => {
|
|
258
|
+
// Find the key of the form that matches the id
|
|
259
|
+
const formKey = Object.keys(prevActiveForm).find(
|
|
260
|
+
(key) => prevActiveForm[key].id === id
|
|
261
|
+
);
|
|
262
|
+
|
|
263
|
+
if (!formKey) {
|
|
264
|
+
console.info(`Form with id ${id} does not exist.`);
|
|
265
|
+
return prevActiveForm;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
console.info(prevActiveForm);
|
|
269
|
+
|
|
270
|
+
// Create a new row with placeholders based on the options length
|
|
271
|
+
const numOptions = prevActiveForm[formKey].options.length;
|
|
272
|
+
const newRow = Array(numOptions).fill(''); // Create an array of empty strings
|
|
273
|
+
|
|
274
|
+
return {
|
|
275
|
+
...prevActiveForm,
|
|
276
|
+
[formKey]: {
|
|
277
|
+
...prevActiveForm[formKey],
|
|
278
|
+
value: [
|
|
279
|
+
...(prevActiveForm[formKey].value || []), // Handle null by initializing to empty array
|
|
280
|
+
newRow,
|
|
281
|
+
],
|
|
282
|
+
},
|
|
283
|
+
};
|
|
284
|
+
});
|
|
285
|
+
};
|
|
286
|
+
|
|
287
|
+
const handleChangeTableText = (e, rowIndex, columnIndex) => {
|
|
288
|
+
const { value } = e.target;
|
|
289
|
+
const { id } = e.target.dataset;
|
|
290
|
+
|
|
291
|
+
setActiveForm((prevActiveForm) => {
|
|
292
|
+
const formKey = Object.keys(prevActiveForm).find(
|
|
293
|
+
(key) => prevActiveForm[key].id === id
|
|
294
|
+
);
|
|
295
|
+
|
|
296
|
+
if (!formKey) return prevActiveForm;
|
|
297
|
+
|
|
298
|
+
const updatedRows = (prevActiveForm[formKey].value || []).map(
|
|
299
|
+
(row, index) =>
|
|
300
|
+
index === rowIndex
|
|
301
|
+
? row.map((cell, colIndex) =>
|
|
302
|
+
colIndex === columnIndex ? value : cell
|
|
303
|
+
)
|
|
304
|
+
: row
|
|
305
|
+
);
|
|
306
|
+
|
|
307
|
+
return {
|
|
308
|
+
...prevActiveForm,
|
|
309
|
+
[formKey]: {
|
|
310
|
+
...prevActiveForm[formKey],
|
|
311
|
+
value: updatedRows,
|
|
312
|
+
},
|
|
313
|
+
};
|
|
314
|
+
});
|
|
315
|
+
};
|
|
316
|
+
|
|
212
317
|
const handleChangeToggle = (e) => {
|
|
213
318
|
if (!e) {
|
|
214
319
|
return;
|
|
@@ -648,6 +753,15 @@ const GenericDynamic = ({
|
|
|
648
753
|
onChangeSignature={
|
|
649
754
|
handleChangeSignature
|
|
650
755
|
}
|
|
756
|
+
onChangeTableRadio={
|
|
757
|
+
handleChangeTableRadio
|
|
758
|
+
}
|
|
759
|
+
onChangeAddTableTextRow={
|
|
760
|
+
handleChangeAddTableTextRow
|
|
761
|
+
}
|
|
762
|
+
onChangeTableText={
|
|
763
|
+
handleChangeTableText
|
|
764
|
+
}
|
|
651
765
|
onChangeToggle={
|
|
652
766
|
handleChangeToggle
|
|
653
767
|
}
|
|
@@ -655,6 +769,9 @@ const GenericDynamic = ({
|
|
|
655
769
|
handleFileDownload
|
|
656
770
|
}
|
|
657
771
|
style={{}}
|
|
772
|
+
userProfile={
|
|
773
|
+
userProfile
|
|
774
|
+
}
|
|
658
775
|
/>
|
|
659
776
|
)
|
|
660
777
|
)
|
|
@@ -678,6 +795,15 @@ const GenericDynamic = ({
|
|
|
678
795
|
onChangeDate={
|
|
679
796
|
handleChangeDate
|
|
680
797
|
}
|
|
798
|
+
onChangeTableRadio={
|
|
799
|
+
handleChangeTableRadio
|
|
800
|
+
}
|
|
801
|
+
onChangeAddTableTextRow={
|
|
802
|
+
handleChangeAddTableTextRow
|
|
803
|
+
}
|
|
804
|
+
onChangeTableText={
|
|
805
|
+
handleChangeTableText
|
|
806
|
+
}
|
|
681
807
|
onChangeToggle={
|
|
682
808
|
handleChangeToggle
|
|
683
809
|
}
|
|
@@ -685,6 +811,7 @@ const GenericDynamic = ({
|
|
|
685
811
|
handleFileDownload
|
|
686
812
|
}
|
|
687
813
|
style={{}}
|
|
814
|
+
userProfile={userProfile}
|
|
688
815
|
/>
|
|
689
816
|
)
|
|
690
817
|
)}
|
|
@@ -53,6 +53,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
53
53
|
key: '',
|
|
54
54
|
});
|
|
55
55
|
const [modalFormShow, setModalFormShow] = useState(false);
|
|
56
|
+
const [roles, setRoles] = useState([]);
|
|
56
57
|
|
|
57
58
|
/** Data Option Functionalities */
|
|
58
59
|
const handleDataOption = (e) => {
|
|
@@ -727,6 +728,16 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
727
728
|
}
|
|
728
729
|
};
|
|
729
730
|
|
|
731
|
+
const fetchRoles = async () => {
|
|
732
|
+
try {
|
|
733
|
+
const res = await CustomFetch('/ajax/roles/dropdown', 'POST', {});
|
|
734
|
+
|
|
735
|
+
setRoles(res.data.data);
|
|
736
|
+
} catch (err) {
|
|
737
|
+
console.info(err);
|
|
738
|
+
}
|
|
739
|
+
};
|
|
740
|
+
|
|
730
741
|
useEffect(() => {
|
|
731
742
|
if (data.detail && data.detail.length > 0) {
|
|
732
743
|
saveOnSort();
|
|
@@ -735,6 +746,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
735
746
|
|
|
736
747
|
useEffect(() => {
|
|
737
748
|
fetchData();
|
|
749
|
+
fetchRoles();
|
|
738
750
|
}, []);
|
|
739
751
|
|
|
740
752
|
return (
|
|
@@ -1293,6 +1305,37 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
1293
1305
|
</div>
|
|
1294
1306
|
) : null}
|
|
1295
1307
|
|
|
1308
|
+
{['signature'].includes(dataField.type) ? (
|
|
1309
|
+
<div className={styles.formItem}>
|
|
1310
|
+
<label className={styles.fi__label}>
|
|
1311
|
+
<select
|
|
1312
|
+
name="role"
|
|
1313
|
+
value={dataField.role}
|
|
1314
|
+
onChange={handleChangeForm}
|
|
1315
|
+
>
|
|
1316
|
+
<option>
|
|
1317
|
+
No Role Associated
|
|
1318
|
+
</option>
|
|
1319
|
+
{roles.map(
|
|
1320
|
+
(role, roleKey) => (
|
|
1321
|
+
<option
|
|
1322
|
+
value={role.id}
|
|
1323
|
+
key={roleKey}
|
|
1324
|
+
>
|
|
1325
|
+
{role.label}
|
|
1326
|
+
</option>
|
|
1327
|
+
)
|
|
1328
|
+
)}
|
|
1329
|
+
</select>
|
|
1330
|
+
<span
|
|
1331
|
+
className={styles.fi__span}
|
|
1332
|
+
>
|
|
1333
|
+
Single or Bulk Image?
|
|
1334
|
+
</span>
|
|
1335
|
+
</label>
|
|
1336
|
+
</div>
|
|
1337
|
+
) : null}
|
|
1338
|
+
|
|
1296
1339
|
{['table_radio'].includes(
|
|
1297
1340
|
dataField.type
|
|
1298
1341
|
) ? (
|
package/package.json
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"axios": "^1.7.2",
|
|
14
14
|
"dayjs": "^1.11.11",
|
|
15
15
|
"file-saver": "^2.0.5",
|
|
16
|
-
"framer-motion": "^11.2.
|
|
16
|
+
"framer-motion": "^11.2.11",
|
|
17
17
|
"html-react-parser": "^5.1.10",
|
|
18
18
|
"lodash": "^4.17.21",
|
|
19
19
|
"lodash.debounce": "^4.0.8",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"react-dom": "^17.0.1"
|
|
58
58
|
},
|
|
59
59
|
"name": "@visns-studio/visns-components",
|
|
60
|
-
"version": "4.2.
|
|
60
|
+
"version": "4.2.5",
|
|
61
61
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
62
62
|
"main": "index.js",
|
|
63
63
|
"scripts": {
|