feat(table): Split computedItems into multiple functions

gaaf · gaaf · commit 05c091589675 · 2018-06-15T16:59:52.000+02:00
Don't do all the processing in one function so external users (parent) can
grab the items at various stages without having to reproduce all the
filtering/sorting/pagination logic.

For example a parent may want to have access to the filtered and sorted,
but not yet paginated set of items. With the split functions it can now
do something like this:
    const table = this.$refs.the-table
    let items = table.hasProvider ? table.localItems : table.items
    items = table.sortItems(table.filterItems(items))

This patch incorporates no functional changes.
diff --git a/src/components/table/table.js b/src/components/table/table.js
@@ -779,16 +779,6 @@ export default {
       })
     },
     computedItems () {
-      // Grab some props/data to ensure reactivity
-      const perPage = this.perPage
-      const currentPage = this.currentPage
-      const filter = this.filter
-      const sortBy = this.localSortBy
-      const sortDesc = this.localSortDesc
-      const sortCompare = this.sortCompare
-      const localFiltering = this.localFiltering
-      const localSorting = this.localSorting
-      const localPaging = this.localPaging
       let items = this.hasProvider ? this.localItems : this.items
       if (!items) {
         this.$nextTick(this._providerUpdate)
@@ -797,6 +787,24 @@ export default {
       // Array copy for sorting, filtering, etc.
       items = items.slice()
       // Apply local filter
+      items = this.filterItems(items)
+      // Apply local sort
+      items = this.sortItems(items)
+      // Apply local pagination
+      items = this.paginateItems(items)
+      // Update the value model with the filtered/sorted/paginated data set
+      this.$emit('input', items)
+      return items
+    },
+    computedBusy () {
+      return this.busy || this.localBusy
+    }
+  },
+  methods: {
+    keys,
+    filterItems (items) {
+      const filter = this.filter
+      const localFiltering = this.localFiltering
       if (filter && localFiltering) {
         if (filter instanceof Function) {
           items = items.filter(filter)
@@ -818,7 +826,13 @@ export default {
         // Make a local copy of filtered items to trigger filtered event
         this.filteredItems = items.slice()
       }
-      // Apply local Sort
+      return items
+    },
+    sortItems (items) {
+      const sortBy = this.localSortBy
+      const sortDesc = this.localSortDesc
+      const sortCompare = this.sortCompare
+      const localSorting = this.localSorting
       if (sortBy && localSorting) {
         items = stableSort(items, (a, b) => {
           let ret = null
@@ -834,21 +848,19 @@ export default {
           return (ret || 0) * (sortDesc ? -1 : 1)
         })
       }
+      return items
+    },
+    paginateItems (items) {
+      const currentPage = this.currentPage
+      const perPage = this.perPage
+      const localPaging = this.localPaging
       // Apply local pagination
       if (Boolean(perPage) && localPaging) {
         // Grab the current page of data (which may be past filtered items)
         items = items.slice((currentPage - 1) * perPage, currentPage * perPage)
       }
-      // Update the value model with the filtered/sorted/paginated data set
-      this.$emit('input', items)
       return items
     },
-    computedBusy () {
-      return this.busy || this.localBusy
-    }
-  },
-  methods: {
-    keys,
     fieldClasses (field) {
       return [
         field.sortable ? 'sorting' : '',
