From f27b68a951af8ecbd61c54d241284628ad2dbd14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 4 May 2022 19:45:12 +0300
Subject: [PATCH] RED-3796: Dossier template stats

---
 .../template-stats.component.html             | 46 ++++++++++++++---
 .../template-stats.component.scss             | 50 +++++++++++++------
 .../dossiers-listing-details.component.html   |  4 +-
 apps/red-ui/src/assets/i18n/de.json           | 12 +++--
 apps/red-ui/src/assets/i18n/en.json           | 12 +++--
 5 files changed, 92 insertions(+), 32 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html b/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html
index efc0d7ac0..1536fe05b 100644
--- a/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html
+++ b/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">
-            <a [routerLink]="['..', dossierTemplate.dossierTemplateId]" class="heading">{{ dossierTemplate.name }}</a>
-            {{ dossierTemplate.id }}
+        <div class="flex-2">
+            <div class="heading mb-6">{{ dossierTemplate.name }}</div>
+            <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>
diff --git a/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.scss b/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.scss
index 18acdf1c2..6f4fc35f8 100644
--- a/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.scss
+++ b/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;
-
-    .heading {
-        color: var(--iqser-accent);
-
-        &:not(:hover) {
-            text-decoration: none;
-        }
-    }
+    transition: background-color 0.2s;
 
     &.empty {
         justify-content: space-between;
@@ -18,14 +14,38 @@
         padding: 24px;
     }
 
-    &:not(.empty) > div {
-        padding: 24px;
-        display: flex;
-        flex-direction: column;
+    &:not(.empty) {
+        &:hover {
+            background-color: var(--iqser-grey-2);
 
-        &:not(:first-child) {
-            justify-content: center;
-            border-left: 1px solid var(--iqser-separator);
+            .heading {
+                text-decoration: underline;
+            }
+        }
+
+        > div {
+            padding: 24px;
+            display: flex;
+            flex-direction: column;
+
+            &:not(:first-child) {
+                justify-content: center;
+                border-left: 1px solid var(--iqser-separator);
+            }
         }
     }
 }
+
+.stats-subtitle {
+    flex-direction: column;
+
+    > div {
+        margin-top: 10px;
+    }
+
+    mat-icon {
+        min-height: 14px;
+        min-width: 14px;
+        margin-right: 8px;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html b/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html
index 38b884779..65ece10d7 100644
--- a/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html
+++ b/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>
diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json
index bbedce60f..ed05f1c84 100644
--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/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": "",
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index e7cb7e021..7bb13a438 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/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",