app: standardize initialization

Initializes the application according to angular standards. * Adds a service for initialization. * Adds a service for router initialization. * Improves app component template. * Improves tests. Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>
rero · Sep 29, 2020 · 4812f48 · 4812f48
1 parent 2e98904
commit 4812f48
Show file tree

Hide file tree

Showing 53 changed files with 442 additions and 235 deletions.
diff --git a/projects/admin/src/app/app.component.html b/projects/admin/src/app/app.component.html
@@ -15,12 +15,11 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <ngx-spinner type="ball-spin-clockwise" size="medium"></ngx-spinner>
-<div *ngIf="!user" translate>Loading…</div>
-<ng-container *ngIf="user">
+<ng-container *ngIf="userLoaded">
   <header>
-    <admin-menu *ngIf="access"></admin-menu>
+    <admin-menu *ngIf="allowAccess"></admin-menu>
   </header>
-  <div class="container-fluid px-5" *ngIf="access; else noaccess">
+  <div class="container-fluid px-5" *ngIf="allowAccess; else noaccess">
     <router-outlet></router-outlet>
   </div>
   <footer class="rero-ils-footer container-fluid px-5 d-flex justify-content-center align-items-center border-top mt-4 py-4">

diff --git a/projects/admin/src/app/app.component.spec.ts b/projects/admin/src/app/app.component.spec.ts
@@ -24,9 +24,9 @@ import { DatepickerModule } from 'ngx-bootstrap/datepicker';
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { RecordModule } from '@rero/ng-core';
-import { HttpClientModule } from '@angular/common/http';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormsModule } from '@angular/forms';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
@@ -36,7 +36,7 @@ describe('AppComponent', () => {
         CollapseModule,
         FormsModule,
         RecordModule,
-        HttpClientModule,
+        HttpClientTestingModule,
         DatepickerModule.forRoot(),
         BsDropdownModule.forRoot(),
         TranslateModule.forRoot({}),

diff --git a/projects/admin/src/app/app.component.ts b/projects/admin/src/app/app.component.ts
@@ -15,134 +15,52 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { NavigationStart, Router } from '@angular/router';
-import { LocalStorageService, TranslateService } from '@rero/ng-core';
-import { Subscription } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import { User } from './class/user';
-import { AppConfigService } from './service/app-config.service';
+import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { AppRouterEventService } from './service/app-router-event.service';
 import { LibrarySwitchService } from './service/library-switch.service';
-import { OrganisationService } from './service/organisation.service';
 import { UserService } from './service/user.service';
 
 @Component({
   selector: 'admin-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit, OnDestroy {
+export class AppComponent implements OnInit {
 
-  /**
-   * User
-   */
-  user: any;
-
-  /**
-   * Control access on template
-   */
-  access = false;
+  /** Allow interface access */
+  get allowAccess() {
+    return this._userService.allowAccess;
+  }
 
-  /**
-   * Store some observables on Subcription
-   */
-  private _subcription = new Subscription();
+  /** is user loaded */
+  get userLoaded() {
+    return this._userService.userLoaded;
+  }
 
   /**
    * Constructor
-   * @param userService - UserService
-   * @param appConfigService - AppConfigService
-   * @param translateService - TranslateService
-   * @param localStorageService - LocalStorageService
-   * @param librarySwitchService - LibrarySwitchService
-   * @param router - Router
+   * @param _userService - UserService
+   * @param _appRouterEventService - AppRouterEventService
+   * @param _librarySwitchService - LibrarySwitchService
+   * @param _spinner - NgxSpinnerService
    */
   constructor(
-    private userService: UserService,
-    private appConfigService: AppConfigService,
-    private translateService: TranslateService,
-    private localStorageService: LocalStorageService,
-    private librarySwitchService: LibrarySwitchService,
-    private router: Router,
-    private organisationService: OrganisationService
-    ) {
-      this.initializeEvents();
-    }
+    private _userService: UserService,
+    private _appRouterEventService: AppRouterEventService,
+    private _librarySwitchService: LibrarySwitchService,
+    private _spinner: NgxSpinnerService
+    ) {}
 
+    /** Init */
   ngOnInit() {
-    this.userService.loadLoggedUser();
-  }
-
-  ngOnDestroy() {
-    this._subcription.unsubscribe();
-  }
-
-  /**
-   * Initialize App Events
-   * @return void
-   */
-  private initializeEvents() {
-    this._subcription.add(this.userService.onUserLoaded$.subscribe((data: any) => {
-      if (!data.metadata) {
-        this.access = false;
-      }
-      this.appConfigService.setSettings(data.settings);
-      const language = this.appConfigService.getSettings().language;
-      if (language) {
-        this.translateService.setLanguage(language);
-      } else {
-        const browserLang = this.translateService.getBrowserLang();
-        this.translateService.setLanguage(
-          browserLang.match(this.appConfigService.languages.join('|')) ?
-          browserLang : this.appConfigService.defaultLanguage
-        );
-      }
-      const user = this.userService.getCurrentUser();
-      if (data.metadata) {
-        this.access = user.hasRoles(this.appConfigService.adminRoles, 'or');
-      }
-      if (this.access) {
-        this.organisationService.loadOrganisationByPid(
-          user.library.organisation.pid
-        );
-        this.organisationService.onOrganisationLoaded.subscribe(() => {
-          if (!this.localStorageService.has(User.STORAGE_KEY)) {
-            this.localStorageService.set(User.STORAGE_KEY, user);
-          } else {
-            const userLocal = this.localStorageService.get(User.STORAGE_KEY);
-            if (userLocal.pid !== user.pid) {
-              this.localStorageService.set(User.STORAGE_KEY, user);
-            }
-            const locale = this.localStorageService.get(User.STORAGE_KEY);
-            user.setCurrentLibrary(locale.currentLibrary);
-          }
-          this.librarySwitchService.switch(
-            user.getCurrentLibrary()
-          );
-          this.user = user;
-        });
-      } else {
-        this.user = user;
-      }
-    }));
-
-    this._subcription.add(this.router.events.pipe(
-        filter(event => event instanceof NavigationStart)
-      ).subscribe((event: NavigationStart) => {
-        if (
-          event instanceof NavigationStart
-          && this.localStorageService.has(User.STORAGE_KEY)
-        ) {
-          if (this.localStorageService.isExpired(
-            User.STORAGE_KEY,
-            this.appConfigService.sessionExpiredSeconds)
-          ) {
-            this.localStorageService.remove(User.STORAGE_KEY);
-          } else {
-            this.localStorageService.updateDate(User.STORAGE_KEY);
-          }
-        }
-      })
-    );
+    this._spinner.show();
+    this._appRouterEventService.initializeEvents();
+    this._userService.onUserLoaded$.subscribe(() => {
+      this._librarySwitchService.switch(
+        this._userService.getCurrentUser().getCurrentLibrary()
+      );
+      this._spinner.hide();
+    });
   }
 }
diff --git a/projects/admin/src/app/app.module.ts b/projects/admin/src/app/app.module.ts
@@ -16,7 +16,7 @@
  */
 
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { LOCALE_ID, NgModule } from '@angular/core';
+import { APP_INITIALIZER, LOCALE_ID, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -115,6 +115,12 @@ import { RemoteTypeaheadService } from '@rero/ng-core';
 import { MefTypeahead } from './class/mef-typeahead';
 import { DocumentsTypeahead } from './class/documents-typeahead';
 import { MainTitlePipe } from './pipe/main-title.pipe';
+import { AppInitService } from './service/app-init.service';
+
+/** Init application factory */
+export function appInitFactory(appInitService: AppInitService) {
+  return () => appInitService.load();
+}
 
 @NgModule({
   declarations: [
@@ -216,6 +222,12 @@ import { MainTitlePipe } from './pipe/main-title.pipe';
     TypeaheadModule
   ],
   providers: [
+    {
+      provide: APP_INITIALIZER,
+      useFactory: appInitFactory,
+      deps: [AppInitService],
+      multi: true
+    },
     {
       provide: HTTP_INTERCEPTORS,
       useClass: NoCacheHeaderInterceptor,

diff --git a/projects/admin/src/app/circulation/checkin/checkin.component.spec.ts b/projects/admin/src/app/circulation/checkin/checkin.component.spec.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
@@ -33,7 +33,7 @@ describe('CheckinComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         TranslateModule.forRoot(),
-        HttpClientModule,
+        HttpClientTestingModule,
         RouterTestingModule,
         CirculationModule
       ],

diff --git a/projects/admin/src/app/circulation/item/item.component.spec.ts b/projects/admin/src/app/circulation/item/item.component.spec.ts
@@ -1,7 +1,7 @@
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CirculationModule } from '../circulation.module';
 import { ItemComponent } from './item.component';
 
@@ -14,7 +14,7 @@ describe('ItemComponent', () => {
       imports: [
         TranslateModule.forRoot(),
         RouterTestingModule,
-        HttpClientModule,
+        HttpClientTestingModule,
         CirculationModule
       ]
     })

diff --git a/projects/admin/src/app/circulation/items-list/items-list.component.spec.ts b/projects/admin/src/app/circulation/items-list/items-list.component.spec.ts
@@ -14,10 +14,10 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CirculationModule } from '../circulation.module';
 import { ItemsListComponent } from './items-list.component';
 
@@ -31,7 +31,7 @@ describe('ItemsListComponent', () => {
       imports: [
         RouterTestingModule,
         TranslateModule.forRoot(),
-        HttpClientModule,
+        HttpClientTestingModule,
         CirculationModule
       ]
     })

diff --git a/projects/admin/src/app/circulation/main-request/main-request.component.spec.ts b/projects/admin/src/app/circulation/main-request/main-request.component.spec.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
@@ -31,7 +31,7 @@ describe('MainRequestComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
-        HttpClientModule,
+        HttpClientTestingModule,
         TranslateModule.forRoot(),
         CirculationModule
       ]

diff --git a/projects/admin/src/app/circulation/patron/card/card.component.spec.ts b/projects/admin/src/app/circulation/patron/card/card.component.spec.ts
@@ -15,11 +15,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
 import { CirculationModule } from '../../circulation.module';
 import { CardComponent } from './card.component';
-import { TranslateModule } from '@ngx-translate/core';
 
 
 describe('CardComponent', () => {
@@ -29,7 +29,7 @@ describe('CardComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
-        HttpClientModule,
+        HttpClientTestingModule,
         CirculationModule,
         TranslateModule.forRoot()
       ]

diff --git a/projects/admin/src/app/circulation/patron/history/history.component.spec.ts b/projects/admin/src/app/circulation/patron/history/history.component.spec.ts
@@ -15,10 +15,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CirculationModule } from '../../circulation.module';
 import { HistoryComponent } from './history.component';
 
@@ -31,7 +31,7 @@ describe('HistoryComponent', () => {
       imports: [
         TranslateModule.forRoot(),
         RouterTestingModule,
-        HttpClientModule,
+        HttpClientTestingModule,
         CirculationModule
       ]
     })

diff --git a/projects/admin/src/app/circulation/patron/loan/loan.component.spec.ts b/projects/admin/src/app/circulation/patron/loan/loan.component.spec.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
@@ -35,7 +35,7 @@ describe('LoanComponent', () => {
       imports: [
         TranslateModule.forRoot(),
         RouterTestingModule,
-        HttpClientModule,
+        HttpClientTestingModule,
         CirculationModule
       ],
       providers: [

diff --git a/projects/admin/src/app/circulation/patron/main/main.component.spec.ts b/projects/admin/src/app/circulation/patron/main/main.component.spec.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
@@ -34,7 +34,7 @@ describe('MainComponent', () => {
       imports: [
         TranslateModule.forRoot(),
         RouterTestingModule,
-        HttpClientModule,
+        HttpClientTestingModule,
         CirculationModule
       ],
       providers: [