Vai al contenuto

Teams — Dettaglio

La pagina Dettaglio team (/dashboard/teams/:id) consente la gestione operativa di un singolo team: anagrafica, membri, progetti collegati e ciclo di vita (attivo/inattivo).

Esperienza utente

Cosa si può fare

  • Visualizzare informazioni del team (nome, SM, BU, stato, descrizione)
  • Modificare i dati del team (dialog di aggiornamento)
  • Gestire i membri: aggiunta, rimozione, modifica ruolo in team
  • Consultare i progetti associati al team
  • Disattivare / riattivare il team (con conferma)
  • Eliminare il team (con conferma)

Chi può accedere

Utenti con PoliciesService.canManageTeams() (write policies su teams.*). La route è protetta da teamDetailGuard; altrimenti redirect a /dashboard/teams.

Vedi Accesso e ruoli.

Dettaglio tecnico

Guard e navigazione

La navigazione verso /dashboard/teams/:id non è bloccata sul fetch del team: la route si attiva subito e la pagina mostra skeleton finché i dati non arrivano.

flowchart TD
  G{teamDetailGuard} -->|canManageTeams| D[TeamDetailComponent\nshell + skeleton]
  G -->|no| R[Redirect /dashboard/teams]
  D --> API[GET /teams/:id in ngOnInit]
  API -->|successo| UI[Sezioni team popolate]
  API -->|successo| PJ[GET /teams/:id/projects paginato]
  API -->|errore| E[Toast + Redirect /dashboard/teams]
  1. teamDetailGuard — verifica canManageTeams(); se false, redirect immediato senza GET.
  2. TeamsDetailComponent — carica GET /teams/:id in ngOnInit; le sezioni usano già isLoaded / skeleton. I progetti arrivano da GET /teams/:id/projects (page size default 6, opzioni multipli di 6 fino a 30).
  3. Breadcrumb — il nome team arriva da router.state (buildTeamDetailNavigationState dalle liste) quando presente; altrimenti resta la label generica finché non si naviga di nuovo.

Le mutazioni (update, disattiva, elimina) rieseguono getTeamById per aggiornare lo stato locale; un cambio membri resetta la pagina progetti e rifà il fetch paginato.

Il query param from (es. from=all-teams / from=my-team) personalizza il tab di ritorno. Le card lista passano anche state.breadcrumbTeam per il nome immediato nel breadcrumb.

Operazioni e dialog

Azione Componente
Aggiorna team TeamUpdateDialogComponent
Aggiungi membro TeamAddMemberComponent
Conferma disattiva/elimina CommonConfirmDialogComponent

TeamsService.getTeamById non attende i lookup BU sul critical path (cache BU riscaldata in background). Le skill vengono caricate dopo il team. I progetti del detail non sono più nel payload del team: TeamsService.getTeamProjects(teamId, { page, limit }).

Sezioni UI

Sezione Componente
Header TeamHeaderComponent
Info TeamInfoComponent
Membri TeamMembersComponent
Progetti TeamProjectsComponent (paginator server-side)

File principali

File Ruolo
src/pages/team-detail/team-detail.component.ts Orchestrazione + load async
src/components/team-detail/ Sezioni e dialog
src/services/teams.service.ts API
src/guards/teams.guard.ts Protezione route
src/utils/team-detail-navigation.ts Router state per breadcrumb