Merge branch 'master' into VM/RED-2614

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

@@ -4,6 +4,7 @@ import { FormGroup } from '@angular/forms';
 import { AutoUnsubscribe, hasFormChanged, IqserEventTarget } from '../utils';
 import { ConfirmOptions } from '../misc';
 import { ConfirmationDialogService } from './confirmation-dialog.service';
+import { firstValueFrom } from 'rxjs';
 
 export interface SaveOptions {
     closeAfterSave?: boolean;
@@ -22,25 +23,15 @@ export interface SaveOptions {
  * (otherwise the save request will be triggered twice).
  * */
 export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnInit {
-
+    form!: FormGroup;
+    initialFormValue;
     protected readonly _dialogService: ConfirmationDialogService = this._injector.get(ConfirmationDialogService);
     protected _waitingForConfirmation = false;
 
-    form!: FormGroup;
-    initialFormValue;
-
     constructor(protected readonly _injector: Injector, protected readonly _dialogRef: MatDialogRef<BaseDialogComponent>) {
         super();
     }
 
-    abstract save(options?: SaveOptions): void;
-
-    ngOnInit(): void {
-        this.addSubscription = this._dialogRef.backdropClick().subscribe(() => {
-            this.close();
-        });
-    }
-
     get valid(): boolean {
         return this.form.valid;
     }
@@ -53,6 +44,14 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI
         return !this.valid || !this.changed;
     }
 
+    abstract save(options?: SaveOptions): void;
+
+    ngOnInit(): void {
+        this.addSubscription = this._dialogRef.backdropClick().subscribe(() => {
+            this.close();
+        });
+    }
+
     close(): void {
         if (this.changed) {
             this._openConfirmDialog().then(result => {
@@ -70,12 +69,6 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI
         }
     }
 
-    protected _openConfirmDialog() {
-        this._waitingForConfirmation = true;
-        const dialogRef = this._dialogService.openDialog({ disableConfirm: !this.valid });
-        return dialogRef.afterClosed().toPromise();
-    }
-
     @HostListener('window:keydown.Enter', ['$event'])
     onEnter(event: KeyboardEvent): void {
         const node = (event.target as IqserEventTarget).localName;
@@ -90,4 +83,10 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI
             this.close();
         }
     }
+
+    protected _openConfirmDialog() {
+        this._waitingForConfirmation = true;
+        const dialogRef = this._dialogService.openDialog({ disableConfirm: !this.valid });
+        return firstValueFrom(dialogRef.afterClosed());
+    }
 }

src/lib/help-mode/help-mode.service.ts

@@ -1,7 +1,7 @@
 import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, firstValueFrom } from 'rxjs';
 import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component';
 import { HELP_DOCS } from './tokens';
 
@@ -47,11 +47,9 @@ export class HelpModeService {
             width: '600px',
         });
 
-        ref.afterClosed()
-            .toPromise()
-            .then(() => {
-                this._helpModeDialogIsOpened$.next(false);
-            });
+        firstValueFrom(ref.afterClosed()).then(() => {
+            this._helpModeDialogIsOpened$.next(false);
+        });
         return ref;
     }
 

src/lib/listing/services/entities.service.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable, InjectionToken, Injector, Optional } from '@angular/core';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { BehaviorSubject, firstValueFrom, Observable, Subject } from 'rxjs';
 import { filter, map, startWith, tap } from 'rxjs/operators';
 import { IListable } from '../models';
 import { GenericService, QueryParam } from '../../services';
@@ -57,7 +57,7 @@ export class EntitiesService<E extends IListable, I = E> extends GenericService<
 
     loadAllIfEmpty(modelPath = this._defaultModelPath, queryParams?: List<QueryParam>): Promise<unknown> | void {
         if (!this.all.length) {
-            return this.loadAll(modelPath, queryParams).toPromise();
+            return firstValueFrom(this.loadAll(modelPath, queryParams));
         }
     }
 

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

@@ -27,53 +27,51 @@
         class="column"
     >
         <iqser-column-header [(selectionColumn)]="selectionColumn" [bulkActions]="bulkActions" [column]="column"></iqser-column-header>
-        <cdk-virtual-scroll-viewport [itemSize]="itemHeight">
+        <div
+            (cdkDropListDropped)="move($event)"
+            *ngIf="column.entities | async as entities"
+            [cdkDropListData]="entities"
+            [cdkDropListEnterPredicate]="canMoveTo(column)"
+            [class.multi-select-active]="selectionColumn === column"
+            [id]="column.key"
+            cdkDropList
+            cdkDropListSortingDisabled
+        >
             <div
