@bexis2/bexis2-core-ui 0.2.10 → 0.2.12
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/README.md +263 -207
- package/dist/components/Table/Table.svelte +85 -85
- package/dist/components/Table/TableFilter.svelte +109 -109
- package/dist/components/Table/TablePagination.svelte +38 -38
- package/dist/components/file/FileUploader.svelte +34 -34
- package/dist/components/form/Checkbox.svelte.d.ts +1 -1
- package/dist/components/form/DropdownKvP.svelte +5 -11
- package/dist/components/form/InputContainer.svelte +20 -19
- package/dist/components/form/MultiSelect.svelte +163 -178
- package/dist/components/form/TextArea.svelte +13 -13
- package/dist/components/form/TextInput.svelte +0 -2
- package/dist/components/page/Alert.svelte +28 -30
- package/dist/components/page/BackToTop.svelte +30 -30
- package/dist/components/page/Docs.svelte +22 -19
- package/dist/components/page/Docs.svelte.d.ts +1 -1
- package/dist/components/page/ErrorMessage.svelte +9 -0
- package/dist/components/page/ErrorMessage.svelte.d.ts +16 -0
- package/dist/components/page/Footer.svelte +5 -5
- package/dist/components/page/Header.svelte +5 -4
- package/dist/components/page/HelpPopUp.svelte +31 -25
- package/dist/components/page/HelpPopUp.svelte.d.ts +5 -12
- package/dist/components/page/Page.svelte +56 -66
- package/dist/components/page/Page.svelte.d.ts +2 -2
- package/dist/components/page/PageCaller.js +19 -21
- package/dist/components/page/Spinner.svelte +12 -13
- package/dist/components/page/Spinner.svelte.d.ts +1 -1
- package/dist/components/page/breadcrumb/Breadcrumb.svelte +19 -23
- package/dist/components/page/menu/Menu.svelte +25 -25
- package/dist/components/page/menu/MenuBar.svelte +7 -14
- package/dist/components/page/menu/MenuBar.svelte.d.ts +2 -2
- package/dist/components/page/menu/MenuDataCaller.js +10 -11
- package/dist/components/page/menu/MenuItem.svelte +9 -13
- package/dist/components/page/menu/MenuItem.svelte.d.ts +2 -1
- package/dist/components/page/menu/MenuSublist.svelte +18 -17
- package/dist/components/page/menu/MenuSublist.svelte.d.ts +2 -2
- package/dist/components/page/menu/SettingsBar.svelte +9 -14
- package/dist/components/page/menu/SettingsBar.svelte.d.ts +2 -2
- package/dist/css/core.ui.postcss +10 -7
- package/dist/css/themes/theme-bexis2.css +12 -13
- package/dist/index.d.ts +2 -3
- package/dist/index.js +5 -4
- package/dist/models/Models.js +0 -1
- package/dist/models/Page.d.ts +31 -0
- package/dist/services/BaseCaller.js +16 -21
- package/dist/stores/pageStores.d.ts +4 -4
- package/dist/stores/pageStores.js +27 -27
- package/package.json +2 -2
- package/src/lib/components/Table/Table.svelte +246 -246
- package/src/lib/components/Table/TableFilter.svelte +222 -222
- package/src/lib/components/Table/TablePagination.svelte +61 -61
- package/src/lib/components/Table/filter.ts +141 -141
- package/src/lib/components/file/FileUploader.svelte +184 -184
- package/src/lib/components/form/Checkbox.svelte +1 -1
- package/src/lib/components/form/DateInput.svelte +0 -1
- package/src/lib/components/form/DropdownKvP.svelte +5 -11
- package/src/lib/components/form/InputContainer.svelte +36 -44
- package/src/lib/components/form/MultiSelect.svelte +163 -178
- package/src/lib/components/form/NumberInput.svelte +3 -5
- package/src/lib/components/form/TextArea.svelte +26 -27
- package/src/lib/components/form/TextInput.svelte +2 -5
- package/src/lib/components/page/Alert.svelte +41 -45
- package/src/lib/components/page/BackToTop.svelte +30 -30
- package/src/lib/components/page/Docs.svelte +46 -44
- package/src/lib/components/page/ErrorMessage.svelte +10 -0
- package/src/lib/components/page/Footer.svelte +18 -22
- package/src/lib/components/page/Header.svelte +18 -21
- package/src/lib/components/page/HelpPopUp.svelte +72 -66
- package/src/lib/components/page/Page.svelte +96 -108
- package/src/lib/components/page/PageCaller.js +19 -21
- package/src/lib/components/page/Spinner.svelte +14 -16
- package/src/lib/components/page/breadcrumb/Breadcrumb.svelte +31 -43
- package/src/lib/components/page/menu/Menu.svelte +40 -47
- package/src/lib/components/page/menu/MenuBar.svelte +20 -31
- package/src/lib/components/page/menu/MenuDataCaller.js +10 -11
- package/src/lib/components/page/menu/MenuItem.svelte +27 -33
- package/src/lib/components/page/menu/MenuSublist.svelte +43 -48
- package/src/lib/components/page/menu/SettingsBar.svelte +31 -40
- package/src/lib/css/core.ui.postcss +10 -7
- package/src/lib/css/themes/theme-bexis2.css +12 -13
- package/src/lib/index.ts +75 -76
- package/src/lib/models/Enums.ts +10 -11
- package/src/lib/models/Models.ts +113 -113
- package/src/lib/models/Page.ts +40 -41
- package/src/lib/services/BaseCaller.js +16 -21
- package/src/lib/stores/apiStores.ts +31 -32
- package/src/lib/stores/pageStores.ts +121 -126
|
@@ -1,141 +1,141 @@
|
|
|
1
|
-
import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
|
|
2
|
-
import type { TableFilterFn } from 'svelte-headless-table/lib/plugins/addTableFilter';
|
|
3
|
-
|
|
4
|
-
const textFilter = (filterOption, filterValue, value) => {
|
|
5
|
-
switch (filterOption) {
|
|
6
|
-
case 'isequal':
|
|
7
|
-
return value.toLowerCase() === filterValue.toLowerCase();
|
|
8
|
-
case 'isnotequal':
|
|
9
|
-
return value.toLowerCase() !== filterValue.toLowerCase();
|
|
10
|
-
case 'starts':
|
|
11
|
-
return value.toLowerCase().startsWith(filterValue.toLowerCase());
|
|
12
|
-
case 'ends':
|
|
13
|
-
return value.toLowerCase().endsWith(filterValue.toLowerCase());
|
|
14
|
-
case 'contains':
|
|
15
|
-
return value.toLowerCase().includes(filterValue.toLowerCase());
|
|
16
|
-
case 'notcontains':
|
|
17
|
-
return !value.toLowerCase().includes(filterValue.toLowerCase());
|
|
18
|
-
default:
|
|
19
|
-
return false;
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
const numberFilter = (filterOption, filterValue, value) => {
|
|
24
|
-
switch (filterOption) {
|
|
25
|
-
case 'isequal':
|
|
26
|
-
return value === filterValue;
|
|
27
|
-
case 'isnotequal':
|
|
28
|
-
return value !== filterValue;
|
|
29
|
-
case 'isgreater':
|
|
30
|
-
return value > filterValue;
|
|
31
|
-
case 'isless':
|
|
32
|
-
return value < filterValue;
|
|
33
|
-
case 'isgreaterorequal':
|
|
34
|
-
return value >= filterValue;
|
|
35
|
-
case 'islessorequal':
|
|
36
|
-
return value <= filterValue;
|
|
37
|
-
default:
|
|
38
|
-
return false;
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
const dateFilter = (filterOption, filterValue, value) => {
|
|
43
|
-
const filter = new Date(filterValue);
|
|
44
|
-
|
|
45
|
-
switch (filterOption) {
|
|
46
|
-
case 'ison':
|
|
47
|
-
return value === filter;
|
|
48
|
-
case 'isstartingfrom':
|
|
49
|
-
return value >= filter;
|
|
50
|
-
case 'isafter':
|
|
51
|
-
return value > filter;
|
|
52
|
-
case 'isuntil':
|
|
53
|
-
return value <= filter;
|
|
54
|
-
case 'isbefore':
|
|
55
|
-
return value < filter;
|
|
56
|
-
case 'isnoton':
|
|
57
|
-
return value !== filter;
|
|
58
|
-
default:
|
|
59
|
-
return false;
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
const numericFilter: ColumnFilterFn = ({ filterValue, value }) => {
|
|
64
|
-
const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
|
|
65
|
-
if (firstFilterValue == null && secondFilterValue == null) {
|
|
66
|
-
return true;
|
|
67
|
-
} else if (
|
|
68
|
-
(firstFilterOption == null || firstFilterValue == null) &&
|
|
69
|
-
secondFilterOption != null &&
|
|
70
|
-
secondFilterValue != null
|
|
71
|
-
) {
|
|
72
|
-
return numberFilter(secondFilterOption, secondFilterValue, value);
|
|
73
|
-
} else if (
|
|
74
|
-
(secondFilterOption == null || secondFilterValue == null) &&
|
|
75
|
-
firstFilterOption != null &&
|
|
76
|
-
firstFilterValue != null
|
|
77
|
-
) {
|
|
78
|
-
return numberFilter(firstFilterOption, firstFilterValue, value);
|
|
79
|
-
}
|
|
80
|
-
return (
|
|
81
|
-
numberFilter(firstFilterOption, firstFilterValue, value) &&
|
|
82
|
-
numberFilter(secondFilterOption, secondFilterValue, value)
|
|
83
|
-
);
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
const stringFilter: ColumnFilterFn = ({ filterValue, value }) => {
|
|
87
|
-
const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
|
|
88
|
-
if (!firstFilterValue?.length && !secondFilterValue?.length) {
|
|
89
|
-
return true;
|
|
90
|
-
} else if (
|
|
91
|
-
(!firstFilterOption || !firstFilterValue) &&
|
|
92
|
-
secondFilterOption &&
|
|
93
|
-
secondFilterValue?.length
|
|
94
|
-
) {
|
|
95
|
-
return textFilter(secondFilterOption, secondFilterValue, value);
|
|
96
|
-
} else if (
|
|
97
|
-
(!secondFilterOption || !secondFilterValue?.length) &&
|
|
98
|
-
firstFilterOption &&
|
|
99
|
-
firstFilterValue?.length
|
|
100
|
-
) {
|
|
101
|
-
return textFilter(firstFilterOption, firstFilterValue, value);
|
|
102
|
-
}
|
|
103
|
-
return (
|
|
104
|
-
textFilter(firstFilterOption, firstFilterValue, value) &&
|
|
105
|
-
textFilter(secondFilterOption, secondFilterValue, value)
|
|
106
|
-
);
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
const dateTypeFilter: ColumnFilterFn = ({ filterValue, value }) => {
|
|
110
|
-
const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
|
|
111
|
-
if (!firstFilterValue && !secondFilterValue) {
|
|
112
|
-
return true;
|
|
113
|
-
} else if ((!firstFilterOption || !firstFilterValue) && secondFilterOption && secondFilterValue) {
|
|
114
|
-
return dateFilter(secondFilterOption, secondFilterValue, value);
|
|
115
|
-
} else if ((!secondFilterOption || !secondFilterValue) && firstFilterOption && firstFilterValue) {
|
|
116
|
-
return dateFilter(firstFilterOption, firstFilterValue, value);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
return (
|
|
120
|
-
dateFilter(firstFilterOption, firstFilterValue, value) &&
|
|
121
|
-
dateFilter(secondFilterOption, secondFilterValue, value)
|
|
122
|
-
);
|
|
123
|
-
};
|
|
124
|
-
|
|
125
|
-
export const columnFilter: ColumnFilterFn = ({ filterValue, value }) => {
|
|
126
|
-
if (typeof value === 'string') {
|
|
127
|
-
return stringFilter({ filterValue, value });
|
|
128
|
-
} else if (typeof value === 'number') {
|
|
129
|
-
return numericFilter({ filterValue, value });
|
|
130
|
-
} else if (typeof value === 'object' && value instanceof Date) {
|
|
131
|
-
return dateTypeFilter({ filterValue, value });
|
|
132
|
-
}
|
|
133
|
-
return false;
|
|
134
|
-
};
|
|
135
|
-
|
|
136
|
-
export const searchFilter: TableFilterFn = ({ filterValue, value }) => {
|
|
137
|
-
if (value.toLowerCase().includes(filterValue.toLowerCase())) {
|
|
138
|
-
return true;
|
|
139
|
-
}
|
|
140
|
-
return false;
|
|
141
|
-
};
|
|
1
|
+
import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
|
|
2
|
+
import type { TableFilterFn } from 'svelte-headless-table/lib/plugins/addTableFilter';
|
|
3
|
+
|
|
4
|
+
const textFilter = (filterOption, filterValue, value) => {
|
|
5
|
+
switch (filterOption) {
|
|
6
|
+
case 'isequal':
|
|
7
|
+
return value.toLowerCase() === filterValue.toLowerCase();
|
|
8
|
+
case 'isnotequal':
|
|
9
|
+
return value.toLowerCase() !== filterValue.toLowerCase();
|
|
10
|
+
case 'starts':
|
|
11
|
+
return value.toLowerCase().startsWith(filterValue.toLowerCase());
|
|
12
|
+
case 'ends':
|
|
13
|
+
return value.toLowerCase().endsWith(filterValue.toLowerCase());
|
|
14
|
+
case 'contains':
|
|
15
|
+
return value.toLowerCase().includes(filterValue.toLowerCase());
|
|
16
|
+
case 'notcontains':
|
|
17
|
+
return !value.toLowerCase().includes(filterValue.toLowerCase());
|
|
18
|
+
default:
|
|
19
|
+
return false;
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const numberFilter = (filterOption, filterValue, value) => {
|
|
24
|
+
switch (filterOption) {
|
|
25
|
+
case 'isequal':
|
|
26
|
+
return value === filterValue;
|
|
27
|
+
case 'isnotequal':
|
|
28
|
+
return value !== filterValue;
|
|
29
|
+
case 'isgreater':
|
|
30
|
+
return value > filterValue;
|
|
31
|
+
case 'isless':
|
|
32
|
+
return value < filterValue;
|
|
33
|
+
case 'isgreaterorequal':
|
|
34
|
+
return value >= filterValue;
|
|
35
|
+
case 'islessorequal':
|
|
36
|
+
return value <= filterValue;
|
|
37
|
+
default:
|
|
38
|
+
return false;
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
const dateFilter = (filterOption, filterValue, value) => {
|
|
43
|
+
const filter = new Date(filterValue);
|
|
44
|
+
|
|
45
|
+
switch (filterOption) {
|
|
46
|
+
case 'ison':
|
|
47
|
+
return value === filter;
|
|
48
|
+
case 'isstartingfrom':
|
|
49
|
+
return value >= filter;
|
|
50
|
+
case 'isafter':
|
|
51
|
+
return value > filter;
|
|
52
|
+
case 'isuntil':
|
|
53
|
+
return value <= filter;
|
|
54
|
+
case 'isbefore':
|
|
55
|
+
return value < filter;
|
|
56
|
+
case 'isnoton':
|
|
57
|
+
return value !== filter;
|
|
58
|
+
default:
|
|
59
|
+
return false;
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
const numericFilter: ColumnFilterFn = ({ filterValue, value }) => {
|
|
64
|
+
const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
|
|
65
|
+
if (firstFilterValue == null && secondFilterValue == null) {
|
|
66
|
+
return true;
|
|
67
|
+
} else if (
|
|
68
|
+
(firstFilterOption == null || firstFilterValue == null) &&
|
|
69
|
+
secondFilterOption != null &&
|
|
70
|
+
secondFilterValue != null
|
|
71
|
+
) {
|
|
72
|
+
return numberFilter(secondFilterOption, secondFilterValue, value);
|
|
73
|
+
} else if (
|
|
74
|
+
(secondFilterOption == null || secondFilterValue == null) &&
|
|
75
|
+
firstFilterOption != null &&
|
|
76
|
+
firstFilterValue != null
|
|
77
|
+
) {
|
|
78
|
+
return numberFilter(firstFilterOption, firstFilterValue, value);
|
|
79
|
+
}
|
|
80
|
+
return (
|
|
81
|
+
numberFilter(firstFilterOption, firstFilterValue, value) &&
|
|
82
|
+
numberFilter(secondFilterOption, secondFilterValue, value)
|
|
83
|
+
);
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
const stringFilter: ColumnFilterFn = ({ filterValue, value }) => {
|
|
87
|
+
const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
|
|
88
|
+
if (!firstFilterValue?.length && !secondFilterValue?.length) {
|
|
89
|
+
return true;
|
|
90
|
+
} else if (
|
|
91
|
+
(!firstFilterOption || !firstFilterValue) &&
|
|
92
|
+
secondFilterOption &&
|
|
93
|
+
secondFilterValue?.length
|
|
94
|
+
) {
|
|
95
|
+
return textFilter(secondFilterOption, secondFilterValue, value);
|
|
96
|
+
} else if (
|
|
97
|
+
(!secondFilterOption || !secondFilterValue?.length) &&
|
|
98
|
+
firstFilterOption &&
|
|
99
|
+
firstFilterValue?.length
|
|
100
|
+
) {
|
|
101
|
+
return textFilter(firstFilterOption, firstFilterValue, value);
|
|
102
|
+
}
|
|
103
|
+
return (
|
|
104
|
+
textFilter(firstFilterOption, firstFilterValue, value) &&
|
|
105
|
+
textFilter(secondFilterOption, secondFilterValue, value)
|
|
106
|
+
);
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
const dateTypeFilter: ColumnFilterFn = ({ filterValue, value }) => {
|
|
110
|
+
const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
|
|
111
|
+
if (!firstFilterValue && !secondFilterValue) {
|
|
112
|
+
return true;
|
|
113
|
+
} else if ((!firstFilterOption || !firstFilterValue) && secondFilterOption && secondFilterValue) {
|
|
114
|
+
return dateFilter(secondFilterOption, secondFilterValue, value);
|
|
115
|
+
} else if ((!secondFilterOption || !secondFilterValue) && firstFilterOption && firstFilterValue) {
|
|
116
|
+
return dateFilter(firstFilterOption, firstFilterValue, value);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
return (
|
|
120
|
+
dateFilter(firstFilterOption, firstFilterValue, value) &&
|
|
121
|
+
dateFilter(secondFilterOption, secondFilterValue, value)
|
|
122
|
+
);
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
export const columnFilter: ColumnFilterFn = ({ filterValue, value }) => {
|
|
126
|
+
if (typeof value === 'string') {
|
|
127
|
+
return stringFilter({ filterValue, value });
|
|
128
|
+
} else if (typeof value === 'number') {
|
|
129
|
+
return numericFilter({ filterValue, value });
|
|
130
|
+
} else if (typeof value === 'object' && value instanceof Date) {
|
|
131
|
+
return dateTypeFilter({ filterValue, value });
|
|
132
|
+
}
|
|
133
|
+
return false;
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
export const searchFilter: TableFilterFn = ({ filterValue, value }) => {
|
|
137
|
+
if (value.toLowerCase().includes(filterValue.toLowerCase())) {
|
|
138
|
+
return true;
|
|
139
|
+
}
|
|
140
|
+
return false;
|
|
141
|
+
};
|
|
@@ -1,184 +1,184 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import type { fileUploaderModel, fileInfoType, filesType } from '../../models/Models.js';
|
|
3
|
-
|
|
4
|
-
import DropZone from 'svelte-file-dropzone/Dropzone.svelte';
|
|
5
|
-
import Fa from 'svelte-fa/src/fa.svelte';
|
|
6
|
-
|
|
7
|
-
import Spinner from '../page/Spinner.svelte';
|
|
8
|
-
import { createEventDispatcher } from 'svelte';
|
|
9
|
-
import { faTrash } from '@fortawesome/free-solid-svg-icons';
|
|
10
|
-
import { faSave } from '@fortawesome/free-regular-svg-icons';
|
|
11
|
-
import { faFileUpload } from '@fortawesome/free-solid-svg-icons';
|
|
12
|
-
|
|
13
|
-
import { Api } from '../../services/Api.js';
|
|
14
|
-
|
|
15
|
-
export let id = 0;
|
|
16
|
-
export let version = 1;
|
|
17
|
-
|
|
18
|
-
import { onMount } from 'svelte';
|
|
19
|
-
|
|
20
|
-
// export let description="";
|
|
21
|
-
// export let status=0;
|
|
22
|
-
|
|
23
|
-
//action to load fileupload model
|
|
24
|
-
export let start = '';
|
|
25
|
-
//action to save selected file
|
|
26
|
-
export let submit = '';
|
|
27
|
-
|
|
28
|
-
export let context = '';
|
|
29
|
-
|
|
30
|
-
export let data: fileUploaderModel | undefined;
|
|
31
|
-
|
|
32
|
-
$: model = data;
|
|
33
|
-
$: submitBt = 'submit';
|
|
34
|
-
|
|
35
|
-
let maxSize = 0;
|
|
36
|
-
|
|
37
|
-
const dispatch = createEventDispatcher();
|
|
38
|
-
|
|
39
|
-
let fx: fileInfoType[];
|
|
40
|
-
|
|
41
|
-
let files: filesType = { accepted: [], rejected: [] };
|
|
42
|
-
$: files;
|
|
43
|
-
|
|
44
|
-
onMount(async () => {
|
|
45
|
-
//console.log('fileupload - OnMount', data);
|
|
46
|
-
|
|
47
|
-
if (!data) {
|
|
48
|
-
load();
|
|
49
|
-
} else {
|
|
50
|
-
model = data;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
if (model) {
|
|
54
|
-
submitBt += context;
|
|
55
|
-
maxSize = model.maxSize * 1024 * 1024;
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
|
|
59
|
-
// load modal from server
|
|
60
|
-
async function load() {
|
|
61
|
-
let url = start + '?id=' + id + '&version=' + version;
|
|
62
|
-
|
|
63
|
-
// load menu froms server
|
|
64
|
-
const res = await Api.get(url);
|
|
65
|
-
model = await res.data();
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
function handleFilesSelect(e: any) {
|
|
71
|
-
//console.log('handleFilesSelect', e);
|
|
72
|
-
console.log('files', files);
|
|
73
|
-
|
|
74
|
-
const { acceptedFiles, fileRejections } = e.detail;
|
|
75
|
-
|
|
76
|
-
files.accepted = [...files.accepted, ...acceptedFiles];
|
|
77
|
-
files.rejected = [...files.rejected, ...fileRejections];
|
|
78
|
-
|
|
79
|
-
//console.log('acceptedFiles', acceptedFiles);
|
|
80
|
-
console.log('files.accepted', files.accepted);
|
|
81
|
-
|
|
82
|
-
if (fileRejections.length > 0) {
|
|
83
|
-
//alert("the dropped file is not supported");
|
|
84
|
-
//console.log('the dropped file is not supported.');
|
|
85
|
-
console.log(files.rejected);
|
|
86
|
-
|
|
87
|
-
let messages = [''];
|
|
88
|
-
|
|
89
|
-
for (let index = 0; index < fileRejections.length; index++) {
|
|
90
|
-
const element = fileRejections[index];
|
|
91
|
-
messages.push(getErrorMessage(element));
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
//console.log(messages);
|
|
95
|
-
|
|
96
|
-
dispatch('error', { messages });
|
|
97
|
-
//list up the errors somewhere
|
|
98
|
-
files.rejected = [];
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
if (acceptedFiles.length > 0) {
|
|
102
|
-
document.getElementById(submitBt)?.click();
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
function getErrorMessage(rejected) {
|
|
107
|
-
let message = '';
|
|
108
|
-
message = rejected.file.path + ' : ';
|
|
109
|
-
let errors = rejected.errors;
|
|
110
|
-
for (let index = 0; index < errors.length; index++) {
|
|
111
|
-
const error = errors[index];
|
|
112
|
-
message += error.message;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
return message;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
async function handleSubmit() {
|
|
119
|
-
//console.log('SUBMIT');
|
|
120
|
-
|
|
121
|
-
dispatch('submit');
|
|
122
|
-
|
|
123
|
-
let url = submit + '?id=' + id;
|
|
124
|
-
|
|
125
|
-
// //console.log(model);
|
|
126
|
-
// //console.log(url);
|
|
127
|
-
//console.log('SUBMIT');
|
|
128
|
-
|
|
129
|
-
if (files.accepted.length > 0) {
|
|
130
|
-
//console.log(files);
|
|
131
|
-
|
|
132
|
-
const formData = new FormData();
|
|
133
|
-
formData.append('files', '123');
|
|
134
|
-
// Looping over all files and add it to FormData object
|
|
135
|
-
for (var i = 0; i < files.accepted.length; i++) {
|
|
136
|
-
formData.append(files.accepted[i].name, files.accepted[i]);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
const response = await Api.post(url, formData);
|
|
140
|
-
|
|
141
|
-
if (response.status == 200) {
|
|
142
|
-
dispatch('submited');
|
|
143
|
-
|
|
144
|
-
let message = files.accepted.length + ' is/are uploaded';
|
|
145
|
-
dispatch('success', { text: message });
|
|
146
|
-
|
|
147
|
-
files.accepted = [];
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
</script>
|
|
152
|
-
|
|
153
|
-
<form on:submit|preventDefault={handleSubmit}>
|
|
154
|
-
{#if model}
|
|
155
|
-
<!--if model exist -->
|
|
156
|
-
<div>
|
|
157
|
-
<DropZone
|
|
158
|
-
on:drop={handleFilesSelect}
|
|
159
|
-
accept={model.accept}
|
|
160
|
-
multiple={model.multiple}
|
|
161
|
-
{maxSize}
|
|
162
|
-
>
|
|
163
|
-
<b style="font-size:xx-large"><Fa icon={faFileUpload} /></b>
|
|
164
|
-
<span
|
|
165
|
-
><b>Drag 'n' drop some files here, or click to select files</b>
|
|
166
|
-
<b>max file : {model.maxSize} mb</b></span
|
|
167
|
-
>
|
|
168
|
-
<p>
|
|
169
|
-
{#if model.accept}
|
|
170
|
-
{#each model.accept as ext}
|
|
171
|
-
{ext} ,
|
|
172
|
-
{/each}
|
|
173
|
-
{/if}
|
|
174
|
-
</p>
|
|
175
|
-
</DropZone>
|
|
176
|
-
</div>
|
|
177
|
-
|
|
178
|
-
<button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
|
|
179
|
-
{:else}
|
|
180
|
-
<!-- while data is not loaded show a loading information -->
|
|
181
|
-
|
|
182
|
-
<Spinner />
|
|
183
|
-
{/if}
|
|
184
|
-
</form>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { fileUploaderModel, fileInfoType, filesType } from '../../models/Models.js';
|
|
3
|
+
|
|
4
|
+
import DropZone from 'svelte-file-dropzone/Dropzone.svelte';
|
|
5
|
+
import Fa from 'svelte-fa/src/fa.svelte';
|
|
6
|
+
|
|
7
|
+
import Spinner from '../page/Spinner.svelte';
|
|
8
|
+
import { createEventDispatcher } from 'svelte';
|
|
9
|
+
import { faTrash } from '@fortawesome/free-solid-svg-icons';
|
|
10
|
+
import { faSave } from '@fortawesome/free-regular-svg-icons';
|
|
11
|
+
import { faFileUpload } from '@fortawesome/free-solid-svg-icons';
|
|
12
|
+
|
|
13
|
+
import { Api } from '../../services/Api.js';
|
|
14
|
+
|
|
15
|
+
export let id = 0;
|
|
16
|
+
export let version = 1;
|
|
17
|
+
|
|
18
|
+
import { onMount } from 'svelte';
|
|
19
|
+
|
|
20
|
+
// export let description="";
|
|
21
|
+
// export let status=0;
|
|
22
|
+
|
|
23
|
+
//action to load fileupload model
|
|
24
|
+
export let start = '';
|
|
25
|
+
//action to save selected file
|
|
26
|
+
export let submit = '';
|
|
27
|
+
|
|
28
|
+
export let context = '';
|
|
29
|
+
|
|
30
|
+
export let data: fileUploaderModel | undefined;
|
|
31
|
+
|
|
32
|
+
$: model = data;
|
|
33
|
+
$: submitBt = 'submit';
|
|
34
|
+
|
|
35
|
+
let maxSize = 0;
|
|
36
|
+
|
|
37
|
+
const dispatch = createEventDispatcher();
|
|
38
|
+
|
|
39
|
+
let fx: fileInfoType[];
|
|
40
|
+
|
|
41
|
+
let files: filesType = { accepted: [], rejected: [] };
|
|
42
|
+
$: files;
|
|
43
|
+
|
|
44
|
+
onMount(async () => {
|
|
45
|
+
//console.log('fileupload - OnMount', data);
|
|
46
|
+
|
|
47
|
+
if (!data) {
|
|
48
|
+
load();
|
|
49
|
+
} else {
|
|
50
|
+
model = data;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
if (model) {
|
|
54
|
+
submitBt += context;
|
|
55
|
+
maxSize = model.maxSize * 1024 * 1024;
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
// load modal from server
|
|
60
|
+
async function load() {
|
|
61
|
+
let url = start + '?id=' + id + '&version=' + version;
|
|
62
|
+
|
|
63
|
+
// load menu froms server
|
|
64
|
+
const res = await Api.get(url);
|
|
65
|
+
model = await res.data();
|
|
66
|
+
|
|
67
|
+
console.log('fileupload', model);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
function handleFilesSelect(e: any) {
|
|
71
|
+
//console.log('handleFilesSelect', e);
|
|
72
|
+
console.log('files', files);
|
|
73
|
+
|
|
74
|
+
const { acceptedFiles, fileRejections } = e.detail;
|
|
75
|
+
|
|
76
|
+
files.accepted = [...files.accepted, ...acceptedFiles];
|
|
77
|
+
files.rejected = [...files.rejected, ...fileRejections];
|
|
78
|
+
|
|
79
|
+
//console.log('acceptedFiles', acceptedFiles);
|
|
80
|
+
console.log('files.accepted', files.accepted);
|
|
81
|
+
|
|
82
|
+
if (fileRejections.length > 0) {
|
|
83
|
+
//alert("the dropped file is not supported");
|
|
84
|
+
//console.log('the dropped file is not supported.');
|
|
85
|
+
console.log(files.rejected);
|
|
86
|
+
|
|
87
|
+
let messages = [''];
|
|
88
|
+
|
|
89
|
+
for (let index = 0; index < fileRejections.length; index++) {
|
|
90
|
+
const element = fileRejections[index];
|
|
91
|
+
messages.push(getErrorMessage(element));
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
//console.log(messages);
|
|
95
|
+
|
|
96
|
+
dispatch('error', { messages });
|
|
97
|
+
//list up the errors somewhere
|
|
98
|
+
files.rejected = [];
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
if (acceptedFiles.length > 0) {
|
|
102
|
+
document.getElementById(submitBt)?.click();
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
function getErrorMessage(rejected) {
|
|
107
|
+
let message = '';
|
|
108
|
+
message = rejected.file.path + ' : ';
|
|
109
|
+
let errors = rejected.errors;
|
|
110
|
+
for (let index = 0; index < errors.length; index++) {
|
|
111
|
+
const error = errors[index];
|
|
112
|
+
message += error.message;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
return message;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
async function handleSubmit() {
|
|
119
|
+
//console.log('SUBMIT');
|
|
120
|
+
|
|
121
|
+
dispatch('submit');
|
|
122
|
+
|
|
123
|
+
let url = submit + '?id=' + id;
|
|
124
|
+
|
|
125
|
+
// //console.log(model);
|
|
126
|
+
// //console.log(url);
|
|
127
|
+
//console.log('SUBMIT');
|
|
128
|
+
|
|
129
|
+
if (files.accepted.length > 0) {
|
|
130
|
+
//console.log(files);
|
|
131
|
+
|
|
132
|
+
const formData = new FormData();
|
|
133
|
+
formData.append('files', '123');
|
|
134
|
+
// Looping over all files and add it to FormData object
|
|
135
|
+
for (var i = 0; i < files.accepted.length; i++) {
|
|
136
|
+
formData.append(files.accepted[i].name, files.accepted[i]);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
const response = await Api.post(url, formData);
|
|
140
|
+
|
|
141
|
+
if (response.status == 200) {
|
|
142
|
+
dispatch('submited');
|
|
143
|
+
|
|
144
|
+
let message = files.accepted.length + ' is/are uploaded';
|
|
145
|
+
dispatch('success', { text: message });
|
|
146
|
+
|
|
147
|
+
files.accepted = [];
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
</script>
|
|
152
|
+
|
|
153
|
+
<form on:submit|preventDefault={handleSubmit}>
|
|
154
|
+
{#if model}
|
|
155
|
+
<!--if model exist -->
|
|
156
|
+
<div>
|
|
157
|
+
<DropZone
|
|
158
|
+
on:drop={handleFilesSelect}
|
|
159
|
+
accept={model.accept}
|
|
160
|
+
multiple={model.multiple}
|
|
161
|
+
{maxSize}
|
|
162
|
+
>
|
|
163
|
+
<b style="font-size:xx-large"><Fa icon={faFileUpload} /></b>
|
|
164
|
+
<span
|
|
165
|
+
><b>Drag 'n' drop some files here, or click to select files</b>
|
|
166
|
+
<b>max file : {model.maxSize} mb</b></span
|
|
167
|
+
>
|
|
168
|
+
<p>
|
|
169
|
+
{#if model.accept}
|
|
170
|
+
{#each model.accept as ext}
|
|
171
|
+
{ext} ,
|
|
172
|
+
{/each}
|
|
173
|
+
{/if}
|
|
174
|
+
</p>
|
|
175
|
+
</DropZone>
|
|
176
|
+
</div>
|
|
177
|
+
|
|
178
|
+
<button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
|
|
179
|
+
{:else}
|
|
180
|
+
<!-- while data is not loaded show a loading information -->
|
|
181
|
+
|
|
182
|
+
<Spinner />
|
|
183
|
+
{/if}
|
|
184
|
+
</form>
|