UI: Refactoring

ui-ngx/src/app/modules/home/menu/side-menu.component.html

@@ -16,7 +16,7 @@
 
 -->
 <ul fxFlex fxLayout="column" fxLayoutAlign="start stretch" class="tb-side-menu">
-  <li *ngFor="let section of menuSections$ | async; trackBy: trackByMenuSection" [ngSwitch]="section.type === 'link'" [fxHide]="section.disabled">
+  <li *ngFor="let section of menuSections$ | async; trackBy: trackByMenuSection" [ngSwitch]="section.type === 'link'">
     <tb-menu-link *ngSwitchCase="true" [section]="section"></tb-menu-link>
     <tb-menu-toggle *ngSwitchCase="false" [section]="section"></tb-menu-toggle>
   </li>

ui-ngx/src/app/modules/home/menu/side-menu.component.ts

@@ -17,6 +17,8 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { MenuService } from '@core/services/menu.service';
 import { MenuSection } from '@core/services/menu.models';
+import { Observable, of } from 'rxjs';
+import { mergeMap, share } from 'rxjs/operators';
 
 @Component({
   selector: 'tb-side-menu',
@@ -26,15 +28,23 @@ import { MenuSection } from '@core/services/menu.models';
 })
 export class SideMenuComponent implements OnInit {
 
-  menuSections$ = this.menuService.menuSections();
+  menuSections$: Observable<Array<MenuSection>>;
 
   constructor(private menuService: MenuService) {
+    this.menuSections$ = this.menuService.menuSections().pipe(
+      mergeMap((sections) => this.filterSections(sections)),
+      share()
+    );
   }
 
   trackByMenuSection(index: number, section: MenuSection){
     return section.id;
   }
 
+  private filterSections(sections: Array<MenuSection>): Observable<Array<MenuSection>> {
+    return of(sections.filter(section => !section.disabled));
+  }
+
   ngOnInit() {
   }
 

ui-ngx/src/app/modules/home/pages/account/account-routing.module.ts

@@ -18,15 +18,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { RouterTabsComponent } from '@home/components/router-tabs.component';
 import { Authority } from '@shared/models/authority.enum';
-import { ProfileComponent } from '@home/pages/profile/profile.component';
+import { SecurityRoutes, UserTwoFAProvidersResolver } from '@home/pages/security/security-routing.module';
-import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
-import { SecurityComponent } from '@home/pages/security/security.component';
-import { UserTwoFAProvidersResolver } from '@home/pages/security/security-routing.module';
-import { NotificationSettingsComponent } from '@home/pages/notification/settings/notification-settings.component';
 import {
-  NotificationUserSettingsResolver
+  NotificationUserSettingsResolver,
+  NotificationUserSettingsRoutes
 } from '@home/pages/notification/settings/notification-settings-routing.modules';
-import { UserProfileResolver } from '@home/pages/profile/profile-routing.module';
+import { ProfileRoutes, UserProfileResolver } from '@home/pages/profile/profile-routing.module';
 
 const routes: Routes = [
   {
@@ -48,55 +45,9 @@ const routes: Routes = [
           redirectTo: '/account/profile',
         }
       },
-      {
+      ...ProfileRoutes,
-        path: 'profile',
+      ...SecurityRoutes,
-        component: ProfileComponent,
+      ...NotificationUserSettingsRoutes
-        canDeactivate: [ConfirmOnExitGuard],
-        data: {
-          auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN, Authority.CUSTOMER_USER],
-          title: 'account.personal-info',
-          breadcrumb: {
-            label: 'account.personal-info',
-            icon: 'mdi:badge-account-horizontal',
-          }
-        },
-        resolve: {
-          user: UserProfileResolver
-        }
-      },
-      {
-        path: 'security',
-        component: SecurityComponent,
-        canDeactivate: [ConfirmOnExitGuard],
-        data: {
-          auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN, Authority.CUSTOMER_USER],
-          title: 'security.security',
-          breadcrumb: {
-            label: 'security.security',
-            icon: 'lock'
-          }
-        },
-        resolve: {
-          user: UserProfileResolver,
-          providers: UserTwoFAProvidersResolver
-        }
-      },
-      {
-        path: 'notificationSettings',
-        component: NotificationSettingsComponent,
-        canDeactivate: [ConfirmOnExitGuard],
-        data: {
-          auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN],
-          title: 'account.notification-settings',
-          breadcrumb: {
-            label: 'account.notification-settings',
-            icon: 'settings'
-          }
-        },
-        resolve: {
-          userSettings: NotificationUserSettingsResolver
-        }
-      }
     ]
   }
 ];

ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.ts

@@ -46,9 +46,8 @@ export class NotificationSettingFormComponent implements ControlValueAccessor, O
   notificationDeliveryMethod = NotificationDeliveryMethod;
   notificationDeliveryMethodMap = Object.keys(NotificationDeliveryMethod) as NotificationDeliveryMethod[];
 
