refacto: on main toolbar avoid multiple subscription and dispatch actions

src/app/app.component.html

 <div class="app-wrapper">
   <div class="header">
-    <!--    TODO Avoid triple event dispatched-->
-    <dlcm-main-toolbar-desktop-horizontal [logged]="isLoggedObs | async"
-                                          [currentPath]="currentModule"
-                                          [currentLanguage]="appLanguageObs | async"
-                                          [theme]="themeObs | async"
-                                          [numberArchiveInCart]="numberArchiveInCartObs | async"
-                                          [numberPendingRequestNotificationInbox]="sessionStorageHelper.getListItem(sessionStorageEnum.notificationInboxPending).length"
-                                          [numberMyOrderReadyNew]="sessionStorageHelper.getListItem(sessionStorageEnum.newOrderAvailable).length"
-                                          [userRoles]="userRolesObs | async"
-                                          [user]="currentUserObs | async"
-                                          (languageChange)="useLanguage($event)"
-                                          (navigateChange)="navigate($event)"
-                                          (logoutChange)="logout()"
-                                          (themeChange)="themeChange($event)"
-                                          (cartChange)="openCart()"
+    <dlcm-main-toolbar [logged]="isLoggedObs | async"
+                       [currentPath]="currentModule"
+                       [currentLanguage]="appLanguageObs | async"
+                       [theme]="themeObs | async"
+                       [numberArchiveInCart]="numberArchiveInCartObs | async"
+                       [numberPendingRequestNotificationInbox]="sessionStorageHelper.getListItem(sessionStorageEnum.notificationInboxPending).length"
+                       [numberMyOrderReadyNew]="sessionStorageHelper.getListItem(sessionStorageEnum.newOrderAvailable).length"
+                       [userRoles]="userRolesObs | async"
+                       [user]="currentUserObs | async"
+                       (languageChange)="useLanguage($event)"
+                       (navigateChange)="navigate($event)"
+                       (logoutChange)="logout()"
+                       (themeChange)="themeChange($event)"
+                       (cartChange)="openCart()"
     >
-    </dlcm-main-toolbar-desktop-horizontal>
-
-    <dlcm-main-toolbar-desktop-vertical [logged]="isLoggedObs | async"
-                                        [currentPath]="currentModule"
-                                        [currentLanguage]="appLanguageObs | async"
-                                        [theme]="themeObs | async"
-                                        [numberArchiveInCart]="numberArchiveInCartObs | async"
-                                        [numberPendingRequestNotificationInbox]="sessionStorageHelper.getListItem(sessionStorageEnum.notificationInboxPending).length"
-                                        [numberMyOrderReadyNew]="sessionStorageHelper.getListItem(sessionStorageEnum.newOrderAvailable).length"
-                                        [userRoles]="userRolesObs | async"
-                                        [user]="currentUserObs | async"
-                                        (languageChange)="useLanguage($event)"
-                                        (navigateChange)="navigate($event)"
-                                        (logoutChange)="logout()"
-                                        (themeChange)="themeChange($event)"
-                                        (cartChange)="openCart()"
-    >
-    </dlcm-main-toolbar-desktop-vertical>
-
-    <dlcm-main-toolbar-mobile [logged]="isLoggedObs | async"
-                              [currentPath]="currentModule"
-                              [currentLanguage]="appLanguageObs | async"
-                              [theme]="themeObs | async"
-                              [numberArchiveInCart]="numberArchiveInCartObs | async"
-                              [numberPendingRequestNotificationInbox]="sessionStorageHelper.getListItem(sessionStorageEnum.notificationInboxPending).length"
-                              [numberMyOrderReadyNew]="sessionStorageHelper.getListItem(sessionStorageEnum.newOrderAvailable).length"
-                              [userRoles]="userRolesObs | async"
-                              (languageChange)="useLanguage($event)"
-                              (navigateChange)="navigate($event)"
-                              (logoutChange)="logout()"
-                              (themeChange)="themeChange($event)"
-                              (cartChange)="openCart()"
-    >
-    </dlcm-main-toolbar-mobile>
+    </dlcm-main-toolbar>
   </div>
   <div class="body"
        [class.ignore-grid]="ignoreGrid"

src/app/app.component.scss

@@ -27,26 +27,6 @@
     }
   }
 
-  dlcm-main-toolbar-desktop-horizontal {
-    display: none;
-
-    @include respond-to-breakpoint-and-bigger('md') {
-      display: block;
-    }
-  }
-
-  dlcm-main-toolbar-mobile {
-    display: block;
-
-    @include respond-to-breakpoint-and-bigger('md') {
-      display: none;
-    }
-  }
-
-  dlcm-main-toolbar-desktop-vertical {
-    display: none;
-  }
-
   .app-wrapper {
     display: flex;
     flex-direction: column;
@@ -135,18 +115,6 @@
   @include respond-to-breakpoint-and-bigger('md') {
     .app-wrapper {
       flex-direction: row;
-
-      dlcm-main-toolbar-desktop-horizontal {
-        display: none;
-      }
-
-      dlcm-main-toolbar-desktop-vertical {
-        display: block;
-
-        @include respond-to-breakpoint-and-bigger('md') {
-          display: block;
-        }
-      }
     }
   }
 }

src/app/app.module.ts

@@ -33,6 +33,7 @@ import {AvatarPresentational} from "@app/components/presentationals/avatar/avata
 import {BurgerMenuPresentational} from "@app/components/presentationals/main-toolbar/burger-menu/burger-menu.presentational";
 import {MainToolbarDesktopVerticalPresentational} from "@app/components/presentationals/main-toolbar/main-toolbar-desktop-vertical/main-toolbar-desktop-vertical.presentational";
 import {MainToolbarMobilePresentational} from "@app/components/presentationals/main-toolbar/main-toolbar-mobile/main-toolbar-mobile.presentational";
+import {MainToolbarPresentational} from "@app/components/presentationals/main-toolbar/main-toolbar/main-toolbar.presentational";
 import {ThemeSelectorPresentational} from "@app/components/presentationals/theme-selector/theme-selector.presentational";
 import {UserForm} from "@app/components/presentationals/user-form/user-form";
 import {InMemoryStorage} from "@app/in-memory.storage";