-                (cdkDropListDropped)="move($event)"
-                *ngIf="column.entities | async as entities"
-                [cdkDropListData]="entities"
-                [cdkDropListEnterPredicate]="canMoveTo(column)"
-                [class.multi-select-active]="selectionColumn === column"
-                [id]="column.key"
-                cdkDropList
-                cdkDropListSortingDisabled
+                (cdkDragEnded)="stopDragging()"
+                (cdkDragStarted)="startDragging(column, $event)"
+                (click)="selectionColumn === column && listingService.select(entity)"
+                *ngFor="let entity of entities; trackBy: trackBy"
+                [cdkDragData]="entity"
+                [class.no-border]="dragging && draggingEntities.includes(entity)"
+                [class.selected]="all[entity.id].isSelected$ | async"
+                [ngClass]="all[entity.id].classes$ | async"
+                cdkDrag
             >
-                <div
-                    (cdkDragEnded)="stopDragging()"
-                    (cdkDragStarted)="startDragging(column, $event)"
-                    (click)="selectionColumn === column && listingService.select(entity)"
-                    *cdkVirtualFor="let entity of column.entities; trackBy: trackBy"
-                    [cdkDragData]="entity"
-                    [class.no-border]="dragging && draggingEntities.includes(entity)"
-                    [class.selected]="all[entity.id].isSelected$ | async"
-                    [ngClass]="all[entity.id].classes$ | async"
-                    cdkDrag
-                >
-                    <ng-container *ngIf="!draggingEntities.includes(entity)">
-                        <ng-container *ngTemplateOutlet="itemTemplate; context: { entity: entity }"></ng-container>
+                <ng-container *ngIf="!draggingEntities.includes(entity)">
+                    <ng-container *ngTemplateOutlet="itemTemplate; context: { entity: entity }"></ng-container>
+                </ng-container>
+
+                <ng-template cdkDragPlaceholder>
+                    <div *ngFor="let e of draggingEntities" [style.min-height]="itemHeight + 'px'" class="placeholder"></div>
+                </ng-template>
+
+                <ng-template cdkDragPreview>
+                    <ng-container *ngFor="let e of draggingEntities">
+                        <div
+                            [class.selected]="all[e.id].isSelected$ | async"
+                            [ngClass]="all[e.id].classes$ | async"
+                            [style.width]="itemWidth + 'px'"
+                        >
+                            <ng-container *ngTemplateOutlet="itemTemplate; context: { entity: e }"></ng-container>
+                        </div>
                     </ng-container>
-
-                    <ng-template cdkDragPlaceholder>
-                        <div *ngFor="let e of draggingEntities" [style.min-height]="itemHeight + 'px'" class="placeholder"></div>
-                    </ng-template>
-
-                    <ng-template cdkDragPreview>
-                        <ng-container *ngFor="let e of draggingEntities">
-                            <div
-                                [class.selected]="all[e.id].isSelected$ | async"
-                                [ngClass]="all[e.id].classes$ | async"
-                                [style.width]="itemWidth + 'px'"
-                            >
-                                <ng-container *ngTemplateOutlet="itemTemplate; context: { entity: e }"></ng-container>
-                            </div>
-                        </ng-container>
-                    </ng-template>
-                </div>
-
-                <div (click)="addElement.emit()" *ngIf="column.key === addElementColumn" class="add-btn">
-                    <mat-icon [svgIcon]="addElementIcon"></mat-icon>
-                </div>
+                </ng-template>
             </div>
-        </cdk-virtual-scroll-viewport>
+
+            <div (click)="addElement.emit()" *ngIf="column.key === addElementColumn" class="add-btn">
+                <mat-icon [svgIcon]="addElementIcon"></mat-icon>
+            </div>
+        </div>
     </div>
 </div>

src/lib/services/composite-route.guard.ts

@@ -1,6 +1,6 @@
 import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
 import { Injectable, InjectionToken, Injector } from '@angular/core';
-import { from, of } from 'rxjs';
+import { firstValueFrom, from, of } from 'rxjs';
 import { LoadingService } from '../loading';
 
 @Injectable({
@@ -25,7 +25,7 @@ export class CompositeRouteGuard implements CanActivate {
                     canActivateResult = of(canActivateResult);
                 }
 
-                const result = await canActivateResult.toPromise();
+                const result = await firstValueFrom(canActivateResult);
                 if (!result) {
                     this._loadingService.stop();
                     return false;