From 506cc9ddfe6348b1da8a9b04a575ef761dd0cb2f Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo@devplant.ro>
Date: Sun, 8 Nov 2020 22:52:21 +0200
Subject: [PATCH] made filters pretty

---
 .../src/app/common/filter/utils/filter-utils.ts  | 16 ++++++++++++++--
 .../annotation-icon.component.scss               |  4 ++--
 .../project-listing-screen.component.html        | 11 +++++++++++
 .../project-listing-screen.component.ts          |  6 +++---
 .../project-details.component.html               |  2 +-
 .../project-overview-screen.component.html       | 11 +++++++++++
 .../project-overview-screen.component.ts         |  6 +++---
 apps/red-ui/src/assets/i18n/en.json              | 12 ++++++------
 8 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/apps/red-ui/src/app/common/filter/utils/filter-utils.ts b/apps/red-ui/src/app/common/filter/utils/filter-utils.ts
index 2f6add9ad..36740ae65 100644
--- a/apps/red-ui/src/app/common/filter/utils/filter-utils.ts
+++ b/apps/red-ui/src/app/common/filter/utils/filter-utils.ts
@@ -52,8 +52,20 @@ export const keyChecker = (key: string) => (entity: any, filter: FilterModel) =>
     entity[key] === filter.key;
 
 export const annotationFilterChecker = (f: FileStatusWrapper, filter: FilterModel) => {
-    const getter = 'has' + filter.key[0].toUpperCase() + filter.key.slice(1);
-    return f[getter];
+    switch (filter.key) {
+        case 'suggestion': {
+            return f.hasRequests;
+        }
+        case 'redaction': {
+            return f.hasRedactions;
+        }
+        case 'hint': {
+            return f.hasHints;
+        }
+        case 'none': {
+            return f.hasNone;
+        }
+    }
 };
 
 export const projectStatusChecker = (pw: ProjectWrapper, filter: FilterModel) =>
diff --git a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.scss b/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.scss
index 11ce96820..a04e54e21 100644
--- a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.scss
+++ b/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.scss
@@ -16,10 +16,10 @@
 }
 
 .request {
-    transform: rotate(45deg);
+    transform: scale(0.8) rotate(45deg);
 
     span {
-        transform: rotate(-45deg);
+        transform: scale(1.6) rotate(-45deg);
     }
 }
 
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
index 3cac4f300..b1eeb4ef4 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
@@ -26,6 +26,7 @@
             <redaction-filter
                 (filtersChanged)="filtersChanged()"
                 [filterLabel]="'filters.needs-work'"
+                [filterTemplate]="needsWorkTemplate"
                 [filters]="needsWorkFilters"
                 [hasArrow]="false"
                 [icon]="'red:needs-work'"
@@ -243,3 +244,13 @@
     *ngIf="!appStateService.hasProjects"
     (addProjectRequest)="openAddProjectDialog()"
 ></redaction-project-listing-empty>
+
+<ng-template #needsWorkTemplate let-filter="filter">
+    <ng-container>
+        <redaction-annotation-icon
+            *ngIf="filter.key !== 'none'"
+            [typeValue]="appStateService.getDictionaryTypeValue(filter.key)"
+        ></redaction-annotation-icon>
+        {{ filter.label | translate }}
+    </ng-container>
+</ng-template>
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
index 02259e860..4a6fa89eb 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
@@ -168,9 +168,9 @@ export class ProjectListingScreenComponent implements OnInit {
 
             // Needs work
             entry.files.forEach((file) => {
-                if (file.hasHints) allDistinctNeedsWork.add('hints');
-                if (file.hasRedactions) allDistinctNeedsWork.add('redactions');
-                if (file.hasRequests) allDistinctNeedsWork.add('requests');
+                if (file.hasHints) allDistinctNeedsWork.add('hint');
+                if (file.hasRedactions) allDistinctNeedsWork.add('redaction');
+                if (file.hasRequests) allDistinctNeedsWork.add('suggestion');
                 if (file.hasNone) allDistinctNeedsWork.add('none');
             });
         });
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
index 3402ba452..6544632d8 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
@@ -78,7 +78,7 @@
         (click)="toggleFilter('needsWorkFilters', filter.key)"
     >
         <redaction-annotation-icon
-            [typeValue]="appStateService.getDictionaryTypeValue(filter.key.slice(0, -1))"
+            [typeValue]="appStateService.getDictionaryTypeValue(filter.key)"
         ></redaction-annotation-icon>
         {{ 'project-overview.legend.' + filter.key | translate }}
     </div>
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
index d4fbdbce5..45d685900 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
@@ -23,6 +23,7 @@
             <redaction-filter
                 (filtersChanged)="filtersChanged()"
                 [filterLabel]="'filters.needs-work'"
+                [filterTemplate]="needsWorkTemplate"
                 [filters]="needsWorkFilters"
                 [hasArrow]="false"
                 [icon]="'red:needs-work'"
@@ -361,3 +362,13 @@
         </div>
     </div>
 </section>
+
+<ng-template #needsWorkTemplate let-filter="filter">
+    <ng-container>
+        <redaction-annotation-icon
+            *ngIf="filter.key !== 'none'"
+            [typeValue]="appStateService.getDictionaryTypeValue(filter.key)"
+        ></redaction-annotation-icon>
+        {{ filter.label | translate }}
+    </ng-container>
+</ng-template>
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
index cd5a44331..31d161333 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
@@ -283,9 +283,9 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
 
         // Needs work
         this.appStateService.activeProject.files.forEach((file) => {
-            if (file.hasHints) allDistinctNeedsWork.add('hints');
-            if (file.hasRedactions) allDistinctNeedsWork.add('redactions');
-            if (file.hasRequests) allDistinctNeedsWork.add('requests');
+            if (file.hasHints) allDistinctNeedsWork.add('hint');
+            if (file.hasRedactions) allDistinctNeedsWork.add('redaction');
+            if (file.hasRequests) allDistinctNeedsWork.add('suggestion');
             if (file.hasNone) allDistinctNeedsWork.add('none');
         });
 
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 83d243b14..ab42f3dff 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -240,9 +240,9 @@
         "upload-document": "Upload Document",
         "no-project": "Requested project: {{projectId}} does not exist! <a href='/ui/projects'>Back to Project Listing. <a/>",
         "legend": {
-            "hints": "Hints only",
-            "redactions": "Redacted",
-            "requests": "Redaction requests"
+            "hint": "Hints only",
+            "redaction": "Redacted",
+            "suggestion": "Suggested Redaction"
         }
     },
     "file-preview": {
@@ -308,9 +308,9 @@
     "content": "Content",
     "page": "Page",
     "filter": {
-        "hints": "Hints",
-        "redactions": "Redactions",
-        "requests": "Requests",
+        "hint": "Hints only",
+        "redaction": "Redacted",
+        "suggestion": "Suggested Redaction",
         "none": "No Annotations"
     },
     "annotation-filter": {