Improve gl-paginated-list
Using gl-paginated-list I've encountered a few issues that make it unusable in certain scenarios:
Issues
Pagination can't be connected to backend pagination because
- The total of the elements is derived from the list length and not a separate prop
- no event / v-model change is 'executed' when the page change
Filter function fails on integer props
The code assumes that the prop used to filter is a string listItem[this.filter].toLowerCase()
while this is not always the case
The code always executes the filtering even when filterable
is set to false
The header is always there even when empty
When filterable is set to false the header is an empty box, in addition with gitlab style turned on it becomes a grey empty box.
The header is shown even in responsive mode
Proposal
- add a total property
- if total property is present use it, otherwise calculate it from
list.length
- execute filter only when a filter is set and
filterable === true
- enable
.sync
modifier on the page property ( https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier ) - if the header should not be drawn hide it ( this may be swapped to have a prop that controls this, thoughts welcomed! )
- add an empty message slot to use instead of the props ( and maintain the props as well )
- rework the watchers around pageIndex to work with above requirements.
- improve responsive layout