Merge pull request #4160 from MaximilianKrambach/searchHistory

search History

client/src/app/shared/components/os-sort-filter-bar/os-sort-filter-bar.component.html

@@ -4,27 +4,23 @@
         <span>&nbsp;{{ filterService.totalCount }}</span>
     </div>
     <div class="current-filters" *ngIf="filterService && filterService.activeFilterCount">
-            <div>
-                <span translate>Active filters</span>:&nbsp;
-            </div>
-            <div>
-                <button mat-button (click)="filterService.clearAllFilters()">
-                    <mat-icon inline>cancel</mat-icon>
-                    <span translate>Clear all</span>
-                </button>
-            </div>
-            <div *ngFor="let filter of filterService.filterDefinitions">
-                <button mat-button *ngIf="filter.count" (click)="filterService.clearFilter(filter)">
-                    <mat-icon inline>close</mat-icon>
-                    <span>{{ filterService.getFilterName(filter) | translate }}</span>
-                </button>
-            </div>
+        <div><span translate>Active filters</span>:&nbsp;</div>
+        <div>
+            <button mat-button (click)="filterService.clearAllFilters()">
+                <mat-icon inline>cancel</mat-icon>
+                <span translate>Clear all</span>
+            </button>
+        </div>
+        <div *ngFor="let filter of filterService.filterDefinitions">
+            <button mat-button *ngIf="filter.count" (click)="filterService.clearFilter(filter)">
+                <mat-icon inline>close</mat-icon>
+                <span>{{ filterService.getFilterName(filter) | translate }}</span>
+            </button>
+        </div>
     </div>
     <div>
         <button mat-button *ngIf="hasFilters" (click)="filterMenu.opened ? filterMenu.close() : filterMenu.open()">
-            <span *ngIf="!filterService.activeFilterCount" class="upper" translate>
-                Filter
-            </span>
+            <span *ngIf="!filterService.activeFilterCount" class="upper" translate> Filter </span>
             <span *ngIf="filterService.activeFilterCount">
                 {{ filterService.activeFilterCount }}&nbsp;
                 <span *ngIf="filterService.activeFilterCount === 1" class="upper" translate>Filter</span>
@@ -37,14 +33,13 @@
         <button mat-button *ngIf="!vp.isMobile && hasSorting" [matMenuTriggerFor]="menu">
             <span class="upper" translate>Sort</span>
         </button>
-        <input
-            matInput
-            *ngIf="isSearchBar"
-            (keyup)="applySearch($event, $event.target.value)"
-            osAutofocus
-            placeholder="{{ translate.instant('Search') }}"
-            [ngClass]="vp.isMobile ? 'vp' : ''"
-        />
+        <mat-form-field *ngIf="isSearchBar">
+            <input
+                matInput
+                (keyup)="applySearch($event, $event.target.value)"
+                placeholder="{{ translate.instant('Search') }}"
+            />
+        </mat-form-field>
         <button mat-button (click)="toggleSearchBar()">
             <mat-icon>{{ isSearchBar ? 'keyboard_arrow_right' : 'search' }}</mat-icon>
         </button>

client/src/app/site/history/components/history-list/history-list.component.html

@@ -8,6 +8,12 @@
     </div>
 </os-head-bar>
 
+<div class="custom-table-header">
+    <mat-form-field>
+        <input matInput (keyup)="applySearch($event.target.value)" placeholder="{{ 'Search' | translate }}" />
+        <mat-icon matSuffix>search</mat-icon>
+    </mat-form-field>
+</div>
 <mat-table class="os-header-listview-table on-transition-fade" [dataSource]="dataSource" matSort>
     <!-- Timestamp -->
     <ng-container matColumnDef="time">

client/src/app/site/history/components/history-list/history-list.component.ts

@@ -48,6 +48,7 @@ export class HistoryListComponent extends ListViewBaseComponent<ViewHistory> imp
     public ngOnInit(): void {
         super.setTitle('History');
         this.initTable();
+        this.setFilters();
 
         this.repo.getViewModelListObservable().subscribe(history => {
             this.sortAndPublish(history);
@@ -115,7 +116,7 @@ export class HistoryListComponent extends ListViewBaseComponent<ViewHistory> imp
      *
      * @param information history information string
      */
-    public parseInformation(information: string): void {
+    public parseInformation(information: string): string {
         if (information.length) {
             const base_string = this.translate.instant(information[0]);
             let argument_string;
@@ -125,4 +126,38 @@ export class HistoryListComponent extends ListViewBaseComponent<ViewHistory> imp
             return base_string.replace(/\\{arg1\\}/g, argument_string);
         }
     }
+
+    /**
+     * Handles the search fields' inputs
+     *
+     * @param value: a filter string. Matching is case-insensitive
+     */
+    public applySearch(value: string): void {
+        this.dataSource.filter = value;
+    }
+
+    /**
+     * Overwrites the dataSource's string filter with a more advanced option
+     * using the display methods of this class.
+     */
+    private setFilters(): void {
+        this.dataSource.filterPredicate = (data, filter) => {
+            filter = filter.toLowerCase();
+            if (
+                this.getElementInfo(data)
+                    .toLowerCase()
+                    .indexOf(filter) >= 0
+            ) {
+                return true;
+            }
+            if (data.user.full_name.toLowerCase().indexOf(filter) >= 0) {
+                return true;
+            }
+            return (
+                this.parseInformation(data.information)
+                    .toLowerCase()
+                    .indexOf(filter) >= 0
+            );
+        };
+    }
 }

client/src/styles.scss

@@ -205,18 +205,10 @@ mat-card {
         position: relative;
         max-width: 400px;
         z-index: 2;
-        background-color: #eee;
         padding-right: 5px;
         margin-right: 0px;
     }
 
-    input.vp {
-        margin-left: -100%;
-        max-width: 100%;
-        animation-name: fadeIn;
-        animation-duration: 0.3s;
-    }
-
     mat-icon {
         vertical-align: text-bottom;
     }
@@ -411,7 +403,7 @@ button.mat-menu-item.selected {
         margin: 0 25px;
     }
     .content-container h1 {
-        font-size: 30px
+        font-size: 30px;
     }
 }
 /* small */
@@ -420,11 +412,10 @@ button.mat-menu-item.selected {
         margin: 0 15px;
     }
     .content-container h1 {
-        font-size: 30px
+        font-size: 30px;
     }
 }
 
-
 /** more helper classes **/
 .center {
     text-align: center;