Merge develop into master

src/app/admin/admin.module.ts

@@ -27,6 +27,7 @@ import { UserTableComponent } from './users/user-list/user-table/user-table.comp
 import { UsersComponent } from './users/users.component';
 import { MatSelectModule } from '@angular/material/select';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectSearchModule } from '@shared/components/mat-select-search/mat-select-search.module';
 
 @NgModule({
   declarations: [
@@ -60,6 +61,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
     SharedModule,
     MatSelectModule,
     MatFormFieldModule,
+    MatSelectSearchModule,
   ],
   exports: [
     UserDetailComponent,
@@ -79,4 +81,4 @@ import { MatFormFieldModule } from '@angular/material/form-field';
     OrganisationListComponent,
   ],
 })
-export class AdminModule { }
+export class AdminModule {}

src/app/admin/organisation/organisation-detail/organisation-detail.component.ts

@@ -14,6 +14,7 @@ import { DeleteDialogService } from '@shared/components/delete-dialog/delete-dia
 import { DropdownButton } from '@shared/models/dropdown-button.model';
 import { ApplicationService } from '@applications/application.service';
 import { environment } from '@environments/environment';
+import { Title } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-organisation-detail',
@@ -47,7 +48,8 @@ export class OrganisationDetailComponent implements OnInit, OnChanges, OnDestroy
     private organisationService: OrganisationService,
     private permissionsService: PermissionService,
     private deleteDialogService: DeleteDialogService,
-    private location: Location
+    private location: Location,
+    private titleService: Title
   ) { }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -64,10 +66,11 @@ export class OrganisationDetailComponent implements OnInit, OnChanges, OnDestroy
       editRouterLink: 'edit-organisation',
       isErasable: true,
     }
-    this.translate.get(['NAV.ORGANISATIONS', 'ORGANISATION.DROPDOWN'])
+    this.translate.get(['NAV.ORGANISATIONS', 'ORGANISATION.DROPDOWN', 'TITLE.ORGANIZATION'])
       .subscribe(translations => {
         this.backButton.label = translations['NAV.ORGANISATIONS'];
         this.dropdownButton.label = translations['ORGANISATION.DROPDOWN'];
+        this.titleService.setTitle(translations['TITLE.ORGANIZATION'])
       });
   }
 

src/app/admin/organisation/organisation-list/organisation-list.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
 import { Sort } from '@shared/models/sort.model';
 
