Merge pull request #4799 from tsiegleauq/ngrid-filter-predicates

Add Filter predicate for ID
This commit is contained in:
Emanuel Schütze 2019-06-19 11:59:20 +02:00 committed by GitHub
commit d5db8429b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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; private isMobile: boolean;
/**
* Search input value
*/
public inputValue: string;
/** /**
* Most, of not all list views require these * Most, of not all list views require these
*/ */
@ -294,6 +299,45 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
}) })
.create(); .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 // inform listening components about changes in the data source
this.dataSource.onSourceChanged.subscribe(() => { this.dataSource.onSourceChanged.subscribe(() => {
this.dataSourceChange.next(this.dataSource); 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 * @param event the string to search for
*/ */
public searchFilter(event: string): void { public searchFilter(filterValue: string): void {
this.dataSource.setFilter(event, this.ngrid.columnApi.columns); this.inputValue = filterValue;
this.dataSource.syncFilter();
} }
/** /**

View File

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