#11665 draft of new vaadin-style side menu

angular.json

@@ -144,6 +144,7 @@
     },
     "schematicCollections": [
       "@angular-eslint/schematics"
-    ]
+    ],
+    "analytics": false
   }
 }

projects/api-proxy/.env

@@ -3,7 +3,7 @@ PORT=4201
 ANGULAR_ORIGIN=http://localhost:4200
 
 # Connect Angular FE to any Sormas BE, ex locally using: http://sormas-docker-test.com/
-API_SERVICE_URL=https://test-de2.sormas.netzlink.com/
+API_SERVICE_URL=http://localhost:6080/
 
 # When using a dev cert (ex for local BE) - set to true
-IGNORE_CERT_VALIDATION=false
+IGNORE_CERT_VALIDATION=true

src/app/_common-components/menu/menu.component.ts

@@ -56,7 +56,7 @@ export const userRoutesConfig: RouteItem[] = [
 ];
 
 @Component({
-  selector: 'app-menu',
+  selector: 'app-top-menu',
   templateUrl: './menu.component.html',
   styleUrls: ['./menu.component.scss'],
   animations: [

src/app/_common-components/side-menu/side-menu.component.html

@@ -0,0 +1,48 @@
+<!-- TODO add logo -->
+
+<mat-nav-list #mainMenu class="main-menu">
+  <ng-container *ngFor="let route of routeConfig">
+    <a
+      *ngIf="!useLegacyLink(route.legacyPath); else legacyLink"
+      mat-list-item
+      [routerLink]="[route.route]"
+      [ngClass]="[
+          route.selectedLink,
+          isSelectedLink(route.selectedLink) ? 'active' : ''
+        ]"
+    >
+      <mat-icon class="material-icons-round">{{ route.icon }}</mat-icon>
+      <span>{{ route.label | translate }}</span>
+    </a>
+    <ng-template #legacyLink>
+      <a
+        mat-list-item
+        href="{{getLegacyLink(route.legacyPath)}}"
+        [ngClass]="[
+          route.selectedLink,
+          isSelectedLink(route.selectedLink) ? 'active' : ''
+        ]"
+      >
+        <mat-icon class="material-icons-round">{{ route.icon }}</mat-icon>
+        <span>{{ route.label | translate }}</span>
+      </a>
+    </ng-template>
+  </ng-container>
+</mat-nav-list>
+
+<mat-nav-list #userMenu class="user-menu">
+  <a
+    *ngFor="let route of userRouteConfig"
+    mat-icon-button
+    [routerLink]="[route.route]"
+    [ngClass]="[
+        'button-user-menu',
+        route.selectedLink,
+        isSelectedLink(route.selectedLink) ? 'active' : ''
+      ]"
+  >
+    <mat-icon class="material-icons-round">{{ route.icon }}</mat-icon>
+  </a>
+</mat-nav-list>
+
+<!-- TODO add logout -->

