Updated most dropdowns/lists to sort by name

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

@@ -6,7 +6,11 @@ import { TranslateService } from '@ngx-translate/core';
 import { ReplaySubject, Subject, Subscription } from 'rxjs';
 import { Location } from '@angular/common';
 import { PermissionService } from '../permission.service';
-import { PermissionRequest, PermissionType, PermissionTypes } from '../permission.model';
+import {
+  PermissionRequest,
+  PermissionType,
+  PermissionTypes,
+} from '../permission.model';
 import { OrganisationResponse } from '../../organisation/organisation.model';
 import { OrganisationService } from '../../organisation/organisation.service';
 import { UserService } from '../../users/user.service';
@@ -80,8 +84,7 @@ export class PermissionEditComponent implements OnInit, OnDestroy {
     private location: Location,
     private errormEssageService: ErrorMessageService,
     private meService: MeService
-  ) {
-  }
+  ) {}
 
   ngOnInit(): void {
     this.getOrganizations();
@@ -167,7 +170,7 @@ export class PermissionEditComponent implements OnInit, OnDestroy {
 
   private getOrganizations() {
     this.organisationSubscription = this.organisationService
-      .getMultiple()
+      .getMultiple(1000, 0, 'name', 'asc')
       .subscribe(
         (orgs) => {
           this.organisations = orgs.data;
@@ -179,15 +182,17 @@ export class PermissionEditComponent implements OnInit, OnDestroy {
   }
 
   private getUsers() {
-    this.userSubscription = this.userService.getMultiple().subscribe(
-      (users) => {
-        this.users = users.data;
-        this.filteredUsersMulti.next(this.users.slice());
-      },
-      (error: HttpErrorResponse) => {
-        this.showError(error);
-      }
-    );
+    this.userSubscription = this.userService
+      .getMultiple(1000, 0, 'name', 'asc')
+      .subscribe(
+        (users) => {
+          this.users = users.data;
+          this.filteredUsersMulti.next(this.users.slice());
+        },
+        (error: HttpErrorResponse) => {
+          this.showError(error);
+        }
+      );
   }
 
   public compare(o1: any, o2: any): boolean {
@@ -207,7 +212,9 @@ export class PermissionEditComponent implements OnInit, OnDestroy {
       .getApplicationsByOrganizationId(organizationId)
       .subscribe(
         (res) => {
-          this.applications = res.data;
+          this.applications = res.data.sort((a, b) =>
+            a.name.localeCompare(b.name, 'en', { numeric: true })
+          );
           this.filteredApplicationsMulti.next(this.applications.slice());
         },
         (error: HttpErrorResponse) => {
@@ -251,7 +258,6 @@ export class PermissionEditComponent implements OnInit, OnDestroy {
           );
           this.applicationMultiCtrl.setValue(this.permission.applicationIds);
         }
-
       },
       (error: HttpErrorResponse) => {
         this.showError(error);

src/app/admin/users/user-list/awaiting-users-table/awaiting-users-table.component.html

@@ -9,7 +9,7 @@
     mat-table
     [dataSource]="users"
     matSort
-    matSortActive="id"
+    matSortActive="name"
     matSortDirection="asc"
     matSortDisableClear
   >

src/app/admin/users/user-list/user-table/user-table.component.html

@@ -2,7 +2,7 @@
     <div class="loading-shade" *ngIf="isLoadingResults">
         <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
     </div>
-    <table mat-table [dataSource]="data" matSort matSortActive="id" matSortDirection="asc" matSortDisableClear>
+    <table mat-table [dataSource]="data" matSort matSortActive="name" matSortDirection="asc" matSortDisableClear>
 
         <!-- Name Column -->
         <ng-container matColumnDef="name">

src/app/admin/users/user-list/user-table/user-table.component.ts

@@ -1,117 +1,111 @@
-import {
-    AfterViewInit,
-    Component,
-    Input,
-    ViewChild,
-} from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import { TranslateService } from '@ngx-translate/core';
-import { startWith, switchMap, map, catchError } from 'rxjs/operators';
-import { UserGetManyResponse, UserResponse } from '../../user.model';
-import { UserService } from '../../user.service';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { environment } from '@environments/environment';
-import { DefaultPageSizeOptions } from '@shared/constants/page.constants';
-import { ActivatedRoute } from '@angular/router';
-import { MeService } from '@shared/services/me.service';
-
-@Component({
-    selector: 'app-user-table',
-    templateUrl: './user-table.component.html',
-    styleUrls: ['./user-table.component.scss'],
-})
-export class UserTableComponent implements AfterViewInit {
-    displayedColumns: string[] = [
-        'name',
-        'email',
-        'global',
-        'status',
-        'lastLogin',
-        'menu',
-    ];
-    data: UserResponse[];
-
-    public pageSize = environment.tablePageSize;
-    pageSizeOptions = DefaultPageSizeOptions;
-    resultsLength = 0;
-    isLoadingResults = true;
-    @ViewChild(MatPaginator) paginator: MatPaginator;
-    @ViewChild(MatSort) sort: MatSort;    
-
-    // If supplied, users will only be retrieved for the specified organization
-    // If supplied, permissionId will ignored, even if supplied
-    @Input() organizationId?: number;
-
-    // If supplied, users will be retrieved on the permissionId (userGroup/brugerGruppe)    
-    @Input() permissionId?: number;
-
-    @Input() canSort = true;
-    isGlobalAdmin: boolean;
-
-    constructor(
-        public translate: TranslateService,
-        private userService: UserService,
-        private meService: MeService
-    ) {
-        this.isGlobalAdmin = this.meService.hasGlobalAdmin();
-    }
-
-    getUsers(
-        orderByColumn: string,
-        orderByDirection: string
-    ): Observable<UserGetManyResponse> {
-        if (this.organizationId !== null && this.organizationId !== undefined) {
-            if (this.isGlobalAdmin) {
-                return this.userService.getMultiple(
-                    this.paginator.pageSize,
-                    this.paginator.pageIndex * this.paginator.pageSize,
-                    orderByColumn,
-                    orderByDirection
-                );
-            } else {
-                return this.userService.getMultipleByOrganization(
-                    this.paginator.pageSize,
-                    this.paginator.pageIndex * this.paginator.pageSize,
-                    orderByColumn,
-                    orderByDirection,
-                    this.organizationId
-                );
-            }
-        } else {
-            return this.userService.getMultiple(
-                this.paginator.pageSize,
-                this.paginator.pageIndex * this.paginator.pageSize,
-                orderByColumn,
-                orderByDirection,
-                this.permissionId
-            );
-        }        
-    }
-
-    ngAfterViewInit() {
-        // If the user changes the sort order, reset back to the first page.
-        this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
-
-        merge(this.sort.sortChange, this.paginator.page)
-            .pipe(
-                startWith({}),
-                switchMap(() => {
-                    this.isLoadingResults = true;
-                    return this.getUsers(this.sort.active, this.sort.direction);
-                }),
-                map((data) => {
-                    // Flip flag to show that loading has finished.
-                    this.isLoadingResults = false;
-                    this.resultsLength = data.count;
-
-                    return data.data;
-                }),
-                catchError(() => {
-                    this.isLoadingResults = false;
-                    return observableOf([]);
-                })
-            )
-            .subscribe((data) => (this.data = data));
-    }
-}
+import { AfterViewInit, Component, Input, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { TranslateService } from '@ngx-translate/core';
+import { catchError, map, startWith, switchMap } from 'rxjs/operators';
+import { UserGetManyResponse, UserResponse } from '../../user.model';
+import { UserService } from '../../user.service';
+import { merge, Observable, of as observableOf } from 'rxjs';
+import { environment } from '@environments/environment';
+import { DefaultPageSizeOptions } from '@shared/constants/page.constants';
+import { MeService } from '@shared/services/me.service';
+
+@Component({
+  selector: 'app-user-table',
+  templateUrl: './user-table.component.html',
+  styleUrls: ['./user-table.component.scss'],
+})
+export class UserTableComponent implements AfterViewInit {
+  displayedColumns: string[] = [
+    'name',
+    'email',
+    'global',
+    'status',
+    'lastLogin',
+    'menu',
+  ];
+  data: UserResponse[];
+
+  public pageSize = environment.tablePageSize;
+  pageSizeOptions = DefaultPageSizeOptions;
+  resultsLength = 0;
+  isLoadingResults = true;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+
+  // If supplied, users will only be retrieved for the specified organization
+  // If supplied, permissionId will ignored, even if supplied
+  @Input() organizationId?: number;
+
+  // If supplied, users will be retrieved on the permissionId (userGroup/brugerGruppe)
+  @Input() permissionId?: number;
+
+  @Input() canSort = true;
+  isGlobalAdmin: boolean;
+
+  constructor(
+    public translate: TranslateService,
+    private userService: UserService,
+    private meService: MeService
+  ) {
+    this.isGlobalAdmin = this.meService.hasGlobalAdmin();
+  }
+
+  getUsers(
+    orderByColumn: string,
+    orderByDirection: string
+  ): Observable<UserGetManyResponse> {
+    if (this.organizationId !== null && this.organizationId !== undefined) {
+      if (this.isGlobalAdmin) {
+        return this.userService.getMultiple(
+          this.paginator.pageSize,
+          this.paginator.pageIndex * this.paginator.pageSize,
+          orderByColumn,
+          orderByDirection
+        );
+      } else {
+        return this.userService.getMultipleByOrganization(
+          this.paginator.pageSize,
+          this.paginator.pageIndex * this.paginator.pageSize,
+          orderByColumn,
+          orderByDirection,
+          this.organizationId
+        );
+      }
+    } else {
+      return this.userService.getMultiple(
+        this.paginator.pageSize,
+        this.paginator.pageIndex * this.paginator.pageSize,
+        orderByColumn,
+        orderByDirection,
+        this.permissionId
+      );
+    }
+  }
+
+  ngAfterViewInit() {
+    // If the user changes the sort order, reset back to the first page.
+    this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
+
+    merge(this.sort.sortChange, this.paginator.page)
+      .pipe(
+        startWith({}),
+        switchMap(() => {
+          this.isLoadingResults = true;
+          return this.getUsers(this.sort.active, this.sort.direction);
+        }),
+        map((data) => {
+          // Flip flag to show that loading has finished.
+          this.isLoadingResults = false;
+          this.resultsLength = data.count;
+
+          return data.data;
+        }),
+        catchError(() => {
+          this.isLoadingResults = false;
+          return observableOf([]);
+        })
+      )
+      .subscribe((data) => (this.data = data));
+  }
+}