RED-3796: Dossier template stats

apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html

@@ -1,15 +1,47 @@
-<div *ngIf="stats as dossierTemplate" [class.empty]="dossierTemplate.isEmpty" class="dialog">
+<a
+    *ngIf="stats as dossierTemplate"
+    [class.empty]="dossierTemplate.isEmpty"
+    [routerLink]="dossierTemplate.isEmpty ? null : ['..', dossierTemplate.dossierTemplateId]"
+    class="dialog"
+>
     <ng-container *ngIf="!dossierTemplate.isEmpty; else empty">
-        <div class="flex-1">
+        <div class="flex-2">
-            <a [routerLink]="['..', dossierTemplate.dossierTemplateId]" class="heading">{{ dossierTemplate.name }}</a>
+            <div class="heading mb-6">{{ dossierTemplate.name }}</div>
-            {{ dossierTemplate.id }}
+            <div class="stats-subtitle">
+                <div>
+                    <mat-icon svgIcon="red:archive"></mat-icon>
+                    <span
+                        [innerHTML]="
+                            'dossier-template-stats.archived-dossiers' | translate: { count: dossierTemplate.numberOfArchivedDossiers }
+                        "
+                    ></span>
+                </div>
+                <div>
+                    <mat-icon svgIcon="iqser:trash"></mat-icon>
+                    <span
+                        [innerHTML]="
+                            'dossier-template-stats.deleted-dossiers' | translate: { count: dossierTemplate.numberOfDeletedDossiers }
+                        "
+                    ></span>
+                </div>
+                <div>
+                    <mat-icon svgIcon="red:user"></mat-icon>
+                    <span [innerHTML]="'dossier-template-stats.total-people' | translate: { count: dossierTemplate.numberOfPeople }"></span>
+                </div>
+                <div>
+                    <mat-icon svgIcon="iqser:trash"></mat-icon>
+                    <span
+                        [innerHTML]="'dossier-template-stats.analyzed-pages' | translate: { count: dossierTemplate.numberOfPages }"
+                    ></span>
+                </div>
+            </div>
         </div>
         <div class="flex-2">
             <redaction-simple-doughnut-chart
                 [config]="translateChartService.translateDossierStates(dossierTemplate.dossiersChartData, dossierTemplate.id)"
                 [radius]="70"
                 [strokeWidth]="15"
-                [subtitle]="'dossier-template-charts.active-dossiers' | translate: { count: dossierTemplate.numberOfActiveDossiers }"
+                [subtitle]="'dossier-template-stats.active-dossiers' | translate: { count: dossierTemplate.numberOfActiveDossiers }"
                 direction="row"
                 totalType="sum"
             ></redaction-simple-doughnut-chart>
@@ -19,7 +51,7 @@
                 [config]="translateChartService.translateWorkflowStatus(dossierTemplate.documentsChartData)"
                 [radius]="70"
                 [strokeWidth]="15"
-                [subtitle]="'dossier-template-charts.total-documents' | translate"
+                [subtitle]="'dossier-template-stats.total-documents' | translate"
                 direction="row"
                 totalType="sum"
             ></redaction-simple-doughnut-chart>
@@ -42,4 +74,4 @@
             icon="iqser:plus"
         ></iqser-icon-button>
     </ng-template>
-</div>
+</a>

apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.scss

@@ -1,16 +1,12 @@
+@use 'common-mixins';
+
 .dialog {
+    @include common-mixins.clear-a;
     flex-direction: row;
     max-width: unset;
     min-height: unset;
     margin: 0 0 16px 0;
-
+    transition: background-color 0.2s;
-    .heading {
-        color: var(--iqser-accent);
-
-        &:not(:hover) {
-            text-decoration: none;
-        }
-    }
 
     &.empty {
         justify-content: space-between;
@@ -18,7 +14,16 @@
         padding: 24px;
     }
 
-    &:not(.empty) > div {
+    &:not(.empty) {
+        &:hover {
+            background-color: var(--iqser-grey-2);
+
+            .heading {
+                text-decoration: underline;
+            }
+        }
+
+        > div {
             padding: 24px;
             display: flex;
             flex-direction: column;
@@ -29,3 +34,18 @@
             }
         }
     }
+}
+
+.stats-subtitle {
+    flex-direction: column;
+
+    > div {
+        margin-top: 10px;
+    }
+
+    mat-icon {
+        min-height: 14px;
+        min-width: 14px;
+        margin-right: 8px;
+    }
+}

apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html

@@ -3,7 +3,7 @@
         [config]="dossiersChartData$ | async"
         [radius]="80"
         [strokeWidth]="15"
-        [subtitle]="'dossier-template-charts.active-dossiers' | translate: { count: stats.numberOfActiveDossiers }"
+        [subtitle]="'dossier-template-stats.active-dossiers' | translate: { count: stats.numberOfActiveDossiers }"
     ></redaction-simple-doughnut-chart>
 
     <div class="dossier-stats-container">
@@ -30,6 +30,6 @@
         [config]="documentsChartData$ | async"
         [radius]="80"
         [strokeWidth]="15"
-        [subtitle]="'dossier-template-charts.total-documents' | translate"
+        [subtitle]="'dossier-template-stats.total-documents' | translate"
     ></redaction-simple-doughnut-chart>
 </div>

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

@@ -789,10 +789,6 @@
       "title": "{length} {length, plural, one{aktives Dossier} other{aktive Dossiers}}"
     }
   },
-  "dossier-template-charts": {
-    "active-dossiers": "Aktive Dossiers",
-    "total-documents": "Anzahl der Dokumente"
-  },
   "dossier-overview": {
     "approve": "Genehmigen",
     "approve-disabled": "Das Dokument kann erst genehmigt werden, wenn eine Analyse auf Basis der aktuellen Wörterbücher durchgeführt wurde und die Vorschläge bearbeitet wurden.",
@@ -933,6 +929,14 @@
     "valid-from": "",
     "valid-to": ""
   },
+  "dossier-template-stats": {
+    "active-dossiers": "Aktive Dossiers",
+    "analyzed-pages": "",
+    "archived-dossiers": "",
+    "deleted-dossiers": "",
+    "total-documents": "Anzahl der Dokumente",
+    "total-people": ""
+  },
   "dossier-templates-listing": {
     "action": {
       "clone": "",

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

@@ -789,10 +789,6 @@
       "title": "{length} active {length, plural, one{Dossier} other{Dossiers}}"
     }
   },
-  "dossier-template-charts": {
-    "active-dossiers": "Active {count, plural, one{Dossier} other{Dossiers}}",
-    "total-documents": "Total Documents"
-  },
   "dossier-overview": {
     "approve": "Approve",
     "approve-disabled": "File can only be approved once it has been analysed with the latest dictionaries and all suggestions have been processed.",
@@ -933,6 +929,14 @@
     "valid-from": "Valid from: {date}",
     "valid-to": "Valid to: {date}"
   },
+  "dossier-template-stats": {
+    "active-dossiers": "Active {count, plural, one{Dossier} other{Dossiers}}",
+    "analyzed-pages": "<strong>{count}</strong> {count, plural, one{Page} other {Pages}} Analysed",
+    "archived-dossiers": "<strong>{count}</strong> {count, plural, one{Dossier} other {Dossiers}} in Archive",
+    "deleted-dossiers": "<strong>{count}</strong> {count, plural, one{Dossier} other {Dossiers}} in Trash",
+    "total-documents": "Total Documents",
+    "total-people": "<strong>{count}</strong> {count, plural, one{User} other {Users}}"
+  },
   "dossier-templates-listing": {
     "action": {
       "clone": "Clone Template",