From 9ca7b93d2bfaee3f6b57d987ef805a190ef820eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 8 Jan 2021 21:32:06 +0200
Subject: [PATCH] Reset filter button in project listing & overview

---
 .../src/app/common/filter/filter.component.ts  |  8 ++++----
 .../watermark-screen.component.html            |  2 +-
 .../project-listing-screen.component.html      |  5 +++++
 .../project-listing-screen.component.ts        | 18 ++++++++++++++++++
 .../project-overview-screen.component.html     |  5 +++++
 .../project-overview-screen.component.ts       | 18 ++++++++++++++++++
 apps/red-ui/src/assets/i18n/en.json            |  4 ++--
 apps/red-ui/src/assets/styles/red-grid.scss    | 10 ++++++++--
 8 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/apps/red-ui/src/app/common/filter/filter.component.ts b/apps/red-ui/src/app/common/filter/filter.component.ts
index 27ed0ffbc..53a2b300e 100644
--- a/apps/red-ui/src/app/common/filter/filter.component.ts
+++ b/apps/red-ui/src/app/common/filter/filter.component.ts
@@ -49,15 +49,15 @@ export class FilterComponent {
         this.applyFilters();
     }
 
-    activateAllFilters() {
+    public activateAllFilters() {
         this._setAllFilters(true);
     }
 
-    deactivateAllFilters() {
+    public deactivateAllFilters() {
         this._setAllFilters(false);
     }
 
-    get hasActiveFilters(): boolean {
+    public get hasActiveFilters(): boolean {
         for (const filter of this.filters ? this.filters : []) {
             if (filter.checked || filter.indeterminate) {
                 return true;
@@ -66,7 +66,7 @@ export class FilterComponent {
         return false;
     }
 
-    applyFilters() {
+    public applyFilters() {
         this.filtersChanged.emit(this.filters);
     }
 
diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
index 96e8de9d5..b108ac99b 100644
--- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
@@ -40,7 +40,7 @@
                     <textarea
                         redactionHasScrollbar
                         formControlName="text"
-                        [placeholder]="'watermark-screen.placeholder' | translate"
+                        [placeholder]="'watermark-screen.form.text-placeholder' | translate"
                         (mousemove)="triggerChanges()"
                         class="w-full"
                         name="text"
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 359e6707a..62e00abf1 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
@@ -3,18 +3,21 @@
         <div class="filters">
             <div translate="filters.filter-by"></div>
             <redaction-filter
+                #statusFilter
                 (filtersChanged)="filtersChanged()"
                 [filterLabel]="'filters.status'"
                 [filters]="statusFilters"
                 [icon]="'red:status'"
             ></redaction-filter>
             <redaction-filter
+                #peopleFilter
                 (filtersChanged)="filtersChanged()"
                 [filterLabel]="'filters.people'"
                 [filters]="peopleFilters"
                 [icon]="'red:user'"
             ></redaction-filter>
             <redaction-filter
+                #needsWorkFilter
                 (filtersChanged)="filtersChanged()"
                 [filterLabel]="'filters.needs-work'"
                 [filterTemplate]="needsWorkTemplate"
@@ -43,6 +46,8 @@
                 <span class="all-caps-label">
                     {{ 'project-listing.table-header.title' | translate: { length: displayedProjects.length || 0 } }}
                 </span>
+
+                <div class="reset-filters" *ngIf="hasActiveFilters"><span (click)="resetFilters()" translate="reset-filters"></span></div>
             </div>
 
             <div [class.no-data]="noData" class="table-header" redactionSyncWidth="table-item">
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 89b958e6b..1eae42f94 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
@@ -25,6 +25,7 @@ import { StatusSorter } from '../../common/sorters/status-sorter';
 import { Router } from '@angular/router';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { debounce } from '../../utils/debounce';
+import { FilterComponent } from '../../common/filter/filter.component';
 
 @Component({
     selector: 'redaction-project-listing-screen',
@@ -51,6 +52,10 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
     public displayedProjects: ProjectWrapper[] = [];
     private projectAutoUpdateTimer: Subscription;
 
+    @ViewChild('statusFilter') private _statusFilterComponent: FilterComponent;
+    @ViewChild('peopleFilter') private _peopleFilterComponent: FilterComponent;
+    @ViewChild('needsWorkFilter') private _needsWorkFilterComponent: FilterComponent;
+
     constructor(
         public readonly appStateService: AppStateService,
         public readonly userService: UserService,
@@ -90,10 +95,23 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
         this.projectAutoUpdateTimer.unsubscribe();
     }
 
+    public get hasActiveFilters() {
+        return (
+            this._statusFilterComponent?.hasActiveFilters || this._peopleFilterComponent?.hasActiveFilters || this._needsWorkFilterComponent?.hasActiveFilters
+        );
+    }
+
     public get noData() {
         return this.displayedProjects?.length === 0;
     }
 
+    public resetFilters() {
+        this._statusFilterComponent.deactivateAllFilters();
+        this._peopleFilterComponent.deactivateAllFilters();
+        this._needsWorkFilterComponent.deactivateAllFilters();
+        this.filtersChanged();
+    }
+
     private _calculateData() {
         this._computeAllFilters();
         this._filterProjects();
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 ca71f53e8..428a025a6 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
@@ -3,18 +3,21 @@
         <div class="filters">
             <div translate="filters.filter-by"></div>
             <redaction-filter
+                #statusFilter
                 (filtersChanged)="filtersChanged()"
                 [filterLabel]="'filters.status'"
                 [filters]="statusFilters"
                 [icon]="'red:status'"
             ></redaction-filter>
             <redaction-filter
+                #peopleFilter
                 (filtersChanged)="filtersChanged()"
                 [filterLabel]="'filters.assigned-people'"
                 [filters]="peopleFilters"
                 [icon]="'red:user'"
             ></redaction-filter>
             <redaction-filter
+                #needsWorkFilter
                 (filtersChanged)="filtersChanged()"
                 [filterLabel]="'filters.needs-work'"
                 [filterTemplate]="needsWorkTemplate"
@@ -120,6 +123,8 @@
                     </span>
 
                     <redaction-bulk-actions [selectedFileIds]="selectedFileIds" (reload)="bulkActionPerformed()"></redaction-bulk-actions>
+
+                    <div class="reset-filters" *ngIf="hasActiveFilters"><span (click)="resetFilters()" translate="reset-filters"></span></div>
                 </div>
 
                 <div class="table-header" redactionSyncWidth="table-item" [class.no-data]="noData">
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 2876ffa2a..1df08a03c 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
@@ -27,6 +27,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { debounce } from '../../utils/debounce';
 import { download } from '../../utils/file-download-utils';
 import { convertFiles, handleFileDrop } from '../../utils/file-drop-utils';
+import { FilterComponent } from '../../common/filter/filter.component';
 
 @Component({
     selector: 'redaction-project-overview-screen',
@@ -52,6 +53,10 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
     private _projectDetailsComponent: ProjectDetailsComponent;
     private filesAutoUpdateTimer: Subscription;
 
+    @ViewChild('statusFilter') private _statusFilterComponent: FilterComponent;
+    @ViewChild('peopleFilter') private _peopleFilterComponent: FilterComponent;
+    @ViewChild('needsWorkFilter') private _needsWorkFilterComponent: FilterComponent;
+
     constructor(
         public readonly appStateService: AppStateService,
         public readonly userService: UserService,
@@ -136,6 +141,19 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
         this._sortingService.toggleSort('project-overview', $event);
     }
 
+    public get hasActiveFilters() {
+        return (
+            this._statusFilterComponent?.hasActiveFilters || this._peopleFilterComponent?.hasActiveFilters || this._needsWorkFilterComponent?.hasActiveFilters
+        );
+    }
+
+    public resetFilters() {
+        this._statusFilterComponent.deactivateAllFilters();
+        this._peopleFilterComponent.deactivateAllFilters();
+        this._needsWorkFilterComponent.deactivateAllFilters();
+        this.filtersChanged();
+    }
+
     reloadProjects() {
         this.appStateService.getFiles().then(() => {
             this.calculateData();
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 76fae47c0..79b16d29f 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -667,7 +667,6 @@
         "revert-changes": "Revert"
     },
     "watermark-screen": {
-        "placeholder": "Watermark ... ",
         "form": {
             "text-placeholder": "Enter text",
             "opacity": "Opacity",
@@ -695,5 +694,6 @@
     },
     "rule-editor": "Rule Editor",
     "watermark": "Watermark",
-    "pending-changes-guard": "WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes."
+    "pending-changes-guard": "WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.",
+    "reset-filters": "Reset Filters"
 }
diff --git a/apps/red-ui/src/assets/styles/red-grid.scss b/apps/red-ui/src/assets/styles/red-grid.scss
index 1a7a34870..d4441b46c 100644
--- a/apps/red-ui/src/assets/styles/red-grid.scss
+++ b/apps/red-ui/src/assets/styles/red-grid.scss
@@ -25,7 +25,13 @@
         }
     }
 
-    &.justify-end {
-        justify-content: flex-end;
+    .reset-filters {
+        flex: 1;
+        text-align: end;
+        color: $primary;
+
+        span {
+            cursor: pointer;
+        }
     }
 }