-  private modelValue;
   private propagateChange = null;
-  private propagateChangePending = false;
+
   private valueChange$: Subscription = null;
 
   constructor(private utils: UtilsService,
@@ -57,12 +56,6 @@ export class NotificationSettingFormComponent implements ControlValueAccessor, O
 
   registerOnChange(fn: any): void {
     this.propagateChange = fn;
-    if (this.propagateChangePending) {
-      this.propagateChangePending = false;
-      setTimeout(() => {
-        this.propagateChange(this.modelValue);
-      }, 0);
-    }
   }
 
   registerOnTouched(fn: any): void {
@@ -98,8 +91,7 @@ export class NotificationSettingFormComponent implements ControlValueAccessor, O
   }
 
   toggleEnabled() {
-    this.notificationSettingsFormGroup.get('enabled').patchValue(!this.notificationSettingsFormGroup.get('enabled').value,
+    this.notificationSettingsFormGroup.get('enabled').patchValue(!this.notificationSettingsFormGroup.get('enabled').value);
-      {emitEvent: true});
   }
 
   getChecked(deliveryMethod: NotificationDeliveryMethod): boolean {
@@ -117,23 +109,12 @@ export class NotificationSettingFormComponent implements ControlValueAccessor, O
   }
 
   writeValue(value: NotificationUserSetting): void {
-    this.propagateChangePending = false;
+    if (isDefinedAndNotNull(value)) {
-    this.modelValue = value;
+      this.notificationSettingsFormGroup.patchValue(value, {emitEvent: false});
-    if (isDefinedAndNotNull(this.modelValue)) {
-      this.notificationSettingsFormGroup.patchValue(this.modelValue, {emitEvent: false});
-      if (!this.disabled && !this.notificationSettingsFormGroup.valid) {
-        this.updateModel();
-      }
     }
   }
 
   private updateModel() {
-    const value = this.notificationSettingsFormGroup.value;
+      this.propagateChange(this.notificationSettingsFormGroup.value);
-    this.modelValue = {...this.modelValue, ...value};
-    if (this.propagateChange) {
-      this.propagateChange(this.modelValue);
-    } else {
-      this.propagateChangePending = true;
-    }
   }
 }

ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings-routing.modules.ts

@@ -36,7 +36,7 @@ export class NotificationUserSettingsResolver implements Resolve<any> {
   }
 }
 
-const routes: Routes = [
+export const NotificationUserSettingsRoutes: Routes = [
   {
     path: 'notificationSettings',
     component: NotificationSettingsComponent,
@@ -55,6 +55,13 @@ const routes: Routes = [
   }
 ];
 
+const routes: Routes = [
+  {
+    path: 'notificationSettings',
+    redirectTo: '/account/notificationSettings'
+  }
+];
+
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],

ui-ngx/src/app/modules/home/pages/profile/profile-routing.module.ts

@@ -40,7 +40,7 @@ export class UserProfileResolver implements Resolve<User> {
   }
 }
 
-const routes: Routes = [
+export const ProfileRoutes: Routes = [
   {
     path: 'profile',
     component: ProfileComponent,
@@ -59,6 +59,13 @@ const routes: Routes = [
   }
 ];
 
+const routes: Routes = [
+  {
+    path: 'profile',
+    redirectTo: 'account/profile'
+  }
+];
+
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],

ui-ngx/src/app/modules/home/pages/security/security-routing.module.ts

@@ -53,7 +53,7 @@ export class UserTwoFAProvidersResolver implements Resolve<Array<TwoFactorAuthPr
   }
 }
 
-const routes: Routes = [
+export const SecurityRoutes: Routes = [
   {
     path: 'security',
     component: SecurityComponent,
@@ -73,6 +73,13 @@ const routes: Routes = [
   }
 ];
 
+const routes: Routes = [
+  {
+    path: 'security',
+    redirectTo: '/account/security'
+  }
+];
+
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],

ui-ngx/src/app/shared/components/user-menu.component.html

@@ -32,10 +32,6 @@
         <mat-icon class="material-icons">account_circle</mat-icon>
         <span translate>account.account</span>
       </button>
-<!--      <button mat-menu-item (click)="openSecurity()">-->
-<!--        <mat-icon class="material-icons">lock</mat-icon>-->
-<!--        <span translate>security.security</span>-->
-<!--      </button>-->
       <button mat-menu-item (click)="logout()">
         <mat-icon class="material-icons">exit_to_app</mat-icon>
         <span translate>home.logout</span>

ui-ngx/src/app/shared/components/user-menu.component.ts

@@ -106,10 +106,6 @@ export class UserMenuComponent implements OnInit, OnDestroy {
     this.router.navigate(['account']);
   }
 
-  // openSecurity(): void {
-  //   this.router.navigate(['security']);
-  // }
-
   logout(): void {
     this.authService.logout();
   }