From 31f1ab09d993afcd69f95e96b8dc6ea9f1c8a328 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Thu, 7 Oct 2021 19:34:58 +0300
Subject: [PATCH] fix multiple subscribes

---
 .../spotlight-search.component.html              |  4 ++--
 ...e-attributes-csv-import-dialog.component.html | 12 +++++++-----
 .../dossier-details.component.html               |  4 ++--
 .../dossier-overview-screen.component.html       |  6 +++---
 .../screen/dossier-overview-screen.component.ts  |  2 ++
 .../screen/dossiers-listing-screen.component.ts  | 16 ++++++++++++++--
 .../dictionary-manager.component.html            |  8 ++++----
 libs/common-ui                                   |  2 +-
 8 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html
index d0c1caa37..0e3cb20eb 100644
--- a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html
+++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html
@@ -6,11 +6,11 @@
 
 <mat-menu #menu="matMenu" class="search-menu" xPosition="after">
     <ng-template matMenuContent>
-        <div class="wrapper">
+        <div *ngIf="currentActionIdx$ | async as currentIndex" class="wrapper">
             <button
                 (click)="item.action(valueChanges$.getValue())"
                 *ngFor="let item of shownActions; let index = index"
-                [class.highlight]="(currentActionIdx$ | async) === index"
+                [class.highlight]="currentIndex === index"
                 class="spotlight-row pointer"
             >
                 <mat-icon [svgIcon]="item.icon"></mat-icon>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
index f9ce5f233..ed7b2cde6 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
@@ -22,9 +22,11 @@
                                 type="text"
                             />
                             <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption>
-                                <mat-option *ngFor="let field of filteredKeyOptions | async" [value]="field">
-                                    {{ field }}
-                                </mat-option>
+                                <ng-container *ngIf="filteredKeyOptions | async as fields">
+                                    <mat-option *ngFor="let field of fields" [value]="field">
+                                        {{ field }}
+                                    </mat-option>
+                                </ng-container>
                             </mat-autocomplete>
                         </mat-form-field>
                     </div>
@@ -95,12 +97,12 @@
                         width="full"
                     ></iqser-input-with-action>
                 </div>
-                <div [class.search-open]="isSearchOpen" class="csv-header-pill-content">
+                <div *ngIf="sortedDisplayedEntities$ | async as fields" [class.search-open]="isSearchOpen" class="csv-header-pill-content">
                     <div
                         (click)="toggleFieldActive(field)"
                         (mouseenter)="setHoveredColumn(field.csvColumn)"
                         (mouseleave)="setHoveredColumn()"
-                        *ngFor="let field of sortedDisplayedEntities$ | async"
+                        *ngFor="let field of fields"
                         class="csv-header-pill-wrapper"
                     >
                         <div [class.selected]="isActive(field)" class="csv-header-pill">
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.html
index ee2d64bf2..d47576b64 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.html
@@ -48,10 +48,10 @@
         ></redaction-simple-doughnut-chart>
     </div>
 
-    <div *ngIf="dossier.hasFiles" class="mt-24 legend pb-32">
+    <div *ngIf="dossier.hasFiles && needsWorkFilters$ | async as filters" class="mt-24 legend pb-32">
         <div
             (click)="filterService.toggleFilter('needsWorkFilters', filter.id)"
-            *ngFor="let filter of needsWorkFilters$ | async"
+            *ngFor="let filter of filters"
             [class.active]="filter.checked"
         >
             <redaction-type-filter [filter]="filter"></redaction-type-filter>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html
index 32bc35237..b7f41d7cc 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html
@@ -94,18 +94,18 @@
 </ng-template>
 
 <ng-template #viewModeSelection>
-    <div class="view-mode-selection">
+    <div *ngIf="listingMode$ | async as mode" class="view-mode-selection">
         <div class="all-caps-label" translate="view-mode.view-as"></div>
         <iqser-circle-button
             (action)="listingMode = listingModes.workflow"
-            [attr.aria-expanded]="(listingMode$ | async) === listingModes.workflow"
+            [attr.aria-expanded]="mode === listingModes.workflow"
             [tooltip]="'view-mode.workflow' | translate"
             icon="iqser:lanes"
         ></iqser-circle-button>
 
         <iqser-circle-button
             (action)="listingMode = listingModes.table"