@@ -9,9 +10,14 @@ import { Sort } from '@shared/models/sort.model';
 })
 export class OrganisationListComponent implements OnInit {
 
-  constructor(public translate: TranslateService) {
+  constructor(public translate: TranslateService, private titleService: Title) {
     translate.use('da');
   }
 
-  ngOnInit(): void { }
+  ngOnInit(): void {
+    this.translate.get(['TITLE.ORGANIZATION'])
+      .subscribe(translations => {
+        this.titleService.setTitle(translations['TITLE.ORGANIZATION']);
+      });
+   }
 }

src/app/admin/organisation/organisation-list/organisation-tabel/organisation-tabel.component.html

@@ -1,4 +1,7 @@
 <div class="mat-elevation-z8">
+    <div class="loading-shade" *ngIf="isLoadingResults">
+        <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
+    </div>
     <table mat-table [dataSource]="data" matSort matSortActive="name" matSortDirection="asc" matSortDisableClear>
 
         <!-- Name Column -->

src/app/admin/permission/permission-detail/permission-detail.component.ts

@@ -1,20 +1,16 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { PermissionService } from '@app/admin/permission/permission.service';
 import { Subscription } from 'rxjs';
 import { PermissionResponse } from '../permission.model';
 import { BackButton } from '@shared/models/back-button.model';
 import { QuickActionButton } from '@shared/models/quick-action-button.model';
-import { Application } from '@applications/application.model';
-import { ApplicationService } from '@applications/application.service';
-import { SharedVariableService } from '@shared/shared-variable/shared-variable.service';
-import { OrganisationResponse } from '@app/admin/organisation/organisation.model';
-import { OrganisationService } from '@app/admin/organisation/organisation.service';
 import { UserResponse } from '@app/admin/users/user.model';
 import { DropdownButton } from '@shared/models/dropdown-button.model';
 import { DeleteDialogService } from '@shared/components/delete-dialog/delete-dialog.service';
 import { environment } from '@environments/environment';
+import { Title } from '@angular/platform-browser';
 
 
 @Component({
@@ -53,6 +49,7 @@ export class PermissionDetailComponent implements OnInit, OnChanges {
     private route: ActivatedRoute,
     private permissionService: PermissionService,
     private router: Router,
+    private titleService: Title,
     private deleteDialogService: DeleteDialogService
   ) { }
 
@@ -67,10 +64,11 @@ export class PermissionDetailComponent implements OnInit, OnChanges {
         isErasable: true,
       }
     }
-    this.translate.get(['NAV.PERMISSIONS', 'PERMISSION.DETAIL.DROPDOWN'])
+    this.translate.get(['NAV.PERMISSIONS', 'PERMISSION.DETAIL.DROPDOWN', 'TITLE.PERMISSION'])
       .subscribe(translations => {
         this.backButton.label = translations['NAV.PERMISSIONS'];
         this.dropdownButton.label = translations['PERMISSION.DETAIL.DROPDOWN'];
+        this.titleService.setTitle(translations['TITLE.PERMISSION']);
       });
   }
 

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

@@ -31,19 +31,16 @@
     </div>
 
     <div class="form-group mt-3 col-12">
-        <label class="form-label" for="user">{{'PERMISSION.EDIT.USERS' | translate}}</label>
         <mat-form-field>
-            <mat-select 
-                name="users"
-                [multiple]="true" 
-                #multiSelect
-                [compareWith]="compare"
-                [(value)]="permission.userIds">
-              <mat-option *ngFor="let user of users" [value]="user.id">
-                {{user.name}} ({{user.email}})
-              </mat-option>
+            <label class="form-label" for="user">{{'PERMISSION.EDIT.USERS' | translate}}</label>
+            <mat-select [formControl]="userMultiCtrl" placeholder="" [multiple]="true" panelClass="overflow-x-hidden"
+                [(value)]="permission.userIds" name="users" #multiSelect [compareWith]="compare">
+                <mat-select-search [formControl]="userMultiFilterCtrl"></mat-select-search>
+                <mat-option *ngFor="let user of filteredUsersMulti | async" [value]="user.id">
+                    {{getTextForUser(user)}}
+                </mat-option>
             </mat-select>
-          </mat-form-field>
+        </mat-form-field>
     </div>
 
     <div *ngIf="permission.level != 'GlobalAdmin'">
@@ -61,26 +58,28 @@
         </div>
     </div>
 
-    <div *ngIf="isOrganizationAdministrationPermission()">
-        <div class="form-group mt-3 col-12">
+    <div class="form-group mt-3 col-12" *ngIf="isOrganizationApplicationPermission()">
+        <mat-form-field>
             <label class="form-label" for="name">{{'PERMISSION.EDIT.APPS' | translate}}</label>
             <div class="col-12">
-                <select id="applicationIds" name="applicationIds" class="form-control" multiple
-                    [(ngModel)]="permission.applicationIds"
-                    placeholder="'PERMISSION.EDIT.APPS-PLACEHOLDER' | translate">
-                    <option *ngFor="let app of applications" [value]="app.id"
-                        [selected]="isApplicationPartOfPermission(app.id)">
-                        {{app.name}}</option>
-                </select>
+                <mat-select [formControl]="applicationMultiCtrl" placeholder="" [multiple]="true"
+                    panelClass="overflow-x-hidden" [(value)]="permission.applicationIds" id="applicationIds"
+                    name="applicationIds" #multiSelect [compareWith]="compare">
+                    <mat-select-search [formControl]="applicationMultiFilterCtrl"></mat-select-search>
+                    <mat-option *ngFor="let app of filteredApplicationsMulti | async" [value]="app.id">
+                        {{app.name}}
+                    </mat-option>
+                </mat-select>
             </div>
-        </div>
+        </mat-form-field>
     </div>
 
     <div *ngIf="isReadOrWrite()">
         <div class="form-group mt-3 col-12">
             <label class="form-label" for="name">{{'PERMISSION.EDIT.ADD-APPLICATION-AUTOMATIC' | translate}}</label>
             <div class="row">
-                <mat-slide-toggle [(ngModel)]="permission.automaticallyAddNewApplications" id="automaticallyAddNewApplications" name="automaticallyAddNewApplications">
+                <mat-slide-toggle [(ngModel)]="permission.automaticallyAddNewApplications"
+                    id="automaticallyAddNewApplications" name="automaticallyAddNewApplications">
                     {{'PERMISSION.EDIT.ADD-APPLICATION-ON-CREATE' | translate}}</mat-slide-toggle>
             </div>
         </div>

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

@@ -1,9 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { HttpErrorResponse } from '@angular/common/http';
-import { FormGroup } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { Subscription } from 'rxjs';
+import { ReplaySubject, Subject, Subscription } from 'rxjs';
 import { Location } from '@angular/common';
 import { PermissionService } from '../permission.service';
 import { PermissionRequest, PermissionType } from '../permission.model';
@@ -15,13 +15,14 @@ import { ApplicationService } from '@applications/application.service';
 import { Application } from '@applications/application.model';
 import { BackButton } from '@shared/models/back-button.model';
 import { ErrorMessageService } from '@shared/error-message.service';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-permission-edit',
   templateUrl: './permission-edit.component.html',
   styleUrls: ['./permission-edit.component.scss'],
 })
