New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(table): Emit event when local filtering changes number of result items - issue #650 #652

Merged
merged 12 commits into from Jul 6, 2017

Conversation

Projects
None yet
3 participants
@tmorehouse
Member

tmorehouse commented Jul 6, 2017

Addresses issue #650

When local filtering causes the number of pages to change, emits a repaginate event with a single argument of the total number of records after filtering (and before pagination slices the data).

Can be used to re-set an associated <b-pagination> so that it adjusts to the new number of pages.

This PR includes documentation of the new event in meta.json, and updates live example in docs

@mosinve

This comment has been minimized.

Member

mosinve commented on lib/components/table.vue in ef2c33b Jul 6, 2017

perPage - is external prop.
CurrentPage - isn't needed by pagination, it generated by pagination.
only needed info from table is total items after filtering (prop - NumItems)

This comment has been minimized.

Member

tmorehouse replied Jul 6, 2017

Yeah, re-tweaking this abit.

tmorehouse added some commits Jul 6, 2017

feat(table): change paginated event to repaginate
Only emitted if local filtering changes number of pages

@tmorehouse tmorehouse requested review from pi0, alexsasharegan and mosinve Jul 6, 2017

@tmorehouse tmorehouse added this to the v0.19.0 milestone Jul 6, 2017

items = items.slice((currentPage - 1) * perPage, currentPage * perPage);
}
// Update the value model with the filtered/sorted/paginated data set
this.$emit('input', items);
if (numOriginalPages !== numFilteredPages) {

This comment has been minimized.

@mosinve

mosinve Jul 6, 2017

Member

Maybe move this to watcher?
some as

    numFilteredItems(newVal, oldVal) {
        if (newVal !== oldVal)
            this.$emit('repaginate', newVal);
    }

This comment has been minimized.

@tmorehouse

tmorehouse Jul 6, 2017

Member

Hmmm that might be an idea, but I would have to make a few more data props to keep state while it is calculating it, since the only pace these values are available is in the _items computed prop.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 6, 2017

I could also add an event that emits the actual filtered item list (maybe a filtered event, which has one argument which is a copy of the complete filtered items list). The event would be emitted just after local pagination is computed, and before sorting and pagination slicing occurs

@mosinve

This comment has been minimized.

Member

mosinve commented Jul 6, 2017

thats exactly how i made it :)
But do we really need it, if we'll have a total number emitted for pagination?

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 6, 2017

Yeah, it might just be a niche case. There was one issue that was asking how to get the filtered data from table. Easiest way (currently) to to set page size to null or 0 and then read the v-model value.

@mosinve

This comment has been minimized.

Member

mosinve commented Jul 6, 2017

Then in order to not generate much events, make table emit 'filtered' event with filtered items, and use it to set pagination (items.length)?

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 6, 2017

Hmmm... That might kill 2 bids with one stone.

I was just thinking of a way to minimize the number of times events are fired. By checking if the page count has changed, then if items went from 14 to 13 (with page size of 5,), then the event wouldn't fire, because the page count hasn't changed, rather than emitting every time _items is called..

But, it might just be simpler to set pagination with the "true" filter items length every time.

I'll tweak this tomorrow morning,.

@mosinve

This comment has been minimized.

Member

mosinve commented Jul 6, 2017

Offtopic:
And is there support of server-side generated pagination info, like from Laravel for example?

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 6, 2017

Yep, there is support for server side pagination built into b-table now,

If you are using item provider function you still need to provide pagination props to b-table to trigger a refresh of the items provider function.

But if you provide an reference to an array to items (not a function), then no need to tie pagination props to b-table, as updating the array will trigger b-table to redraw. You would just need to control the pagination element from your parent component or app.

@tmorehouse tmorehouse changed the title from feat(table): Emit event when local filtering changes number of result pages - issue #650 to feat(table): Emit event when local filtering changes number of result pages - issue #650 [WIP} Jul 6, 2017

@tmorehouse tmorehouse changed the title from feat(table): Emit event when local filtering changes number of result pages - issue #650 [WIP} to feat(table): Emit event when local filtering changes number of result pages - issue #650 [WIP] Jul 6, 2017

@tmorehouse tmorehouse changed the title from feat(table): Emit event when local filtering changes number of result pages - issue #650 [WIP] to [WIP] feat(table): Emit event when local filtering changes number of result pages - issue #650 Jul 6, 2017

tmorehouse added some commits Jul 6, 2017

feat(table): Changed paginated event to filtered
replaced paginated event with filtered event. Emits only when local filtering results in a change in number of items.  Supplies one arg to the event which is the list of filtered items.
feat(table): documentation update
Documented filtering and sorting, as well as the filtered event

@tmorehouse tmorehouse changed the title from [WIP] feat(table): Emit event when local filtering changes number of result pages - issue #650 to feat(table): Emit event when local filtering changes number of result items - issue #650 Jul 6, 2017

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 6, 2017

@mosinve @pi0 @alexsasharegan

Take a look at these changes/additions when you get the chance

items = items.slice();
// Apply local filter
if (filter && !this.providerFiltering) {
// Number of Items before filtering
let numOriginalItems = items.length;

This comment has been minimized.

@alexsasharegan

alexsasharegan Jul 6, 2017

Contributor

Any reason why this isn't a const declaration?

This comment has been minimized.

@tmorehouse

tmorehouse Jul 6, 2017

Member

Ah, a leftover when I was overwriting the value in a previous commit. I'll fix.

if (numOriginalItems !== items.length) {
// Emit a filtered notification event, as number of items has changed
this.$emit('filtered', items);
}

This comment has been minimized.

@alexsasharegan

alexsasharegan Jul 6, 2017

Contributor

This seems nice! Only emit when there's a difference.

This comment has been minimized.

@tmorehouse

tmorehouse Jul 6, 2017

Member

i kinda wish it was possible to do multiple v-models on a component

@tmorehouse tmorehouse merged commit 1b2a36a into master Jul 6, 2017

1 check passed

ci/circleci Your tests passed on CircleCI!
Details

@tmorehouse tmorehouse deleted the table-event-paginated branch Jul 6, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment