Entity store filter selection

package.json

@@ -100,6 +100,7 @@
     "ol": "^5.3.0",
     "proj4": "^2.5.0",
     "rxjs": "^6.4.0",
+    "scroll-into-view-if-needed": "^2.2.20",
     "stream": "^0.0.2",
     "ts-md5": "^1.2.4",
     "tslib": "^1.9.3",

packages/common/package.json

@@ -19,6 +19,7 @@
     "@angular/material": "^7.3.3",
     "@igo2/core": "^1.0.0",
     "@igo2/utils": "^1.0.0",
+    "scroll-into-view-if-needed": "^2.2.20",
     "typy": "^2.0.1"
   }
 }

packages/common/src/lib/entity/entity-selector/entity-selector.component.html

@@ -5,11 +5,11 @@
     [multiple]="multi"
     [placeholder]="placeholder"
     (selectionChange)="onSelectionChange($event)">
-    <mat-option *ngIf="emptyText !== undefined">{{emptyText}}</mat-option>
+    <mat-option *ngIf="emptyText !== undefined && multi === false" [value]="emptyValue">{{emptyText}}</mat-option>
     <mat-option *ngIf="multi === true" [value]="multiSelectValue">{{multiText$ | async}}</mat-option>
-    <ng-template ngFor let-entity [ngForOf]="store.view.all$() | async">
-      <mat-option [value]="entity">
-        {{titleAccessor(entity)}}
+    <ng-template ngFor let-record [ngForOf]="store.stateView.all$() | async">
+      <mat-option [value]="record.entity">
+        {{titleAccessor(record.entity)}}
       </mat-option>
     </ng-template>
   </mat-select>

packages/common/src/lib/entity/entity-selector/entity-selector.component.ts

@@ -28,16 +28,18 @@ export class EntitySelectorComponent implements OnInit, OnDestroy {
    * The selected entity
    * @internal
    */
-  selected$ = new BehaviorSubject<object>(undefined);
+  readonly selected$ = new BehaviorSubject<object>(undefined);
 
   /**
    * The current multi select option text
    * @internal
    */
-  multiText$ = new BehaviorSubject<string>(undefined);
+  readonly multiText$ = new BehaviorSubject<string>(undefined);
 
   readonly multiSelectValue = {id: 'IGO_MULTI_SELECT'};
 
+  readonly emptyValue = {id: 'IGO_EMPTY_SELECT'};
+
   /**
    * Subscription to the selected entity
    */
@@ -139,6 +141,7 @@ export class EntitySelectorComponent implements OnInit, OnDestroy {
       }
     }
 