-            [attr.aria-expanded]="(listingMode$ | async) === listingModes.table"
+            [attr.aria-expanded]="mode === listingModes.table"
             [tooltip]="'view-mode.list' | translate"
             icon="iqser:list"
         ></iqser-circle-button>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts
index d359af029..6e8994db1 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts
@@ -1,4 +1,5 @@
 import {
+    ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
     ElementRef,
@@ -57,6 +58,7 @@ import { DossierTemplatesService } from '../../../services/dossier-templates.ser
     templateUrl: './dossier-overview-screen.component.html',
     styleUrls: ['./dossier-overview-screen.component.scss'],
     providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => DossierOverviewScreenComponent) }],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DossierOverviewScreenComponent extends ListingComponent<File> implements OnInit, OnDestroy, OnDetach, OnAttach {
     readonly listingModes = ListingModes;
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.ts
index be4b4cbb1..f34622959 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.ts
@@ -1,4 +1,14 @@
-import { AfterViewInit, Component, forwardRef, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    Injector,
+    OnDestroy,
+    OnInit,
+    TemplateRef,
+    ViewChild,
+} from '@angular/core';
 import { DossierStatuses } from '@redaction/red-ui-http';
 import { AppStateService } from '@state/app-state.service';
 import { Dossier } from '@state/model/dossier';
@@ -25,10 +35,12 @@ import { DossiersService } from '../../../services/dossiers.service';
         { provide: EntitiesService, useExisting: DossiersService },
         { provide: ListingComponent, useExisting: forwardRef(() => DossiersListingScreenComponent) },
     ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DossiersListingScreenComponent
     extends ListingComponent<Dossier>
-    implements OnInit, AfterViewInit, OnDestroy, OnAttach, OnDetach {
+    implements OnInit, AfterViewInit, OnDestroy, OnAttach, OnDetach
+{
     readonly currentUser = this._userService.currentUser;
     readonly tableColumnConfigs = this._configService.tableConfig;
     readonly tableHeaderLabel = _('dossier-listing.table-header.title');
diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
index 7d6a3e05e..9ea892f02 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
@@ -32,10 +32,10 @@
             </div>
 
             <ng-container *ngIf="filterByDossierTemplate">
-                <div class="iqser-input-group w-200 mt-0 mr-8">
+                <div *ngIf="dossierTemplatesService.all$ | async as templates" class="iqser-input-group w-200 mt-0 mr-8">
                     <mat-select [(ngModel)]="dossierTemplate" [disabled]="!compare">
                         <mat-option [value]="selectDossierTemplate">{{ selectDossierTemplate.name | translate }}</mat-option>
-                        <mat-option *ngFor="let dossierTemplate of dossierTemplatesService.all$ | async" [value]="dossierTemplate">
+                        <mat-option *ngFor="let dossierTemplate of templates" [value]="dossierTemplate">
                             {{ dossierTemplate.name }}
                         </mat-option>
                     </mat-select>
@@ -51,10 +51,10 @@
                 </div>
             </ng-container>
 
-            <div *ngIf="!filterByDossierTemplate" class="iqser-input-group w-200 mt-0">
+            <div *ngIf="!filterByDossierTemplate && dossiersService.all$ | async as dossiers" class="iqser-input-group w-200 mt-0">
                 <mat-select [(ngModel)]="dossier" [disabled]="!compare">
                     <mat-option [value]="selectDossier">{{ selectDossier.dossierName | translate }}</mat-option>
-                    <mat-option *ngFor="let dossier of dossiersService.all$ | async" [value]="dossier">
+                    <mat-option *ngFor="let dossier of dossiers" [value]="dossier">
                         {{ dossier.dossierName }}
                     </mat-option>
                 </mat-select>
diff --git a/libs/common-ui b/libs/common-ui
index adf27211d..feaaa5d8d 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit adf27211ddb6547dea0b2c570d1681cb00e84cdf
+Subproject commit feaaa5d8dc9ebc1075e03a6e7b92f3ccec893fc3