@@ -78,12 +79,13 @@ import {
 import {environment} from "../environments/environment";
 import {AppComponent} from "./app.component";
 import {LanguageSelectorPresentational} from "./components/presentationals/language-selector/language-selector.presentational";
-import {MainToolbarDesktopHorizontalPresentational} from "./components/presentationals/main-toolbar/main-toolbar-desktop/main-toolbar-desktop-horizontal-presentational.component";
+import {MainToolbarDesktopHorizontalPresentational} from "./components/presentationals/main-toolbar/main-toolbar-desktop-horizontal/main-toolbar-desktop-horizontal.presentational";
 import {PageNotFoundPresentational} from "./components/presentationals/page-not-found/page-not-found.presentational";
 
 const presentationals = [
   AppComponent,
   LanguageSelectorPresentational,
+  MainToolbarPresentational,
   MainToolbarDesktopHorizontalPresentational,
   MainToolbarDesktopVerticalPresentational,
   MainToolbarMobilePresentational,

src/app/components/presentationals/main-toolbar/main-toolbar-desktop/main-toolbar-desktop-horizontal-presentational.component.spec.ts → src/app/components/presentationals/main-toolbar/main-toolbar-desktop-horizontal/main-toolbar-desktop-horizontal.presentational.spec.ts

@@ -14,7 +14,7 @@ import {
 import {environment} from "../../../../../environments/environment";
 import {MockTranslatePipe} from "../../../../../test-helpers/mock-translate.pipe";
 
-import {MainToolbarDesktopHorizontalPresentational} from "./main-toolbar-desktop-horizontal-presentational.component";
+import {MainToolbarDesktopHorizontalPresentational} from "./main-toolbar-desktop-horizontal.presentational";
 
 describe("MainToolbarDesktopHorizontalPresentational", () => {
   let component: MainToolbarDesktopHorizontalPresentational;

src/app/components/presentationals/main-toolbar/main-toolbar-desktop/main-toolbar-desktop-horizontal-presentational.component.ts → src/app/components/presentationals/main-toolbar/main-toolbar-desktop-horizontal/main-toolbar-desktop-horizontal.presentational.ts

@@ -7,8 +7,8 @@ import {OAuth2Service} from "solidify-frontend";
 
 @Component({
   selector: "dlcm-main-toolbar-desktop-horizontal",
-  templateUrl: "./main-toolbar-desktop-horizontal-presentational.component.html",
-  styleUrls: ["./main-toolbar-desktop-horizontal-presentational.component.scss"],
+  templateUrl: "./main-toolbar-desktop-horizontal.presentational.html",
+  styleUrls: ["./main-toolbar-desktop-horizontal.presentational.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MainToolbarDesktopHorizontalPresentational extends AbstractMainToolbarPresentational {

src/app/components/presentationals/main-toolbar/main-toolbar-desktop-vertical/main-toolbar-desktop-vertical.presentational.spec.ts

@@ -7,7 +7,7 @@ import {
 } from "@angular/core/testing";
 import {MatSnackBar} from "@angular/material/snack-bar";
 import {LanguageSelectorPresentational} from "@app/components/presentationals/language-selector/language-selector.presentational";
-import {MainToolbarDesktopHorizontalPresentational} from "@app/components/presentationals/main-toolbar/main-toolbar-desktop/main-toolbar-desktop-horizontal-presentational.component";
+import {MainToolbarDesktopHorizontalPresentational} from "@app/components/presentationals/main-toolbar/main-toolbar-desktop-horizontal/main-toolbar-desktop-horizontal.presentational";
 import {
   ENVIRONMENT,
   SNACK_BAR,

src/app/components/presentationals/main-toolbar/main-toolbar/main-toolbar.presentational.html

+<dlcm-main-toolbar-desktop-horizontal [logged]="logged"
+                                      [currentPath]="currentPath"
+                                      [currentLanguage]="currentLanguage"
+                                      [theme]="theme"
+                                      [numberArchiveInCart]="numberArchiveInCart"
+                                      [numberPendingRequestNotificationInbox]="numberPendingRequestNotificationInbox"
+                                      [numberMyOrderReadyNew]="numberMyOrderReadyNew"
+                                      [userRoles]="userRoles"
+                                      [user]="user"
+                                      (languageChange)="changeLanguage($event)"
+                                      (navigateChange)="changeNavigate($event)"
+                                      (logoutChange)="logout()"
+                                      (themeChange)="changeTheme($event)"
+                                      (cartChange)="changeCart()"
+>
+</dlcm-main-toolbar-desktop-horizontal>
+
+<dlcm-main-toolbar-desktop-vertical [logged]="logged"
+                                    [currentPath]="currentPath"
+                                    [currentLanguage]="currentLanguage"
+                                    [theme]="theme"
+                                    [numberArchiveInCart]="numberArchiveInCart"
+                                    [numberPendingRequestNotificationInbox]="numberPendingRequestNotificationInbox"
+                                    [numberMyOrderReadyNew]="numberMyOrderReadyNew"
+                                    [userRoles]="userRoles"
+                                    [user]="user"
+                                    (languageChange)="changeLanguage($event)"
+                                    (navigateChange)="changeNavigate($event)"
+                                    (logoutChange)="logout()"
+                                    (themeChange)="changeTheme($event)"
+                                    (cartChange)="changeCart()"
+>
+</dlcm-main-toolbar-desktop-vertical>
+
+<dlcm-main-toolbar-mobile [logged]="logged"
+                          [currentPath]="currentPath"
+                          [currentLanguage]="currentLanguage"
+                          [theme]="theme"
+                          [numberArchiveInCart]="numberArchiveInCart"
+                          [numberPendingRequestNotificationInbox]="numberPendingRequestNotificationInbox"
+                          [numberMyOrderReadyNew]="numberMyOrderReadyNew"
+                          [userRoles]="userRoles"
+                          (languageChange)="changeLanguage($event)"
+                          (navigateChange)="changeNavigate($event)"
+                          (logoutChange)="logout()"
+                          (themeChange)="changeTheme($event)"
+                          (cartChange)="changeCart()"
+>
+</dlcm-main-toolbar-mobile>
\ No newline at end of file

src/app/components/presentationals/main-toolbar/main-toolbar/main-toolbar.presentational.scss

+@import "../../../../../sass/abstracts/variables";
+@import "../../../../../sass/abstracts/mixins";
+
+dlcm-main-toolbar-desktop-horizontal {
+  display: none;
+
+  @include respond-to-breakpoint-and-bigger('md') {
+    display: block;
+  }
+}
+
+dlcm-main-toolbar-mobile {
+  display: block;
+
+  @include respond-to-breakpoint-and-bigger('md') {
+    display: none;
+  }
+}
+
+dlcm-main-toolbar-desktop-vertical {
+  display: none;
+}
+
+:host-context(body[theme='dlcm']), :host-context(body[theme='olos']) {
+  @include respond-to-breakpoint-and-bigger('md') {
+    dlcm-main-toolbar-desktop-horizontal {
+      display: none;
+    }
+
+    dlcm-main-toolbar-desktop-vertical {
+      display: block;
+
+      @include respond-to-breakpoint-and-bigger('md') {
+        display: block;
+      }
+    }
+  }
+}
\ No newline at end of file

src/app/components/presentationals/main-toolbar/main-toolbar/main-toolbar.presentational.ts

+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  Output,
+} from "@angular/core";
+import {SharedAbstractPresentational} from "@shared/components/presentationals/shared-abstract/shared-abstract.presentational";
+import {ApplicationRoleEnum} from "@shared/enums/application-role.enum";
+import {LanguagesEnum} from "@shared/enums/languages.enum";
+import {ThemeEnum} from "@shared/enums/theme.enum";
+import {UserExtended} from "@shared/models/business/user-extended.model";
+import {
+  BehaviorSubject,
+  Observable,
+} from "rxjs";
+import {ObservableUtil} from "solidify-frontend";
+
+@Component({
+  selector: "dlcm-main-toolbar",
+  templateUrl: "./main-toolbar.presentational.html",
+  styleUrls: ["./main-toolbar.presentational.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MainToolbarPresentational extends SharedAbstractPresentational {
+  @Input()
+  logged: boolean = false;
+
+  @Input()
+  currentPath: string;
+
+  @Input()
+  currentLanguage: LanguagesEnum;
+
+  @Input()
+  userRoles: ApplicationRoleEnum[];
+
+  @Input()
+  user: UserExtended;
+
+  @Input()
+  numberArchiveInCart: number;
+
+  @Input()
+  numberMyOrderReadyNew: number;
+
+  @Input()
+  numberPendingRequestNotificationInbox: number;
+
+  @Input()
+  theme: ThemeEnum;
+
+  private readonly _themeBS: BehaviorSubject<ThemeEnum | undefined> = new BehaviorSubject<ThemeEnum | undefined>(undefined);
+  @Output("themeChange")
+  readonly themeObs: Observable<ThemeEnum | undefined> = ObservableUtil.asObservable(this._themeBS);
+
+  // Navigate
+  private readonly _navigateBS: BehaviorSubject<string | undefined> = new BehaviorSubject<string | undefined>(undefined);
+  @Output("navigateChange")
+  readonly navigateObs: Observable<string | undefined> = ObservableUtil.asObservable(this._navigateBS);
+
+  // Language
+  private readonly _languageBS: BehaviorSubject<LanguagesEnum | undefined> = new BehaviorSubject<LanguagesEnum | undefined>(undefined);
+  @Output("languageChange")
+  readonly languageObs: Observable<LanguagesEnum | undefined> = ObservableUtil.asObservable(this._languageBS);
+
+  // Logout
+  private readonly _logoutBS: BehaviorSubject<void | undefined> = new BehaviorSubject<void | undefined>(undefined);
+  @Output("logoutChange")
+  readonly logoutObs: Observable<void | undefined> = ObservableUtil.asObservable(this._logoutBS);
+
+  // Cart
+  private readonly _cartBS: BehaviorSubject<void | undefined> = new BehaviorSubject<void | undefined>(undefined);
+  @Output("cartChange")
+  readonly cartObs: Observable<void | undefined> = ObservableUtil.asObservable(this._cartBS);
+
+  changeTheme(theme: ThemeEnum): void {
+    if (this._themeBS.value !== theme) {
+      this._themeBS.next(theme);
+    }
+  }
+
+  changeLanguage(language: LanguagesEnum): void {
+    if (this._languageBS.value !== language) {
+      this._languageBS.next(language);
+    }
+  }
+
+  changeNavigate(navigate: string): void {
+    this._navigateBS.next(navigate);
+  }
+
+  changeCart(): void {
+    this._cartBS.next();
+  }
+
+  logout(): void {
+    this._logoutBS.next();
+  }
+}

src/index.html

@@ -30,28 +30,28 @@
 <script>
     var ua = window.navigator.userAgent;
 
-    var browserUnnsuported;
+    var browserUnsupported;
     var msie = ua.indexOf('MSIE ');
     if (msie > -1) {
         // IE 10 or older => return version number
-        browserUnnsuported = "Internet Explorer " + parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
+        browserUnsupported = "Internet Explorer " + parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
     }
 
     var trident = ua.indexOf('Trident/');
     if (trident > -1) {
         // IE 11 => return version number
         var rv = ua.indexOf('rv:');
-        browserUnnsuported = "Internet Explorer " + parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
+        browserUnsupported = "Internet Explorer " + parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
     }
 
     var edge = ua.indexOf('Edge/');
     if (edge > -1) {
         // Edge (IE 12+) => return version number
-        browserUnnsuported = "Edge " + parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
+        browserUnsupported = "Edge " + parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
     }
 
-    if (browserUnnsuported) {
-        alert("Your browser " + browserUnnsuported + " is not supported by this application.\nPlease use a browser more recent like Chrome or Firefox.");
+    if (browserUnsupported) {
+        alert("Your browser " + browserUnsupported + " is not supported by this application.\nPlease use a browser more recent like Chrome or Firefox.");
         document.body.style.display = "none";
     }
 </script>