Idée pour avoir un BaseComponent pour gérer le titre et la gestion des icons pour les mat-icons

2026-01-17 12:44:37 +01:00
parent 1e8afbc27a
commit ce3175cba6
8 changed files with 240 additions and 119 deletions
--- a/Front/skydivelogs-app/angular.json
+++ b/Front/skydivelogs-app/angular.json
@@ -35,7 +35,8 @@
            "styles": [
              "src/assets/css/styles-app-loading.scss",
              "src/assets/css/styles.css",
-              "src/assets/css/new-theme.scss"
+              "src/assets/css/new-theme.scss",
+              "@angular/material/prebuilt-themes/pink-bluegrey.css"
            ],
            "scripts": []
          },
--- a/Front/skydivelogs-app/src/app/app.base.component.ts
+++ b/Front/skydivelogs-app/src/app/app.base.component.ts
@@ -0,0 +1,33 @@
+import { inject, OnInit } from "@angular/core";
+import { IconResolver, MatIconRegistry } from "@angular/material/icon";
+import { DomSanitizer } from "@angular/platform-browser";
+import { TranslateService } from "@ngx-translate/core";
+import { ServiceComm } from "../services/service-comm.service";
+
+@decorator
+export class BaseComponent implements OnInit {
+  protected title = "???";
+  protected serviceComm: ServiceComm;
+  private translateService: TranslateService;
+
+  constructor(title: string) {
+    let iconRegistry = inject(MatIconRegistry);
+    let sanitizer = inject(DomSanitizer);
+    const resolver: IconResolver = (name) =>
+      sanitizer.bypassSecurityTrustResourceUrl(`/assets/icon/${name}.svg`);
+    iconRegistry.addSvgIconResolver(resolver);
+
+    this.serviceComm = inject(ServiceComm);
+    this.translateService = inject(TranslateService);
+    this.title = title;
+  }
+
+  ngOnInit() {
+    this.translateService.get(this.title).subscribe((data) => {
+      //   this.serviceComm.updatedComponentTitle(data);
+      this.serviceComm.componentTitle.subscribe((title) => (this.title = data));
+    });
+  }
+}
+
+function decorator(target: typeof BaseComponent): void | typeof BaseComponent {}
--- a/Front/skydivelogs-app/src/app/app.component.html
+++ b/Front/skydivelogs-app/src/app/app.component.html
@@ -1,6 +1,6 @@
 <mat-toolbar *ngIf="this.show()">
  <button mat-icon-button (click)="snav.toggle()">
-    <mat-icon>menu</mat-icon>
+    <mat-icon svgIcon="menu"></mat-icon>
  </button>
  <h2>{{ title }}</h2>

@@ -30,7 +30,7 @@
      <mat-icon
        aria-hidden="false"
        aria-label="Summary"
-        fontIcon="timeline"
+        svgIcon="summary"
      ></mat-icon>
      <a
        routerLink="/summary"
@@ -45,7 +45,7 @@
      <mat-icon
        aria-hidden="false"
        aria-label="List of jumps"
-        fontIcon="list_alt"
+        svgIcon="list"
      ></mat-icon>
      <a
        routerLink="/jumps"
@@ -59,7 +59,7 @@
      <mat-icon
        aria-hidden="false"
        aria-label="Add jumps"
-        fontIcon="add_circle"
+        svgIcon="add"
      ></mat-icon>
      <a
        routerLink="/newjump"
@@ -74,7 +74,7 @@
      <mat-icon
        aria-hidden="false"
        aria-label="List of tunnel flights"
-        fontIcon="list_alt"
+        svgIcon="list"
      ></mat-icon>
      <a
        routerLink="/tunnelFlights"
@@ -88,7 +88,7 @@
      <mat-icon
        aria-hidden="false"
        aria-label="Add flights in tunnel"
-        fontIcon="add_circle"
+        svgIcon="add"
      ></mat-icon>
      <a
        routerLink="/newTunnelFlight"
@@ -103,7 +103,7 @@
      <mat-icon
        aria-hidden="false"
        aria-label="Dropzones"
