Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

increase table cache and other updates

Browse Source
This commit is contained in:
Dan Percic 2021-11-17 01:26:25 +02:00
parent 9dcc58d57d
commit 9759e0477e
4 changed files with 17 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/listing/listing-component.directive.ts
View File

@ -1,12 +1,12 @@
import { Directive, Injector, OnDestroy, TemplateRef, ViewChild } from '@angular/core';
import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
import { combineLatest, Observable } from 'rxjs';
import { map, switchMapTo } from 'rxjs/operators';
import { FilterService } from '../filtering';
import { SortingService } from '../sorting';
import { AutoUnsubscribe, shareDistinctLast } from '../utils';
import { SearchService } from '../search';
import { EntitiesService, ListingService } from './services';
import { IListable, ListingMode, ListingModes, TableColumnConfig } from './models';
import { IListable, TableColumnConfig } from './models';
export const DefaultListingServicesTmp = [FilterService, SearchService, SortingService, ListingService] as const;
export const DefaultListingServices = [...DefaultListingServicesTmp, EntitiesService] as const;
@ -29,8 +29,6 @@ export abstract class ListingComponent<T extends IListable> extends AutoUnsubscr
@ViewChild('tableItemTemplate') readonly tableItemTemplate?: TemplateRef<unknown>;
@ViewChild('workflowItemTemplate') readonly workflowItemTemplate?: TemplateRef<unknown>;
private readonly _listingMode$ = new BehaviorSubject<ListingMode>(ListingModes.table);
protected constructor(protected readonly _injector: Injector) {
super();
}

28
src/lib/listing/table-content/table-content.component.html
View File

@ -5,27 +5,21 @@
[minBufferPx]="300"
iqserHasScrollbar
>
<ng-container *ngIf="listingComponent.sortedDisplayedEntities$ | async as entities">
<ng-container *cdkVirtualFor="let entity of listingComponent.sortedDisplayedEntities$; trackBy: trackBy; templateCacheSize: 60">
<!-- mouseenter and mouseleave triggers change detection event if itemMouse functions are undefined -->
<!-- this little hack below ensures that change detection won't be triggered if functions are undefined -->
<ng-container *ngIf="itemMouseEnterFn || itemMouseLeaveFn; else withoutMouseEvents">
<div
(mouseenter)="itemMouseEnterFn && itemMouseEnterFn(entity)"
(mouseleave)="itemMouseLeaveFn && itemMouseLeaveFn(entity)"
*cdkVirtualFor="let entity of entities; trackBy: trackById"
[ngClass]="getTableItemClasses(entity)"
[routerLink]="entity.routerLink"
>
<ng-container *ngTemplateOutlet="tableItem; context: { entity: entity }"></ng-container>
</div>
</ng-container>
<div
(mouseenter)="itemMouseEnterFn && itemMouseEnterFn(entity)"
(mouseleave)="itemMouseLeaveFn && itemMouseLeaveFn(entity)"
*ngIf="itemMouseEnterFn || itemMouseLeaveFn; else withoutMouseEvents"
[ngClass]="getTableItemClasses(entity)"
[routerLink]="entity.routerLink"
>
<ng-container *ngTemplateOutlet="tableItem; context: { entity: entity }"></ng-container>
</div>
<ng-template #withoutMouseEvents>
<div
*cdkVirtualFor="let entity of entities; trackBy: trackById"
[ngClass]="getTableItemClasses(entity)"
[routerLink]="entity.routerLink"
>
<div [ngClass]="getTableItemClasses(entity)" [routerLink]="entity.routerLink">
<ng-container *ngTemplateOutlet="tableItem; context: { entity: entity }"></ng-container>
</div>
</ng-template>

7
src/lib/listing/table-content/table-content.component.ts
View File

@ -1,7 +1,7 @@
import { AfterViewInit, ChangeDetectionStrategy, Component, forwardRef, Inject, Input, OnDestroy, ViewChild } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { tap } from 'rxjs/operators';
import { AutoUnsubscribe } from '../../utils';
import { AutoUnsubscribe, trackBy } from '../../utils';
import { IListable } from '../models';
import { ListingComponent, ListingService } from '../index';
import { HasScrollbarDirective } from '../../scrollbar';
@ -18,6 +18,7 @@ export class TableContentComponent<T extends IListable> extends AutoUnsubscribe
@Input() itemMouseLeaveFn?: (entity: T) => void;
@Input() tableItemClasses?: Record<string, (e: T) => boolean>;
@Input() selectionEnabled!: boolean;
readonly trackBy = trackBy<T>();
@ViewChild(CdkVirtualScrollViewport, { static: true }) readonly scrollViewport!: CdkVirtualScrollViewport;
@ViewChild(HasScrollbarDirective, { static: true }) readonly hasScrollbarDirective!: HasScrollbarDirective;
@ -49,10 +50,6 @@ export class TableContentComponent<T extends IListable> extends AutoUnsubscribe
this.scrollViewport.scrollToIndex(this._lastScrolledIndex, 'smooth');
}
trackById(index: number, entity: T): string {
return entity.id;
}
getTableItemClasses(entity: T): Record<string, boolean> {
const classes: Record<string, boolean> = {
'table-item': true,

4
src/lib/utils/functions.ts
View File

@ -27,6 +27,6 @@ export function toNumber(str: string): number {
}
}
export function trackBy() {
return <T extends ITrackable>(index: number, item: T): string => item.id;
export function trackBy<T extends ITrackable>() {
return (index: number, item: T): string => item.id;
}