Fix bug with sorting applied to other colums having using function fi…

…elds. (#803) * Changed dev/App.vue to highlight the issue. Co-authored-by: xaksis <[email protected]>
xaksis · Feb 17, 2021 · 119255f · 119255f
1 parent 6853016
commit 119255f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 12 deletions.
diff --git a/dev/App.vue b/dev/App.vue
@@ -117,7 +117,7 @@ export default {
         },
         {
           label: 'Valid',
-          field: 'bool',
+          field: this.fieldValid,
           type: 'boolean',
           filterOptions: {
             enabled: true,
@@ -129,7 +129,7 @@ export default {
         },
         {
           label: 'Exact',
-          field: 'exact',
+          field: this.fieldExact,
           filterOptions: {
             enabled: true,
             filterDropdownItems: [
@@ -234,6 +234,12 @@ export default {
     };
   },
   methods: {
+    fieldValid(row) {
+      return row.bool;
+    },
+    fieldExact(row) {
+      return row.exact;
+    },
     changePage() {
       this.currentPage += 1;
       this.$set(this.paginationOptions, 'setCurrentPage', this.currentPage);

diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -1217,7 +1217,7 @@ export default {
     },
 
     // field can be:
-    // 1. function
+    // 1. function (passed as a string using function.name. For example: 'bound myFunction')
     // 2. regular property - ex: 'prop'
     // 3. nested property path - ex: 'nested.prop'
     collect(obj, field) {
@@ -1344,9 +1344,13 @@ export default {
           return;
         }
 
+        const fieldKey = (field) => {
+          return typeof(field) === 'function' ? field.name : field;
+        }
+
         for (let i = 0; i < this.typedColumns.length; i++) {
           const col = this.typedColumns[i];
-          if (this.columnFilters[col.field]) {
+          if (this.columnFilters[fieldKey(col.field)]) {
             computedRows = each(computedRows, (headerRow) => {
               const newChildren = headerRow.children.filter((row) => {
                 // If column has a custom filter, use that.
@@ -1356,15 +1360,15 @@ export default {
                 ) {
                   return col.filterOptions.filterFn(
                     this.collect(row, col.field),
-                    this.columnFilters[col.field]
+                    this.columnFilters[fieldKey(col.field)]
                   );
                 }
 
                 // Otherwise Use default filters
                 const { typeDef } = col;
                 return typeDef.filterPredicate(
                   this.collect(row, col.field),
-                  this.columnFilters[col.field],
+                  this.columnFilters[fieldKey(col.field)],
                   false,
                   col.filterOptions &&
                     typeof col.filterOptions.filterDropdownItems === 'object'

diff --git a/src/components/VgtFilterRow.vue b/src/components/VgtFilterRow.vue
@@ -21,15 +21,15 @@
           type="text"
           class="vgt-input"
           :placeholder="getPlaceholder(column)"
-          :value="columnFilters[column.field]"
+          :value="columnFilters[fieldKey(column.field)]"
           @keyup.enter="updateFiltersOnEnter(column, $event.target.value)"
           @input="updateFiltersOnKeyup(column, $event.target.value)" />
 
         <!-- options are a list of primitives -->
         <select v-if="isDropdownArray(column)"
           :name="getName(column)"
           class="vgt-select"
-          :value="columnFilters[column.field]"
+          :value="columnFilters[fieldKey(column.field)]"
           @change="updateFiltersImmediately(column.field, $event.target.value)">
             <option value="" key="-1">{{ getPlaceholder(column) }}</option>
             <option
@@ -44,7 +44,7 @@
         <select v-if="isDropdownObjects(column)"
           :name="getName(column)"
           class="vgt-select"
-          :value="columnFilters[column.field]"
+          :value="columnFilters[fieldKey(column.field)]"
           @change="updateFiltersImmediately(column.field, $event.target.value)">
           <option value="" key="-1">{{ getPlaceholder(column) }}</option>
           <option
@@ -88,6 +88,7 @@ export default {
     };
   },
   computed: {
+
     // to create a filter row, we need to
     // make sure that there is atleast 1 column
     // that requires filtering
@@ -104,6 +105,14 @@ export default {
     },
   },
   methods: {
+
+    fieldKey(column) {
+      if (typeof(column) === 'function') {
+        return column.name;
+      }
+      return column;
+    },
+
     reset(emitEvent = false) {
       this.columnFilters = {};
 
@@ -145,7 +154,7 @@ export default {
     },
 
     getName(column) {
-      return `vgt-${column.field}`;
+      return `vgt-${this.fieldKey(column.field)}`;
     },
 
     updateFiltersOnEnter(column, value) {
@@ -177,7 +186,7 @@ export default {
     },
 
     updateFiltersImmediately(field, value) {
-      this.$set(this.columnFilters, field, value);
+      this.$set(this.columnFilters, this.fieldKey(field), value);
       this.$emit('filter-changed', this.columnFilters);
     },
 
@@ -189,7 +198,7 @@ export default {
         if (this.isFilterable(col)
           && typeof col.filterOptions.filterValue !== 'undefined'
           && col.filterOptions.filterValue !== null) {
-          this.$set(this.columnFilters, col.field, col.filterOptions.filterValue);
+          this.$set(this.columnFilters, this.fieldKey(col.field), col.filterOptions.filterValue);
           // this.updateFilters(col, col.filterOptions.filterValue);
           // this.$set(col.filterOptions, 'filterValue', undefined);
         }