Feature/IoT-1592 multiselect search issue

src/app/admin/permission/permission-edit/permission-edit.component.html

@@ -69,7 +69,10 @@
       [compareWith]="compare"
       #multiSelect
     >
-      <app-mat-select-search [formControl]="userMultiFilterCtrl"></app-mat-select-search>
+      <app-mat-select-search
+        [initialValues]="this.permission.userIds"
+        [formControl]="userMultiFilterCtrl"
+      ></app-mat-select-search>
       <mat-option *ngFor="let user of filteredUsersMulti | async" [value]="user.id">
         {{ getTextForUser(user) }}
       </mat-option>
@@ -102,25 +105,28 @@
   </div>
 
   <div class="form-group mt-3 col-12" *ngIf="isOrganizationApplicationPermission()">
-      <label class="form-label" for="name">{{ "PERMISSION.EDIT.APPS" | translate }}</label>
-      <div class="col-12">
-        <mat-select
-          id="applicationIds"
-          [formControl]="applicationMultiCtrl"
-          [multiple]="true"
-          class="form-control"
-          panelClass="overflow-x-hidden"
-          [(value)]="permission.applicationIds"
-          name="applicationIds"
-          #multiSelect
-          [compareWith]="compare"
-        >
-          <app-mat-select-search [formControl]="applicationMultiFilterCtrl"></app-mat-select-search>
-          <mat-option *ngFor="let app of filteredApplicationsMulti | async" [value]="app.id">
-            {{ app.name }}
-          </mat-option>
-        </mat-select>
-      </div>
+    <label class="form-label" for="name">{{ "PERMISSION.EDIT.APPS" | translate }}</label>
+    <div class="col-12">
+      <mat-select
+        id="applicationIds"
+        [formControl]="applicationMultiCtrl"
+        [multiple]="true"
+        class="form-control"
+        panelClass="overflow-x-hidden"
+        [(value)]="permission.applicationIds"
+        name="applicationIds"
+        #multiSelect
+        [compareWith]="compare"
+      >
+        <app-mat-select-search
+          [initialValues]="this.permission.applicationIds"
+          [formControl]="applicationMultiFilterCtrl"
+        ></app-mat-select-search>
+        <mat-option *ngFor="let app of filteredApplicationsMulti | async" [value]="app.id">
+          {{ app.name }}
+        </mat-option>
+      </mat-select>
+    </div>
   </div>
 
   <div *ngIf="isReadOrWrite()">

src/app/admin/users/new-kombit-user-page/new-user.component.html

@@ -50,7 +50,9 @@ <h1>
               panelClass="overflow-x-hidden"
               aria-required="true"
             >
-              <app-mat-select-search [formControl]="organisationsFilterCtrl"></app-mat-select-search>
+              <app-mat-select-search
+                [formControl]="organisationsFilterCtrl"
+              ></app-mat-select-search>
 
               <mat-option *ngFor="let org of filteredOrganisations | async" [value]="org">{{ org.name }}</mat-option>
             </mat-select>

src/app/gateway/gateway-table/gateway-table.component.html

@@ -173,7 +173,7 @@
     </ng-container>
 
     <ng-container matColumnDef="onlineStatus">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+      <th mat-header-cell *matHeaderCellDef>
         {{ "LORA-GATEWAY-TABLE.STATUS" | translate }}
       </th>
       <td mat-cell *matCellDef="let gateway">

src/app/shared/components/forms/form-body-application/form-body-application.component.html

@@ -54,7 +54,10 @@
         [(value)]="application.permissionIds"
         [compareWith]="compare"
       >
-        <app-mat-select-search [formControl]="permissionMultiFilterCtrl"></app-mat-select-search>
+        <app-mat-select-search
+          [initialValues]="this.application.permissionIds"
+          [formControl]="permissionMultiFilterCtrl"
+        ></app-mat-select-search>
         <mat-option *ngFor="let permission of filteredPermissionsMulti | async" [value]="permission.id">
           {{ permission.name }}
         </mat-option>

src/app/shared/components/mat-select-search/mat-select-search/mat-select-search.component.html

@@ -10,14 +10,7 @@
     (blur)="onBlur($event.target.value)"
     placeholder="placeholderLabel"
   />
-  <button
-    mat-button
-    *ngIf="value"
-    mat-icon-button
-    aria-label="Clear"
-    (click)="_reset(true)"
-    class="mat-select-search-clear"
-  >
+  <button mat-icon-button *ngIf="value" aria-label="Clear" (click)="_reset(true)" class="mat-select-search-clear">
     <mat-icon>close</mat-icon>
   </button>
 </div>

src/app/shared/components/mat-select-search/mat-select-search/mat-select-search.component.ts

@@ -8,9 +8,11 @@ import {
   forwardRef,
   Inject,
   Input,
+  OnChanges,
   OnDestroy,
   OnInit,
   QueryList,
+  SimpleChanges,
   ViewChild,
 } from "@angular/core";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
@@ -37,12 +39,13 @@ import { MatSelect } from "@angular/material/select";
  *
  * @see https://github.com/angular/components/issues/5697#issuecomment-493628695
  */
-export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewInit, ControlValueAccessor {
+export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewInit, ControlValueAccessor, OnChanges {
   /** Label of the search placeholder */
   @Input() placeholderLabel = "Søg efter ...";
 
   /** Label to be shown when no entries are found. Set to null if no message should be shown. */
   @Input() noEntriesFoundLabel = "Ingen elementer blev fundet";
+  @Input() initialValues: any[];
 
   /** Reference to the search input field */
   @ViewChild("searchSelectInput", { static: false, read: ElementRef })
@@ -125,6 +128,12 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni
     this.initMultipleHandling();
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.initialValues) {
+      this.previousSelectedValues = this.initialValues;
+    }
+  }
+
   ngOnDestroy() {
     this._onDestroy.next();
     this._onDestroy.complete();