You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've been working on adding ember-light-table to my current project and the QA on my team noticed something weird. It seems like it happens sporadically and is hard to reproduce, but we've noticed that depending on how fast you scroll, it increments the page and starts a new request, but never loads the previous requests records. This ends up leaving the table in a state where it thinks it's reached the end, but it's missing records. The weird part is if I try to reproduce this, it doesn't always happen. sometimes the request skips records and other times it doesn't.
This is the code I have based off the examples for my table. The only code I've really changes is moving the query params to a computed property. Has anyone else encountered anything like this before? Am I using the task to fetch records correctly? Any help would be greatly appreciated.
queryParams: computed('include', 'number', 'size', 'sort', 'filter', function() {
let params = {};
let { include, sort, filter, number, size} = this.getProperties('include', 'sort', 'filter', 'number',
'size');
if (include) {
assign(params, { include: include });
}
if (sort) {
assign(params, { sort: sort });
}
if (filter) {
assign(params, { filter: filter });
}
if (number && size) {
assign(params, { page: { number: number, size: size } });
}
return params;
}),
fetchRecords: task(function*() {
let records = yield this.get('store').query(this.get('modelName'), this.get('queryParams'));
this.get('model').pushObjects(records.toArray());
this.set('meta', records.get('meta'));
this.set('canLoadMore', !isEmpty(records));
}).restartable(),
actions: {
onScrolledToBottom() {
if (this.get('canLoadMore')) {
this.incrementProperty('number');
this.get('fetchRecords').perform();
}
},
}
{{#light-table table
height="65vh"
as |t|
}}
{{t.head
onColumnClick=(action "onColumnClick")
iconSortable="fa fa-sort"
iconAscending="fa fa-sort-asc"
iconDescending="fa fa-sort-desc"
fixed=true
}}
{{#t.body
autoHideScrollbar=false
canSelect=false
canExpand=false
onScrolledToBottom=(action "onScrolledToBottom")
as |body|
}}
{{#if isLoading}}
{{#body.loader}}
{{table-loader}}
{{/body.loader}}
{{/if}}
{{/t.body}}
{{#if meta}}
{{#t.foot fixed=true as |columns|}}
<tr>
<td class="align-center" colspan={{columns.length}}>
Displaying {{model.length}} out of {{meta.total-records}} records
</td>
</tr>
{{/t.foot}}
{{/if}}
{{/light-table}}
The text was updated successfully, but these errors were encountered:
I've been working on adding ember-light-table to my current project and the QA on my team noticed something weird. It seems like it happens sporadically and is hard to reproduce, but we've noticed that depending on how fast you scroll, it increments the page and starts a new request, but never loads the previous requests records. This ends up leaving the table in a state where it thinks it's reached the end, but it's missing records. The weird part is if I try to reproduce this, it doesn't always happen. sometimes the request skips records and other times it doesn't.
This is the code I have based off the examples for my table. The only code I've really changes is moving the query params to a computed property. Has anyone else encountered anything like this before? Am I using the task to fetch records correctly? Any help would be greatly appreciated.
The text was updated successfully, but these errors were encountered: