search History
This commit is contained in:
parent
20bb92466b
commit
7f68fef7ad
@ -4,27 +4,23 @@
|
||||
<span> {{ filterService.totalCount }}</span>
|
||||
</div>
|
||||
<div class="current-filters" *ngIf="filterService && filterService.activeFilterCount">
|
||||
<div>
|
||||
<span translate>Active filters</span>:
|
||||
</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>: </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 }}
|
||||
<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>
|
||||
|
@ -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">
|
||||
|
@ -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
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user