search History

This commit is contained in:
Maximilian Krambach 2019-01-21 11:44:08 +01:00 committed by Emanuel Schütze
parent 20bb92466b
commit 7f68fef7ad
4 changed files with 65 additions and 38 deletions

View File

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

View File

@ -8,6 +8,12 @@
</div> </div>
</os-head-bar> </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> <mat-table class="os-header-listview-table on-transition-fade" [dataSource]="dataSource" matSort>
<!-- Timestamp --> <!-- Timestamp -->
<ng-container matColumnDef="time"> <ng-container matColumnDef="time">

View File

@ -48,6 +48,7 @@ export class HistoryListComponent extends ListViewBaseComponent<ViewHistory> imp
public ngOnInit(): void { public ngOnInit(): void {
super.setTitle('History'); super.setTitle('History');
this.initTable(); this.initTable();
this.setFilters();
this.repo.getViewModelListObservable().subscribe(history => { this.repo.getViewModelListObservable().subscribe(history => {
this.sortAndPublish(history); this.sortAndPublish(history);
@ -115,7 +116,7 @@ export class HistoryListComponent extends ListViewBaseComponent<ViewHistory> imp
* *
* @param information history information string * @param information history information string
*/ */
public parseInformation(information: string): void { public parseInformation(information: string): string {
if (information.length) { if (information.length) {
const base_string = this.translate.instant(information[0]); const base_string = this.translate.instant(information[0]);
let argument_string; let argument_string;
@ -125,4 +126,38 @@ export class HistoryListComponent extends ListViewBaseComponent<ViewHistory> imp
return base_string.replace(/\\{arg1\\}/g, argument_string); 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
);
};
}
} }

View File

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