fixes #445 - fix inefficiencies for initial filters

xaksis · Oct 29, 2018 · fb8b109 · fb8b109
1 parent 48d67ec
commit fb8b109
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/dev/App.vue b/dev/App.vue
@@ -9,7 +9,6 @@
     <vue-good-table
       ref="my-table"
       @on-column-filter="onColumnFilter"
-      @on-row-dblclick="onColumnFilter"
       @on-select-all="onSelectAll"
       @on-sort-change="onSortChange"
       @on-page-change="onPageChange"
@@ -18,8 +17,6 @@
       :columns="columns"
       :rows="rows"
       theme="black-rhino"
-      :fixed-header="true"
-      max-height="200px"
       :pagination-options="{
         mode: 'pages',
         perPage: 3,
@@ -62,6 +59,7 @@ export default {
             enabled: true,
             placeholder: 'All',
             filterDropdownItems: ['Chris', 'Dan', 'Susan'],
+            filterValue: 'Chris',
           },
         },
         {
@@ -70,6 +68,7 @@ export default {
           type: 'number',
           filterOptions: {
             enabled: true,
+            filterValue: 20,
           },
         },
         {

diff --git a/src/components/VgtFilterRow.vue b/src/components/VgtFilterRow.vue
@@ -47,6 +47,8 @@
 </template>
 
 <script>
+import isEqual from 'lodash.isequal';
+
 export default {
   name: 'VgtFilterRow',
   props: [
@@ -59,10 +61,13 @@ export default {
   ],
   watch: {
     columns: {
-      handler() {
-        this.populateInitialFilters();
+      handler(newValue, oldValue) {
+        if (!isEqual(newValue, oldValue)) {
+          this.populateInitialFilters();
+        }
       },
       deep: true,
+      immediate: true,
     },
   },
   data() {
@@ -155,15 +160,16 @@ export default {
         if (this.isFilterable(col)
           && typeof col.filterOptions.filterValue !== 'undefined'
           && col.filterOptions.filterValue !== null) {
-          this.updateFiltersImmediately(col, col.filterOptions.filterValue);
+          this.$set(this.columnFilters, col.field, col.filterOptions.filterValue);
+          // this.updateFilters(col, col.filterOptions.filterValue);
           this.$set(col.filterOptions, 'filterValue', undefined);
         }
       }
+      //* lets emit event once all filters are set
+      this.$emit('filter-changed', this.columnFilters);
     },
   },
   mounted() {
-    // take care of initial filters
-    this.populateInitialFilters();
   },
 };
 </script>