@visns-studio/visns-components 2.6.0 → 2.6.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/Field.jsx
CHANGED
|
@@ -5,7 +5,9 @@ import ReactQuill from 'react-quill';
|
|
|
5
5
|
import Toggle from 'react-toggle';
|
|
6
6
|
import moment from 'moment';
|
|
7
7
|
import { BlockPicker } from 'react-color';
|
|
8
|
+
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
|
8
9
|
import { NumericFormat, PatternFormat } from 'react-number-format';
|
|
10
|
+
import { Copy } from 'akar-icons';
|
|
9
11
|
|
|
10
12
|
import CustomFetch from './Fetch';
|
|
11
13
|
import Select from './Select';
|
|
@@ -206,19 +208,20 @@ function Field({
|
|
|
206
208
|
if (
|
|
207
209
|
[
|
|
208
210
|
'address',
|
|
211
|
+
'async-dropdown-ajax',
|
|
212
|
+
'checkbox',
|
|
213
|
+
'colour',
|
|
214
|
+
'copytoclipboard',
|
|
209
215
|
'date',
|
|
210
216
|
'datetime',
|
|
211
|
-
'checkbox',
|
|
212
217
|
'multi-dropdown',
|
|
213
218
|
'multi-dropdown-ajax',
|
|
214
|
-
'async-dropdown-ajax',
|
|
215
|
-
'richeditor',
|
|
216
|
-
'colour',
|
|
217
219
|
'plaindate',
|
|
218
220
|
'plaindatetime',
|
|
219
221
|
'plainrelation',
|
|
220
222
|
'plainrelationarray',
|
|
221
223
|
'plaintext',
|
|
224
|
+
'richeditor',
|
|
222
225
|
].includes(settings.type)
|
|
223
226
|
) {
|
|
224
227
|
return (
|
|
@@ -284,6 +287,37 @@ function Field({
|
|
|
284
287
|
}
|
|
285
288
|
/>
|
|
286
289
|
);
|
|
290
|
+
case 'copytoclipboard':
|
|
291
|
+
return (
|
|
292
|
+
<>
|
|
293
|
+
<input
|
|
294
|
+
type={settings.type}
|
|
295
|
+
data-name={settings.id}
|
|
296
|
+
className={inputClass[settings.id]}
|
|
297
|
+
value={
|
|
298
|
+
inputValue && inputValue !== 'null'
|
|
299
|
+
? inputValue
|
|
300
|
+
: ''
|
|
301
|
+
}
|
|
302
|
+
readOnly
|
|
303
|
+
/>
|
|
304
|
+
<CopyToClipboard
|
|
305
|
+
text={
|
|
306
|
+
inputValue && inputValue !== 'null'
|
|
307
|
+
? inputValue
|
|
308
|
+
: ''
|
|
309
|
+
}
|
|
310
|
+
onCopy={() => console.info('copied')}
|
|
311
|
+
>
|
|
312
|
+
<Copy
|
|
313
|
+
data-tooltip-id="system-tooltip"
|
|
314
|
+
data-tooltip-content="Copy to Clipboard"
|
|
315
|
+
strokeWidth={2}
|
|
316
|
+
size={24}
|
|
317
|
+
/>
|
|
318
|
+
</CopyToClipboard>
|
|
319
|
+
</>
|
|
320
|
+
);
|
|
287
321
|
case 'plaindate':
|
|
288
322
|
return (
|
|
289
323
|
<div
|
|
@@ -611,21 +645,22 @@ function Field({
|
|
|
611
645
|
if (
|
|
612
646
|
![
|
|
613
647
|
'address',
|
|
648
|
+
'async-dropdown-ajax',
|
|
649
|
+
'checkbox',
|
|
650
|
+
'colour',
|
|
651
|
+
'copytoclipboard',
|
|
614
652
|
'date',
|
|
615
653
|
'datetime',
|
|
616
654
|
'line-break',
|
|
617
|
-
'checkbox',
|
|
618
655
|
'multi-dropdown',
|
|
619
656
|
'multi-dropdown-ajax',
|
|
620
|
-
'async-dropdown-ajax',
|
|
621
|
-
'toggle',
|
|
622
|
-
'richeditor',
|
|
623
|
-
'colour',
|
|
624
657
|
'plaindate',
|
|
625
658
|
'plaindatetime',
|
|
626
659
|
'plainrelation',
|
|
627
660
|
'plainrelationarray',
|
|
628
661
|
'plaintext',
|
|
662
|
+
'richeditor',
|
|
663
|
+
'toggle',
|
|
629
664
|
].includes(settings.type)
|
|
630
665
|
) {
|
|
631
666
|
return (
|
|
@@ -6,7 +6,15 @@ import Popup from 'reactjs-popup';
|
|
|
6
6
|
import { motion } from 'framer-motion';
|
|
7
7
|
import Dropzone from 'react-dropzone';
|
|
8
8
|
import { confirmAlert } from 'react-confirm-alert';
|
|
9
|
-
import
|
|
9
|
+
import truncate from 'truncate';
|
|
10
|
+
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
|
11
|
+
import {
|
|
12
|
+
CircleCheck,
|
|
13
|
+
CircleChevronRight,
|
|
14
|
+
Copy,
|
|
15
|
+
File,
|
|
16
|
+
TrashCan,
|
|
17
|
+
} from 'akar-icons';
|
|
10
18
|
|
|
11
19
|
import 'react-confirm-alert/src/react-confirm-alert.css';
|
|
12
20
|
|
|
@@ -100,14 +108,19 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
100
108
|
};
|
|
101
109
|
|
|
102
110
|
const renderValue = (item, data) => {
|
|
103
|
-
const { type, id, relation, relationKey, size } = item;
|
|
111
|
+
const { type, id, relation, relationKey, size, truncateLength } = item;
|
|
104
112
|
const value =
|
|
105
113
|
relation && relation.length > 0
|
|
106
114
|
? getValueFromData(data, [...relation], id)
|
|
107
115
|
: getValueFromData(data, [], id);
|
|
108
|
-
|
|
109
116
|
const stringValue = String(value ?? ''); // Convert value to a string
|
|
110
117
|
|
|
118
|
+
// Conditionally truncate the value if the 'truncate' key is present
|
|
119
|
+
const truncatedValue =
|
|
120
|
+
truncateLength && truncateLength > 0
|
|
121
|
+
? truncate(stringValue, truncateLength)
|
|
122
|
+
: stringValue;
|
|
123
|
+
|
|
111
124
|
const formatDateValue = (date) => formatDate(date);
|
|
112
125
|
|
|
113
126
|
const formatNoteValue = () => {
|
|
@@ -133,37 +146,82 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
133
146
|
return `${total} / ${value}`;
|
|
134
147
|
};
|
|
135
148
|
|
|
149
|
+
const renderCopyToClipboard = () => {
|
|
150
|
+
return (
|
|
151
|
+
<>
|
|
152
|
+
{size === 'full' && truncatedValue
|
|
153
|
+
? parse(`<br /><p>${truncatedValue}</p>`)
|
|
154
|
+
: truncatedValue}
|
|
155
|
+
<CopyToClipboard
|
|
156
|
+
text={
|
|
157
|
+
truncatedValue && truncatedValue !== 'null'
|
|
158
|
+
? truncatedValue
|
|
159
|
+
: ''
|
|
160
|
+
}
|
|
161
|
+
onCopy={() => console.info('copied')}
|
|
162
|
+
>
|
|
163
|
+
<Copy
|
|
164
|
+
data-tooltip-id="system-tooltip"
|
|
165
|
+
data-tooltip-content="Copy to Clipboard"
|
|
166
|
+
strokeWidth={2}
|
|
167
|
+
size={24}
|
|
168
|
+
/>
|
|
169
|
+
</CopyToClipboard>
|
|
170
|
+
</>
|
|
171
|
+
);
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
const renderDate = () => formatDateValue(value);
|
|
175
|
+
|
|
176
|
+
const renderExist = () => (truncatedValue ? 'Yes' : 'No');
|
|
177
|
+
|
|
178
|
+
const renderJson = () =>
|
|
179
|
+
value ? <pre>{JSON.stringify(value, null, 4)}</pre> : null;
|
|
180
|
+
|
|
181
|
+
const renderLatestNotes = () => formatNoteValue();
|
|
182
|
+
|
|
183
|
+
const renderRichText = () => {
|
|
184
|
+
if (!truncatedValue) {
|
|
185
|
+
return null;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
const lines = truncatedValue.split('\n');
|
|
189
|
+
|
|
190
|
+
if (lines.length === 0) {
|
|
191
|
+
return null;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
return (
|
|
195
|
+
<>
|
|
196
|
+
{lines.map((line, index) => (
|
|
197
|
+
<p key={index}>{line}</p>
|
|
198
|
+
))}
|
|
199
|
+
</>
|
|
200
|
+
);
|
|
201
|
+
};
|
|
202
|
+
|
|
203
|
+
const renderTotal = () => formatTotalValue();
|
|
204
|
+
|
|
205
|
+
// Render based on the item's type
|
|
136
206
|
switch (type) {
|
|
207
|
+
case 'copyToClipboard':
|
|
208
|
+
return renderCopyToClipboard();
|
|
137
209
|
case 'date':
|
|
138
|
-
return
|
|
210
|
+
return renderDate();
|
|
139
211
|
case 'exist':
|
|
140
|
-
return
|
|
212
|
+
return renderExist();
|
|
213
|
+
case 'json':
|
|
214
|
+
return renderJson();
|
|
141
215
|
case 'latest_notes':
|
|
142
|
-
return
|
|
216
|
+
return renderLatestNotes();
|
|
143
217
|
case 'richtext':
|
|
144
|
-
|
|
145
|
-
return null;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
const lines = value.split('\n');
|
|
149
|
-
|
|
150
|
-
if (lines.length === 0) {
|
|
151
|
-
return null;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
return (
|
|
155
|
-
<>
|
|
156
|
-
{lines.map((line, index) => (
|
|
157
|
-
<p key={index}>{line}</p>
|
|
158
|
-
))}
|
|
159
|
-
</>
|
|
160
|
-
);
|
|
218
|
+
return renderRichText();
|
|
161
219
|
case 'total':
|
|
162
|
-
return
|
|
220
|
+
return renderTotal();
|
|
163
221
|
default:
|
|
164
|
-
return size === 'full' &&
|
|
165
|
-
? parse(`<br /><p>${
|
|
166
|
-
:
|
|
222
|
+
return size === 'full' && truncatedValue
|
|
223
|
+
? parse(`<br /><p>${truncatedValue}</p>`)
|
|
224
|
+
: truncatedValue;
|
|
167
225
|
}
|
|
168
226
|
};
|
|
169
227
|
|
|
@@ -336,44 +394,50 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
336
394
|
formConfig,
|
|
337
395
|
routeParams
|
|
338
396
|
) => {
|
|
339
|
-
formConfig.stages
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
397
|
+
if (formConfig.stages) {
|
|
398
|
+
formConfig.stages.data.forEach((stage) => {
|
|
399
|
+
const stageFormFields =
|
|
400
|
+
stage.form?.fields || [];
|
|
401
|
+
const stageAjaxWhereFields = [];
|
|
402
|
+
|
|
403
|
+
stageFormFields.forEach((field) => {
|
|
404
|
+
if (field.type === 'table') {
|
|
405
|
+
if (
|
|
406
|
+
field.ajaxSetting &&
|
|
407
|
+
field.ajaxSetting.where
|
|
408
|
+
) {
|
|
409
|
+
stageAjaxWhereFields.push(
|
|
410
|
+
...field.ajaxSetting
|
|
411
|
+
.where
|
|
412
|
+
);
|
|
413
|
+
}
|
|
343
414
|
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
415
|
+
const tableFormFields =
|
|
416
|
+
field.form?.fields || [];
|
|
417
|
+
tableFormFields.forEach(
|
|
418
|
+
(formField) => {
|
|
419
|
+
updateValueFromParam(
|
|
420
|
+
formField,
|
|
421
|
+
routeParams[
|
|
422
|
+
formField
|
|
423
|
+
.urlParam
|
|
424
|
+
]
|
|
425
|
+
);
|
|
426
|
+
}
|
|
352
427
|
);
|
|
353
428
|
}
|
|
429
|
+
});
|
|
354
430
|
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
formField.urlParam
|
|
363
|
-
]
|
|
364
|
-
);
|
|
365
|
-
}
|
|
366
|
-
);
|
|
367
|
-
}
|
|
368
|
-
});
|
|
369
|
-
|
|
370
|
-
stageAjaxWhereFields.forEach((where) => {
|
|
371
|
-
updateValueFromParam(
|
|
372
|
-
where,
|
|
373
|
-
routeParams[where.urlParam]
|
|
431
|
+
stageAjaxWhereFields.forEach(
|
|
432
|
+
(where) => {
|
|
433
|
+
updateValueFromParam(
|
|
434
|
+
where,
|
|
435
|
+
routeParams[where.urlParam]
|
|
436
|
+
);
|
|
437
|
+
}
|
|
374
438
|
);
|
|
375
439
|
});
|
|
376
|
-
}
|
|
440
|
+
}
|
|
377
441
|
};
|
|
378
442
|
|
|
379
443
|
const formConfig = activeTabConfig;
|
|
@@ -468,25 +532,27 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
468
532
|
case 'overview':
|
|
469
533
|
return (
|
|
470
534
|
<>
|
|
471
|
-
|
|
472
|
-
<
|
|
473
|
-
<
|
|
474
|
-
<
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
535
|
+
{activeTabConfig.form && (
|
|
536
|
+
<div className="gridactions">
|
|
537
|
+
<ul>
|
|
538
|
+
<li>
|
|
539
|
+
<button
|
|
540
|
+
className="btn"
|
|
541
|
+
onClick={() =>
|
|
542
|
+
modalOpen(
|
|
543
|
+
'update',
|
|
544
|
+
routeParams[
|
|
545
|
+
urlParam
|
|
546
|
+
]
|
|
547
|
+
)
|
|
548
|
+
}
|
|
549
|
+
>
|
|
550
|
+
Edit
|
|
551
|
+
</button>
|
|
552
|
+
</li>
|
|
553
|
+
</ul>
|
|
554
|
+
</div>
|
|
555
|
+
)}
|
|
490
556
|
|
|
491
557
|
<div className="gridtxt">
|
|
492
558
|
{activeTabConfig.sections.map(
|
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.5.0",
|
|
9
|
-
"framer-motion": "^10.16.
|
|
9
|
+
"framer-motion": "^10.16.4",
|
|
10
10
|
"html-react-parser": "^4.2.2",
|
|
11
11
|
"lodash": "^4.17.21",
|
|
12
12
|
"moment": "^2.29.4",
|
|
@@ -15,9 +15,10 @@
|
|
|
15
15
|
"quill-image-uploader": "^1.3.0",
|
|
16
16
|
"react-color": "^2.19.3",
|
|
17
17
|
"react-confirm-alert": "^3.0.6",
|
|
18
|
+
"react-copy-to-clipboard": "^5.1.0",
|
|
18
19
|
"react-datepicker": "^4.16.0",
|
|
19
20
|
"react-dropzone": "^14.2.3",
|
|
20
|
-
"react-number-format": "^5.3.
|
|
21
|
+
"react-number-format": "^5.3.1",
|
|
21
22
|
"react-password-strength-bar": "^0.4.1",
|
|
22
23
|
"react-promise-tracker": "^2.1.1",
|
|
23
24
|
"react-quill": "^2.0.0",
|
|
@@ -27,9 +28,10 @@
|
|
|
27
28
|
"react-sortable-hoc": "^2.0.0",
|
|
28
29
|
"react-toastify": "^9.1.3",
|
|
29
30
|
"react-toggle": "^4.1.3",
|
|
30
|
-
"react-tooltip": "^5.21.
|
|
31
|
+
"react-tooltip": "^5.21.3",
|
|
31
32
|
"react-window": "^1.8.9",
|
|
32
|
-
"reactjs-popup": "^2.0.
|
|
33
|
+
"reactjs-popup": "^2.0.6",
|
|
34
|
+
"truncate": "^3.0.0",
|
|
33
35
|
"validator": "^13.11.0",
|
|
34
36
|
"yarn": "^1.22.19"
|
|
35
37
|
},
|
|
@@ -42,7 +44,7 @@
|
|
|
42
44
|
"react-dom": "^17.0.1"
|
|
43
45
|
},
|
|
44
46
|
"name": "@visns-studio/visns-components",
|
|
45
|
-
"version": "2.6.
|
|
47
|
+
"version": "2.6.2",
|
|
46
48
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
47
49
|
"main": "index.js",
|
|
48
50
|
"scripts": {
|