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:
parent
f8fabbabd1
commit
afda3e03ec
@ -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();
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -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">
|
||||
·
|
||||
</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 -->
|
||||
|
Loading…
Reference in New Issue
Block a user