mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
a45f80fa82
refs https://github.com/TryGhost/Team/issues/1277 - added `ember-could-get-used-to-this` dependency to get access to Resources - context: https://www.pzuraq.com/introducing-use/ - added MembersEventFetcher resource for loading members events - using a Resource allows for a better data loading experience using only components - uses raw data from the API rather than going through Ember Data because we don't need full models or session-length caching that gives us - data is kept around in memory for the lifecycle of the resource, if the `filter` param changes the resource is torn down and recreated so it starts from page 1 again, once it's no longer used by a component it's torn down so data isn't kept around - paginates by using a `created_at:<={lastSeenTimestamp}` filter - this assumes the API can handle that effectively as a cursor with no duplicate or skipped records - updated `members-activity` template to use the new resource and control data loading using infinite scroll - moved overall screen structure from the `<MembersActivity::Table>` component into the `members-activity` template so that the table component can stay focused on just the table display
29 lines
1.2 KiB
Handlebars
29 lines
1.2 KiB
Handlebars
<section class="gh-canvas">
|
|
<GhCanvasHeader class="gh-canvas-header break tablet members-header">
|
|
<h2 class="gh-canvas-title" data-test-screen-title>Members Activity</h2>
|
|
</GhCanvasHeader>
|
|
|
|
<div class="view-container">
|
|
{{#let (members-event-fetcher filter=this.filter pageSize=50) as |eventsFetcher|}}
|
|
<div class="gh-list-scrolling">
|
|
{{#if eventsFetcher.data}}
|
|
<MembersActivity::Table @events={{eventsFetcher.data}} />
|
|
|
|
{{#unless (or eventsFetcher.isLoading eventsFetcher.hasReachedEnd)}}
|
|
<GhScrollTrigger @enter={{eventsFetcher.loadNextPage}} @triggerOffset={{250}} />
|
|
{{/unless}}
|
|
{{else unless eventsFetcher.isLoading}}
|
|
<MembersActivity::NoEvents @filter={{this.filter}} />
|
|
{{/if}}
|
|
|
|
{{#if eventsFetcher.isLoading}}
|
|
<div class="h30 flex flex-column items-center justify-center">
|
|
<div class="gh-loading-spinner"></div>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
{{/let}}
|
|
</div>
|
|
</section>
|
|
|
|
{{outlet}} |