Add Filter predicate for ID

All List View Tables can get custom filter predicates.
Per default, they now filter their primitive content
as well as their ID
This commit is contained in:
Sean Engelhardt 2019-06-19 11:38:14 +02:00
parent f8fabbabd1
commit afda3e03ec
2 changed files with 65 additions and 10 deletions

View File

@ -186,6 +186,11 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
*/
private isMobile: boolean;
/**
* Search input value
*/
public inputValue: string;
/**
* Most, of not all list views require these
*/
@ -294,6 +299,45 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
})
.create();
const filterPredicate = (item: any): boolean => {
if (!this.inputValue) {
return true;
}
if (this.inputValue) {
const trimmedInput = this.inputValue.trim().toLowerCase();
const idString = '' + item.id;
const foundId =
idString
.trim()
.toLowerCase()
.indexOf(trimmedInput) !== -1;
if (foundId) {
return true;
}
for (const column of this.columns) {
const col = this.dataSource.hostGrid.columnApi.findColumn(column.prop);
const value = col.getValue(item);
if (!!value) {
const valueAsString = '' + value;
const foundValue =
valueAsString
.trim()
.toLocaleLowerCase()
.indexOf(trimmedInput) !== -1;
if (foundValue) {
return true;
}
}
}
}
};
this.dataSource.setFilter(filterPredicate);
// inform listening components about changes in the data source
this.dataSource.onSourceChanged.subscribe(() => {
this.dataSourceChange.next(this.dataSource);
@ -341,8 +385,9 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
*
* @param event the string to search for
*/
public searchFilter(event: string): void {
this.dataSource.setFilter(event, this.ngrid.columnApi.columns);
public searchFilter(filterValue: string): void {
this.inputValue = filterValue;
this.dataSource.syncFilter();
}
/**

View File

@ -88,10 +88,16 @@
</div>
<!-- Submitters -->
<div class="submitters-line ellipsis-overflow" *ngIf="motion.submitters.length">
<span translate>by</span> {{ motion.submitters }}
<div class="submitters-line ellipsis-overflow">
<span *ngIf="motion.submitters.length">
<span translate>by</span>
{{ motion.submitters }}
</span>
<span *ngIf="showSequential">
<span *ngIf="motion.submitters.length">
&middot;
</span>
<span translate>Sequential number</span>
{{ motion.id }}
</span>
@ -104,12 +110,14 @@
<div class="fill">
<div class="innerTable state-column">
<div class="ellipsis-overflow" *ngIf="motion.category">
<os-icon-container icon="device_hub">{{ motion.category.prefixedNameWithParents }}</os-icon-container>
<os-icon-container icon="device_hub">
{{ motion.category.prefixedNameWithParents }}
</os-icon-container>
</div>
<div class="ellipsis-overflow spacer-top-5" *ngIf="motion.motion_block">
<os-icon-container icon="widgets">{{
motion.motion_block.title
}}</os-icon-container>
<os-icon-container icon="widgets">
{{ motion.motion_block.title }}
</os-icon-container>
</div>
<div class="ellipsis-overflow spacer-top-5" *ngIf="motion.tags && motion.tags.length">
<os-icon-container icon="local_offer">
@ -153,7 +161,9 @@
<div class="column-state innerTable">
<!-- Category -->
<div class="ellipsis-overflow" *ngIf="motion.category">
<os-icon-container icon="device_hub">{{ motion.category.prefixedNameWithParents }}</os-icon-container>
<os-icon-container icon="device_hub">
{{ motion.category.prefixedNameWithParents }}
</os-icon-container>
</div>
<!-- Motion Block -->