RED-3687 - reverted table-content component updates

src/lib/listing/table-content/table-content.component.html

@@ -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"

src/lib/listing/table-content/table-content.component.ts

@@ -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)))
+        this.addSubscription = this.scrollViewport.scrolledIndexChange.pipe(tap(index => (this._lastScrolledIndex = index))).subscribe();
-        const hasScrollbarDirective$ = this.listingService.displayedLength$
+        this.addSubscription = this.listingService.displayedLength$
             .pipe(
                 delay(100),
                 tap(() => this.hasScrollbarDirective.process()),
             )
-
+            .subscribe();
-        super._initContext({
-            checkViewportSize: this.#checkViewportSize$,
-            lastScrolledIndex: lastScrolledIndex$,
-            hasScrollbarDirective: hasScrollbarDirective$,
-            noContent: this.listingComponent.noContent$,
-            sortedDisplayedEntities: this.listingComponent.sortedDisplayedEntities$,
-            isHelpModeActive: this.helpModeService.isHelpModeActive$,
-        })
     }
 
     scrollToLastIndex(): void {