fix(table): fix filtered event, fix emptyFilter message w/filter function, fix reactivity of filter sub routines (Fixes #1989,#1517) #2149

tmorehouse · 2018-11-07T03:51:15Z

Description of PR:

Adds additional checks to see if the filtered rows have actually changed.

Also prevents the filtered event from firing on the initial render of the table.

Previously, b-table was only looking at changes in length of the filtered rows. The new added checks (looseEqual check and filter prop check) help ensure proper reactivity and proper displaying of the empty-filtered-text with user supplied filter functions

Fixes #1989
Fixes #1517

Undoes #1893 which broke efficient reactivity for filtering, sorting and paging (it was using non-reactive methods when computedProps should have been used for efficient caching)

Fixes ARIA issue introduced by PR #1587

PR checklist:

What kind of change does this PR introduce? (check at least one)

Does this PR introduce a breaking change? (check one)

Yes
No

For filtering using an external filter function, users should use the filter-function instead of setting filter to a function.

The external filter function (if provided) will also receive a copy of the filter prop as the second argument (the first argument remains the same, which is the record being inspected).

it is still possible to set filtered to a filter function (as long as filter-function is left null), but it is discouraged (deprecated), as it was not overly reactive to changes (i.e. requiring a forced refresh of the table to apply the changes, or passing a new function ref to filter.

The new way allows the user to pass a string, object or array to filter to perform more complex filtering, and allows the filter function to be reactive to changes in the filter prop.

The PR fulfills these requirements:

It's submitted to the dev branch, not the master branch
When resolving a specific issue, it's referenced in the PR's title (e.g. fixes #xxxx[,#xxxx], where "xxxx" is the issue number)

If new features/enhancement/fixes are added or changed:

Includes documentation updates
New/updated tests are included and passing (if required)
Existing test suites are passing
The changes have not impacted the functionality of other components or directives
ARIA Accessibility has been taken into consideration (does it affect screen reader users or keyboard only users?)

If adding a new feature, or changing the functionality of an existing feature, the PR's description includes:

A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

PR titles should following the Conventional Commits naming convention

#1989

codecov · 2018-11-07T03:53:59Z

Codecov Report

Merging #2149 into dev will increase coverage by 0.35%.
The diff coverage is 83.01%.

@@            Coverage Diff            @@
##              dev   #2149      +/-   ##
=========================================
+ Coverage   65.04%   65.4%   +0.35%     
=========================================
  Files         159     159              
  Lines        2958    3000      +42     
  Branches      812     834      +22     
=========================================
+ Hits         1924    1962      +38     
- Misses        748     751       +3     
- Partials      286     287       +1

Impacted Files	Coverage Δ
src/components/table/table.js	`75.84% <83.01%> (+1.5%)`	⬆️
src/utils/loose-equal.js	`85.71% <0%> (+4.76%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5e5c5c9...97b9ade. Read the comment docs.

filtered event check moved to the filteredItems() method. Filtered event is now emitted after the table has updated (via $nextTick). Improves run-time memory footprint by not maintaining a separate copy of the filtered data.

Handles case where filter is a function and `empty` message instead of `emptyFiltered` message was showing when filtered items was 0 length array.

Trying to fix a race condition with pagination when filtered

… more reactive

tmorehouse · 2018-11-10T10:17:21Z

Just needs a few documentation tweaks before merge

tmorehouse · 2018-11-10T10:37:13Z

filtering, sorting and pagination are now fully reactive via computed props, fixing what was broken via #1893 (using methods when computedProps should have been used)

To prevent undefined values from creeping in

When the fields's label was set to a blank string, this left non-sighted users at a disadvantage as to what the column is about. This adds the field's key (humanized) to the `aria-label` to provides hint to non-sighted users. Alternatively if a field title is provided, then the aria-label is not altered. Addresses ARIA issues introduced by PR #1587

tmorehouse · 2018-11-10T21:19:10Z

Additional separate PRs will be created for adding:

provider function update debouncing
filtering and sorting based on formatted values and scopedSlots (converting them to plain text), and only on columns in the fields definition
Tri-state column sorting (i.e. asc => desc => none => acs => etc)

tmorehouse added 2 commits November 6, 2018 23:46

fix(table): Only emit filtered event if filtered rows has changed. Fixes

bd10af8

#1989

lint

2fd01fd

tmorehouse added 2 commits November 7, 2018 01:01

Move filtered check and emit into the filterItems() method

be38c7a

filtered event check moved to the filteredItems() method. Filtered event is now emitted after the table has updated (via $nextTick). Improves run-time memory footprint by not maintaining a separate copy of the filtered data.

Add fix for issue #1517

f4af8d0

Handles case where filter is a function and `empty` message instead of `emptyFiltered` message was showing when filtered items was 0 length array.

tmorehouse changed the title ~~fix(table): Only emit filtered event if filtered rows has changed. Fixes #1989~~ fix(table): filtered event fixes and fix emptyFilter message with filter function (Fixes #1989,#1517) Nov 7, 2018

tmorehouse added 2 commits November 7, 2018 03:37

Update table.js

3776b21

Update table.js

c787688

tmorehouse added Status: WIP Priority: Medium Type: Fix Version: 2.x labels Nov 7, 2018

tmorehouse changed the title ~~fix(table): filtered event fixes and fix emptyFilter message with filter function (Fixes #1989,#1517)~~ [WIP] fix(table): filtered event fixes and fix emptyFilter message with filter function (Fixes #1989,#1517) Nov 7, 2018

tmorehouse added 17 commits November 7, 2018 05:05

Update table.js

042796f

Update table.js

54f82d0

Update table.spec.js

0012baa

Update table.js

c427ab1

Update table.spec.js

4eaf9fd

Update table.js

bb8c724

create computedFilter to generate filter function

65a2aa9

lint

e5d5842

lint

fd96541

lint

ef15a87

lint

8e53cff

Update table.js

e0dd09e

Update table.js

62376ab

make currentPage prop syncable

a444cc4

Trying to fix a race condition with pagination when filtered

Update table.js

fe32229

some code re-writes to prevent race conditions and make computedItems…

85630ee

… more reactive

next tick needed to prevent test failure on vue.beta

05ac9f7

tmorehouse added 11 commits November 10, 2018 01:33

Update table.js

66144fe

add a few temp test statements for debugging

b8c4639

more debugging

4f7791c

debugging tests

1d569e9

more debugging

c4d745a

Update table.js

9ea42ba

Update table.js

2ca4b40

Update table.js

19702ed

Update table.js

fdf53ec

update isFiltered determination

83248e1

lint

45360a9

This was referenced Nov 10, 2018

feat(table): Split computedItems into multiple functions #1893

Merged

fix(table): Fix Table aria-rowcount #1836

Merged

feat (table): Updated table component to support sorting on nested object properties. #1868

Merged

tmorehouse added 5 commits November 10, 2018 07:06

set fallback default parameter for lodash.get calls

55197f5

To prevent undefined values from creeping in

minor code updates

a1a0839

lint

82fd037

Update documentation

97b9ade

tmorehouse requested review from mosinve and pi0 November 10, 2018 21:12

tmorehouse changed the title ~~[WIP] fix(table): filtered event fixes and fix emptyFilter message with filter function (Fixes #1989,#1517)~~ [WIP] fix(table): fix filtered event, fix emptyFilter message w/filter function, fix reactivity of filter sub routines (Fixes #1989,#1517) Nov 11, 2018

tmorehouse removed the Status: WIP label Nov 11, 2018

tmorehouse merged commit e0e1eee into dev Nov 11, 2018

tmorehouse mentioned this pull request Nov 14, 2018

Bootstrap-Vue V2.0.0-rc.12 Tracker #2173

Closed

89 tasks

tmorehouse deleted the tmorehouse/table-filtered branch November 17, 2018 03:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(table): fix filtered event, fix emptyFilter message w/filter function, fix reactivity of filter sub routines (Fixes #1989,#1517) #2149

fix(table): fix filtered event, fix emptyFilter message w/filter function, fix reactivity of filter sub routines (Fixes #1989,#1517) #2149

Uh oh!

tmorehouse commented Nov 7, 2018 •

edited

Loading

Uh oh!

codecov bot commented Nov 7, 2018 •

edited

Loading

Uh oh!

tmorehouse commented Nov 10, 2018

Uh oh!

tmorehouse commented Nov 10, 2018

Uh oh!

tmorehouse commented Nov 10, 2018

Uh oh!

Uh oh!

Uh oh!

fix(table): fix filtered event, fix emptyFilter message w/filter function, fix reactivity of filter sub routines (Fixes #1989,#1517) #2149

fix(table): fix filtered event, fix emptyFilter message w/filter function, fix reactivity of filter sub routines (Fixes #1989,#1517) #2149

Uh oh!

Conversation

tmorehouse commented Nov 7, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description of PR:

PR checklist:

Uh oh!

codecov bot commented Nov 7, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

tmorehouse commented Nov 10, 2018

Uh oh!

tmorehouse commented Nov 10, 2018

Uh oh!

tmorehouse commented Nov 10, 2018

Uh oh!

Uh oh!

tmorehouse commented Nov 7, 2018 •

edited

Loading

codecov bot commented Nov 7, 2018 •

edited

Loading