Project listing search

apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html

@@ -21,6 +21,12 @@
                 [filters]="needsWorkFilters"
                 [icon]="'red:needs-work'"
             ></redaction-filter>
+            <form [formGroup]="searchForm">
+                <div class="red-input-group">
+                    <input [placeholder]="'project-listing.search' | translate" formControlName="query" name="query" type="text" class="with-icon" />
+                    <mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
+                </div>
+            </form>
         </div>
         <redaction-icon-button
             *ngIf="userService.isManager(user)"

apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts

@@ -23,6 +23,8 @@ import { TranslateChartService } from '../../utils/translate-chart.service';
 import { RedactionFilterSorter } from '../../common/sorters/redaction-filter-sorter';
 import { StatusSorter } from '../../common/sorters/status-sorter';
 import { Router } from '@angular/router';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { debounce } from '../../utils/debounce';
 
 @Component({
     selector: 'redaction-project-listing-screen',
@@ -33,6 +35,8 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
     public projectsChartData: DoughnutChartConfig[] = [];
     public documentsChartData: DoughnutChartConfig[] = [];
 
+    public searchForm: FormGroup;
+
     public statusFilters: FilterModel[];
     public peopleFilters: FilterModel[];
     public needsWorkFilters: FilterModel[];
@@ -55,8 +59,15 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
         private readonly _translateService: TranslateService,
         private readonly _router: Router,
         public readonly sortingService: SortingService,
-        public readonly translateChartService: TranslateChartService
-    ) {}
+        public readonly translateChartService: TranslateChartService,
+        private readonly _formBuilder: FormBuilder
+    ) {
+        this.searchForm = this._formBuilder.group({
+            query: ['']
+        });
+
+        this.searchForm.valueChanges.subscribe((value) => this._executeSearch(value));
+    }
 
     public ngOnInit(): void {
         this.appStateService.reset();
@@ -237,19 +248,30 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
         this._filterProjects();
     }
 
-    private _filterProjects() {
+    private get _filteredProjects(): ProjectWrapper[] {
         const filters = [
             { values: this.statusFilters, checker: projectStatusChecker },
             { values: this.peopleFilters, checker: projectMemberChecker },
             { values: this.needsWorkFilters, checker: annotationFilterChecker, matchAll: true, checkerArgs: this.permissionsService }
         ];
+        return getFilteredEntities(this.appStateService.allProjects, filters);
+    }
+
+    private _filterProjects() {
         this.detailsContainerFilters = {
             statusFilters: this.statusFilters.map((f) => ({ ...f }))
         };
-        this.displayedProjects = getFilteredEntities(this.appStateService.allProjects, filters);
+        this.displayedProjects = this._filteredProjects.filter((project) =>
+            project.name.toLowerCase().includes(this.searchForm.get('query').value.toLowerCase())
+        );
         this._changeDetectorRef.detectChanges();
     }
 
+    @debounce(200)
+    private _executeSearch(value: { query: string }) {
+        this.displayedProjects = this._filteredProjects.filter((project) => project.name.toLowerCase().includes(value.query.toLowerCase()));
+    }
+
     openEditProjectDialog($event: MouseEvent, project: Project) {
         this._dialogService.openEditProjectDialog($event, project, () => {
             this._calculateData();

apps/red-ui/src/assets/i18n/en.json

@@ -69,6 +69,7 @@
         "action": "Download Redaction Report"
     },
     "project-listing": {
+        "search": "Project name...",
         "reanalyse": {
             "action": "Reanalyse entire project"
         },