add admin navbar and brand/platform management components

client/src/app/components/platform-dialog/platform-dialog.component.html

@@ -0,0 +1,21 @@
+<h2 mat-dialog-title>{{ platformExists ? 'Modifier la plateforme' : 'Nouvelle plateforme' }}</h2>
+
+<mat-dialog-content>
+  <mat-form-field appearance="fill" style="width:100%;">
+    <mat-label>Nom</mat-label>
+    <input matInput [(ngModel)]="platform.name" />
+  </mat-form-field>
+  <mat-form-field appearance="fill" style="width:100%;">
+    <mat-label>Marque</mat-label>
+    <mat-select [(ngModel)]="platform.brand" disableRipple>
+      @for (brand of brands; track brand.id) {
+        <mat-option [value]="brand">{{ brand.name }}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-button (click)="cancel()">Annuler</button>
+  <button mat-flat-button color="primary" (click)="save()">Enregistrer</button>
+</mat-dialog-actions>

client/src/app/components/platform-dialog/platform-dialog.component.ts

@@ -0,0 +1,74 @@
+import {Component, inject, Inject, OnInit} from '@angular/core';
+import {MatButton} from "@angular/material/button";
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
+} from "@angular/material/dialog";
+import {MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatInput} from "@angular/material/input";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {Brand} from '../../interfaces/brand';
+import {Platform} from '../../interfaces/platform';
+import {MatOption} from '@angular/material/core';
+import {MatSelect} from '@angular/material/select';
+import {BrandService} from '../../services/brand/brand.service';
+
+@Component({
+  selector: 'app-platform-dialog',
+  standalone: true,
+  imports: [
+    MatButton,
+    MatDialogActions,
+    MatDialogContent,
+    MatDialogTitle,
+    MatFormField,
+    MatInput,
+    MatLabel,
+    ReactiveFormsModule,
+    FormsModule,
+    MatOption,
+    MatSelect
+  ],
+  templateUrl: './platform-dialog.component.html',
+  styleUrl: './platform-dialog.component.css'
+})
+export class PlatformDialogComponent implements OnInit {
+
+  private readonly brandService: BrandService = inject(BrandService);
+
+  platform: Platform = { id: '', name: '', brand: undefined };
+  brands: Brand[] = [];
+
+  constructor(
+    private readonly dialogRef: MatDialogRef<PlatformDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { platform: Platform }
+  ) {
+    this.platform = { ...data.platform };
+  }
+
+  ngOnInit(): void {
+    this.loadBrands();
+  }
+
+  get platformExists(): boolean {
+    return !!this.data?.platform?.id;
+  }
+
+  loadBrands() {
+    this.brandService.getBrands().subscribe({
+      next: (brands:Brand[]) => this.brands = brands || [],
+      error: () => this.brands = []
+    });
+  }
+
+  save() {
+    this.dialogRef.close(this.platform);
+  }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+}