Pull request #371: VM/RED-3687

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

* commit 'd5701669ca8d8b5641d329670396093ec1fa1321':
  RED-3687 - removed generic param on init context
  RED-3687 - removed on detach
  RED-3687 - removed on detach
  RED-3687 - undone changes for file preview component
  RED-3687 - WIP on removing subscriptions

apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.html

@@ -1,39 +1,34 @@
-<ng-container *ngIf="file$ | async as file">
-    <ng-container *ngIf="dossier$ | async as dossier">
-        <div *ngFor="let comment of annotation.comments; trackBy: trackBy" class="comment">
-            <div class="comment-details-wrapper">
-                <div [matTooltipPosition]="'above'" [matTooltip]="comment.date | date: 'exactDate'" class="small-label">
-                    <strong> {{ comment.user | name }} </strong>
-                    {{ comment.date | date: 'sophisticatedDate' }}
-                </div>
-
-                <div class="comment-actions">
-                    <iqser-circle-button
-                        (action)="deleteComment($event, comment)"
-                        *ngIf="permissionsService.canDeleteComment(comment, file, dossier)"
-                        [iconSize]="10"
-                        [size]="20"
-                        class="pointer"
-                        icon="iqser:trash"
-                    ></iqser-circle-button>
-                </div>
+<ng-container *ngIf="componentContext$ | async as ctx">
+    <div *ngFor="let comment of annotation.comments; trackBy: trackBy" class="comment">
+        <div class="comment-details-wrapper">
+            <div [matTooltipPosition]="'above'" [matTooltip]="comment.date | date: 'exactDate'" class="small-label">
+                <strong> {{ comment.user | name }} </strong>
+                {{ comment.date | date: 'sophisticatedDate' }}
             </div>
 
-            <div>{{ comment.text }}</div>
+            <div class="comment-actions">
+                <iqser-circle-button
+                    (action)="deleteComment($event, comment)"
+                    *ngIf="permissionsService.canDeleteComment(comment, ctx.file, ctx.dossier)"
+                    [iconSize]="10"
+                    [size]="20"
+                    class="pointer"
+                    icon="iqser:trash"
+                ></iqser-circle-button>
+            </div>
         </div>
 
-        <iqser-input-with-action
-            (action)="addComment($event)"
-            *ngIf="permissionsService.canAddComment(file, dossier)"
-            [placeholder]="'comments.add-comment' | translate"
-            autocomplete="off"
-            icon="iqser:collapse"
-            width="full"
-        ></iqser-input-with-action>
-    </ng-container>
+        <div>{{ comment.text }}</div>
+    </div>
+
+    <iqser-input-with-action
+        (action)="addComment($event)"
+        *ngIf="permissionsService.canAddComment(ctx.file, ctx.dossier)"
+        [placeholder]="'comments.add-comment' | translate"
+        autocomplete="off"
+        icon="iqser:collapse"
+        width="full"
+    ></iqser-input-with-action>
+
+    <div (click)="toggleExpandComments($event)" class="all-caps-label pointer hide-comments" translate="comments.hide-comments"></div>
 </ng-container>
-
-<div (click)="toggleExpandComments($event)" class="all-caps-label pointer hide-comments" translate="comments.hide-comments"></div>
-
-<!-- A hack to avoid subscribing in component -->
-<ng-container *ngIf="hiddenComments$ | async"></ng-container>

apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.ts

@@ -1,14 +1,21 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnChanges, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnInit, ViewChild } from '@angular/core';
 import { Dossier, File, IComment } from '@red/domain';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { UserService } from '@services/user.service';
 import { PermissionsService } from '@services/permissions.service';
-import { AutoUnsubscribe, InputWithActionComponent, LoadingService, trackByFactory } from '@iqser/common-ui';
+import { InputWithActionComponent, LoadingService, trackByFactory } from '@iqser/common-ui';
 import { firstValueFrom, Observable } from 'rxjs';
 import { CommentingService } from '../../services/commenting.service';
 import { tap } from 'rxjs/operators';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
 import { ManualRedactionService } from '../../services/manual-redaction.service';
+import { ContextComponent } from '@utils/context.component';
+
+interface CommentsTemplate {
+    dossier: Dossier;
+    file: File;
+    hiddenComments: boolean;
+}
 
 @Component({
     selector: 'redaction-comments',
@@ -16,7 +23,7 @@ import { ManualRedactionService } from '../../services/manual-redaction.service'
     styleUrls: ['./comments.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CommentsComponent extends AutoUnsubscribe implements OnChanges {
+export class CommentsComponent extends ContextComponent<CommentsTemplate> implements OnInit {
     @Input() annotation: AnnotationWrapper;
     readonly trackBy = trackByFactory();
     readonly file$: Observable<File>;
@@ -39,12 +46,18 @@ export class CommentsComponent extends AutoUnsubscribe implements OnChanges {
         this.dossier$ = _stateService.dossier$;
     }
 
-    ngOnChanges() {
+    ngOnInit() {
         this.hiddenComments$ = this._commentingService.isActive$(this.annotation.id).pipe(
             tap(active => {
                 this._hidden = !active;
             }),
         );
+
+        super._initContext({
+            file: this.file$,
+            dossier: this.dossier$,
+            hiddenComments: this.hiddenComments$,
+        });
     }
 
     async addComment(value: string): Promise<void> {

apps/red-ui/src/app/utils/context.component.ts

@@ -0,0 +1,17 @@
+import { combineLatest, Observable, of } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+import { ValuesOf } from '@iqser/common-ui';
+
+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>[]): T {
+        return keys.reduce((acc, key, index) => ({ ...acc, [key]: observables[index] }), {} as T);
+    }
+}