@visns-studio/visns-components 3.0.2 → 3.0.3
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.
|
@@ -106,6 +106,9 @@ const DataGrid = forwardRef(
|
|
|
106
106
|
form,
|
|
107
107
|
gridHeight,
|
|
108
108
|
mapbox,
|
|
109
|
+
pageData,
|
|
110
|
+
pageSetting,
|
|
111
|
+
paramValue,
|
|
109
112
|
settings,
|
|
110
113
|
setConfig,
|
|
111
114
|
setFilterData,
|
|
@@ -567,6 +570,25 @@ const DataGrid = forwardRef(
|
|
|
567
570
|
};
|
|
568
571
|
}, []);
|
|
569
572
|
|
|
573
|
+
const sortTrigger = () => {
|
|
574
|
+
const url = form.url.replace('/ajax', '');
|
|
575
|
+
|
|
576
|
+
console.info(ajaxSetting, columns, form);
|
|
577
|
+
|
|
578
|
+
const newState = {
|
|
579
|
+
form: form,
|
|
580
|
+
page: {
|
|
581
|
+
data: pageData,
|
|
582
|
+
setting: pageSetting,
|
|
583
|
+
},
|
|
584
|
+
paramValue: paramValue,
|
|
585
|
+
};
|
|
586
|
+
|
|
587
|
+
navigate(`${url}/${paramValue}/sort`, {
|
|
588
|
+
state: newState,
|
|
589
|
+
});
|
|
590
|
+
};
|
|
591
|
+
|
|
570
592
|
const renderCreateButton = () => {
|
|
571
593
|
if (form.createDisable && form.createDisable === true) {
|
|
572
594
|
return null;
|
|
@@ -574,6 +596,11 @@ const DataGrid = forwardRef(
|
|
|
574
596
|
|
|
575
597
|
return (
|
|
576
598
|
<div className="filterAction--alt">
|
|
599
|
+
{form.sort && form.sort.title && (
|
|
600
|
+
<button className="btn" onClick={sortTrigger}>
|
|
601
|
+
<div className="icon-plus"></div> Sort Order
|
|
602
|
+
</button>
|
|
603
|
+
)}
|
|
577
604
|
<button
|
|
578
605
|
className="btn"
|
|
579
606
|
onClick={(e) => {
|
|
@@ -651,6 +651,13 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
651
651
|
<Table
|
|
652
652
|
{...config}
|
|
653
653
|
gridHeight={windowHeight * 0.65}
|
|
654
|
+
pageData={data ? data : null}
|
|
655
|
+
pageSetting={page ? page : null}
|
|
656
|
+
paramValue={
|
|
657
|
+
routeParams[urlParam]
|
|
658
|
+
? routeParams[urlParam]
|
|
659
|
+
: null
|
|
660
|
+
}
|
|
654
661
|
setConfig={setConfig}
|
|
655
662
|
setTotal={setTotal}
|
|
656
663
|
style={
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
|
+
import { Link, useLocation } from 'react-router-dom';
|
|
3
|
+
import { arrayMoveImmutable } from 'array-move';
|
|
4
|
+
import { toast } from 'react-toastify';
|
|
5
|
+
import { CircleChevronRight } from 'akar-icons';
|
|
6
|
+
import CustomFetch from '../../crm/Fetch';
|
|
7
|
+
import SortableList from '../../cms/sorting/List';
|
|
8
|
+
|
|
9
|
+
const ChildSort = ({ item, url }) => {
|
|
10
|
+
const [data, setData] = useState(item.child);
|
|
11
|
+
|
|
12
|
+
const onSortEnd = ({ oldIndex, newIndex }) => {
|
|
13
|
+
setData((prevItem) => arrayMoveImmutable(prevItem, oldIndex, newIndex));
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
if (data.length > 0) {
|
|
18
|
+
CustomFetch(
|
|
19
|
+
url + '/sort_update',
|
|
20
|
+
'POST',
|
|
21
|
+
{
|
|
22
|
+
list: data,
|
|
23
|
+
},
|
|
24
|
+
function (result) {
|
|
25
|
+
if (result.error === '') {
|
|
26
|
+
} else {
|
|
27
|
+
toast.error(String(result.error));
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
}, [data]);
|
|
33
|
+
|
|
34
|
+
return (
|
|
35
|
+
<>
|
|
36
|
+
<h1>{item.label}</h1>
|
|
37
|
+
<SortableList
|
|
38
|
+
items={data}
|
|
39
|
+
onSortEnd={onSortEnd}
|
|
40
|
+
axis="xy"
|
|
41
|
+
helperClass="dragitem"
|
|
42
|
+
transitionDuration={250}
|
|
43
|
+
useDragHandle
|
|
44
|
+
/>
|
|
45
|
+
</>
|
|
46
|
+
);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const GenericSort = ({ category = false }) => {
|
|
50
|
+
const location = useLocation();
|
|
51
|
+
const {
|
|
52
|
+
form,
|
|
53
|
+
page: { data, setting },
|
|
54
|
+
paramValue,
|
|
55
|
+
} = location.state;
|
|
56
|
+
const [sortData, setSortData] = useState([]);
|
|
57
|
+
const url = form.url;
|
|
58
|
+
|
|
59
|
+
const onSortEnd = ({ oldIndex, newIndex }) => {
|
|
60
|
+
setSortData((prevItem) =>
|
|
61
|
+
arrayMoveImmutable(prevItem, oldIndex, newIndex)
|
|
62
|
+
);
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
const sortList = async () => {
|
|
66
|
+
try {
|
|
67
|
+
let fetchUrl = url;
|
|
68
|
+
let payload = {};
|
|
69
|
+
|
|
70
|
+
if (form.json) {
|
|
71
|
+
fetchUrl = fetchUrl + '/jsonSortList';
|
|
72
|
+
payload.id = paramValue;
|
|
73
|
+
} else {
|
|
74
|
+
fetchUrl = fetchUrl + '/sort_list';
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
const res = await CustomFetch(fetchUrl, 'POST', payload);
|
|
78
|
+
|
|
79
|
+
setSortData(res.data);
|
|
80
|
+
} catch (err) {
|
|
81
|
+
console.log(err);
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
const sortUpdate = async () => {
|
|
86
|
+
try {
|
|
87
|
+
let fetchUrl = url;
|
|
88
|
+
let payload = {
|
|
89
|
+
list: sortData,
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
if (form.json) {
|
|
93
|
+
fetchUrl = fetchUrl + '/jsonSortUpdate';
|
|
94
|
+
payload.id = paramValue;
|
|
95
|
+
} else {
|
|
96
|
+
fetchUrl = fetchUrl + '/sort_update';
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
if (category === false) {
|
|
100
|
+
if (sortData.length > 0) {
|
|
101
|
+
const res = await CustomFetch(fetchUrl, 'POST', payload);
|
|
102
|
+
|
|
103
|
+
if (res.data.error !== '') {
|
|
104
|
+
toast.error(String(res.data.error));
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
} catch (err) {
|
|
109
|
+
console.log(err);
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
useEffect(() => {
|
|
114
|
+
sortUpdate();
|
|
115
|
+
}, [sortData]);
|
|
116
|
+
|
|
117
|
+
useEffect(() => {
|
|
118
|
+
sortList();
|
|
119
|
+
}, []);
|
|
120
|
+
|
|
121
|
+
return (
|
|
122
|
+
<>
|
|
123
|
+
<div className="grid">
|
|
124
|
+
<div className="grid__row">
|
|
125
|
+
<div className="grid__full crmtitle">
|
|
126
|
+
<h1>
|
|
127
|
+
<Link
|
|
128
|
+
to={
|
|
129
|
+
setting && setting.previousUrl
|
|
130
|
+
? setting.previousUrl
|
|
131
|
+
: null
|
|
132
|
+
}
|
|
133
|
+
>
|
|
134
|
+
{setting && setting.title
|
|
135
|
+
? setting.title
|
|
136
|
+
: null}
|
|
137
|
+
</Link>{' '}
|
|
138
|
+
{data && data[setting.titleKey] ? (
|
|
139
|
+
<Link
|
|
140
|
+
to={
|
|
141
|
+
setting && setting.previousUrl
|
|
142
|
+
? `${setting.previousUrl}/${paramValue}`
|
|
143
|
+
: null
|
|
144
|
+
}
|
|
145
|
+
>
|
|
146
|
+
<CircleChevronRight
|
|
147
|
+
strokeWidth={2}
|
|
148
|
+
size={18}
|
|
149
|
+
/>{' '}
|
|
150
|
+
{data[setting.titleKey]}{' '}
|
|
151
|
+
</Link>
|
|
152
|
+
) : null}
|
|
153
|
+
<CircleChevronRight strokeWidth={2} size={18} />{' '}
|
|
154
|
+
{form?.sort?.title}
|
|
155
|
+
</h1>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
<div className="grid">
|
|
160
|
+
<div className="grid__row">
|
|
161
|
+
<div className="grid__full">
|
|
162
|
+
{category === false ? (
|
|
163
|
+
<SortableList
|
|
164
|
+
items={sortData}
|
|
165
|
+
onSortEnd={onSortEnd}
|
|
166
|
+
axis="xy"
|
|
167
|
+
helperClass="dragitem"
|
|
168
|
+
transitionDuration={250}
|
|
169
|
+
useDragHandle
|
|
170
|
+
/>
|
|
171
|
+
) : (
|
|
172
|
+
sortData.length > 0 &&
|
|
173
|
+
sortData.map((item) => (
|
|
174
|
+
<ChildSort
|
|
175
|
+
key={`category-${item.id}`}
|
|
176
|
+
item={item}
|
|
177
|
+
url={url}
|
|
178
|
+
/>
|
|
179
|
+
))
|
|
180
|
+
)}
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
</>
|
|
185
|
+
);
|
|
186
|
+
};
|
|
187
|
+
|
|
188
|
+
export default GenericSort;
|
package/index.js
CHANGED
|
@@ -35,6 +35,7 @@ import CmsSort from './components/cms/generic/CmsSort';
|
|
|
35
35
|
/** CRM Generic Components */
|
|
36
36
|
import GenericDetail from './components/crm/generic/GenericDetail';
|
|
37
37
|
import GenericIndex from './components/crm/generic/GenericIndex';
|
|
38
|
+
import GenericSort from './components/crm/generic/GenericSort';
|
|
38
39
|
import NotificationList from './components/crm/generic/NotificationList';
|
|
39
40
|
|
|
40
41
|
export {
|
|
@@ -53,6 +54,7 @@ export {
|
|
|
53
54
|
Form,
|
|
54
55
|
GenericDetail,
|
|
55
56
|
GenericIndex,
|
|
57
|
+
GenericSort,
|
|
56
58
|
Loader,
|
|
57
59
|
Login,
|
|
58
60
|
MultiSelect,
|
package/package.json
CHANGED