-        fontIcon="store"
+        svgIcon="dz"
      ></mat-icon>
      <a
        routerLink="/dzs"
@@ -117,7 +117,7 @@
      <mat-icon
        aria-hidden="false"
        aria-label="Aircrafts"
-        fontIcon="airplanemode_active"
+        svgIcon="aircraft"
      ></mat-icon>
      <a
        routerLink="/aircrafts"
@@ -131,7 +131,7 @@
      <mat-icon
        aria-hidden="false"
        aria-label="List of jump types"
-        fontIcon="flight_land"
+        svgIcon="flight_land"
      ></mat-icon>
      <a
        routerLink="/jumpTypes"
@@ -145,7 +145,7 @@
      <mat-icon
        aria-hidden="false"
        aria-label="List of gears"
-        fontIcon="settings_input_antenna"
+        svgIcon="gear"
      ></mat-icon>
      <a
        routerLink="/gears"
@@ -160,7 +160,7 @@
      <mat-icon
        aria-hidden="false"
        aria-label="User account"
-        fontIcon="account_box"
+        svgIcon="account"
      ></mat-icon>
      <a
        routerLink="/user"
@@ -175,7 +175,7 @@
      <mat-icon
        aria-hidden="false"
        aria-label="To logout"
-        fontIcon="logout"
+        svgIcon="logout"
      ></mat-icon>
      <span (click)="snav.toggle(); logout()" style="cursor: pointer">{{
        "App_Nav_Logout" | translate
--- a/Front/skydivelogs-app/src/app/app.component.ts
+++ b/Front/skydivelogs-app/src/app/app.component.ts
@@ -7,6 +7,11 @@ import { MatSelectModule } from "@angular/material/select";
 import { MatOptionModule } from "@angular/material/core";
 import { MatSidenavModule } from "@angular/material/sidenav";
 import { MatListModule } from "@angular/material/list";
+import {
+  TranslateService,
+  TranslateModule,
+  TranslatePipe,
+} from "@ngx-translate/core";

 import { User } from "../models/user";
 import { CacheApiKey } from "../models/cache-api-key.enum";
@@ -16,11 +21,7 @@ import { ServiceComm } from "../services/service-comm.service";
 import { ConfigurationHelper } from "../services/configuration-helper";
 import { ServiceCacheApi } from "../services/service-cache-api.service";

-import {
-  TranslateService,
-  TranslateModule,
-  TranslatePipe,
-} from "@ngx-translate/core";
+import { BaseComponent } from "./app.base.component";

@Component({
  selector: "app-root",
@@ -40,8 +41,8 @@ import {
    TranslatePipe,
  ],
 })
-export class AppComponent implements OnInit {
-  public title = "app";
+export class AppComponent extends BaseComponent {
+  // public title = "app";
  public currentUser: User;
  public version: string;
  public selectedLanguageFlag: string;
@@ -49,15 +50,17 @@ export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    private authenticationService: AuthenticationService,
-    private serviceComm: ServiceComm,
+    // private serviceComm: ServiceComm,
    private serviceCacheApi: ServiceCacheApi,
-    private translateService: TranslateService
+    // private translateService: TranslateService,
  ) {
+    super("Default_Title");
+
    this.authenticationService.currentUser.subscribe((user) => {
      if (user) {
        this.currentUser = user;
-        this.translateService.addLangs(["en", "fr"]);
-        this.translateService.use(user.language);
+        // this.translateService.addLangs(["en", "fr"]);
+        // this.translateService.use(user.language);
        this.selectedLanguageFlag = user.language;
      }
    });
@@ -69,9 +72,9 @@ export class AppComponent implements OnInit {
    });
  }

-  ngOnInit() {
-    this.serviceComm.componentTitle.subscribe((title) => (this.title = title));
-  }
+  // ngOnInit() {
+  //   this.serviceComm.componentTitle.subscribe((title) => (this.title = title));
+  // }

  public show() {
    return this.authenticationService.currentUserValue != undefined;
@@ -84,7 +87,7 @@ export class AppComponent implements OnInit {
  }

  public switchLang(event: any) {
-    this.translateService.use(event.value);
+    // this.translateService.use(event.value);
    this.currentUser.language = event.value;
    this.authenticationService.currentUserValue = this.currentUser;
    this.selectedLanguageFlag = event.value;
--- a/Front/skydivelogs-app/src/app/default/default.component.html
+++ b/Front/skydivelogs-app/src/app/default/default.component.html
@@ -10,7 +10,7 @@
        aria-hidden="false"
        aria-label="Summary"
        style="width: 128px; height: 128px; font-size: 128px"
-        fontIcon="timeline"
+        svgIcon="summary"
      ></mat-icon>
    </a>
  </p>
@@ -25,7 +25,7 @@
        aria-hidden="false"
        aria-label="Add jumps"
        style="width: 128px; height: 128px; font-size: 128px"
-        fontIcon="add_circle"
+        svgIcon="add"
      ></mat-icon>
    </a>
  </p>
@@ -40,7 +40,7 @@
        aria-hidden="false"
        aria-label="List of jumps"
        style="width: 128px; height: 128px; font-size: 128px"
-        fontIcon="list_alt"
+        svgIcon="list"
      ></mat-icon>
    </a>
  </p>
@@ -51,11 +51,12 @@
      routerLinkActive="active"
      skipLocationChange
    >
-      <img
-        src="assets/img/tunnel.jpg"
-        alt="Tunnel flights"
+      <mat-icon
+        aria-hidden="false"
+        aria-label="List of tunnel flights"
        style="width: 128px; height: 128px; font-size: 128px"
-      />
+        svgIcon="wind"
+      ></mat-icon>
    </a>
  </p>
 </div>
--- a/Front/skydivelogs-app/src/app/default/default.component.ts
+++ b/Front/skydivelogs-app/src/app/default/default.component.ts
@@ -10,6 +10,7 @@ import { DropzoneService } from "../../services/dropzone.service";
 import { GearService } from "../../services/gear.service";
 import { JumpTypeService } from "../../services/jump-type.service";
 import { ServiceComm } from "../../services/service-comm.service";
+import { BaseComponent } from "../app.base.component";

@Component({
  selector: "app-default",
@@ -17,18 +18,21 @@ import { ServiceComm } from "../../services/service-comm.service";
  styleUrls: ["./default.component.css"],
  imports: [TranslateModule, MatIconModule, RouterLink],
 })
-export class DefaultComponent implements OnInit {
+export class DefaultComponent extends BaseComponent {
+  //implements OnInit {
  constructor(
-    private serviceComm: ServiceComm,
-    private translateService: TranslateService,
+    // private serviceComm: ServiceComm,
+    // private translateService: TranslateService,
    private authenticationService: AuthenticationService,
    private serviceApiAircraft: AircraftService,
    private serviceApiJumpType: JumpTypeService,
    private serviceApiDropzone: DropzoneService,
-    private serviceApiGear: GearService
-  ) {}
+    private serviceApiGear: GearService,
+  ) {
+    super("Default_Title");
+  }

-  ngOnInit() {
+  override ngOnInit() {
    this.authenticationService.alwaysLogin();

    this.putToCacheRefDatas().subscribe(() => {
@@ -52,8 +56,8 @@ export class DefaultComponent implements OnInit {
  }

  private updateTitle() {
-    this.translateService.get("Default_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
+    // this.translateService.get("Default_Title").subscribe((data) => {
+    //   this.serviceComm.updatedComponentTitle(data);
+    // });
  }
 }
--- a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html
+++ b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html
@@ -1,82 +1,165 @@
 <div class="content">
-    <div>
-        <button mat-raised-button color="accent" [routerLink]="['/newjump']" [routerLinkActive]="['active']"
-            skipLocationChange>{{ 'List_Jump_Add' | translate }}</button>
-    </div>
+  <div>
+    <button
+      mat-raised-button
+      color="accent"
+      [routerLink]="['/newjump']"
+      [routerLinkActive]="['active']"
+      skipLocationChange
+    >
+      {{ "List_Jump_Add" | translate }}
+    </button>
+  </div>

-    <mat-progress-bar [mode]="'indeterminate'" *ngIf="isLoading"></mat-progress-bar>
+  <mat-progress-bar
+    [mode]="'indeterminate'"
+    *ngIf="isLoading"
+  ></mat-progress-bar>

-    <div>
-        <table mat-table [dataSource]="dataSourceTable">
-            <ng-container matColumnDef="infos">
-                <th mat-header-cell *matHeaderCellDef style="min-width: 80px;text-wrap: nowrap;"></th>
-                <td mat-cell *matCellDef="let element" style="text-align: left;text-wrap: nowrap;">
-                    <mat-icon aria-hidden="false" aria-label="Additional informations of the jump"
-                        style="cursor: pointer;" (click)='openDialog(element, false)'>info</mat-icon>
-                    <mat-icon aria-hidden="false" aria-label="Special jump"
-                        [style.visibility]="element.notes != undefined ? 'visible' : 'hidden'">sticky_note_2</mat-icon>
-                    <mat-icon aria-hidden="false" aria-label="Special jump"
-                        [style.visibility]="element.isSpecial ? 'visible' : 'hidden'">celebration</mat-icon>
-                </td>
-            </ng-container>
+  <div>
+    <table mat-table [dataSource]="dataSourceTable">
+      <ng-container matColumnDef="infos">
+        <th
+          mat-header-cell
+          *matHeaderCellDef
+          style="min-width: 80px; text-wrap: nowrap"
+        ></th>
+        <td
+          mat-cell
+          *matCellDef="let element"
+          style="text-align: left; text-wrap: nowrap"
+        >
+          <mat-icon
+            aria-hidden="false"
+            aria-label="Additional informations of the jump"
+            style="cursor: pointer"
+            (click)="openDialog(element, false)"
+            >info</mat-icon
+          >
+          <mat-icon
+            aria-hidden="false"
+            aria-label="Notes"
+            [style.visibility]="
+              element.notes != undefined ? 'visible' : 'hidden'
+            "
+            >sticky_note_2</mat-icon
+          >
+          <mat-icon
+            aria-hidden="false"
+            aria-label="Special jump"
+            [style.visibility]="element.isSpecial ? 'visible' : 'hidden'"
+            >celebration</mat-icon
+          >
+        </td>
+      </ng-container>

-            <ng-container matColumnDef="id">
-                <th mat-header-cell *matHeaderCellDef style="min-width: 70px;">{{ 'List_Jump_Header_Num' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element; let i = index">
-                    {{ paginator.length - ( (paginator.pageIndex * paginator.pageSize ) + i ) }}
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef style="min-width: 70px">
+          {{ "List_Jump_Header_Num" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element; let i = index">
+          {{
+            paginator.length - (paginator.pageIndex * paginator.pageSize + i)
+          }}
+        </td>
+      </ng-container>

-            <ng-container matColumnDef="jumpDate">
-                <th mat-header-cell *matHeaderCellDef>{{ 'List_Jump_Header_Date' | translate }}</th>
-                <td mat-cell *matCellDef="let element">
-                    <span class="smallSpanWithBreakWord" [innerHTML]="element.jumpDate | date: 'yyyy-MM-dd'"></span>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="jumpDate">
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "List_Jump_Header_Date" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <span
+            class="smallSpanWithBreakWord"
+            [innerHTML]="element.jumpDate | date: 'yyyy-MM-dd'"
+          ></span>
+        </td>
+      </ng-container>

-            <ng-container matColumnDef="jumpType">
-                <th mat-header-cell *matHeaderCellDef style="min-width: 100px;text-wrap: nowrap;">{{ 'List_Jump_Header_JumpType' |
-                    translate }}</th>
-                <td mat-cell *matCellDef="let element" style="text-wrap: nowrap;">
-                    <span class="smallSpanWithBreakWord" [innerHTML]="element.jumpType.name"></span>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="jumpType">
+        <th
+          mat-header-cell
+          *matHeaderCellDef
+          style="min-width: 100px; text-wrap: nowrap"
+        >
+          {{ "List_Jump_Header_JumpType" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element" style="text-wrap: nowrap">
+          <span
+            class="smallSpanWithBreakWord"
+            [innerHTML]="element.jumpType.name"
+          ></span>
+        </td>
+      </ng-container>

-            <ng-container matColumnDef="aircraft">
-                <th mat-header-cell *matHeaderCellDef style="min-width: 110px;">{{ 'List_Jump_Header_Aircraft' |
-                    translate }}</th>
-                <td mat-cell *matCellDef="let element">
-                    <span class="smallSpanWithBreakWord" [innerHTML]="element.aircraft.name"></span>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="aircraft">
+        <th mat-header-cell *matHeaderCellDef style="min-width: 110px">
+          {{ "List_Jump_Header_Aircraft" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <span
+            class="smallSpanWithBreakWord"
+            [innerHTML]="element.aircraft.name"
+          ></span>
+        </td>
+      </ng-container>

-            <ng-container matColumnDef="dropZone">
-                <th mat-header-cell *matHeaderCellDef>{{ 'List_Jump_Header_Dz' | translate }}</th>
-                <td mat-cell *matCellDef="let element">
-                    <span class="spanWithBreakWord" [innerHTML]="element.dropZone.name"></span>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="dropZone">
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "List_Jump_Header_Dz" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <span
+            class="spanWithBreakWord"
+            [innerHTML]="element.dropZone.name"
+          ></span>
+        </td>
+      </ng-container>

-            <ng-container matColumnDef="gear">
-                <th mat-header-cell *matHeaderCellDef>{{ 'List_Jump_Header_Id' | translate }}</th>
-                <td mat-cell *matCellDef="let element">{{element.gear.name}}</td>
-            </ng-container>
+      <ng-container matColumnDef="gear">
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "List_Jump_Header_Id" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">{{ element.gear.name }}</td>
+      </ng-container>

-            <ng-container matColumnDef="actions">
-                <th mat-header-cell *matHeaderCellDef style="min-width: 80px;text-wrap: nowrap;"></th>
-                <td mat-cell *matCellDef="let element" style="text-align: left;text-wrap: nowrap;">
-                    <mat-icon aria-hidden="false" aria-label="Delete this jump" style="cursor: pointer;"
-                        (click)='delete(element)'>delete</mat-icon>
-                    <mat-icon aria-hidden="false" aria-label="Update some informations of the jump"
-                        style="cursor: pointer; margin-left: 10px;" (click)='openDialog(element, true)'>edit</mat-icon>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="actions">
+        <th
+          mat-header-cell
+          *matHeaderCellDef
+          style="min-width: 80px; text-wrap: nowrap"
+        ></th>
+        <td
+          mat-cell
+          *matCellDef="let element"
+          style="text-align: left; text-wrap: nowrap"
+        >
+          <mat-icon
+            aria-hidden="false"
+            aria-label="Delete this jump"
+            style="cursor: pointer"
+            (click)="delete(element)"
+            >delete</mat-icon
+          >
+          <mat-icon
+            aria-hidden="false"
+            aria-label="Update some informations of the jump"
+            style="cursor: pointer; margin-left: 10px"
+            (click)="openDialog(element, true)"
+            >edit</mat-icon
+          >
+        </td>
+      </ng-container>

-            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
-    </div>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+  </div>

-    <mat-paginator #paginator [pageSize]="20" (page)="pageChanged($event)" showFirstLastButtons></mat-paginator>
+  <mat-paginator
+    #paginator
+    [pageSize]="20"
+    (page)="pageChanged($event)"
+    showFirstLastButtons
+  ></mat-paginator>
 </div>
--- a/Front/skydivelogs-app/src/index.html
+++ b/Front/skydivelogs-app/src/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
@@ -9,10 +9,6 @@
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-
-    <style>
-      @import url("https://fonts.googleapis.com/css2?family=Roboto&family=Roboto&display=swap");
-    </style>
  </head>

  <body class="mat-app-background">