Reset filter button in project listing & overview

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

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"

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

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

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

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

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"
 }

apps/red-ui/src/assets/styles/red-grid.scss

@@ -25,7 +25,13 @@
         }
     }
 
-    &.justify-end {
+    .reset-filters {
-        justify-content: flex-end;
+        flex: 1;
+        text-align: end;
+        color: $primary;
+
+        span {
+            cursor: pointer;
+        }
     }
 }