@modeltables/fontawesome-vuetify 2.0.0 → 2.2.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/dataSets/dataSetItems.ts +35 -3
- package/components/helpers/instances.ts +1 -1
- package/components/helpers/resources.ts +1 -0
- package/components/table/TableView.vue +40 -26
- package/dist/index.amd.ts +15 -15
- package/dist/index.esm.ts +2282 -2260
- package/package.json +1 -1
|
@@ -1,7 +1,39 @@
|
|
|
1
|
-
|
|
1
|
+
import { selectedRow, unSelectedRow } from "../helpers/resources";
|
|
2
|
+
|
|
3
|
+
export class DataSetItems{
|
|
2
4
|
id: number = 0;
|
|
3
5
|
startPosition: boolean = false;
|
|
4
|
-
selected: boolean = false;
|
|
5
|
-
rowClass: string = '';
|
|
6
6
|
dataItem: Object = Object.assign({});
|
|
7
|
+
changeMultipleSet: ((item: DataSetItems) => void)[] = [];
|
|
8
|
+
changeItemSet: ((item: DataSetItems, dataItems: DataSetItems[]) => void)[] = [];
|
|
9
|
+
properties: DataSetItemProps = new DataSetItemProps();
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export class DataSetItemProps{
|
|
13
|
+
rowClass: string = unSelectedRow;
|
|
14
|
+
selected: boolean = false;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const changeActiveSets = (method: any, item: DataSetItems) => {
|
|
18
|
+
for(let state of method){
|
|
19
|
+
state(item);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const changeMultipleSets = (method: any, item: DataSetItems, dataItems: DataSetItems[] = []) => {
|
|
24
|
+
for(let state of method){
|
|
25
|
+
state(item, dataItems);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export const changeSet = (dataSetItems: DataSetItems[], multiSelected: boolean) => {
|
|
30
|
+
for(const value of dataSetItems){
|
|
31
|
+
if(!multiSelected){
|
|
32
|
+
value.properties.selected = true;
|
|
33
|
+
value.properties.rowClass = selectedRow;
|
|
34
|
+
}else{
|
|
35
|
+
value.properties.selected = false;
|
|
36
|
+
value.properties.rowClass = unSelectedRow;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
7
39
|
}
|
|
@@ -5,5 +5,6 @@ export const search = 'search';
|
|
|
5
5
|
export const itemSelection = 'itemSelection';
|
|
6
6
|
export const multiSelection = 'multiSelection';
|
|
7
7
|
export const selectedRow = 'selected-row';
|
|
8
|
+
export const unSelectedRow = 'unselected-row';
|
|
8
9
|
export const rowClass = 'row-class';
|
|
9
10
|
export const Id = 'Id';
|
|
@@ -5,7 +5,7 @@ import { faRefresh, faSearch, faIndent, faCheck } from '@fortawesome/free-solid-
|
|
|
5
5
|
import { faSquare } from '@fortawesome/free-regular-svg-icons';
|
|
6
6
|
import { HeaderModel, Options } from '@/components/models/tablemodels';
|
|
7
7
|
import { PaginatonModel } from '@/components/models/tablemodels';
|
|
8
|
-
import { change, itemSelection, load, multiSelection, rowClass, rowClick, search, selectedRow } from '@/components/helpers/resources';
|
|
8
|
+
import { change, itemSelection, load, multiSelection, rowClass, rowClick, search, selectedRow, unSelectedRow } from '@/components/helpers/resources';
|
|
9
9
|
import Date from '@/components/headerFilters/Date.vue';
|
|
10
10
|
import Search from '@/components/search/SearchView.vue';
|
|
11
11
|
import Text from '@/components/headerFilters/Text.vue';
|
|
@@ -16,7 +16,7 @@ import PaginationView from '@/components/pagination/PaginationView.vue';
|
|
|
16
16
|
import DataItem from '@/components/table/data/ItemView.vue';
|
|
17
17
|
import { isEqual } from '../helpers/instances';
|
|
18
18
|
import { DataSetHeader } from '../dataSets/dataSetHeader';
|
|
19
|
-
import { DataSetItems } from '../dataSets/dataSetItems';
|
|
19
|
+
import { changeActiveSets, changeMultipleSets, changeSet, DataSetItems } from '../dataSets/dataSetItems';
|
|
20
20
|
|
|
21
21
|
export default {
|
|
22
22
|
props: {
|
|
@@ -154,6 +154,7 @@ export default {
|
|
|
154
154
|
faIndent: faIndent,
|
|
155
155
|
faCheck: faCheck,
|
|
156
156
|
faSquare: faSquare,
|
|
157
|
+
multiSelectedItems: [] as Object[],
|
|
157
158
|
lastItem: {},
|
|
158
159
|
completes: this.completes,
|
|
159
160
|
filters: { CurrentPage: 1, PerPage: 10, SortColumn: '', SortDirection: 1 } as any,
|
|
@@ -166,7 +167,10 @@ export default {
|
|
|
166
167
|
pageCount: this.pagination!.PageCount,
|
|
167
168
|
totalCount:this.pagination!.TotalCount,
|
|
168
169
|
showTime: this.showTime,
|
|
169
|
-
isEqual: isEqual
|
|
170
|
+
isEqual: isEqual,
|
|
171
|
+
changeMultipleSets: changeMultipleSets,
|
|
172
|
+
changeActiveSets: changeActiveSets,
|
|
173
|
+
changeSet: changeSet
|
|
170
174
|
};
|
|
171
175
|
},
|
|
172
176
|
methods: {
|
|
@@ -191,9 +195,25 @@ export default {
|
|
|
191
195
|
for(let [index, item] of dataItems.entries()){
|
|
192
196
|
let dataSet = new DataSetItems();
|
|
193
197
|
dataSet.id = index + 1;
|
|
194
|
-
dataSet.
|
|
195
|
-
|
|
196
|
-
dataSet.
|
|
198
|
+
dataSet.dataItem = item;
|
|
199
|
+
|
|
200
|
+
dataSet.changeMultipleSet = [(item: DataSetItems) => {
|
|
201
|
+
if(this.multiSelectedItems.some(element => isEqual(element, item.dataItem))){
|
|
202
|
+
item.properties.rowClass = unSelectedRow;
|
|
203
|
+
item.properties.selected = false;
|
|
204
|
+
}else{
|
|
205
|
+
item.properties.rowClass = selectedRow;
|
|
206
|
+
item.properties.selected = true;
|
|
207
|
+
}
|
|
208
|
+
}];
|
|
209
|
+
|
|
210
|
+
dataSet.changeItemSet = [(item: DataSetItems, dataItems: DataSetItems[]) => {
|
|
211
|
+
for(let dataSet of dataItems){
|
|
212
|
+
dataSet.properties.rowClass = unSelectedRow;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
changeActiveSets(dataSet.changeMultipleSet, item);
|
|
216
|
+
}]
|
|
197
217
|
|
|
198
218
|
if(dataSet.id == 1){
|
|
199
219
|
dataSet.startPosition = true;
|
|
@@ -246,23 +266,25 @@ export default {
|
|
|
246
266
|
|
|
247
267
|
if(this.select){
|
|
248
268
|
for(let dataSet of this.dataSetItems){
|
|
249
|
-
dataSet.rowClass =
|
|
269
|
+
dataSet.properties.rowClass = unSelectedRow;
|
|
250
270
|
}
|
|
251
271
|
|
|
252
|
-
item.
|
|
272
|
+
changeMultipleSets(item.changeItemSet, item, this.dataSetItems);
|
|
253
273
|
this.$emit(itemSelection, item.dataItem);
|
|
254
274
|
}
|
|
255
275
|
|
|
256
276
|
if(this.multiSelect){
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
277
|
+
|
|
278
|
+
if(!this.multiSelectedItems.length){
|
|
279
|
+
this.multiSelectedItems = [item.dataItem];
|
|
280
|
+
}else if(this.multiSelectedItems.some(element => isEqual(element, item.dataItem))){
|
|
281
|
+
this.multiSelectedItems = this.multiSelectedItems.filter(element => !isEqual(element, item.dataItem));
|
|
261
282
|
}else{
|
|
262
|
-
|
|
283
|
+
this.multiSelectedItems = [...this.multiSelectedItems, item.dataItem]
|
|
263
284
|
}
|
|
264
285
|
|
|
265
|
-
|
|
286
|
+
changeActiveSets(item.changeMultipleSet, item);
|
|
287
|
+
this.$emit(multiSelection, this.multiSelectedItems);
|
|
266
288
|
}
|
|
267
289
|
},
|
|
268
290
|
filterValue(event: any, dataItem: any){
|
|
@@ -332,15 +354,7 @@ export default {
|
|
|
332
354
|
console.log(event);
|
|
333
355
|
},
|
|
334
356
|
multiSelectItems(event){
|
|
335
|
-
|
|
336
|
-
if(!this.multiSelected){
|
|
337
|
-
value.selected = true;
|
|
338
|
-
value.rowClass = selectedRow;
|
|
339
|
-
}else{
|
|
340
|
-
value.selected = false;
|
|
341
|
-
value.rowClass = '';
|
|
342
|
-
}
|
|
343
|
-
}
|
|
357
|
+
changeSet(this.dataSetItems, this.multiSelected);
|
|
344
358
|
this.multiSelected = !this.multiSelected;
|
|
345
359
|
}
|
|
346
360
|
}
|
|
@@ -406,9 +420,9 @@ export default {
|
|
|
406
420
|
</Filters>
|
|
407
421
|
</td>
|
|
408
422
|
</tr>
|
|
409
|
-
<tr @click="updateItem(dataSet, dataSet.id!)" :class="dataSet.rowClass">
|
|
410
|
-
<td v-if="multiSelect"
|
|
411
|
-
<FontAwesomeIcon v-if="dataSet.selected" :icon="faCheck"></FontAwesomeIcon>
|
|
423
|
+
<tr @click="updateItem(dataSet, dataSet.id!)" v-bind="dataSet.properties" :class="dataSet.properties.rowClass">
|
|
424
|
+
<td v-if="multiSelect">
|
|
425
|
+
<FontAwesomeIcon v-if="dataSet.properties.selected" :icon="faCheck"></FontAwesomeIcon>
|
|
412
426
|
<FontAwesomeIcon v-else :icon="faSquare"></FontAwesomeIcon>
|
|
413
427
|
</td>
|
|
414
428
|
<td v-for="(prop) in Object.keys(dataSet.dataItem)">
|