add icons + initial work for org switching #1127

frontend-admin/src/app/app-routing.module.ts

@@ -4,7 +4,7 @@ import { MissingOrgComponent } from './missing-org/missing-org.component';
 
 const routes: Routes = [
   {
-    path: 'organization/:id',
+    path: 'organization/:organizationId',
     loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
   },
   {

frontend-admin/src/app/app.component.html

@@ -1,8 +1,9 @@
 <!--based on https://getbootstrap.com/docs/5.2/examples/dashboard/ -->
-<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
+<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
     <span class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6">
         <img src="assets/alfio-logo.svg" height="48">
     </span>
+    <span style="color: white;">org id {{organizationId$ | async}}</span>
     <!-- <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search"
         aria-label="Search">
     <div class="navbar-nav">

frontend-admin/src/app/app.component.ts

@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivationEnd, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
+import { filter, map, Observable, tap } from 'rxjs';
+import { Organization } from './model/organization';
+import { OrganizationService } from './shared/organization.service';
 
 @Component({
   selector: 'app-root',
@@ -8,11 +12,23 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class AppComponent implements OnInit {
 
-  constructor(private readonly translateService: TranslateService) {
+  public organizations$?: Observable<Organization[]>;
+  public organizationId$?: Observable<string | null>;
+
+  constructor(
+    private readonly translateService: TranslateService,
+    private readonly organizationService: OrganizationService,
+    private readonly router: Router,
+  ) {
   }
 
   ngOnInit(): void {
     this.translateService.setDefaultLang('en');
     this.translateService.use('en');
+    this.organizations$ = this.organizationService.getOrganizations();
+    this.organizationId$ = this.router.events.pipe(filter(a => a instanceof ActivationEnd), map(a => {
+      const ae = a as ActivationEnd;
+      return ae.snapshot.paramMap.get('organizationId');
+    }));
   }
 }

frontend-admin/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import {APP_INITIALIZER, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
-import {provideSvgIcons} from '@ngneat/svg-icon';
+import {provideSvgIconsConfig} from '@ngneat/svg-icon';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 import {AuthenticationModule} from "./authentication/authentication.module";
@@ -12,7 +12,7 @@ import {firstValueFrom} from "rxjs";
 import { SvgIconComponent } from '@ngneat/svg-icon';
 import {OrganizationService} from './shared/organization.service';
 import {MissingOrgComponent} from './missing-org/missing-org.component';
-import { ICONS } from './shared/icons';
+import { ICON_CONFIG } from './shared/icons';
 import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
 import {CustomLoader} from './shared/i18n.service';
 
@@ -58,7 +58,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     { provide: APP_INITIALIZER, useFactory: RedirectToLoginIfNeeded, deps: [UserService, Router], multi: true},
     { provide: HTTP_INTERCEPTORS, useClass: AuthTokenInterceptor, multi: true },
     { provide: HttpXsrfTokenExtractor, useClass: DOMXsrfTokenExtractor },
-    provideSvgIcons(ICONS),
+    provideSvgIconsConfig(ICON_CONFIG),
     DOMGidExtractor,
     DOMXsrfTokenExtractor,
     UserService,

frontend-admin/src/app/dashboard/dashboard-menu/dashboard-menu.component.html

@@ -1,12 +1,12 @@
 <ul class="nav flex-column">
   <li class="nav-item">
-    <a class="nav-link" [routerLink]="['./']">My events</a>
+    <a class="nav-link" [routerLink]="['./']"><svg-icon key="home"></svg-icon> My events</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" [routerLink]="['./subscriptions']">Subscriptions</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" [routerLink]="['./organization-info']">My organization</a>
+    <a class="nav-link" [routerLink]="['./organization-info']"><svg-icon key="organization"></svg-icon> My organization</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" [routerLink]="['./access-control']">Access Control</a>
@@ -15,6 +15,6 @@
     <a class="nav-link" [routerLink]="['./groups']">Groups</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" [routerLink]="['./configuration']">Configuration</a>
+    <a class="nav-link" [routerLink]="['./configuration']"><svg-icon key="settings"></svg-icon> Configuration</a>
   </li>
 </ul>

frontend-admin/src/app/dashboard/dashboard.component.html

@@ -1,5 +1,6 @@
 <h1 translate="admin.dashboard.my-events"></h1>
-<svg-icon key="check"></svg-icon>
+<button type="button" class="btn btn-primary"><svg-icon key="check" size="md"></svg-icon> Active</button>
+<button type="button" class="btn btn-outline-primary">Inactive</button>
 <h2>Active</h2>
 <ul>
     <li *ngFor="let ev of activeEvents$ | async">

frontend-admin/src/app/dashboard/dashboard.component.ts

@@ -14,7 +14,7 @@ export class DashboardComponent implements OnInit {
   public expiredEvents$: Observable<EventInfo[]> = of();
 
   constructor(route: ActivatedRoute, private readonly eventService: EventService) {
-    this.organizationId = route.snapshot.paramMap.get('id') as string;
+    this.organizationId = route.snapshot.paramMap.get('organizationId') as string;
   }
 
   ngOnInit(): void {

frontend-admin/src/app/dashboard/dashboard.module.ts

@@ -7,9 +7,9 @@ import {OrganizationService} from "../shared/organization.service";
 import {CommonModule} from "@angular/common";
 import {EventService} from "../shared/event.service";
 import {OrganizationConfigurationComponent} from './organization-configuration/organization-configuration.component';
-import {provideSvgIcons, SvgIconComponent} from '@ngneat/svg-icon';
+import {provideSvgIconsConfig, SvgIconComponent} from '@ngneat/svg-icon';
 import { TranslateModule } from '@ngx-translate/core'
-import { ICONS } from "../shared/icons";
+import { ICON_CONFIG } from "../shared/icons";
 
 @NgModule({
   imports: [
@@ -31,7 +31,7 @@ import { ICONS } from "../shared/icons";
   providers: [
     OrganizationService,
     EventService,
-    provideSvgIcons(ICONS),
+    provideSvgIconsConfig(ICON_CONFIG)
   ]
 })
 export class DashboardModule {}

frontend-admin/src/app/shared/icons.ts

@@ -1,3 +1,26 @@
+import { addIcon } from '../svg/add';
 import {checkIcon} from '../svg/check';
+import {homeIcon} from '../svg/home';
+import { organizationIcon } from '../svg/organization';
+import { settingsIcon } from '../svg/settings';
 
-export const ICONS = [checkIcon];
+const ICONS = [
+  checkIcon,
+  homeIcon,
+  checkIcon,
+  addIcon,
+  organizationIcon,
+  settingsIcon,
+];
+export const ICON_CONFIG = {
+  sizes: {
+    xs: '10px',
+    sm: '12px',
+    md: '16px',
+    lg: '20px',
+    xl: '25px',
+    xxl: '30px',
+  },
+  defaultSize: 'xl',
+  icons: ICONS
+};