src/app/_common-components/side-menu/side-menu.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SideMenuComponent } from './side-menu.component';
+
+describe('SideMenuComponent', () => {
+  let component: SideMenuComponent;
+  let fixture: ComponentFixture<SideMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SideMenuComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SideMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_common-components/side-menu/side-menu.component.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit } from '@angular/core';
+import {HelperService} from "../../_services/helper.service";
+
+export interface RouteItem {
+  route: string;
+  legacyPath: string;
+  label: string;
+  selectedLink: string;
+  icon?: string;
+}
+
+export const routesConfig: RouteItem[] = [
+  { route: '', legacyPath: 'dashboard', label: 'captions.mainMenuDashboard', selectedLink: 'dashboard', icon: 'analytics' },
+  { route: 'tasks/list', legacyPath: 'tasks', label: 'captions.mainMenuTasks', selectedLink: 'tasks', icon: 'checklist' },
+  { route: 'messages/list',legacyPath: 'messages',  label: 'captions.mainMenuExternalMessages', selectedLink: 'messages', icon: 'all-inbox' },
+  { route: 'msers/list', legacyPath: 'msers', label: 'captions.mainMenuAggregateReports', selectedLink: 'msers' },
+  { route: 'persons/list',legacyPath: 'persons',  label: 'captions.mainMenuPersons', selectedLink: 'persons', icon: 'person' },
+  { route: 'cases/list', legacyPath: 'cases', label: 'captions.mainMenuCases', selectedLink: 'cases', icon: 'recent-patient' },
+  { route: 'contacts/list', legacyPath: 'contacts', label: 'captions.mainMenuContacts', selectedLink: 'contacts', icon: 'handshake' },
+  { route: 'events/list', legacyPath: 'events', label: 'captions.mainMenuEvents', selectedLink: 'events', icon: 'phone' },
+  { route: 'samples/list',legacyPath: 'samples',  label: 'captions.mainMenuSamples', selectedLink: 'samples' },
+  { route: 'entries/list',legacyPath: 'entries',  label: 'captions.mainMenuEntries', selectedLink: 'entries' },
+  { route: 'immunizations/list',legacyPath: 'immunizations',  label: 'captions.mainMenuImmunizations', selectedLink: 'immunizations' },
+  { route: 'shares/list', legacyPath: 'shares', label: 'captions.mainMenuShareRequests', selectedLink: 'shares', icon: 'share' },
+  { route: 'stats', legacyPath: 'stats', label: 'captions.mainMenuStatistics', selectedLink: 'stats', icon: 'grouped-bar-chart'  },
+  { route: 'users/list', legacyPath: 'users', label: 'captions.mainMenuUsers', selectedLink: 'users' },
+  { route: 'reports/list', legacyPath: 'reports', label: 'captions.mainMenuReports', selectedLink: 'reports' },
+  { route: 'configuration', legacyPath: 'configuration', label: 'captions.mainMenuConfiguration', selectedLink: 'configuration', icon: 'settings' },
+  { route: 'about', legacyPath: 'about', label: 'captions.mainMenuAbout', selectedLink: 'about', icon: 'info' },
+];
+
+export const userRoutesConfig: RouteItem[] = [
+  { route: 'user-profile', legacyPath: '', label: 'mainMenuMyProfile', selectedLink: 'user-profile', icon: 'account_circle', },
+  { route: 'logout', legacyPath: '', label: 'logout', selectedLink: 'logout', icon: 'logout', },
+];
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: './side-menu.component.html',
+  styleUrls: ['./side-menu.component.scss']
+})
+export class SideMenuComponent implements OnInit {
+
+  routeConfig: RouteItem[] = routesConfig;
+  userRouteConfig: RouteItem[] = userRoutesConfig;
+  selectedRoute = '';
+  legacyUrl: string;
+
+  constructor(private helperService: HelperService) {
+    this.legacyUrl = helperService.getLegacyUrl();
+  }
+
+  ngOnInit(): void {
+  }
+
+  isAvailable(feature: string, userRight: string) : boolean {
+    // todo match against features and user rights retrieved from rest-api when the component is started
+    return true;
+  }
+
+  isSelectedLink(link: string): boolean {
+    const currentRoute = this.selectedRoute === '/' ? '/dashboard' : this.selectedRoute;
+    return currentRoute.startsWith(`/${link}`);
+  }
+
+  getLegacyLink(legacyPath: string) : string {
+    return this.legacyUrl + legacyPath;
+  }
+
+  useLegacyLink(legacyPath: string) : boolean {
+    return this.legacyUrl.length > 0 && legacyPath.length > 0;
+  }
+}

src/app/_constants/common.ts

@@ -45,7 +45,7 @@ export const POPULATION_IMPORT_MODAL_WIDTH = '720px';
 
 export const SMALL_NOTIFICATION_MODAL_WIDTH = 335;
 
-export const HEADER_HEIGHT = 68;
+export const HEADER_HEIGHT = 0; // 68;
 export const HEADING_TABS_HEIGHT = 108;
 
 // sidebar panels

src/app/_services/helper.service.ts

