[MGNLRESTUI-17] Investigate support lazy pagination in UI Created: 12/Dec/19 Updated: 20/Apr/20 Resolved: 14/Apr/20 |
|
| Status: | Closed |
| Project: | Magnolia REST Client UI |
| Component/s: | None |
| Affects Version/s: | None |
| Fix Version/s: | None |
| Type: | Improvement | Priority: | Neutral |
| Reporter: | Jorge Franco | Assignee: | Jorge Franco |
| Resolution: | Done | Votes: | 0 |
| Labels: | None | ||
| Remaining Estimate: | 0d | ||
| Time Spent: | 0.25d | ||
| Original Estimate: | Not Specified | ||
| Issue Links: |
|
||||||||||||
| Template: |
|
||||||||||||
| Acceptance criteria: |
Empty
|
||||||||||||
| Task DoD: |
[ ]*
Doc/release notes changes? Comment present?
[ ]*
Downstream builds green?
[ ]*
Solution information and context easily available?
[ ]*
Tests
[ ]*
FixVersion filled and not yet released
[ ] 
Architecture Decision Record (ADR)
|
||||||||||||
| Date of First Response: | |||||||||||||
| Epic Link: | Declarative REST clients | ||||||||||||
| Sprint: | 6.2.1 Ramp-up 21 | ||||||||||||
| Story Points: | 3 | ||||||||||||
| Description |
|
At the moment we support pagination, but the API need to return total size of results to use current Grid UI. A lot of API's don't return total number of results, so the pagination need to be done lazy, page by page, while the user is scrolling. We can investigate if the component (https://github.com/viritin/viritin/tree/master/viritin/src/main/java/org/vaadin/viritin/grid) fits, and how much time we need to integrate with current rest UI stuff. Also, instead of use a grid we can use some pagination component like https://vaadin.com/directory/component/pagination Timebox to see if the library helps: 3SP |
| Comments |
| Comment by Jorge Franco [ 06/Apr/20 ] |
|
When the API don't return the total size, instead of use external components, is much better use our own components/libraries. Then we have 2 options:
Also we need some kind of design/ux as starting point. Recommendation: using pagination API we recommend get as much items per page as possible, as less calls we do to get more items, the experience is much better.
The technical solution can be something like, create a new view type:
workbench:
contentViews:
- name: list
$type: paginatedListView
Also we have to add more pagination types:
subApps:
browser:
class: info.magnolia.ui.contentapp.configuration.BrowserDescriptor
datasource:
$type: jsonDatasource
pagination:
$type: nextPreviousLinks
perPagePropertyName: '$.pagelen'
nextPageLinkName: '$.next'
previousPageLinkName: '$.previous'
And the implementation class of that definition can be something like: public class PaginatedListView<T> extends CustomComponent implements ContentView { private final VerticalLayout panelContent; private final PaginatedListView<T> paginatedListView; @Inject public PaginatedListView(ValueContext<T> valueContext, PaginatedListViewDefinition<T> definition) { panelContent = new VerticalLayout(); Component paginationComponent = //create pagination UI; panelContent.addComponent(paginationComponent); paginatedListView = new PaginatedListView<>(valueContext, definition, paginationComponent); panelContent.addComponent(paginatedListView); setCompositionRoot(panelContent); } } PaginationListView can be an extended ListView with a presenter to handle pagination ui components and populating grid items with rest calls to jsonDataSource. |
| Comment by Jorge Franco [ 13/Apr/20 ] |
|
The Viritin LazyGrid https://github.com/viritin/viritin/blob/master/viritin/src/main/java/org/vaadin/viritin/grid/LazyGrid.java can be used to support pagination of type offset/limit. LazyGrid offer a setItems method, where we can set a callback to get items from a restClient using params sortOrder, Offset and limit. At the end is using a dataProvider with a hack that returns 0 on size. The parent grid of LazyGrid is MGrid, that extends Vaadin Grid, that's good, we use MagnoliaGrid that also extends Vaadin Grid. We need to extend GridViewPresenter with the new Grid.
This component looks good, but I think is much better we create our own implementation that add this new dependency. No new commits in https://github.com/viritin/viritin from August 2019. |
| Comment by Quach Hao Thien [ 14/Apr/20 ] |
|
I'll lean forward to the the option #2 A Load More button would be suitable for lazy load instead of a next/previous button, which will go against the design of magnolia grid |