Pull request #15: VM/RED-3687

Merge in SL/common-ui from VM/RED-3687 to master

* commit '767837c0deb93c475afe30150b3c169726168277':
  RED-3686 - updated interfaces names
  RED-3687 - reverted table-content component updates
  RED-3687 - Remove AutoUnsubscribe directive

src/lib/dialog/base-dialog.component.ts

@@ -1,10 +1,10 @@
-import { Directive, HostListener, inject, OnInit } from '@angular/core';
+import { Directive, HostListener, inject, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { AutoUnsubscribe, hasFormChanged, IqserEventTarget } from '../utils';
+import { hasFormChanged, IqserEventTarget } from '../utils';
 import { ConfirmOptions } from '.';
 import { ConfirmationDialogService } from './confirmation-dialog.service';
-import { firstValueFrom } from 'rxjs';
+import { firstValueFrom, Subscription } from 'rxjs';
 import { LoadingService } from '../loading';
 import { Toaster } from '../services';
 
@@ -26,7 +26,7 @@ export interface SaveOptions {
  * Make sure to remove the (submit)="save()" property from the form and to set type="button" on the save button
  * (otherwise the save request will be triggered twice).
  * */
-export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnInit {
+export abstract class BaseDialogComponent implements OnDestroy {
     form!: UntypedFormGroup;
     initialFormValue!: Record<string, string>;
     protected readonly _formBuilder = inject(UntypedFormBuilder);
@@ -34,10 +34,11 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI
     protected readonly _toaster = inject(Toaster);
     readonly #confirmationDialogService = inject(ConfirmationDialogService);
     readonly #dialog = inject(MatDialog);
+    #backdropClickSubscription = this._dialogRef.backdropClick().subscribe(() => {
+        this.close();
+    });
 
-    protected constructor(protected readonly _dialogRef: MatDialogRef<BaseDialogComponent>, private readonly _isInEditMode?: boolean) {
+    protected constructor(protected readonly _dialogRef: MatDialogRef<BaseDialogComponent>, private readonly _isInEditMode?: boolean) {}
-        super();
-    }
 
     get valid(): boolean {
         return this.form.valid;
@@ -53,10 +54,8 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI
 
     abstract save(options?: SaveOptions): void;
 
-    ngOnInit(): void {
+    ngOnDestroy(): void {
-        this.addSubscription = this._dialogRef.backdropClick().subscribe(() => {
+        this.#backdropClickSubscription.unsubscribe();
-            this.close();
-        });
     }
 
     close(): void {

src/lib/form/base-form.component.ts

@@ -1,9 +1,9 @@
 import { Directive } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { AutoUnsubscribe, hasFormChanged } from '../utils';
+import { hasFormChanged } from '../utils';
 
 @Directive()
-export abstract class BaseFormComponent extends AutoUnsubscribe {
+export abstract class BaseFormComponent {
     form!: UntypedFormGroup;
     initialFormValue!: Record<string, string>;
 

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

@@ -13,7 +13,6 @@ import {
     ViewChild,
     ViewContainerRef,
 } from '@angular/core';
-import { AutoUnsubscribe } from '../../utils';
 import { IListable, ListingModes, TableColumnConfig } from '../models';
 import { ListingComponent } from '../listing-component.directive';
 import { EntitiesService } from '../services';
@@ -26,7 +25,7 @@ const SCROLLBAR_WIDTH = 11;
     templateUrl: './table.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TableComponent<T extends IListable> extends AutoUnsubscribe implements OnChanges {
+export class TableComponent<T extends IListable> implements OnChanges {
     readonly listingModes = ListingModes;
 
     @Input() tableColumnConfigs!: readonly TableColumnConfig<T>[];
@@ -56,9 +55,7 @@ export class TableComponent<T extends IListable> extends AutoUnsubscribe impleme
         private readonly _hostRef: ViewContainerRef,
         private readonly _changeRef: ChangeDetectorRef,
         readonly entitiesService: EntitiesService<T>,
-    ) {
+    ) {}
-        super();
-    }
 
     get tableHeaderLabel(): string | undefined {
         return this.listingComponent.tableHeaderLabel;

src/lib/listing/workflow/column-header/column-header.component.html

@@ -1,4 +1,5 @@
-<ng-container *ngIf="column.entities | async as entities">
+<ng-container *ngIf="componentContext$ | async as ctx">
+    <ng-container *ngIf="ctx.entities as entities">
         <div class="heading">
             <span>{{ column.label | translate }} ({{ entities.length || 0 }})</span>
             <span
@@ -16,8 +17,8 @@
             <div class="selected-wrapper">
                 <iqser-round-checkbox
                     (click)="toggleSelectAll()"
-                [active]="allSelected$ | async"
+                    [active]="ctx.allSelected"
-                [indeterminate]="indeterminate$ | async"
+                    [indeterminate]="ctx.indeterminate"
                     type="with-bg"
                 ></iqser-round-checkbox>
 
@@ -38,4 +39,5 @@
 
             <iqser-circle-button (action)="disableSelection()" [type]="circleButtonTypes.primary" icon="iqser:close"></iqser-circle-button>
         </div>
+    </ng-container>
 </ng-container>

src/lib/listing/workflow/column-header/column-header.component.ts

@@ -14,17 +14,25 @@ import { combineLatest, Observable } from 'rxjs';
 import { filter, map, tap } from 'rxjs/operators';
 import { CircleButtonTypes } from '../../../buttons';
 import { IListable } from '../../models';
-import { AutoUnsubscribe, Debounce } from '../../../utils';
+import { Debounce, ContextComponent } from '../../../utils';
 import { ListingService } from '../../services';
 import { WorkflowColumn } from '../models/workflow-column.model';
 
+interface ColumnHeaderContext {
+    entities: IListable[],
+    allSelected: boolean,
+    indeterminate: boolean,
+    selectedLength: number,
+    disableSelection: () => void,
+}
+
 @Component({
     selector: 'iqser-column-header [column] [selectionColumn]',
     templateUrl: './column-header.component.html',
     styleUrls: ['./column-header.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ColumnHeaderComponent<T extends IListable, K extends string> extends AutoUnsubscribe implements OnInit {
+export class ColumnHeaderComponent<T extends IListable, K extends string> extends ContextComponent<ColumnHeaderContext> implements OnInit {
     readonly circleButtonTypes = CircleButtonTypes;
 
     @Input() column!: WorkflowColumn<T, K>;
@@ -32,9 +40,6 @@ export class ColumnHeaderComponent<T extends IListable, K extends string> extend
     @Input() bulkActions?: TemplateRef<unknown>;
     @Output() readonly selectionColumnChange = new EventEmitter<WorkflowColumn<T, K> | undefined>();
 
-    allSelected$!: Observable<boolean>;
-    indeterminate$!: Observable<boolean>;
-
     bulkActionsContainerWidth?: number;
 
     @ViewChild('bulkActionsContainer') bulkActionsContainer?: ElementRef;
@@ -48,18 +53,25 @@ export class ColumnHeaderComponent<T extends IListable, K extends string> extend
     }
 
     ngOnInit(): void {
-        this.allSelected$ = combineLatest([this.listingService.selectedLength$, this.column.entities]).pipe(
+        const allSelected$ = combineLatest([this.listingService.selectedLength$, this.column.entities]).pipe(
             map(([length, columnEntities]) => length > 0 && length === columnEntities.length),
         );
-        this.indeterminate$ = combineLatest([this.listingService.selectedLength$, this.column.entities]).pipe(
+        const indeterminate$ = combineLatest([this.listingService.selectedLength$, this.column.entities]).pipe(
             map(([length, columnEntities]) => length > 0 && length !== columnEntities.length),
         );
-        this.addSubscription = this.column.entities
+        const disableSelection$ = this.column.entities
             .pipe(
                 filter(entities => entities.length <= 1),
                 tap(() => this.disableSelection()),
-            )
+            );
-            .subscribe();
+
+        super._initContext({
+            entities: this.column.entities,
+            allSelected: allSelected$,
+            indeterminate: indeterminate$,
+            selectedLength: this.listingService.selectedLength$,
+            disableSelection: disableSelection$,
+        })
     }
 
     toggleSelectAll(): void {

src/lib/listing/workflow/workflow.component.html

@@ -1,8 +1,9 @@
-<iqser-table-header [tableHeaderLabel]="listingComponent.tableHeaderLabel" listingMode="workflow">
+<ng-container *ngIf="componentContext$ | async">
+    <iqser-table-header [tableHeaderLabel]="listingComponent.tableHeaderLabel" listingMode="workflow">
         <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-</iqser-table-header>
+    </iqser-table-header>
 
-<iqser-empty-state
+    <iqser-empty-state
         (action)="noDataAction.emit()"
         *ngIf="entitiesService.noData$ | async"
         [buttonIcon]="noDataButtonIcon"
@@ -10,13 +11,13 @@
         [icon]="noDataIcon"
         [showButton]="showNoDataButton"
         [text]="noDataText"
-></iqser-empty-state>
+    ></iqser-empty-state>
 
-<div
+    <div
         *ngIf="(entitiesService.noData$ | async) === false && (draggingEntities$ | async) as draggingEntities"
         cdkDropListGroup
         class="columns-wrapper"
->
+    >
         <div
             *ngFor="let column of config.columns"
             [class.dragging]="dragging"
@@ -74,4 +75,5 @@
                 </div>
             </div>
         </div>
-</div>
+    </div>
+</ng-container>

src/lib/listing/workflow/workflow.component.ts

@@ -15,7 +15,7 @@ import {
 } from '@angular/core';
 import { ListingComponent } from '../listing-component.directive';
 import { CdkDragDrop, CdkDragStart, CdkDropList } from '@angular/cdk/drag-drop';
-import { AutoUnsubscribe, Debounce, trackByFactory } from '../../utils';
+import { Debounce, trackByFactory, ContextComponent } from '../../utils';
 import { IListable } from '../models';
 import { EntitiesService, ListingService } from '../services';
 import { BehaviorSubject } from 'rxjs';
@@ -24,13 +24,18 @@ import { WorkflowConfig } from './models/workflow-config.model';
 import { WorkflowColumn } from './models/workflow-column.model';
 import { EntityWrapper } from './models/entity-wrapper.model';
 
+interface WorkflowContext {
+    updateConfigItems: unknown;
+    setupResizeObserver: unknown;
+}
+
 @Component({
     selector: 'iqser-workflow [itemTemplate] [config] [addElementIcon]',
     templateUrl: './workflow.component.html',
     styleUrls: ['./workflow.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class WorkflowComponent<T extends IListable, K extends string> extends AutoUnsubscribe implements OnInit {
+export class WorkflowComponent<T extends IListable, K extends string> extends ContextComponent<WorkflowContext> implements OnInit {
     @Input() headerTemplate?: TemplateRef<unknown>;
     @Input() itemTemplate!: TemplateRef<T>;
     @Input() config!: WorkflowConfig<T, K>;
@@ -81,14 +86,18 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
         for (const column of this.config.columns) {
             column.entities = new BehaviorSubject<T[]>([]);
         }
-        this.addSubscription = this.listingService.displayed$.pipe(tap(entities => this._updateConfigItems(entities))).subscribe();
+        const updateConfigItems$ = this.listingService.displayed$.pipe(tap(entities => this._updateConfigItems(entities)))
-        this.addSubscription = this.entitiesService.noData$
+        const setupResizeObserver$ = this.entitiesService.noData$
             .pipe(
                 filter(noData => noData),
                 tap(() => this._setupResizeObserver()),
-            )
+            );
-            .subscribe();
         this._setupResizeObserver();
+
+        super._initContext({
+            updateConfigItems: updateConfigItems$,
+            setupResizeObserver: setupResizeObserver$
+        })
     }
 
     canMoveTo(column: WorkflowColumn<T, K>): () => boolean {

src/lib/utils/context.component.ts

@@ -0,0 +1,17 @@
+import { combineLatest, Observable, of } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+import { ValuesOf } from './types/utility-types';
+
+export class ContextComponent<T> {
+    componentContext$: Observable<T> | null = of({} as T);
+
+    protected _initContext(context: Record<string, Observable<ValuesOf<T>>>): void {
+        const observables = Object.values(context).map(obs => obs.pipe(startWith(null)));
+        const keys = Object.keys(context);
+        this.componentContext$ = combineLatest(observables).pipe(map(values => this._mapKeysToObs(keys, values)));
+    }
+
+    protected _mapKeysToObs(keys: string[], observables: (ValuesOf<T> | null) []): T {
+        return keys.reduce((acc, key, index) => ({ ...acc, [key]: observables[index] }), {} as T);
+    }
+}

src/lib/utils/index.ts

@@ -15,3 +15,4 @@ export * from './types/iqser-types';
 export * from './pruning-translation-loader';
 export * from './custom-route-reuse.strategy';
 export * from './headers-configuration';
+export * from './context.component';