made filters pretty

2020-11-08 22:52:21 +02:00 · 2020-11-08 22:52:21 +02:00 · 506cc9ddfe
commit 506cc9ddfe
parent d23c50b0cc
8 changed files with 51 additions and 17 deletions
--- 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) =>
--- 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);
    }
 }

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

--- 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": {