made filters pretty

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);
+    switch (filter.key) {
-    return f[getter];
+        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) =>

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);
     }
 }
 

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>

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.hasHints) allDistinctNeedsWork.add('hint');
-                if (file.hasRedactions) allDistinctNeedsWork.add('redactions');
+                if (file.hasRedactions) allDistinctNeedsWork.add('redaction');
-                if (file.hasRequests) allDistinctNeedsWork.add('requests');
+                if (file.hasRequests) allDistinctNeedsWork.add('suggestion');
                 if (file.hasNone) allDistinctNeedsWork.add('none');
             });
         });

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>

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>

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.hasHints) allDistinctNeedsWork.add('hint');
-            if (file.hasRedactions) allDistinctNeedsWork.add('redactions');
+            if (file.hasRedactions) allDistinctNeedsWork.add('redaction');
-            if (file.hasRequests) allDistinctNeedsWork.add('requests');
+            if (file.hasRequests) allDistinctNeedsWork.add('suggestion');
             if (file.hasNone) allDistinctNeedsWork.add('none');
         });
 

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",
+            "hint": "Hints only",
-            "redactions": "Redacted",
+            "redaction": "Redacted",
-            "requests": "Redaction requests"
+            "suggestion": "Suggested Redaction"
         }
     },
     "file-preview": {
@@ -308,9 +308,9 @@
     "content": "Content",
     "page": "Page",
     "filter": {
-        "hints": "Hints",
+        "hint": "Hints only",
-        "redactions": "Redactions",
+        "redaction": "Redacted",
-        "requests": "Requests",
+        "suggestion": "Suggested Redaction",
         "none": "No Annotations"
     },
     "annotation-filter": {