-export class PermissionEditComponent implements OnInit {
+export class PermissionEditComponent implements OnInit, OnDestroy {
   permission = new PermissionRequest();
   public organisations: OrganisationResponse[];
   public users: UserResponse[];
@@ -31,7 +32,10 @@ export class PermissionEditComponent implements OnInit {
   public errorFields: string[];
   public formFailedSubmit = false;
   public form: FormGroup;
-  public backButton: BackButton = { label: '', routerLink: ['admin','permissions'] };
+  public backButton: BackButton = {
+    label: '',
+    routerLink: ['admin', 'permissions'],
+  };
   public title = '';
   public submitButton = '';
   public isEditMode = false;
@@ -41,6 +45,18 @@ export class PermissionEditComponent implements OnInit {
   userSubscription: Subscription;
   applicationSubscription: Subscription;
 
+  public userMultiCtrl: FormControl = new FormControl();
+  public userMultiFilterCtrl: FormControl = new FormControl();
+  public filteredUsersMulti: ReplaySubject<UserResponse[]> = new ReplaySubject<
+    UserResponse[]
+  >(1);
+
+  public applicationMultiCtrl: FormControl = new FormControl();
+  public applicationMultiFilterCtrl: FormControl = new FormControl();
+  public filteredApplicationsMulti: ReplaySubject<
+    Application[]
+  > = new ReplaySubject<Application[]>(1);
+
   constructor(
     private translate: TranslateService,
     private route: ActivatedRoute,
@@ -69,6 +85,64 @@ export class PermissionEditComponent implements OnInit {
       this.isEditMode = true;
       this.setBackButton();
     }
+
+    this.userMultiFilterCtrl.valueChanges
+      .pipe(takeUntil(this._onDestroy))
+      .subscribe(() => {
+        this.filterUsersMulti();
+      });
+
+    this.applicationMultiFilterCtrl.valueChanges
+      .pipe(takeUntil(this._onDestroy))
+      .subscribe(() => {
+        this.filterApplicationsMulti();
+      });
+  }
+
+  private filterApplicationsMulti() {
+    if (!this.applications) {
+      return;
+    }
+    // get the search keyword
+    let search = this.applicationMultiFilterCtrl.value;
+    if (!search) {
+      this.filteredApplicationsMulti.next(this.applications.slice());
+      return;
+    } else {
+      search = search.toLowerCase();
+    }
+    // filter the banks
+    this.filteredApplicationsMulti.next(
+      this.applications.filter(
+        (app) => app.name.toLowerCase().indexOf(search) > -1
+      )
+    );
+  }
+
+  private filterUsersMulti() {
+    if (!this.users) {
+      return;
+    }
+    // get the search keyword
+    let search = this.userMultiFilterCtrl?.value?.trim();
+    if (!search) {
+      this.filteredUsersMulti.next(this.users.slice());
+      return;
+    } else {
+      search = search.toLowerCase();
+    }
+    const filtered = this.users.filter((user) => {
+      return (
+        user.name.toLocaleLowerCase().indexOf(search) > -1 ||
+        user?.email?.toLocaleLowerCase()?.indexOf(search) > -1
+      );
+    });
+    // filter the banks
+    this.filteredUsersMulti.next(filtered);
+  }
+
+  getTextForUser(user: UserResponse): string {
+    return `${user.name}` + (user.email ? ` (${user.email})` : ``);
   }
 
   private setBackButton() {
@@ -92,6 +166,7 @@ export class PermissionEditComponent implements OnInit {
     this.userSubscription = this.userService.getMultiple().subscribe(
       (users) => {
         this.users = users.data;
+        this.filteredUsersMulti.next(this.users.slice());
       },
       (error: HttpErrorResponse) => {
         this.showError(error);
@@ -113,6 +188,7 @@ export class PermissionEditComponent implements OnInit {
       .subscribe(
         (res) => {
           this.applications = res.data;
+          this.filteredApplicationsMulti.next(this.applications.slice());
         },
         (error: HttpErrorResponse) => {
           this.showError(error);
@@ -127,7 +203,9 @@ export class PermissionEditComponent implements OnInit {
         this.permission.name = response.name;
         this.permission.level = response.type;
         this.permission.userIds = response.users.map((x) => x.id);
-        this.permission.automaticallyAddNewApplications = response.automaticallyAddNewApplications;
+        this.userMultiCtrl.setValue(this.permission.userIds);
+        this.permission.automaticallyAddNewApplications =
+          response.automaticallyAddNewApplications;
 
         if (response.type !== PermissionType.GlobalAdmin) {
           this.permission.organizationId = response?.organization?.id;
@@ -141,6 +219,7 @@ export class PermissionEditComponent implements OnInit {
           this.permission.applicationIds = response.applications.map(
             (x) => x.id
           );
+          this.applicationMultiCtrl.setValue(this.permission.applicationIds);
         }
       },
       (error: HttpErrorResponse) => {
@@ -199,17 +278,19 @@ export class PermissionEditComponent implements OnInit {
     }
   }
 
-  isOrganizationAdministrationPermission() {
+  isOrganizationApplicationPermission() {
     return (
       this.permission.level ==
         PermissionType.OrganizationApplicationPermissions ||
-      this.permission.level == PermissionType.Write ||
-      this.permission.level == PermissionType.Read
+      this.isReadOrWrite()
     );
   }
 
   isReadOrWrite(): boolean {
-    return this.permission.level === PermissionType.Read || this.permission.level === PermissionType.Write
+    return (
+      this.permission.level === PermissionType.Read ||
+      this.permission.level === PermissionType.Write
+    );
   }
 
   onSubmit(): void {
@@ -229,4 +310,12 @@ export class PermissionEditComponent implements OnInit {
   routeBack(): void {
     this.location.back();
   }
+
+  /** Subject that emits when the component has been destroyed. */
+  private _onDestroy = new Subject<void>();
+
+  ngOnDestroy() {
+    this._onDestroy.next();
+    this._onDestroy.complete();
+  }
 }

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

@@ -1,4 +1,4 @@
-<app-top-bar [sort]="sort" [pageLimit]="pageLimit" [title]="'NAV.PERMISSIONS' | translate"
+<app-top-bar [pageLimit]="pageLimit" [title]="'NAV.PERMISSIONS' | translate"
     [ctaLabel]="'FORM.CREATE-NEW-PERMISSION' | translate" [ctaRouterLink]="'new-permission'"></app-top-bar>
 <div class="container-fluid">
     <div class="row">