@visns-studio/visns-components 2.0.0 → 2.0.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/Form.jsx
CHANGED
|
@@ -480,7 +480,13 @@ function Form(props) {
|
|
|
480
480
|
);
|
|
481
481
|
} else {
|
|
482
482
|
toast.error(
|
|
483
|
-
|
|
483
|
+
<div>
|
|
484
|
+
{parse(
|
|
485
|
+
result.error !== undefined
|
|
486
|
+
? result.error
|
|
487
|
+
: ''
|
|
488
|
+
)}
|
|
489
|
+
</div>
|
|
484
490
|
);
|
|
485
491
|
}
|
|
486
492
|
});
|
|
@@ -501,7 +507,13 @@ function Form(props) {
|
|
|
501
507
|
);
|
|
502
508
|
} else {
|
|
503
509
|
toast.error(
|
|
504
|
-
|
|
510
|
+
<div>
|
|
511
|
+
{parse(
|
|
512
|
+
result.error !== undefined
|
|
513
|
+
? result.error
|
|
514
|
+
: ''
|
|
515
|
+
)}
|
|
516
|
+
</div>
|
|
505
517
|
);
|
|
506
518
|
}
|
|
507
519
|
});
|
|
@@ -3,7 +3,12 @@ import { useParams, Link } from 'react-router-dom';
|
|
|
3
3
|
import moment from 'moment';
|
|
4
4
|
import parse from 'html-react-parser';
|
|
5
5
|
import Popup from 'reactjs-popup';
|
|
6
|
-
import {
|
|
6
|
+
import { motion } from 'framer-motion';
|
|
7
|
+
import Dropzone from 'react-dropzone';
|
|
8
|
+
import { confirmAlert } from 'react-confirm-alert';
|
|
9
|
+
import { CircleChevronRight, File, TrashCan } from 'akar-icons';
|
|
10
|
+
|
|
11
|
+
import 'react-confirm-alert/src/react-confirm-alert.css';
|
|
7
12
|
|
|
8
13
|
import CustomFetch from '../Fetch';
|
|
9
14
|
import Form from '../Form';
|
|
@@ -14,11 +19,32 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
14
19
|
const routeParams = useParams();
|
|
15
20
|
const { filters, page, tabs } = setting;
|
|
16
21
|
|
|
22
|
+
/** Fileupload states */
|
|
23
|
+
const [files, setFiles] = useState([]);
|
|
24
|
+
const [loadingProgress, setLoadingProgress] = useState(0);
|
|
25
|
+
|
|
17
26
|
/** General States */
|
|
18
27
|
const [config, setConfig] = useState({});
|
|
19
28
|
const [data, setData] = useState({});
|
|
20
29
|
const [dataReload, setDataReload] = useState(0);
|
|
21
|
-
const [subnav, setSubnav] = useState(
|
|
30
|
+
const [subnav, setSubnav] = useState(() => {
|
|
31
|
+
return filters.map((f) => {
|
|
32
|
+
if (
|
|
33
|
+
f.hasOwnProperty('url') &&
|
|
34
|
+
f.baseUrl &&
|
|
35
|
+
f.urlParam &&
|
|
36
|
+
routeParams[f.urlParam]
|
|
37
|
+
) {
|
|
38
|
+
return {
|
|
39
|
+
...f,
|
|
40
|
+
url: `${f.baseUrl}${routeParams[f.urlParam]}`,
|
|
41
|
+
};
|
|
42
|
+
} else {
|
|
43
|
+
return f;
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
});
|
|
47
|
+
|
|
22
48
|
const [total, setTotal] = useState(0);
|
|
23
49
|
|
|
24
50
|
/** General Functions */
|
|
@@ -103,6 +129,155 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
103
129
|
|
|
104
130
|
if (activeTabConfig && activeTabConfig.type) {
|
|
105
131
|
switch (activeTabConfig.type) {
|
|
132
|
+
case 'dropzone':
|
|
133
|
+
const downloadFile = (id) => {
|
|
134
|
+
window.open(
|
|
135
|
+
`/ajax/file/download/${id}/${activeTabConfig.folder}`
|
|
136
|
+
);
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
const deleteFile = (e, id, name) => {
|
|
140
|
+
if (e) {
|
|
141
|
+
e.stopPropagation();
|
|
142
|
+
|
|
143
|
+
confirmAlert({
|
|
144
|
+
title: 'Confirm to Delete File',
|
|
145
|
+
message:
|
|
146
|
+
'Are you sure you want to delete ' +
|
|
147
|
+
name,
|
|
148
|
+
buttons: [
|
|
149
|
+
{
|
|
150
|
+
label: 'Yes',
|
|
151
|
+
onClick: () => {
|
|
152
|
+
CustomFetch(
|
|
153
|
+
`${activeTabConfig.deleteUrl}/${routeParams[urlParam]}`,
|
|
154
|
+
'POST',
|
|
155
|
+
{
|
|
156
|
+
file_id: id,
|
|
157
|
+
},
|
|
158
|
+
function (result) {
|
|
159
|
+
setFiles(result);
|
|
160
|
+
}
|
|
161
|
+
);
|
|
162
|
+
},
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
label: 'No',
|
|
166
|
+
onClick: () => close(),
|
|
167
|
+
},
|
|
168
|
+
],
|
|
169
|
+
});
|
|
170
|
+
}
|
|
171
|
+
};
|
|
172
|
+
|
|
173
|
+
return (
|
|
174
|
+
<div className="gridtxt">
|
|
175
|
+
<div className="gridtxt__header">Files</div>
|
|
176
|
+
<div className="progress">
|
|
177
|
+
<motion.div
|
|
178
|
+
className="progress__bar"
|
|
179
|
+
initial={{ width: '0%' }}
|
|
180
|
+
animate={{
|
|
181
|
+
width: loadingProgress + '%',
|
|
182
|
+
}}
|
|
183
|
+
transition={{
|
|
184
|
+
duration: 2,
|
|
185
|
+
ease: [0.165, 0.84, 0.44, 1.0],
|
|
186
|
+
}}
|
|
187
|
+
/>
|
|
188
|
+
</div>
|
|
189
|
+
<Dropzone
|
|
190
|
+
onDrop={(acceptedFiles) => {
|
|
191
|
+
const uploadFile = (file) => {
|
|
192
|
+
Vapor.store(file, {
|
|
193
|
+
progress: (progress) => {
|
|
194
|
+
setLoadingProgress(
|
|
195
|
+
progress * 100
|
|
196
|
+
);
|
|
197
|
+
},
|
|
198
|
+
}).then((response) => {
|
|
199
|
+
setLoadingProgress(0);
|
|
200
|
+
const requestBody = {
|
|
201
|
+
uuid: response.uuid,
|
|
202
|
+
key: response.key,
|
|
203
|
+
bucket: response.bucket,
|
|
204
|
+
name: file.name,
|
|
205
|
+
size: file.size,
|
|
206
|
+
extension:
|
|
207
|
+
response.extension,
|
|
208
|
+
};
|
|
209
|
+
|
|
210
|
+
CustomFetch(
|
|
211
|
+
`${activeTabConfig.url}/${routeParams[urlParam]}`,
|
|
212
|
+
'PUT',
|
|
213
|
+
requestBody,
|
|
214
|
+
(res) => {
|
|
215
|
+
setFiles(
|
|
216
|
+
res.data.files
|
|
217
|
+
);
|
|
218
|
+
}
|
|
219
|
+
);
|
|
220
|
+
});
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
acceptedFiles.forEach((a) => {
|
|
224
|
+
uploadFile(a);
|
|
225
|
+
});
|
|
226
|
+
}}
|
|
227
|
+
>
|
|
228
|
+
{({ getRootProps, getInputProps }) => (
|
|
229
|
+
<section className="dropzone__container">
|
|
230
|
+
<div {...getRootProps()}>
|
|
231
|
+
<input
|
|
232
|
+
{...getInputProps()}
|
|
233
|
+
/>
|
|
234
|
+
<p>
|
|
235
|
+
Drag 'n' drop some files
|
|
236
|
+
here, or click to select
|
|
237
|
+
files
|
|
238
|
+
</p>
|
|
239
|
+
</div>
|
|
240
|
+
<ul className="dropzone__files">
|
|
241
|
+
{files.map((a, b) => (
|
|
242
|
+
<li
|
|
243
|
+
onClick={() => {
|
|
244
|
+
downloadFile(
|
|
245
|
+
a.id
|
|
246
|
+
);
|
|
247
|
+
}}
|
|
248
|
+
key={'tf-' + b}
|
|
249
|
+
>
|
|
250
|
+
<File
|
|
251
|
+
strokeWidth={2}
|
|
252
|
+
size={18}
|
|
253
|
+
/>
|
|
254
|
+
{a.file_name}
|
|
255
|
+
<button
|
|
256
|
+
onClick={(
|
|
257
|
+
event
|
|
258
|
+
) => {
|
|
259
|
+
deleteFile(
|
|
260
|
+
event,
|
|
261
|
+
a.id,
|
|
262
|
+
a.file_name
|
|
263
|
+
);
|
|
264
|
+
}}
|
|
265
|
+
>
|
|
266
|
+
<TrashCan
|
|
267
|
+
strokeWidth={
|
|
268
|
+
2
|
|
269
|
+
}
|
|
270
|
+
size={18}
|
|
271
|
+
/>
|
|
272
|
+
</button>
|
|
273
|
+
</li>
|
|
274
|
+
))}
|
|
275
|
+
</ul>
|
|
276
|
+
</section>
|
|
277
|
+
)}
|
|
278
|
+
</Dropzone>
|
|
279
|
+
</div>
|
|
280
|
+
);
|
|
106
281
|
case 'form':
|
|
107
282
|
return (
|
|
108
283
|
<div className="gridtxt">
|
|
@@ -295,6 +470,14 @@ function GenericDetail({ setting, urlParam, userProfile }) {
|
|
|
295
470
|
{},
|
|
296
471
|
(res) => {
|
|
297
472
|
setData(res);
|
|
473
|
+
|
|
474
|
+
tabs.forEach((tab) => {
|
|
475
|
+
if (tab.type && tab.type === 'dropzone') {
|
|
476
|
+
if (res.files) {
|
|
477
|
+
setFiles(res.files);
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
|
+
});
|
|
298
481
|
}
|
|
299
482
|
);
|
|
300
483
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"dependencies": {
|
|
3
3
|
"@inovua/reactdatagrid-community": "^5.10.1",
|
|
4
|
+
"add": "^2.0.6",
|
|
4
5
|
"akar-icons": "^1.9.28",
|
|
5
6
|
"awesome-debounce-promise": "^2.1.0",
|
|
6
7
|
"axios": "^1.4.0",
|
|
@@ -8,14 +9,17 @@
|
|
|
8
9
|
"html-react-parser": "^4.2.0",
|
|
9
10
|
"lodash": "^4.17.21",
|
|
10
11
|
"moment": "^2.29.4",
|
|
12
|
+
"motion": "^10.16.2",
|
|
11
13
|
"numeral": "^2.0.6",
|
|
12
14
|
"quill-image-uploader": "^1.3.0",
|
|
13
15
|
"react-confirm-alert": "^3.0.6",
|
|
14
16
|
"react-datepicker": "^4.16.0",
|
|
15
17
|
"react-dropzone": "^14.2.3",
|
|
16
18
|
"react-number-format": "^5.2.2",
|
|
19
|
+
"react-password-strength-bar": "^0.4.1",
|
|
17
20
|
"react-promise-tracker": "^2.1.1",
|
|
18
21
|
"react-quill": "^2.0.0",
|
|
22
|
+
"react-reveal": "^1.2.2",
|
|
19
23
|
"react-select": "^5.7.4",
|
|
20
24
|
"react-slugify": "^3.0.2",
|
|
21
25
|
"react-sortable-hoc": "^2.0.0",
|
|
@@ -23,7 +27,9 @@
|
|
|
23
27
|
"react-toggle": "^4.1.3",
|
|
24
28
|
"react-tooltip": "^5.18.1",
|
|
25
29
|
"react-window": "^1.8.9",
|
|
26
|
-
"reactjs-popup": "^2.0.5"
|
|
30
|
+
"reactjs-popup": "^2.0.5",
|
|
31
|
+
"validator": "^13.9.0",
|
|
32
|
+
"yarn": "^1.22.19"
|
|
27
33
|
},
|
|
28
34
|
"devDependecies": {
|
|
29
35
|
"react": "^18.2.0",
|
|
@@ -34,7 +40,7 @@
|
|
|
34
40
|
"react-dom": "^17.0.1"
|
|
35
41
|
},
|
|
36
42
|
"name": "@visns-studio/visns-components",
|
|
37
|
-
"version": "2.0.
|
|
43
|
+
"version": "2.0.2",
|
|
38
44
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
39
45
|
"main": "index.js",
|
|
40
46
|
"scripts": {
|