From 05c091589675abf94ce62f0b0cc9b51bdf78e49f Mon Sep 17 00:00:00 2001 From: Alex Hermann Date: Fri, 15 Jun 2018 16:20:42 +0200 Subject: [PATCH 1/2] feat(table): Split computedItems into multiple functions 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. --- src/components/table/table.js | 50 ++++++++++++++++++++++------------- 1 file changed, 31 insertions(+), 19 deletions(-) diff --git a/src/components/table/table.js b/src/components/table/table.js index 57e2383a8b8..69511d9cc0b 100644 --- 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' : '', From 2465b147575b14d4c84378eb1cd3ee78ccccafa3 Mon Sep 17 00:00:00 2001 From: Vitaly Mosin Date: Sat, 16 Jun 2018 16:53:21 +0700 Subject: [PATCH 2/2] Update table.js Refactor `filterItems` method --- src/components/table/table.js | 43 ++++++++++++++++------------------- 1 file changed, 19 insertions(+), 24 deletions(-) diff --git a/src/components/table/table.js b/src/components/table/table.js index 69511d9cc0b..294dfb9303e 100644 --- a/src/components/table/table.js +++ b/src/components/table/table.js @@ -787,7 +787,7 @@ export default { // Array copy for sorting, filtering, etc. items = items.slice() // Apply local filter - items = this.filterItems(items) + this.filteredItems = items = this.filterItems(items) // Apply local sort items = this.sortItems(items) // Apply local pagination @@ -803,28 +803,23 @@ export default { methods: { keys, filterItems (items) { - const filter = this.filter - const localFiltering = this.localFiltering - if (filter && localFiltering) { - if (filter instanceof Function) { - items = items.filter(filter) + if (this.localFiltering && this.filter) { + if (this.filter instanceof Function) { + return items.filter(this.filter) + } + + let regex + if (this.filter instanceof RegExp) { + regex = this.filter } else { - let regex - if (filter instanceof RegExp) { - regex = filter - } else { - regex = new RegExp('.*' + filter + '.*', 'ig') - } - items = items.filter(item => { - const test = regex.test(recToString(item)) - regex.lastIndex = 0 - return test - }) + regex = new RegExp('.*' + this.filter + '.*', 'ig') } - } - if (localFiltering) { - // Make a local copy of filtered items to trigger filtered event - this.filteredItems = items.slice() + + return items.filter(item => { + const test = regex.test(recToString(item)) + regex.lastIndex = 0 + return test + }) } return items }, @@ -834,7 +829,7 @@ export default { const sortCompare = this.sortCompare const localSorting = this.localSorting if (sortBy && localSorting) { - items = stableSort(items, (a, b) => { + return stableSort(items, (a, b) => { let ret = null if (typeof sortCompare === 'function') { // Call user provided sortCompare routine @@ -855,9 +850,9 @@ export default { const perPage = this.perPage const localPaging = this.localPaging // Apply local pagination - if (Boolean(perPage) && localPaging) { + if (!!perPage && localPaging) { // Grab the current page of data (which may be past filtered items) - items = items.slice((currentPage - 1) * perPage, currentPage * perPage) + return items.slice((currentPage - 1) * perPage, currentPage * perPage) } return items },