@modeltables/fontawesome-vuetify 4.1.0 → 4.2.1

package/README.md

@@ -54,6 +54,10 @@ The table shows your data and lets you manage it easily. It has built-in `load`
 
 Loading spinner appears while items and pagination changes.
 
+Data items are organized in selections with two main events `itemSelection` and `multiSelection` to easy control your items. 
+
+Using `showFilters` are essential with `rowClick` event when paginationModel mode is on for quick data changes.
+
 CRUD features like add, edit, or delete are ready to use.
 
 License

package/components/dataSets/dataSetItems.ts

@@ -1,4 +1,5 @@
 import { selectedRow, unSelectedRow } from "../helpers/resources";
+import { isEqual } from "../helpers/instances";
 
 export class DataSetItems{
     id: number = 0;
@@ -26,14 +27,27 @@ export const changeMultipleSets = (method: any, item: DataSetItems, dataItems: D
     }
 }
 
-export const changeSet = (dataSetItems: DataSetItems[], multiSelected: boolean) => {
+export const changeSet = (dataSetItems: DataSetItems[], multiSelected: boolean, multiSelectedItems: Object[] = []) => {
+    let next, before;
     for(const value of dataSetItems){
-    if(!multiSelected){
-        value.properties.selected = true;
-        value.properties.rowClass = selectedRow;
-    }else{
-        value.properties.selected = false;
-        value.properties.rowClass = unSelectedRow;
-    }
+        if(!multiSelected){
+            value.properties.selected = false;
+            value.properties.rowClass = unSelectedRow;
+            if(multiSelectedItems.some(element => isEqual(element, value.dataItem))){
+                multiSelectedItems = multiSelectedItems.filter(element => !isEqual(element, value.dataItem));
+                before = value.dataItem;
+                next = multiSelected;
+            }
+        }else{
+            value.properties.selected = true;
+            value.properties.rowClass = selectedRow;
+            if(!multiSelectedItems.some(element => isEqual(element, value.dataItem))){
+                multiSelectedItems = [...multiSelectedItems, value.dataItem];
+                next = value.dataItem;
+                before = multiSelected;
+            }
+        }
     }
+
+    return { selectedItems: multiSelectedItems, beforeItem: before, afterItem: next };
 }

package/components/table/TableView.vue

@@ -164,6 +164,7 @@ export default {
       showFilters: this.showFilters,
       modelValue: ref([]),
       firstChange: true,
+      lastSelectedItem: Object as any,
       multiSelected: false,
       perPage: this.pagination!.PerPage,
       page: this.pagination!.CurrentPage,
@@ -202,11 +203,15 @@ export default {
 
         dataSet.changeMultipleSet = [(item: DataSetItems) => {
           if(this.multiSelectedItems.some(element => isEqual(element, item.dataItem))){
-            item.properties.rowClass = unSelectedRow;
-            item.properties.selected = false;
+            setTimeout(() => {
+              item.properties.rowClass = selectedRow;
+              item.properties.selected = true;
+            }, 100)
           }else{
-            item.properties.rowClass = selectedRow;
-            item.properties.selected = true;
+            setTimeout(() => {
+              item.properties.rowClass = unSelectedRow;
+              item.properties.selected = false;
+            }, 100)
           }
         }];
 
@@ -215,6 +220,8 @@ export default {
             dataSet.properties.rowClass = unSelectedRow;
           }
 
+          this.multiSelectedItems = [];
+          this.multiSelectedItems = [item.dataItem];
           changeActiveSets(dataSet.changeMultipleSet, item);
         }]
         
@@ -227,7 +234,9 @@ export default {
 
       this.dataSetItems = dataSetItems;
       this.dataItems = dataItems;
-
+      if(this.multiSelect){
+        this.changePageActiveSet(event);
+      }
     },
     initHeaders() {
       let dataSetHeaders = [] as DataSetHeader[];
@@ -271,13 +280,12 @@ export default {
         for(let dataSet of this.dataSetItems){
           dataSet.properties.rowClass = unSelectedRow;
         }
-
         changeMultipleSets(item.changeItemSet, item, this.dataSetItems);
-        this.$emit(itemSelection, item.dataItem);
+        this.$emit(itemSelection, {item: item.dataItem, lastItem: this.lastSelectedItem});
+        this.lastSelectedItem = item.dataItem;
       }
 
       if(this.multiSelect){
-        
         if(!this.multiSelectedItems.length){
           this.multiSelectedItems = [item.dataItem];
         }else if(this.multiSelectedItems.some(element => isEqual(element, item.dataItem))){
@@ -287,7 +295,7 @@ export default {
         }
 
         changeActiveSets(item.changeMultipleSet, item);
-        this.$emit(multiSelection, this.multiSelectedItems);
+        this.$emit(multiSelection, { selectedItems: this.multiSelectedItems, beforeItem: item.dataItem, afterItem: item.dataItem });
       }
     },
     filterValue(event: any, dataItem: any){
@@ -342,7 +350,6 @@ export default {
       this.search();
     },
     pageSize(event: any){
-      console.log(event);
       this.perPage = event;
       this.filters.PerPage = this.perPage;
       this.search();
@@ -353,12 +360,34 @@ export default {
       this.filters.SortDirection = window.Number(prop.sort);
       this.search();
     },
+    changePageActiveSet(event: any){
+      if(this.dataSetItems.length && this.multiSelectedItems.length){
+        for(let multiSelectItem of this.multiSelectedItems){
+          let dataSetItem = this.dataSetItems.find((dataSet) => isEqual(dataSet.dataItem, multiSelectItem));
+          if(dataSetItem != undefined){
+            changeActiveSets(dataSetItem.changeMultipleSet, dataSetItem);
+          }
+        }
+        this.changeCheckActiveSet(event);
+      }
+    },
+    changeCheckActiveSet(event: any){
+      for(let dataSetItem of this.dataSetItems){
+        if(this.multiSelectedItems.some(element => isEqual(element, dataSetItem.dataItem))){
+          this.multiSelected = true;
+        }else{
+          this.multiSelected = false;
+        }
+      }
+    },
     selectItem(event){
       console.log(event);
     },
     multiSelectItems(event){
-      changeSet(this.dataSetItems, this.multiSelected);
       this.multiSelected = !this.multiSelected;
+      let result = changeSet(this.dataSetItems, this.multiSelected, this.multiSelectedItems);
+      this.multiSelectedItems = result.selectedItems;
+      this.$emit(multiSelection, result);
     }
   }
 }