+    entities = entities.filter((entity: object) => entity !== this.emptyValue);
     if (entities.length === 0) {
       this.store.state.updateAll({selected: false});
     } else {

packages/common/src/lib/entity/entity-table/entity-table-row.directive.ts

@@ -8,6 +8,8 @@ import {
   HostListener
 } from '@angular/core';
 
+import scrollIntoView from 'scroll-into-view-if-needed';
+
 import { EntityTableScrollBehavior } from '../shared/entity.enums';
 
 /**
@@ -41,8 +43,7 @@ export class EntityTableRowDirective {
   /**
    * Whether the selected row should be highlighted
    */
-  @Input()
-  highlightSelection: boolean = true;
+  @Input() highlightSelection: boolean = true;
 
   /**
    * Whether a row is selected
@@ -109,8 +110,8 @@ export class EntityTableRowDirective {
    */
   private scroll() {
     if (this._selected === true) {
-      this.el.nativeElement.scrollIntoView({
-        behavior: this.scrollBehavior,
+      scrollIntoView(this.el.nativeElement, {
+        scrollMode: 'if-needed',
         block: 'center',
         inline: 'center'
       });

packages/common/src/lib/entity/entity-table/entity-table.component.html

@@ -4,6 +4,7 @@
     matSort
     [ngClass]="getTableClass()"
     [dataSource]="dataSource"
+    [trackBy]="getTrackByFunction()"
     (matSortChange)="onSort($event)">
 
     <ng-container matColumnDef="selectionCheckbox" class="mat-cell-checkbox">
@@ -17,10 +18,10 @@
           </ng-container>
         </ng-container>
       </th>
-      <td mat-cell *matCellDef="let entity">
+      <td mat-cell *matCellDef="let record">
         <mat-checkbox (click)="$event.stopPropagation()"
-                      (change)="onToggleRow($event.checked, entity)"
-                      [checked]="rowIsSelected(entity)">
+                      (change)="onToggleRow($event.checked, record)"
+                      [checked]="rowIsSelected(record)">
         </mat-checkbox>
       </td>
     </ng-container>
@@ -40,45 +41,45 @@
 
       <ng-container *ngIf="getColumnRenderer(column) as columnRenderer">
         <ng-container *ngIf="columnRenderer === entityTableColumnRenderer.Default">
-            <td mat-cell *matCellDef="let entity" class="mat-cell-text"
-              [ngClass]="getCellClass(entity, column)">
-              {{getValue(entity, column)}}
+            <td mat-cell *matCellDef="let record" class="mat-cell-text"
+              [ngClass]="getCellClass(record, column)">
+              {{getValue(record, column)}}
             </td>
           </ng-container>
           <ng-container *ngIf="columnRenderer === entityTableColumnRenderer.HTML">
-            <td mat-cell *matCellDef="let entity" class="mat-cell-text"
-              [ngClass]="getCellClass(entity, column)"
-              [innerHTML]="getValue(entity, column)">
+            <td mat-cell *matCellDef="let record" class="mat-cell-text"
+              [ngClass]="getCellClass(record, column)"
+              [innerHTML]="getValue(record, column)">
             </td>
           </ng-container>
           <ng-container *ngIf="columnRenderer === entityTableColumnRenderer.UnsanitizedHTML">
-              <td mat-cell *matCellDef="let entity" class="mat-cell-text"
-                [ngClass]="getCellClass(entity, column)"
-                [innerHTML]="getValue(entity, column) | sanitizeHtml">
+              <td mat-cell *matCellDef="let record" class="mat-cell-text"
+                [ngClass]="getCellClass(record, column)"
+                [innerHTML]="getValue(record, column) | sanitizeHtml">
               </td>
             </ng-container>
           <ng-container *ngIf="columnRenderer === entityTableColumnRenderer.Icon">
-            <td mat-cell *matCellDef="let entity" class="mat-cell-text"
-              [ngClass]="getCellClass(entity, column)">
-              <mat-icon svgIcon="{{getValue(entity, column)}}"></mat-icon>
+            <td mat-cell *matCellDef="let record" class="mat-cell-text"
+              [ngClass]="getCellClass(record, column)">
+              <mat-icon svgIcon="{{getValue(record, column)}}"></mat-icon>
             </td>
           </ng-container>
           <ng-container *ngIf="columnRenderer === entityTableColumnRenderer.ButtonGroup">
-            <td mat-cell *matCellDef="let entity" class="mat-cell-text"
-              [ngClass]="getCellClass(entity, column)">
-              <span *ngFor="let button of getValue(entity, column)">
+            <td mat-cell *matCellDef="let record" class="mat-cell-text"
+              [ngClass]="getCellClass(record, column)">
+              <span *ngFor="let button of getValue(record, column)">
                 <button *ngIf="button.style === 'mat-icon-button'"
                   igoStopPropagation
                   mat-icon-button
                   [color]="button.color"
-                  (click)="onButtonClick(button.click, entity)">
+                  (click)="onButtonClick(button.click, record)">
                   <mat-icon svgIcon="{{button.icon}}"></mat-icon>
                 </button>
                 <button *ngIf="button.style !== 'mat-icon-button'"
                   igoStopPropagation
                   mat-mini-fab
                   [color]="button.color"
-                  (click)="onButtonClick(button.click, entity)">
+                  (click)="onButtonClick(button.click, record)">
                   <mat-icon svgIcon="{{button.icon}}"></mat-icon>
                 </button>
               </span>
@@ -95,13 +96,13 @@
     <tr
       mat-row
       igoEntityTableRow
-      *matRowDef="let entity; columns: headers;"
+      *matRowDef="let record; columns: headers;"
       [scrollBehavior]="scrollBehavior"
-      [ngClass]="getRowClass(entity)"
+      [ngClass]="getRowClass(record)"
       [selection]="selection"
-      [selected]="rowIsSelected(entity)"
-      (select)="onRowSelect(entity)"
-      (click)="onRowClick(entity)">
+      [selected]="rowIsSelected(record)"
+      (select)="onRowSelect(record)"
+      (click)="onRowClick(record)">
     </tr>
 
   </table>