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

RED-3687 - reverted table-content component updates

Browse Source
This commit is contained in:
Valentin Mihai 2022-07-21 15:27:55 +03:00
parent 63616184b5
commit f785646dbe
2 changed files with 16 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,20 +1,20 @@
<div class="display-contents" *ngIf="componentContext$ | async as ctx">
<div class="display-contents">
<cdk-virtual-scroll-viewport
[class.no-data]="ctx.noContent"
[class.no-data]="listingComponent.noContent$ | async"
[itemSize]="itemSize"
[maxBufferPx]="3000"
[minBufferPx]="1000"
id="virtual-scroll"
iqserHasScrollbar
>
<ng-container *cdkVirtualFor="let entity of ctx.sortedDisplayedEntities; trackBy: trackBy">
<ng-container *cdkVirtualFor="let entity of listingComponent.sortedDisplayedEntities$ | async; trackBy: trackBy">
<!-- 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 -->
<div
(mouseenter)="itemMouseEnterFn && itemMouseEnterFn(entity)"
(mouseleave)="itemMouseLeaveFn && itemMouseLeaveFn(entity)"
*ngIf="itemMouseEnterFn || itemMouseLeaveFn; else withoutMouseEvents"
[class.help-mode]="ctx.isHelpModeActive"
[class.help-mode]="helpModeService.isHelpModeActive$ | async"
[id]="'item-' + entity.id"
[ngClass]="getTableItemClasses(entity)"
[routerLink]="entity.routerLink"
@ -28,7 +28,7 @@
<ng-template #withoutMouseEvents>
<div
[class.help-mode]="ctx.isHelpModeActive"
[class.help-mode]="helpModeService.isHelpModeActive$ | async"
[id]="'item-' + entity.id"
[ngClass]="getTableItemClasses(entity)"
[routerLink]="entity.routerLink"

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

@ -1,29 +1,20 @@
/* eslint-disable @angular-eslint/prefer-on-push-component-change-detection */
import { AfterViewInit, Component, forwardRef, HostListener, Inject, Input, ViewChild } from '@angular/core';
import { AfterViewInit, Component, forwardRef, HostListener, Inject, Input, OnDestroy, ViewChild } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { delay, tap } from 'rxjs/operators';
import { trackByFactory, ContextComponent } from '../../utils';
import { AutoUnsubscribe, trackByFactory } from '../../utils';
import { IListable } from '../models';
import { ListingComponent, ListingService } from '../index';
import { HasScrollbarDirective } from '../../scrollbar';
import { BehaviorSubject } from 'rxjs';
import { HelpModeService } from '../../help-mode';
interface TableContentTemplate {
checkViewportSize: () => void,
lastScrolledIndex: number,
hasScrollbarDirective: () => void,
noContent: boolean,
sortedDisplayedEntities: any[],
isHelpModeActive: boolean,
}
@Component({
selector: 'iqser-table-content',
templateUrl: './table-content.component.html',
styleUrls: ['./table-content.component.scss'],
})
export class TableContentComponent<T extends IListable> extends ContextComponent<TableContentTemplate> implements AfterViewInit {
export class TableContentComponent<T extends IListable> extends AutoUnsubscribe implements OnDestroy, AfterViewInit {
@Input() itemSize!: number;
@Input() itemMouseEnterFn?: (entity: T) => void;
@Input() itemMouseLeaveFn?: (entity: T) => void;
@ -37,18 +28,17 @@ export class TableContentComponent<T extends IListable> extends ContextComponent
private _lastScrolledIndex = 0;
private _multiSelectActive$ = new BehaviorSubject(false);
readonly #checkViewportSize$ = this.listingComponent.noContent$.pipe(tap(() => {
setTimeout(() => {
this.scrollViewport?.checkViewportSize();
}, 0);
}));
constructor(
@Inject(forwardRef(() => ListingComponent)) readonly listingComponent: ListingComponent<T>,
readonly listingService: ListingService<T>,
readonly helpModeService: HelpModeService,
) {
super();
this.addSubscription = this.listingComponent.noContent$.subscribe(() => {
setTimeout(() => {
this.scrollViewport?.checkViewportSize();
}, 0);
});
}
multiSelect(entity: T, $event: MouseEvent): void {
@ -59,21 +49,13 @@ export class TableContentComponent<T extends IListable> extends ContextComponent
}
ngAfterViewInit(): void {
const lastScrolledIndex$ = this.scrollViewport.scrolledIndexChange.pipe(tap(index => (this._lastScrolledIndex = index)))
const hasScrollbarDirective$ = this.listingService.displayedLength$
this.addSubscription = this.scrollViewport.scrolledIndexChange.pipe(tap(index => (this._lastScrolledIndex = index))).subscribe();
this.addSubscription = this.listingService.displayedLength$
.pipe(
delay(100),
tap(() => this.hasScrollbarDirective.process()),
)
super._initContext({
checkViewportSize: this.#checkViewportSize$,
lastScrolledIndex: lastScrolledIndex$,
hasScrollbarDirective: hasScrollbarDirective$,
noContent: this.listingComponent.noContent$,
sortedDisplayedEntities: this.listingComponent.sortedDisplayedEntities$,
isHelpModeActive: this.helpModeService.isHelpModeActive$,
})
.subscribe();
}
scrollToLastIndex(): void {