Fix grafica scouthub-home-fe

scouthub-home-fe/src/app/gruppi/gruppi-list/gruppi-list.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit, inject, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTableModule } from '@angular/material/table';
+import { RouterLink } from '@angular/router';
+import { firstValueFrom } from 'rxjs';
+
+import { GruppiApiService, GruppoListItem } from '../gruppi-api.service';
+
+@Component({
+  selector: 'app-gruppi-list',
+  imports: [MatButtonModule, MatTableModule, RouterLink],
+  templateUrl: './gruppi-list.html',
+  styleUrl: './gruppi-list.css'
+})
+export class GruppiList implements OnInit {
+  private readonly gruppiApi = inject(GruppiApiService);
+
+  readonly displayedColumns = ['nome', 'regione'];
+
+  readonly loading = signal(true);
+  readonly loadError = signal<string | null>(null);
+  readonly gruppi = signal<GruppoListItem[]>([]);
+
+  async ngOnInit(): Promise<void> {
+    await this.caricaGruppi();
+  }
+
+  private async caricaGruppi(): Promise<void> {
+    this.loading.set(true);
+    this.loadError.set(null);
+
+    try {
+      const gruppi = await firstValueFrom(this.gruppiApi.listGruppi());
+      this.gruppi.set(gruppi);
+    } catch {
+      this.loadError.set("Impossibile caricare l'elenco dei gruppi. Riprova più tardi.");
+    } finally {
+      this.loading.set(false);
+    }
+  }
+}