Merge pull request #17 from OS2iot/IOT-466

IOT-466: Dropdown to select organisation + synchronization to application.

Author: Allan Asp Christensen

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

@@ -24,7 +24,7 @@
     <ul class="dropdown-menu" attr.aria-labelledby="tableRowDropdown-{{permission.id}}">
       <li class="dropdown-item">
         <a [routerLink]="[permission.id, 'edit-permission']"
-          routerLinkActive="active">{{ 'PERMISSION.TABLE-ROW.EDIT' | translate }}
+          routerLinkActive="active">{{ 'USERS.TABLE-ROW.EDIT' | translate }}
         </a>
       </li>
       <li class="dropdown-item">

src/app/app.module.ts

@@ -14,6 +14,8 @@ import { DatatargetModule } from './views/datatarget/datatarget.module';
 import { ProfilesModule } from './profiles/profiles.module';
 import { AuthJwtInterceptor } from '@shared/helpers/auth-jwt.interceptor';
 import { AuthModule } from './auth/auth.module';
+import { GlobalErrorHandler } from '@shared/helpers/global-error-handler';
+import { SharedVariableModule } from './shared-variable/shared-variable.module';
 import { DashboardModule } from './dashboard/dashboard.module';
 
 export function HttpLoaderFactory(http: HttpClient) {
@@ -23,6 +25,7 @@ export function HttpLoaderFactory(http: HttpClient) {
 @NgModule({
     declarations: [AppComponent],
     imports: [
+        SharedVariableModule.forRoot(),
         AuthModule,
         BrowserModule,
         BrowserAnimationsModule,

src/app/auth/auth.service.ts

@@ -5,19 +5,28 @@ import { environment } from '@environments/environment';
 import * as jwtDecode from 'jwt-decode';
 import * as moment from 'moment';
 import { of } from 'rxjs/internal/observable/of';
+import { RestService } from '@shared/services/rest.service';
+import { Observable } from 'rxjs';
+import { Organisation } from '@app/admin/organisation/organisation.model';
+import { UserResponse } from '../admin/users/user.model';
 
 export interface AuthResponseData {
   accessToken: string;
 }
 
+export interface CurrentUserInfoResponse {
+  user: UserResponse;
+  organizations: Organisation[];
+}
+
 @Injectable({
   providedIn: 'root',
 })
 export class AuthService {
   private baseUrl = environment.baseUrl;
   private URL = 'auth/login';
 
-  constructor(private http: HttpClient) {}
+  constructor(private http: HttpClient, private restService: RestService) {}
 
   // [email protected]
   // hunter2
@@ -36,6 +45,10 @@ export class AuthService {
       );
   }
 
+  me(): Observable<CurrentUserInfoResponse> {
+    return this.restService.get('auth/me');
+  }
+
   private setSession(jwt: string) {
     localStorage.setItem('id_token', jwt);
   }

src/app/models/application.ts

@@ -1,16 +1,24 @@
 import { IotDevice } from '../my-applications/iot-devices/iot-device.model';
+import { Organisation } from '../admin/organisation/organisation.model';
 
 export class Application {
-    public id: number;
-    public createdAt: string;
-    public updatedAt: string;
-    public name: string;
-    public description: string;
-    public iotDevices?: IotDevice[];
+  public id: number;
+  public createdAt: string;
+  public updatedAt: string;
+  public name: string;
+  public description: string;
+  public iotDevices?: IotDevice[];
+  public belongsTo: Organisation;
+}
+
+export class ApplicationRequest {
+  public name: string;
+  public description: string;
+  public organizationId: number;
 }
 
 export interface ApplicationData {
-    data: Application[];
-    ok?: boolean;
-    count?: number;
+  data: Application[];
+  ok?: boolean;
+  count?: number;
 }

src/app/my-applications/list-applications/list-applications.component.ts

@@ -1,11 +1,20 @@
-import { Component, OnInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+  OnDestroy,
+} from '@angular/core';
 import { Application } from '@app/models/application';
 import { TranslateService } from '@ngx-translate/core';
 import { ApplicationService } from '@shared/services/application.service';
 import { Subscription } from 'rxjs';
 import { Sort } from 'src/app/models/sort';
+import { NavbarComponent } from '../../navbar/navbar.component';
+import { SharedVariableService } from '../../shared-variable/shared-variable.service';
 
 @Component({
+  providers: [NavbarComponent],
   selector: 'app-list-applications',
   templateUrl: './list-applications.component.html',
   styleUrls: ['./list-applications.component.scss'],
@@ -65,18 +74,21 @@ export class ListApplicationsComponent implements OnInit, OnChanges, OnDestroy {
 
   constructor(
     public translate: TranslateService,
-    private applicationService: ApplicationService
+    private applicationService: ApplicationService,
+    private globalService: SharedVariableService
   ) {
     translate.use('da');
   }
-  
+
   ngOnChanges(changes: SimpleChanges): void {
     this.getApplications();
   }
 
   ngOnInit(): void {
     this.getApplications();
-
+    this.globalService.getValue().subscribe((organisationId) => {
+      this.getApplications(organisationId);
+    });
   }
 
   ngOnDestroy() {
@@ -107,7 +119,6 @@ export class ListApplicationsComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   nextPage() {
-    console.log("got next outer")
     if (this.pageOffset < this.pageTotal) {
       this.pageOffset++;
     }
@@ -122,13 +133,18 @@ export class ListApplicationsComponent implements OnInit, OnChanges, OnDestroy {
     });
   }
 
-  getApplications(): void {
+  getCurrentOrganisationId(): number {
+    return this.globalService.getSelectedOrganisationId();
+  }
+
+  getApplications(orgId?: number): void {
     this.applicationsSubscription = this.applicationService
       .getApplications(
         this.pageLimit,
         this.pageOffset * this.pageLimit,
         this.selectedSortObject.dir,
-        this.selectedSortObject.col
+        this.selectedSortObject.col,
+        orgId ? orgId : this.getCurrentOrganisationId()
       )
       .subscribe((applications) => {
         this.applications = applications.data;

src/app/navbar/navbar.component.html

@@ -24,9 +24,13 @@
           <app-global-admin></app-global-admin>
         </li>
         <li class="nav-item py-2">
-          <a>
-            Skanderborg Kommune
-          </a>
+          <!-- <label class="form-label" for="name">{{'QUESTION.CHOOSE-PERMISSION-TYPE' | translate}}</label>* -->
+          <select id="organisation" name="organisation" class="form-select" required #orgSelect
+            (change)="onChange(orgSelect.value)">
+            <option *ngFor="let org of organisations" [value]="org.id"
+              [selected]="org.id === getSelectedOrganisation()">
+              {{org.name}}</option>
+          </select>
         </li>
         <li class="nav-item py-2">
           <ul class="navbar-nav flex-column">

src/app/navbar/navbar.component.ts

@@ -1,36 +1,74 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import { TranslateService } from '@ngx-translate/core';
 import { faBroadcastTower } from '@fortawesome/free-solid-svg-icons';
 import { AuthService } from '@app/auth/auth.service';
 import { Router } from '@angular/router';
-import { User } from '@shared/form/form-body-application/form-body-application.component';
+import { Organisation } from '@app/admin/organisation/organisation.model';
+import { UserResponse } from '@app/admin/users/user.model';
+import { SharedVariableService } from '@app/shared-variable/shared-variable.service';
 
 @Component({
-    selector: 'app-navbar',
-    templateUrl: './navbar.component.html',
-    styleUrls: ['./navbar.component.scss'],
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.scss'],
 })
-export class NavbarComponent {
-    public user: User;
-    isLoginMode = true;
-    faBroadcastTower = faBroadcastTower;
-
-
-    constructor(
-        private authService: AuthService,
-        public translate: TranslateService,
-        private router: Router,
-    ) {
-        translate.use('da');
-    }
-
-    onLogout() {
-        this.authService.logout();
-        this.router.navigateByUrl('auth');
-    }
-
-    isLoggedIn() {
-        return this.authService.isLoggedIn()
-    }
+export class NavbarComponent implements OnInit {
+  public user: UserResponse;
+  public organisations: Organisation[];
+
+  isLoginMode = true;
+  faBroadcastTower = faBroadcastTower;
+
+  constructor(
+    private authService: AuthService,
+    public translate: TranslateService,
+    private router: Router,
+    private sharedVariableServioce: SharedVariableService
+  ) {
+    translate.use('da');
+  }
+
+  ngOnInit(): void {
+    this.getAllowedOrganizations();
+  }
+
+  onLogout() {
+    this.authService.logout();
+    this.router.navigateByUrl('auth');
+  }
+
+  isLoggedIn() {
+    return this.authService.isLoggedIn();
+  }
+
+  getAllowedOrganizations() {
+    this.authService.me().subscribe((response) => {
+      this.organisations = response.organizations;
+      this.user = response.user;
+      this.sharedVariableServioce.getSelectedOrganisationId();
+      if (
+        (this.sharedVariableServioce.getSelectedOrganisationId() == 0 &&
+          response.organizations.length > 0) ||
+        !response.organizations.some(
+          (x) => x.id == this.sharedVariableServioce.getSelectedOrganisationId()
+        )
+      ) {
+        this.setSelectedOrganisation(response.organizations[0].id);
+      }
+    });
+  }
+
+  setSelectedOrganisation(value) {
+    this.sharedVariableServioce.setSelectedOrganisationId(value);
+  }
+
+  getSelectedOrganisation() {
+    return this.sharedVariableServioce.getSelectedOrganisationId();
+  }
+
+  public onChange(value) {
+    this.setSelectedOrganisation(value);
+    this.sharedVariableServioce.setValue(value);
+  }
 }

src/app/navbar/navbar.module.ts

@@ -23,13 +23,9 @@ import { NGMaterialModule } from '@shared/Modules/materiale.module';
     RouterModule,
     TranslateModule,
     FontAwesomeModule,
-    NGMaterialModule
+    NGMaterialModule,
   ],
-  exports: [
-    NavbarComponent,
-  ],
-  providers: [
-    RestService,
-  ]
+  exports: [NavbarComponent],
+  providers: [RestService, NavbarComponent],
 })
-export class NavbarModule { }
+export class NavbarModule {}

src/app/shared-variable/shared-variable.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { SharedVariableService } from '@app/shared-variable/shared-variable.service';
+
+@NgModule({})
+export class SharedVariableModule {
+  static forRoot() {
+    return {
+      ngModule: SharedVariableModule,
+      providers: [SharedVariableService],
+    };
+  }
+}

src/app/shared-variable/shared-variable.service.ts

@@ -0,0 +1,36 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SharedVariableService {
+  constructor() {
+    this.routerInfo = new BehaviorSubject<number>(0);
+  }
+
+  private selectedOrganisationId: number;
+  private routerInfo: BehaviorSubject<number>;
+
+  getValue(): Observable<number> {
+    return this.routerInfo.asObservable();
+  }
+
+  setValue(newValue: number): void {
+    this.setSelectedOrganisationId(newValue);
+    this.routerInfo.next(newValue);
+  }
+
+  setSelectedOrganisationId(value: number) {
+    localStorage.setItem('selected_organisation', value.toString());
+    this.selectedOrganisationId = value;
+  }
+
+  getSelectedOrganisationId() {
+    if (this.selectedOrganisationId != null) {
+      return this.selectedOrganisationId;
+    }
+
+    return +localStorage.getItem('selected_organisation');
+  }
+}