Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-01-22 01:22:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: optimize data list component

Browse Source
This commit is contained in:
Jovan Krunić
2021-05-31 18:03:19 +02:00
committed by Rainer Killinger
parent 66167831e6
commit 27cf62f952
4 changed files with 17 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/modules/data/list/data-list.component.ts
View File

@@ -42,7 +42,7 @@ export class DataListComponent implements OnChanges, OnInit {
/** /**
* Output binding to trigger pagination fetch * Output binding to trigger pagination fetch
*/ */
@Output('loadmore') loadMore = new EventEmitter<DataSourceRefreshed>(); @Output('loadmore') loadMore = new EventEmitter<void>();
/** /**
* Emits when scroll view should reset to top * Emits when scroll view should reset to top
*/ */
@@ -66,15 +66,9 @@ export class DataListComponent implements OnChanges, OnInit {
} }
// tslint:disable-next-line: completed-docs // tslint:disable-next-line: completed-docs
ngOnChanges(_changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
if (Array.isArray(this.items)) { if (Array.isArray(this.items) && typeof changes.items !== 'undefined') {
if (this.itemStream.getValue().length === 0) { this.itemStream.next(this.items);
this.itemStream = new BehaviorSubject<SCThings[]>(this.items);
} else {
if ((this.items[0].uid ?? '') !== this.itemStream.getValue()[0].uid) {
this.itemStream = new BehaviorSubject<SCThings[]>(this.items);
}
}
} }
} }
@@ -98,19 +92,15 @@ export class DataListComponent implements OnChanges, OnInit {
* Component proxy for dataSource.finishedLoadMore * Component proxy for dataSource.finishedLoadMore
*/ */
notifyLoadMore() { notifyLoadMore() {
this.loadMore.emit((items) => { this.loadMore.emit();
this.itemStream.next(items);
});
} }
/** /**
* Function to call whenever scroll view visible range changed * Function to call whenever scroll view visible range changed
*/ */
scrolled(_event: Event) { scrolled(_index: number) {
if ((this.items?.length ?? 0) - this.viewPort.getRenderedRange().end <= (this.items?.length ?? 0) * this.reloadThreshold) { if ((this.items?.length ?? 0) - this.viewPort.getRenderedRange().end <= (this.items?.length ?? 0) * this.reloadThreshold) {
this.notifyLoadMore(); this.notifyLoadMore();
} }
} }
} }
export type DataSourceRefreshed = (items: SCThings[]) => unknown;

16
src/app/modules/data/list/data-list.html
View File

@@ -1,10 +1,12 @@
<cdk-virtual-scroll-viewport itemSize="80" minBufferPx="1500" maxBufferPx="2000" (scrolledIndexChange)="scrolled($event)" <ng-container *ngIf="itemStream | async as items">
[style.display]="items && items.length ? 'block': 'none'"> <cdk-virtual-scroll-viewport itemSize="80" minBufferPx="1500" maxBufferPx="2000" (scrolledIndexChange)="scrolled($event)"
<ion-list> [style.display]="items && items.length ? 'block': 'none'">
<stapps-data-list-item *cdkVirtualFor="let item of itemStream;trackBy: identifyItem" [item]="item" <ion-list>
[hideThumbnail]="singleType"></stapps-data-list-item> <stapps-data-list-item *cdkVirtualFor="let item of items;trackBy: identifyItem" [item]="item"
</ion-list> [hideThumbnail]="singleType"></stapps-data-list-item>
</cdk-virtual-scroll-viewport> </ion-list>
</cdk-virtual-scroll-viewport>
</ng-container>
<div [style.display]="items && items.length === 0 ? 'block': 'none'"> <div [style.display]="items && items.length === 0 ? 'block': 'none'">
<ion-label class='notFoundContainer'> <ion-label class='notFoundContainer'>
{{'search.nothing_found' | translate | titlecase}} {{'search.nothing_found' | translate | titlecase}}

4
src/app/modules/data/list/search-page.component.ts
View File

@@ -29,7 +29,6 @@ import {ContextMenuService} from '../../menu/context/context-menu.service';
import {SettingsProvider} from '../../settings/settings.provider'; import {SettingsProvider} from '../../settings/settings.provider';
import {DataRoutingService} from '../data-routing.service'; import {DataRoutingService} from '../data-routing.service';
import {DataProvider} from '../data.provider'; import {DataProvider} from '../data.provider';
import {DataSourceRefreshed} from './data-list.component';
/** /**
* SearchPageComponent queries things and shows list of things as search results and filter as context menu * SearchPageComponent queries things and shows list of things as search results and filter as context menu
@@ -225,10 +224,9 @@ export class SearchPageComponent implements OnInit {
* Loads next page of things * Loads next page of things
*/ */
// tslint:disable-next-line:no-any // tslint:disable-next-line:no-any
async loadMore(finished: DataSourceRefreshed): Promise<void> { async loadMore(): Promise<void> {
this.from += this.pageSize; this.from += this.pageSize;
await this.fetchAndUpdateItems(true); await this.fetchAndUpdateItems(true);
finished(await this.items);
} }
/** /**

2
src/app/modules/data/list/search-page.html
View File

@@ -15,5 +15,5 @@
</ion-header> </ion-header>
<ion-content> <ion-content>
<stapps-data-list id="data-list" [items]="items | async" [singleType]="singleTypeResponse" (loadmore)="loadMore($event)" [resetToTop]="queryChanged.asObservable()"></stapps-data-list> <stapps-data-list id="data-list" [items]="items | async" [singleType]="singleTypeResponse" (loadmore)="loadMore()" [resetToTop]="queryChanged.asObservable()"></stapps-data-list>
</ion-content> </ion-content>