@visns-studio/visns-components 2.4.8 → 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
|
@@ -163,12 +163,7 @@ function Form(props) {
|
|
|
163
163
|
|
|
164
164
|
Object.keys(inputValue).forEach((a) => {
|
|
165
165
|
if (formData.hasOwnProperty(a)) {
|
|
166
|
-
updateFormData(
|
|
167
|
-
[a]:
|
|
168
|
-
prevState && prevState[a] !== ''
|
|
169
|
-
? prevState[a]
|
|
170
|
-
: inputValue[a],
|
|
171
|
-
}));
|
|
166
|
+
updateFormData({ [a]: inputValue[a] });
|
|
172
167
|
}
|
|
173
168
|
});
|
|
174
169
|
|
|
@@ -709,6 +704,7 @@ function Form(props) {
|
|
|
709
704
|
'multi-dropdown-ajax',
|
|
710
705
|
'async-dropdown-ajax',
|
|
711
706
|
];
|
|
707
|
+
|
|
712
708
|
if (relationTypes.includes(field.type)) {
|
|
713
709
|
let relationLength = Array.isArray(
|
|
714
710
|
field.relation
|
|
@@ -716,14 +712,20 @@ function Form(props) {
|
|
|
716
712
|
? field.relation.length
|
|
717
713
|
: 1;
|
|
718
714
|
let tempObj = data;
|
|
715
|
+
let relationFound = false;
|
|
719
716
|
|
|
720
717
|
for (let i = 0; i < relationLength; i++) {
|
|
721
718
|
if (tempObj[field.relation[i]]) {
|
|
719
|
+
relationFound = true;
|
|
722
720
|
tempObj =
|
|
723
721
|
tempObj[field.relation[i]];
|
|
724
722
|
}
|
|
725
723
|
}
|
|
726
724
|
|
|
725
|
+
if (relationFound === false) {
|
|
726
|
+
tempObj = {};
|
|
727
|
+
}
|
|
728
|
+
|
|
727
729
|
let labelValue;
|
|
728
730
|
|
|
729
731
|
if (Array.isArray(field.relationName)) {
|
|
@@ -737,7 +739,8 @@ function Form(props) {
|
|
|
737
739
|
|
|
738
740
|
tempRes =
|
|
739
741
|
tempObj !== undefined &&
|
|
740
|
-
tempObj !== null
|
|
742
|
+
tempObj !== null &&
|
|
743
|
+
tempObj.id
|
|
741
744
|
? {
|
|
742
745
|
value: tempObj.id,
|
|
743
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