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

client/src/app/shared/components/list-view-table/list-view-table.component.ts

@@ -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 {
+    public searchFilter(filterValue: string): void {
-        this.dataSource.setFilter(event, this.ngrid.columnApi.columns);
+        this.inputValue = filterValue;
+        this.dataSource.syncFilter();
     }
 
     /**

client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html

@@ -88,10 +88,16 @@
                 </div>
 
                 <!-- 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">
-                        &middot;
+                        <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">{{
+                                    <os-icon-container icon="widgets">
-                                        motion.motion_block.title
+                                        {{ motion.motion_block.title }}
-                                    }}</os-icon-container>
+                                    </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 -->