Merge pull request #4160 from MaximilianKrambach/searchHistory

search History
This commit is contained in:
Emanuel Schütze 2019-01-22 12:03:16 +01:00 committed by GitHub
commit e6e0ef7e61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 65 additions and 38 deletions

View File

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

View File

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

View File

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

View File

@ -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;