@visns-studio/visns-components 2.6.0 → 2.6.1
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,18 @@ 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 = truncateLength
|
|
120
|
+
? truncate(stringValue, truncateLength)
|
|
121
|
+
: stringValue;
|
|
122
|
+
|
|
111
123
|
const formatDateValue = (date) => formatDate(date);
|
|
112
124
|
|
|
113
125
|
const formatNoteValue = () => {
|
|
@@ -133,37 +145,84 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
133
145
|
return `${total} / ${value}`;
|
|
134
146
|
};
|
|
135
147
|
|
|
148
|
+
const renderCopyToClipboard = () => {
|
|
149
|
+
return (
|
|
150
|
+
<>
|
|
151
|
+
{size === 'full' && truncatedValue
|
|
152
|
+
? parse(`<br /><p>${truncatedValue}</p>`)
|
|
153
|
+
: truncatedValue}
|
|
154
|
+
<CopyToClipboard
|
|
155
|
+
text={
|
|
156
|
+
truncatedValue && truncatedValue !== 'null'
|
|
157
|
+
? truncatedValue
|
|
158
|
+
: ''
|
|
159
|
+
}
|
|
160
|
+
onCopy={() => console.info('copied')}
|
|
161
|
+
>
|
|
162
|
+
<Copy
|
|
163
|
+
data-tooltip-id="system-tooltip"
|
|
164
|
+
data-tooltip-content="Copy to Clipboard"
|
|
165
|
+
strokeWidth={2}
|
|
166
|
+
size={24}
|
|
167
|
+
/>
|
|
168
|
+
</CopyToClipboard>
|
|
169
|
+
</>
|
|
170
|
+
);
|
|
171
|
+
};
|
|
172
|
+
|
|
173
|
+
const renderDate = () => formatDateValue(truncatedValue);
|
|
174
|
+
|
|
175
|
+
const renderExist = () => (truncatedValue ? 'Yes' : 'No');
|
|
176
|
+
|
|
177
|
+
const renderJson = () =>
|
|
178
|
+
truncatedValue ? (
|
|
179
|
+
<pre>{JSON.stringify(JSON.parse(truncatedValue), null, 4)}</pre>
|
|
180
|
+
) : null;
|
|
181
|
+
|
|
182
|
+
const renderLatestNotes = () => formatNoteValue();
|
|
183
|
+
|
|
184
|
+
const renderRichText = () => {
|
|
185
|
+
if (!truncatedValue) {
|
|
186
|
+
return null;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
const lines = truncatedValue.split('\n');
|
|
190
|
+
|
|
191
|
+
if (lines.length === 0) {
|
|
192
|
+
return null;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
return (
|
|
196
|
+
<>
|
|
197
|
+
{lines.map((line, index) => (
|
|
198
|
+
<p key={index}>{line}</p>
|
|
199
|
+
))}
|
|
200
|
+
</>
|
|
201
|
+
);
|
|
202
|
+
};
|
|
203
|
+
|
|
204
|
+
const renderTotal = () => formatTotalValue();
|
|
205
|
+
|
|
206
|
+
// Render based on the item's type
|
|
136
207
|
switch (type) {
|
|
208
|
+
case 'copyToClipboard':
|
|
209
|
+
return renderCopyToClipboard();
|
|
137
210
|
case 'date':
|
|
138
|
-
return
|
|
211
|
+
return renderDate();
|
|
139
212
|
case 'exist':
|
|
140
|
-
return
|
|
213
|
+
return renderExist();
|
|
214
|
+
case 'json':
|
|
215
|
+
return renderJson();
|
|
141
216
|
case 'latest_notes':
|
|
142
|
-
return
|
|
217
|
+
return renderLatestNotes();
|
|
143
218
|
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
|
-
);
|
|
219
|
+
return renderRichText();
|
|
161
220
|
case 'total':
|
|
162
|
-
return
|
|
221
|
+
return renderTotal();
|
|
163
222
|
default:
|
|
164
|
-
return size === 'full' &&
|
|
165
|
-
? parse(`<br /><p>${
|
|
166
|
-
:
|
|
223
|
+
return size === 'full' && truncatedValue
|
|
224
|
+
? parse(`<br /><p>${truncatedValue}</p>`)
|
|
225
|
+
: truncatedValue;
|
|
167
226
|
}
|
|
168
227
|
};
|
|
169
228
|
|
|
@@ -336,44 +395,50 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
336
395
|
formConfig,
|
|
337
396
|
routeParams
|
|
338
397
|
) => {
|
|
339
|
-
formConfig.stages
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
398
|
+
if (formConfig.stages) {
|
|
399
|
+
formConfig.stages.data.forEach((stage) => {
|
|
400
|
+
const stageFormFields =
|
|
401
|
+
stage.form?.fields || [];
|
|
402
|
+
const stageAjaxWhereFields = [];
|
|
403
|
+
|
|
404
|
+
stageFormFields.forEach((field) => {
|
|
405
|
+
if (field.type === 'table') {
|
|
406
|
+
if (
|
|
407
|
+
field.ajaxSetting &&
|
|
408
|
+
field.ajaxSetting.where
|
|
409
|
+
) {
|
|
410
|
+
stageAjaxWhereFields.push(
|
|
411
|
+
...field.ajaxSetting
|
|
412
|
+
.where
|
|
413
|
+
);
|
|
414
|
+
}
|
|
343
415
|
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
416
|
+
const tableFormFields =
|
|
417
|
+
field.form?.fields || [];
|
|
418
|
+
tableFormFields.forEach(
|
|
419
|
+
(formField) => {
|
|
420
|
+
updateValueFromParam(
|
|
421
|
+
formField,
|
|
422
|
+
routeParams[
|
|
423
|
+
formField
|
|
424
|
+
.urlParam
|
|
425
|
+
]
|
|
426
|
+
);
|
|
427
|
+
}
|
|
352
428
|
);
|
|
353
429
|
}
|
|
430
|
+
});
|
|
354
431
|
|
|
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]
|
|
432
|
+
stageAjaxWhereFields.forEach(
|
|
433
|
+
(where) => {
|
|
434
|
+
updateValueFromParam(
|
|
435
|
+
where,
|
|
436
|
+
routeParams[where.urlParam]
|
|
437
|
+
);
|
|
438
|
+
}
|
|
374
439
|
);
|
|
375
440
|
});
|
|
376
|
-
}
|
|
441
|
+
}
|
|
377
442
|
};
|
|
378
443
|
|
|
379
444
|
const formConfig = activeTabConfig;
|
|
@@ -468,25 +533,27 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
468
533
|
case 'overview':
|
|
469
534
|
return (
|
|
470
535
|
<>
|
|
471
|
-
|
|
472
|
-
<
|
|
473
|
-
<
|
|
474
|
-
<
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
536
|
+
{activeTabConfig.form && (
|
|
537
|
+
<div className="gridactions">
|
|
538
|
+
<ul>
|
|
539
|
+
<li>
|
|
540
|
+
<button
|
|
541
|
+
className="btn"
|
|
542
|
+
onClick={() =>
|
|
543
|
+
modalOpen(
|
|
544
|
+
'update',
|
|
545
|
+
routeParams[
|
|
546
|
+
urlParam
|
|
547
|
+
]
|
|
548
|
+
)
|
|
549
|
+
}
|
|
550
|
+
>
|
|
551
|
+
Edit
|
|
552
|
+
</button>
|
|
553
|
+
</li>
|
|
554
|
+
</ul>
|
|
555
|
+
</div>
|
|
556
|
+
)}
|
|
490
557
|
|
|
491
558
|
<div className="gridtxt">
|
|
492
559
|
{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.1",
|
|
46
48
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
47
49
|
"main": "index.js",
|
|
48
50
|
"scripts": {
|