deleted files count in observable

apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.html

@@ -44,10 +44,8 @@
         <span>{{ 'dossier-overview.dossier-details.dictionary' | translate }} </span>
     </div>
     <div (click)="openEditDossierAttributesDialog(dossier, 'deletedDocuments')" class="link-property">
-        <mat-icon (click)="butonel(dossier)" svgIcon="iqser:trash"></mat-icon>\
-        <ng-container *ngIf="filesService.getDeletedFilesFor(dossier.id) | async as files">
-            <span>{{ files.length }} {{ 'dossier-overview.dossier-details.deleted' | translate }}</span>
-        </ng-container>
+        <mat-icon svgIcon="iqser:trash"></mat-icon>
+        <span>{{ 'dossier-overview.dossier-details.stats.deleted' | translate: { count: deletedFilesCount$ | async } }}</span>
     </div>
 
     <ng-container *ngIf="dossierAttributes?.length">

apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts

@@ -1,10 +1,12 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { AppStateService } from '@state/app-state.service';
-import { Dossier, DossierAttributeWithValue, DossierTemplate, FileStatuses } from '@red/domain';
+import { Dossier, DossierAttributeWithValue, DossierTemplate } from '@red/domain';
 import { DossiersDialogService } from '../../../../services/dossiers-dialog.service';
 import { DossiersService } from '@services/entity-services/dossiers.service';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
 import { FilesService } from '../../../../../../services/entity-services/files.service';
+import { Observable } from 'rxjs';
+import { distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 
 @Component({
     selector: 'redaction-dossier-details-stats',
@@ -13,6 +15,7 @@ import { FilesService } from '../../../../../../services/entity-services/files.s
 })
 export class DossierDetailsStatsComponent {
     attributesExpanded = false;
+    deletedFilesCount$: Observable<number>;
     @Input() dossierAttributes: DossierAttributeWithValue[];
     @Output() readonly openDossierDictionaryDialog = new EventEmitter();
 
@@ -20,9 +23,15 @@ export class DossierDetailsStatsComponent {
         private readonly _appStateService: AppStateService,
         private readonly _dossierTemplatesService: DossierTemplatesService,
         private readonly _dialogService: DossiersDialogService,
-        readonly filesService: FilesService,
+        private readonly _filesService: FilesService,
         readonly dossiersService: DossiersService,
-    ) {}
+    ) {
+        this.deletedFilesCount$ = dossiersService.activeDossier$.pipe(
+            switchMap(dossier => _filesService.getDeletedFilesFor(dossier.id)),
+            map(files => files.length),
+            distinctUntilChanged(),
+        );
+    }
 
     dossierTemplate(dossier: Dossier): DossierTemplate {
         return this._dossierTemplatesService.find(dossier.dossierTemplateId);
@@ -34,7 +43,4 @@ export class DossierDetailsStatsComponent {
             section: section,
         });
     }
-    butonel(dossier: Dossier): void {
-        this.filesService.getDeletedFilesFor(dossier.id).subscribe(res => console.log(res.length));
-    }
 }

apps/red-ui/src/assets/i18n/de.json

@@ -613,13 +613,13 @@
       },
       "description": "Beschreibung",
       "dictionary": "",
-      "deleted": "",
       "stats": {
         "analysed-pages": "{count} Seiten",
         "created-on": "Erstellt am {date}",
         "documents": "{count} Dokumente",
         "due-date": "Geburtstermin",
-        "people": "{count} Benutzer"
+        "people": "{count} Benutzer",
+        "deleted": "{count} "
       }
     },
     "download-file": "Herunterladen",

apps/red-ui/src/assets/i18n/en.json

@@ -678,13 +678,13 @@
       },
       "description": "Description",
       "dictionary": "Dossier Dictionary",
-      "deleted": "deleted files",
       "stats": {
         "analysed-pages": "{count} {count, plural, one{page} other{pages}}",
         "created-on": "Created on {date}",
         "documents": "{count} {count, plural, one{document} other{documents}}",
         "due-date": "Due {date}",
-        "people": "{count} {count, plural, one{user} other{users}}"
+        "people": "{count} {count, plural, one{user} other{users}}",
+        "deleted": "{count} deleted files"
       }
     },
     "download-file": "Download",