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/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/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>

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

@@ -1,33 +1,46 @@
-import { Component, OnInit } from '@angular/core';
-import { Title } from '@angular/platform-browser';
-import { TranslateService } from '@ngx-translate/core';
-import { OrganizationAccessScope } from '@shared/enums/access-scopes';
-import { MeService } from '@shared/services/me.service';
-import { SharedVariableService } from '@shared/shared-variable/shared-variable.service';
-
-@Component({
-    selector: 'app-user-list',
-    templateUrl: './user-list.component.html',
-    styleUrls: ['./user-list.component.scss'],
-})
-export class UserListComponent implements OnInit {
-    canEdit: boolean;    
-    organizationId: number;
-
-    constructor(
-        private titleService: Title,
-        private translate: TranslateService,
-        private meService: MeService,
-        private globalService: SharedVariableService
-    ) { 
-        this.organizationId = this.globalService.getSelectedOrganisationId();
-    }
-
-    ngOnInit(): void {
-        this.translate.get(['TITLE.USER'])
-            .subscribe(translations => {
-                this.titleService.setTitle(translations['TITLE.USER']);
-            });
-        this.canEdit = this.meService.hasAccessToTargetOrganization(OrganizationAccessScope.UserAdministrationWrite);
-    }
-}
+import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { TranslateService } from '@ngx-translate/core';
+import { OrganizationAccessScope } from '@shared/enums/access-scopes';
+import { MeService } from '@shared/services/me.service';
+import { SharedVariableService } from '@shared/shared-variable/shared-variable.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-user-list',
+  templateUrl: './user-list.component.html',
+  styleUrls: ['./user-list.component.scss'],
+})
+export class UserListComponent implements OnInit {
+  public navTabs: any[] = [
+    {
+      label: 'USERS.EXISTING-USERS',
+      link: './existing',
+      index: 0,
+    },
+    {
+      label: 'USERS.AWAITING-USERS',
+      link: './awaiting',
+      index: 1,
+    },
+  ];
+  canEdit: boolean;
+  constructor(
+    private titleService: Title,
+    private translate: TranslateService,
+    private meService: MeService,
+    public router: Router
+  ) {}
+
+  ngOnInit(): void {
+    this.translate.get(['TITLE.USER']).subscribe((translations) => {
+      this.titleService.setTitle(translations['TITLE.USER']);
+    });
+    this.canEdit = this.meService.hasAccessToTargetOrganization(
+      OrganizationAccessScope.UserAdministrationWrite
+    );
+    if (this.router.url.split('/').length <= 3) {
+      this.router.navigateByUrl('admin/users/existing', { replaceUrl: true });
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+<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>

src/app/admin/users/user-list/user-table-tab/user-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-user-table-tab',
+  templateUrl: './user-table-tab.component.html',
+  styleUrls: ['./user-table-tab.component.scss'],
+})
+export class UserTableTabComponent implements OnInit {
+  organizationId: number;
+  constructor(private globalService: SharedVariableService) {
+    this.organizationId = this.globalService.getSelectedOrganisationId();
+  }
+
+  ngOnInit(): void {}
+}