@visns-studio/visns-components 2.4.9 → 2.5.0
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
|
@@ -3,6 +3,7 @@ import DatePicker from 'react-datepicker';
|
|
|
3
3
|
import _ from 'lodash';
|
|
4
4
|
import ReactQuill from 'react-quill';
|
|
5
5
|
import Toggle from 'react-toggle';
|
|
6
|
+
import moment from 'moment';
|
|
6
7
|
import { BlockPicker } from 'react-color';
|
|
7
8
|
import { NumericFormat, PatternFormat } from 'react-number-format';
|
|
8
9
|
|
|
@@ -104,6 +105,8 @@ function Field({
|
|
|
104
105
|
|
|
105
106
|
if (settings.size === 'full') {
|
|
106
107
|
setFormItemClass('formItem fwItem');
|
|
108
|
+
} else if (settings.size === 'quarter') {
|
|
109
|
+
setFormItemClass('formItem qtrItem');
|
|
107
110
|
}
|
|
108
111
|
}, [settings]);
|
|
109
112
|
|
|
@@ -211,6 +214,9 @@ function Field({
|
|
|
211
214
|
'async-dropdown-ajax',
|
|
212
215
|
'richeditor',
|
|
213
216
|
'colour',
|
|
217
|
+
'plaindate',
|
|
218
|
+
'plaindatetime',
|
|
219
|
+
'plaintext',
|
|
214
220
|
].includes(settings.type)
|
|
215
221
|
) {
|
|
216
222
|
return (
|
|
@@ -240,6 +246,28 @@ function Field({
|
|
|
240
246
|
}
|
|
241
247
|
/>
|
|
242
248
|
);
|
|
249
|
+
case 'plaindate':
|
|
250
|
+
return (
|
|
251
|
+
<span className="fi__span">
|
|
252
|
+
{inputValue && inputValue !== 'null'
|
|
253
|
+
? moment(inputValue).format('DD-MM-YYYY')
|
|
254
|
+
: ''}
|
|
255
|
+
</span>
|
|
256
|
+
);
|
|
257
|
+
case 'plaindatetime':
|
|
258
|
+
return (
|
|
259
|
+
<span className="fi__span">
|
|
260
|
+
{inputValue && inputValue !== 'null'
|
|
261
|
+
? moment(inputValue).format('DD-MM-YYYY hh:mm A')
|
|
262
|
+
: ''}
|
|
263
|
+
</span>
|
|
264
|
+
);
|
|
265
|
+
case 'plaintext':
|
|
266
|
+
return (
|
|
267
|
+
<span className="fi__span">
|
|
268
|
+
{inputValue && inputValue !== 'null' ? inputValue : ''}
|
|
269
|
+
</span>
|
|
270
|
+
);
|
|
243
271
|
case 'phone':
|
|
244
272
|
case 'mobile':
|
|
245
273
|
return (
|
|
@@ -485,6 +513,9 @@ function Field({
|
|
|
485
513
|
'toggle',
|
|
486
514
|
'richeditor',
|
|
487
515
|
'colour',
|
|
516
|
+
'plaindate',
|
|
517
|
+
'plaindatetime',
|
|
518
|
+
'plaintext',
|
|
488
519
|
].includes(settings.type)
|
|
489
520
|
) {
|
|
490
521
|
return (
|
package/components/crm/Form.jsx
CHANGED
|
@@ -704,6 +704,7 @@ function Form(props) {
|
|
|
704
704
|
'multi-dropdown-ajax',
|
|
705
705
|
'async-dropdown-ajax',
|
|
706
706
|
];
|
|
707
|
+
|
|
707
708
|
if (relationTypes.includes(field.type)) {
|
|
708
709
|
let relationLength = Array.isArray(
|
|
709
710
|
field.relation
|
|
@@ -711,14 +712,20 @@ function Form(props) {
|
|
|
711
712
|
? field.relation.length
|
|
712
713
|
: 1;
|
|
713
714
|
let tempObj = data;
|
|
715
|
+
let relationFound = false;
|
|
714
716
|
|
|
715
717
|
for (let i = 0; i < relationLength; i++) {
|
|
716
718
|
if (tempObj[field.relation[i]]) {
|
|
719
|
+
relationFound = true;
|
|
717
720
|
tempObj =
|
|
718
721
|
tempObj[field.relation[i]];
|
|
719
722
|
}
|
|
720
723
|
}
|
|
721
724
|
|
|
725
|
+
if (relationFound === false) {
|
|
726
|
+
tempObj = {};
|
|
727
|
+
}
|
|
728
|
+
|
|
722
729
|
let labelValue;
|
|
723
730
|
|
|
724
731
|
if (Array.isArray(field.relationName)) {
|
|
@@ -732,7 +739,8 @@ function Form(props) {
|
|
|
732
739
|
|
|
733
740
|
tempRes =
|
|
734
741
|
tempObj !== undefined &&
|
|
735
|
-
tempObj !== null
|
|
742
|
+
tempObj !== null &&
|
|
743
|
+
tempObj.id
|
|
736
744
|
? {
|
|
737
745
|
value: tempObj.id,
|
|
738
746
|
label: labelValue,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React, { useEffect, useState } from
|
|
2
|
-
import SelectList from
|
|
3
|
-
import Select, { createFilter } from
|
|
1
|
+
import React, { useEffect, useState } from 'react';
|
|
2
|
+
import SelectList from './SelectList';
|
|
3
|
+
import Select, { createFilter } from 'react-select';
|
|
4
4
|
|
|
5
5
|
function MultiSelect(props) {
|
|
6
6
|
const { inputValue, multi, onChange, options, settings, style } = props;
|
|
@@ -17,7 +17,7 @@ function MultiSelect(props) {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
Object.keys(a).forEach((b) => {
|
|
20
|
-
if (b !==
|
|
20
|
+
if (b !== 'id') {
|
|
21
21
|
_optionItem = {
|
|
22
22
|
..._optionItem,
|
|
23
23
|
[b]: a[b],
|
|
@@ -52,7 +52,7 @@ function MultiSelect(props) {
|
|
|
52
52
|
minHeight:
|
|
53
53
|
style && style.multi_select_height
|
|
54
54
|
? style.multi_select_height
|
|
55
|
-
:
|
|
55
|
+
: '52px',
|
|
56
56
|
}),
|
|
57
57
|
}}
|
|
58
58
|
value={inputValue}
|
|
@@ -6,7 +6,7 @@ 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 { CircleChevronRight, File, TrashCan } from 'akar-icons';
|
|
9
|
+
import { CircleCheck, CircleChevronRight, File, TrashCan } from 'akar-icons';
|
|
10
10
|
|
|
11
11
|
import 'react-confirm-alert/src/react-confirm-alert.css';
|
|
12
12
|
|
|
@@ -17,7 +17,7 @@ import TableFilter from '../TableFilter';
|
|
|
17
17
|
|
|
18
18
|
function GenericDetail({ setting, urlParam, userProfile }) {
|
|
19
19
|
const routeParams = useParams();
|
|
20
|
-
const { filters, page, tabs } = setting;
|
|
20
|
+
const { filters, page, stages, tabs } = setting;
|
|
21
21
|
|
|
22
22
|
/** Fileupload states */
|
|
23
23
|
const [files, setFiles] = useState([]);
|
|
@@ -297,21 +297,85 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
297
297
|
);
|
|
298
298
|
case 'form':
|
|
299
299
|
return (
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
300
|
+
<>
|
|
301
|
+
{activeTabConfig.stages?.data?.length >
|
|
302
|
+
0 && (
|
|
303
|
+
<div className="grid">
|
|
304
|
+
<div className="grid__row">
|
|
305
|
+
<div className="grid__full">
|
|
306
|
+
{activeTabConfig.stages.data.map(
|
|
307
|
+
(stage) =>
|
|
308
|
+
stage.form && (
|
|
309
|
+
<div
|
|
310
|
+
className="gridtxt"
|
|
311
|
+
key={`stage-form-${stage.id}`}
|
|
312
|
+
>
|
|
313
|
+
{stage.form
|
|
314
|
+
.update
|
|
315
|
+
.title && (
|
|
316
|
+
<div className="gridtxt__header">
|
|
317
|
+
<span>
|
|
318
|
+
{
|
|
319
|
+
stage
|
|
320
|
+
.form
|
|
321
|
+
.update
|
|
322
|
+
.title
|
|
323
|
+
}
|
|
324
|
+
</span>
|
|
325
|
+
</div>
|
|
326
|
+
)}
|
|
327
|
+
<Form
|
|
328
|
+
columnId={
|
|
329
|
+
routeParams[
|
|
330
|
+
urlParam
|
|
331
|
+
]
|
|
332
|
+
}
|
|
333
|
+
formSettings={
|
|
334
|
+
stage.form
|
|
335
|
+
}
|
|
336
|
+
formType="update"
|
|
337
|
+
style={
|
|
338
|
+
userProfile
|
|
339
|
+
?.settings
|
|
340
|
+
?.style ||
|
|
341
|
+
{}
|
|
342
|
+
}
|
|
343
|
+
updateForm={
|
|
344
|
+
setFormData
|
|
345
|
+
}
|
|
346
|
+
type="inline"
|
|
347
|
+
/>
|
|
348
|
+
</div>
|
|
349
|
+
)
|
|
350
|
+
)}
|
|
351
|
+
</div>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
)}
|
|
355
|
+
|
|
356
|
+
{activeTabConfig.form && (
|
|
357
|
+
<div className="gridtxt">
|
|
358
|
+
<div className="gridtxt__header">
|
|
359
|
+
<span>
|
|
360
|
+
{activeTabConfig.title}
|
|
361
|
+
</span>
|
|
362
|
+
</div>
|
|
363
|
+
<Form
|
|
364
|
+
columnId={routeParams[urlParam]}
|
|
365
|
+
formSettings={
|
|
366
|
+
activeTabConfig.form
|
|
367
|
+
}
|
|
368
|
+
formType="update"
|
|
369
|
+
style={
|
|
370
|
+
userProfile?.settings
|
|
371
|
+
?.style || {}
|
|
372
|
+
}
|
|
373
|
+
updateForm={setFormData}
|
|
374
|
+
type="inline"
|
|
375
|
+
/>
|
|
376
|
+
</div>
|
|
377
|
+
)}
|
|
378
|
+
</>
|
|
315
379
|
);
|
|
316
380
|
case 'overview':
|
|
317
381
|
return (
|
|
@@ -335,6 +399,7 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
335
399
|
</li>
|
|
336
400
|
</ul>
|
|
337
401
|
</div>
|
|
402
|
+
|
|
338
403
|
<div className="gridtxt">
|
|
339
404
|
{activeTabConfig.sections.map(
|
|
340
405
|
(section, sectionIndex) => (
|
|
@@ -625,6 +690,49 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
625
690
|
</div>
|
|
626
691
|
</div>
|
|
627
692
|
</div>
|
|
693
|
+
|
|
694
|
+
{stages?.data?.length > 0 && (
|
|
695
|
+
<div className="grid">
|
|
696
|
+
<div className="grid__row">
|
|
697
|
+
<div className="grid__full">
|
|
698
|
+
<div className="oppstatus">
|
|
699
|
+
<ul className="opppath">
|
|
700
|
+
{stages.data.map((stage) => {
|
|
701
|
+
if (!stage.id) {
|
|
702
|
+
return null; // Skip rendering this stage
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
const isStageComplete =
|
|
706
|
+
data[stages.key] >= stage.id;
|
|
707
|
+
|
|
708
|
+
return (
|
|
709
|
+
<li
|
|
710
|
+
key={`stage-${stage.id}`}
|
|
711
|
+
className={
|
|
712
|
+
isStageComplete
|
|
713
|
+
? 'opp-complete'
|
|
714
|
+
: ''
|
|
715
|
+
}
|
|
716
|
+
>
|
|
717
|
+
<a>
|
|
718
|
+
{stage.label}
|
|
719
|
+
{isStageComplete && (
|
|
720
|
+
<CircleCheck
|
|
721
|
+
strokeWidth={2}
|
|
722
|
+
size={16}
|
|
723
|
+
/>
|
|
724
|
+
)}
|
|
725
|
+
</a>
|
|
726
|
+
</li>
|
|
727
|
+
);
|
|
728
|
+
})}
|
|
729
|
+
</ul>
|
|
730
|
+
</div>
|
|
731
|
+
</div>
|
|
732
|
+
</div>
|
|
733
|
+
</div>
|
|
734
|
+
)}
|
|
735
|
+
|
|
628
736
|
<div className="grid">
|
|
629
737
|
<div className="grid__subrow">
|
|
630
738
|
<div className="grid__subnav">
|
package/package.json
CHANGED