Feature/iot 1364 direct url to tabs

src/app/admin/admin-routing.module.ts

@@ -1,73 +1,86 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { OrganisationDetailComponent } from './organisation/organisation-detail/organisation-detail.component';
-import { OrganisationEditComponent } from './organisation/organisation-edit/organisation-edit.component';
-import { OrganisationListComponent } from './organisation/organisation-list/organisation-list.component';
-import { OrganisationComponent } from './organisation/organisation.component';
-import { PermissionDetailComponent } from './permission/permission-detail/permission-detail.component';
-import { PermissionEditComponent } from './permission/permission-edit/permission-edit.component';
-import { PermissionListComponent } from './permission/permission-list/permission-list.component';
-import { PermissionComponent } from './permission/permission.component';
-import { UserDetailComponent } from './users/user-detail/user-detail.component';
-import { UserEditComponent } from './users/user-edit/user-edit.component';
-import { UserListComponent } from './users/user-list/user-list.component';
-import { UsersComponent } from './users/users.component';
-import { ApiKeyComponent } from './api-key/api-key.component';
-import { ApiKeyListComponent } from './api-key/api-key-list/api-key-list.component';
-import { ApiKeyEditComponent } from './api-key/api-key-edit/api-key-edit.component';
-import { AcceptUserComponent } from './users/accept-user/accept-user.component';
-
-
-const adminRoutes: Routes = [
-    {
-        path: 'organisations', component: OrganisationComponent, children: [
-            { path: '', component: OrganisationListComponent },
-            { path: 'new-organisation', component: OrganisationEditComponent },
-            { path: ':org-id', component: OrganisationDetailComponent },
-            { path: ':org-id/edit-organisation', component: OrganisationEditComponent },
-        ]
-    },
-    {
-        path: 'users', component: UsersComponent, children: [
-            { path: '', component: UserListComponent },
-            { path: 'organization/:organization-id', component: UserListComponent },
-            { path: 'new-user', component: UserEditComponent },
-            { path: ':user-id', component: UserDetailComponent },
-            { path: ':user-id/edit-user', component: UserEditComponent },
-            { path: 'accept-user/:user-id/:org-id', component: AcceptUserComponent }
-        ]
-    },
-    {
-        path: 'permissions',
-        component: PermissionComponent,
-        children: [
-            { path: '', component: PermissionListComponent },
-            { path: 'new-permission', component: PermissionEditComponent },
-            { path: ':permission-id', component: PermissionDetailComponent },
-            {
-                path: ':permission-id/edit-permission',
-                component: PermissionEditComponent,
-            },
-        ],
-    },
-    {
-        path: 'api-key',
-        component: ApiKeyComponent,
-        children: [
-            { path: '', component: ApiKeyListComponent },
-            { path: 'new-api-key', component: ApiKeyEditComponent },
-            {
-                path: ':api-key-id/edit-api-key',
-                component: ApiKeyEditComponent,
-            },
-        ],
-    },
-
-
-];
-
-@NgModule({
-    imports: [RouterModule.forChild(adminRoutes)],
-    exports: [RouterModule]
-})
-export class AdminRoutingModule { }
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { OrganisationDetailComponent } from './organisation/organisation-detail/organisation-detail.component';
+import { OrganisationEditComponent } from './organisation/organisation-edit/organisation-edit.component';
+import { OrganisationListComponent } from './organisation/organisation-list/organisation-list.component';
+import { OrganisationComponent } from './organisation/organisation.component';
+import { PermissionDetailComponent } from './permission/permission-detail/permission-detail.component';
+import { PermissionEditComponent } from './permission/permission-edit/permission-edit.component';
+import { PermissionListComponent } from './permission/permission-list/permission-list.component';
+import { PermissionComponent } from './permission/permission.component';
+import { UserDetailComponent } from './users/user-detail/user-detail.component';
+import { UserEditComponent } from './users/user-edit/user-edit.component';
+import { UserListComponent } from './users/user-list/user-list.component';
+import { UsersComponent } from './users/users.component';
+import { ApiKeyComponent } from './api-key/api-key.component';
+import { ApiKeyListComponent } from './api-key/api-key-list/api-key-list.component';
+import { ApiKeyEditComponent } from './api-key/api-key-edit/api-key-edit.component';
+import { AcceptUserComponent } from './users/accept-user/accept-user.component';
+import { UserTableTabComponent } from '@app/admin/users/user-list/user-table-tab/user-table-tab.component';
+import { AwaitingUsersTableTabComponent } from '@app/admin/users/user-list/awaiting-user-tab/awaiting-users-table-tab.component';
+
+const adminRoutes: Routes = [
+  {
+    path: 'organisations',
+    component: OrganisationComponent,
+    children: [
+      { path: '', component: OrganisationListComponent },
+      { path: 'new-organisation', component: OrganisationEditComponent },
+      { path: ':org-id', component: OrganisationDetailComponent },
+      {
+        path: ':org-id/edit-organisation',
+        component: OrganisationEditComponent,
+      },
+    ],
+  },
+  {
+    path: 'users',
+    component: UsersComponent,
+    children: [
+      {
+        path: '',
+        component: UserListComponent,
+        children: [
+          { path: 'existing', component: UserTableTabComponent },
+          { path: 'awaiting', component: AwaitingUsersTableTabComponent },
+        ],
+      },
+      { path: 'organization/:organization-id', component: UserListComponent },
+      { path: 'new-user', component: UserEditComponent },
+      { path: ':user-id', component: UserDetailComponent },
+      { path: ':user-id/edit-user', component: UserEditComponent },
+      { path: 'accept-user/:user-id/:org-id', component: AcceptUserComponent },
+    ],
+  },
+  {
+    path: 'permissions',
+    component: PermissionComponent,
+    children: [
+      { path: '', component: PermissionListComponent },
+      { path: 'new-permission', component: PermissionEditComponent },
+      { path: ':permission-id', component: PermissionDetailComponent },
+      {
+        path: ':permission-id/edit-permission',
+        component: PermissionEditComponent,
+      },
+    ],
+  },
+  {
+    path: 'api-key',
+    component: ApiKeyComponent,
+    children: [
+      { path: '', component: ApiKeyListComponent },
+      { path: 'new-api-key', component: ApiKeyEditComponent },
+      {
+        path: ':api-key-id/edit-api-key',
+        component: ApiKeyEditComponent,
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(adminRoutes)],
+  exports: [RouterModule],
+})
+export class AdminRoutingModule {}

src/app/admin/admin.module.ts

@@ -34,6 +34,8 @@ import { ApiKeyTableComponent } from './api-key/api-key-list/api-key-table/api-k
 import { ApiKeyEditComponent } from './api-key/api-key-edit/api-key-edit.component';
 import { AwaitingUsersTableComponent } from './users/user-list/awaiting-users-table/awaiting-users-table.component';
 import { AcceptUserComponent } from './users/accept-user/accept-user.component';
+import { UserTableTabComponent } from './users/user-list/user-table-tab/user-table-tab.component';
+import { AwaitingUsersTableTabComponent } from './users/user-list/awaiting-user-tab/awaiting-users-table-tab.component';
 
 @NgModule({
   declarations: [
@@ -58,6 +60,8 @@ import { AcceptUserComponent } from './users/accept-user/accept-user.component';
     ApiKeyEditComponent,
     AwaitingUsersTableComponent,
     AcceptUserComponent,
+    UserTableTabComponent,
+    AwaitingUsersTableTabComponent,
   ],
   imports: [
     AdminRoutingModule,

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-detail/user-detail.component.ts

@@ -16,7 +16,7 @@ import { OrganizationAccessScope } from '@shared/enums/access-scopes';
 @Component({
   selector: 'app-user-detail',
   templateUrl: './user-detail.component.html',
-  styleUrls: ['./user-detail.component.scss']
+  styleUrls: ['./user-detail.component.scss'],
 })
 export class UserDetailComponent implements OnInit, OnDestroy {
   isLoadingResults = true;
@@ -30,7 +30,7 @@ export class UserDetailComponent implements OnInit, OnDestroy {
   user: UserResponse;
   public backButton: BackButton = {
     label: '',
-    routerLink: '/admin/users',
+    routerLink: undefined,
   };
   public buttons: QuickActionButton[] = [
     {
@@ -53,7 +53,7 @@ export class UserDetailComponent implements OnInit, OnDestroy {
     private userService: UserService,
     private router: Router,
     private meService: MeService
-  ) { }
+  ) {}
 
   ngOnInit(): void {
     this.translate.use('da');
@@ -66,12 +66,15 @@ export class UserDetailComponent implements OnInit, OnDestroy {
         isErasable: false,
       };
     }
-    this.translate.get(['NAV.USERS', 'USERS.DETAIL.DROPDOWN'])
-      .subscribe(translations => {
+    this.translate
+      .get(['NAV.USERS', 'USERS.DETAIL.DROPDOWN'])
+      .subscribe((translations) => {
         this.backButton.label = translations['NAV.USERS'];
         this.dropdownButton.label = translations['USERS.DETAIL.DROPDOWN'];
       });
-    this.canEdit = this.meService.hasAccessToTargetOrganization(OrganizationAccessScope.UserAdministrationWrite);
+    this.canEdit = this.meService.hasAccessToTargetOrganization(
+      OrganizationAccessScope.UserAdministrationWrite
+    );
   }
 
   private getUser(id: number) {

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

@@ -0,0 +1,7 @@
+<div class="jumbotron--table">
+  <app-top-bar-table
+    [component]="true"
+    [title]="'USERS.AWAITING-USERS' | translate"
+  ></app-top-bar-table>
+  <app-awaiting-users-table></app-awaiting-users-table>
+</div>

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

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { SharedVariableService } from '@shared/shared-variable/shared-variable.service';
+
+@Component({
+  selector: 'app-awaiting-user-tab',
+  templateUrl: './awaiting-users-table-tab.component.html',
+  styleUrls: ['./awaiting-users-table-tab.component.scss'],
+})
+export class AwaitingUsersTableTabComponent implements OnInit {
+  organizationId: number;
+  constructor(private globalService: SharedVariableService) {
+    this.organizationId = this.globalService.getSelectedOrganisationId();
+  }
+
+  ngOnInit(): void {}
+}

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-list.component.html

@@ -7,26 +7,15 @@
 <div class="container-fluid">
   <div class="row">
     <div class="col-12">
-      <mat-tab-group animationDuration="200ms">
-        <mat-tab label="{{ 'USERS.EXISTING-USERS' | translate }}">
-          <div class="jumbotron--table">
-            <app-top-bar-table
-              [component]="true"
-              [title]="'USERS.EXISTING-USERS' | translate"
-            ></app-top-bar-table>
-            <app-user-table [organizationId]="organizationId" *ngIf="organizationId"></app-user-table>
-          </div>
-        </mat-tab>
-        <mat-tab label="{{ 'USERS.AWAITING-USERS' | translate }}">
-          <div class="jumbotron--table">
-            <app-top-bar-table
-              [component]="true"
-              [title]="'USERS.AWAITING-USERS' | translate"
-            ></app-top-bar-table>
-            <app-awaiting-users-table></app-awaiting-users-table>
-          </div>
-        </mat-tab>
-      </mat-tab-group>
+      <nav mat-tab-nav-bar>
+        <a mat-tab-link
+           *ngFor="let link of navTabs"
+           [routerLink]="link.link"
+           routerLinkActive #rla="routerLinkActive"
+           [active]="rla.isActive"
+        >{{ link.label | translate }}</a>
+      </nav>
+      <router-outlet></router-outlet>
     </div>
   </div>
 </div>