@@ -25,6 +25,7 @@ import {
 export class HelperService {
   private apiUrl: string;
   private domainSubfolder: string;
+  private legacyUrl: string;
 
   constructor(@Inject(LOCALE_ID) protected localeId: string) {}
 
@@ -47,6 +48,14 @@ export class HelperService {
     return `/assets/img/${imageName}`;
   }
 
+  setLegacyUrl(legacyUrl: string): void {
+    this.legacyUrl = legacyUrl;
+  }
+
+  getLegacyUrl(): string {
+    return this.legacyUrl;
+  }
+
   getRange(start: number, end: number, step = 1): number[] {
     const output = [];
     for (let i = start; i <= end; i += step) {

src/app/app.component.html

@@ -1,4 +1,4 @@
-<div [dir]="direction" class="main-wrapper">
-  <app-menu></app-menu>
-  <router-outlet></router-outlet>
-</div>
+<mat-sidenav-container [dir]="direction" class="main-wrapper" autosize="true">
+  <mat-sidenav mode="side" opened><app-menu></app-menu></mat-sidenav>
+  <mat-sidenav-content><router-outlet></router-outlet></mat-sidenav-content>
+</mat-sidenav-container>

src/app/app.component.scss

@@ -1,4 +1,4 @@
 .main-wrapper {
   height: 100%;
-  padding-top: 68px;
+  //padding-top: 68px;
 }

src/app/app.module.ts

@@ -21,13 +21,15 @@ import { ApiInterceptor } from './_interceptors/ApiInterceptor';
 import { NotFoundComponent } from './_common-components/not-found/not-found.component';
 import { HelperService } from './_services/helper.service';
 import { ErrorInterceptor } from './_interceptors/error.interceptor.service';
+import { SideMenuComponent } from './_common-components/side-menu/side-menu.component';
+import {MatIconModule} from "@angular/material/icon";
 
 export function HttpLoaderFactory(http: HttpClient): any {
   return new TranslateHttpLoader(http, 'assets/i18n/');
 }
 
 @NgModule({
-  declarations: [AppComponent, MenuComponent, NotFoundComponent],
+  declarations: [AppComponent, MenuComponent, NotFoundComponent, SideMenuComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
@@ -43,7 +45,7 @@ export function HttpLoaderFactory(http: HttpClient): any {
         deps: [HttpClient],
       },
     }),
-    DateFnsModule.forRoot(),
+    DateFnsModule.forRoot()
   ],
   providers: [
     { provide: ENV, useFactory: getEnv },

src/app/shared/auth/init-auth.ts

@@ -27,6 +27,7 @@ export function initializeAuth(
             helperService.setDomainFolder(result.domainSubfolder);
           }
           helperService.setApiUrl(result.apiUrl);
+          helperService.setLegacyUrl(result.legacyUrl);
           return resolve(
             authService.init({
               config: {

src/assets/environment.json

@@ -1,7 +1,8 @@
 {
   "keycloakRealm": "SORMAS",
   "keycloakClientId": "sormas-angular",
-  "keycloakUrl": "https://test-de2.sormas.netzlink.com/keycloak/auth/",
+  "keycloakUrl": "http://localhost:7080/keycloak",
   "apiUrl": "http://localhost:4201/sormas-rest",
-  "domainSubfolder": "/"
+  "domainSubfolder": "/",
+  "legacyUrl": "http://localhost:6080/sormas-ui/"
 }

src/assets/environment.json.dist

@@ -1,7 +1,8 @@
 {
   "keycloakRealm": "SORMAS",
   "keycloakClientId": "sormas-angular",
-  "keycloakUrl": "https://test-de2.sormas.netzlink.com/keycloak/auth/",
+  "keycloakUrl": "https://localhost:7080/keycloak/",
   "apiUrl": "http://localhost:4201/sormas-rest",
-  "domainSubfolder": "/sormas-ui/"
+  "domainSubfolder": "/sormas-angular/",
+  "legacyUrl": "http://localhost:6080/sormas-ui/"
 }