wp6_plorabunt_fe/DOCUMENTAZIONE_TECNICA.md

ARCHITECTURE: wp6_plorabunt_fe

Documento tecnico (sintetico) che riassume la struttura file e l'architettura dell'app frontend wp6_plorabunt_fe presente nel monorepo Nx.

Generato analizzando i sorgenti in apps/wp6_plorabunt_fe/src/app.

Sommario esecutivo

• Applicazione frontend Angular (pattern moderno): uso di componenti standalone e lazy-loading tramite loadComponent.
• Monorepo gestito con Nx; il progetto riusa librerie condivise come @itserr/widgets, @itserr/core, @itserr/auth.
• Architettura modulare: feature resources, dashboard, home; servizi centrali in services/; guards e interceptors per sicurezza e UX.

---

1. Entry points e bootstrap

• src/main.ts — bootstrap dell'app Angular (non incluso qui ma convenzionale in progetti Nx/Angular).
• Componente root: src/app/app.component.ts (definito come standalone: true).
  • Importa componenti condivisi HeaderComponent, FooterComponent e widget da @itserr/widgets.
  • Gestisce la visibilità della sidebar tramite SidebarService locale.
  • Si iscrive a GlobalSearchService per mostrare overlay di ricerca.

2. Routing

• File principale: src/app/app.routes.ts.

  • Rotte principali:
    • '' (root) -> delega a resourcesRoutes (feature resources).
    • dashboard -> delega a dashboardRoutes e protetta da auth.guard.
    • ** -> redirect al root.

• features/resources/resources.routes.ts e features/dashboard/dashboard.routes.ts espongono rotte feature-specific usando lazy-loaded components.

3. Struttura cartelle (sintesi)

• assets/ — risorse locali dell'app (es. assets/core/sidebar con implementazione sidebar).
• features/ — feature application (home, resources, dashboard). Ogni feature contiene componenti, rotte e sotto-componenti.
• guards/ — guard di routing (es. auth.guard.ts, refresh/refreshredirect.guard.ts).
• interceptors/ — Http Interceptors (es. http-error.interceptor.ts, loading.interceptor.ts).
• models/ — DTO e tipi (item, publication, params, table, toast, ecc.).
• services/ — servizi applicativi (auth wrapper, user, search, notifications, loader, export, table, utils).

4. Feature principali e componenti (mappa)

• Home

  • features/home.component.ts (+ .html/.css) — componente pagina principale/home.

• Resources (features/resources)

  • Routing: resources.routes.ts.
  • Componenti:
    • resources-home — landing della feature.
    • resources-add — UI per aggiunta risorse.
    • resources-edit — edit risorsa.
    • resources-detail — dettaglio risorsa.
    • resources-show — visualizzazione di risorsa.
    • search-page, search-result, search-filters, search-filters-viewer — funzionalità di ricerca; search-result contiene map-view e list-view.
    • export-modal — componente per esportazioni.

• Dashboard (features/dashboard)

  • Routing: dashboard.routes.ts.
  • Componenti:
    • activities — lista/gestione attività; include reject-modal e workflow.service.
    • upload — upload component + upload.service.

5. Servizi locali rilevanti

• auth.service.ts — wrapper per integrazione con @itserr/auth e gestione login/token.
• user.service.ts — gestione utenti/ruoli (usato nelle rotte per autorizzazioni).
• global-search.service.ts — overlay e logica di ricerca globale.
• loader/loading.service.ts — gestione spinner/loader.
• notifications.service.ts — toast e notifiche.
• search/* — moduli di ricerca specifici.
• export.service.ts, table.service.ts, utils.service.ts — utility funzionali.

6. Guards e Interceptors

• Guards:

  • auth.guard.ts — protezione rotte che richiedono autenticazione.
  • refreshredirect.guard.ts — gestione del silent refresh / redirect dopo refresh token.

• Interceptors (in interceptors/http-errors):

  • http-error.interceptor.ts — gestione centralizzata degli errori HTTP.
  • loading.interceptor.ts — toggling del loader su richiesta HTTP.

7. Modelli (DTO)

• I tipi sono centralizzati in src/app/models (es. artifact.model.ts, publication.model.ts, allItems.model.ts, singleItem.model.ts, table.model.ts, toast.model.ts, uploadResponse.ts, filter.models.ts, ecc.).

8. Pattern architetturali e osservazioni

• Uso di componenti standalone e lazy-loading con loadComponent — migliora caricamento e modularità.
• Integrazione con librerie interne @itserr/* per header/footer/widgets.
• Uso di services singletons per auth/user/loader/notifications e guards per proteggere rotte sensibili.
• Separazione tra UI (features) e logica (services) con tipizzazioni forti in models/.

9. Tooling & comandi utili

• Monorepo: Nx (usa npx nx <target> o nx se globale).
• Comandi comuni (PowerShell):
• Serve in dev: npx nx serve wp6_plorabunt_fe
• Build produzione: npx nx build wp6_plorabunt_fe --prod
• Test unitari (Jest): npx nx test wp6_plorabunt_fe
• Lint: npx nx lint wp6_plorabunt_fe
• Docker build (dalla root del repo): docker build -t wp6_plorabunt_fe -f apps/wp6_plorabunt_fe/Dockerfile .
• docker-compose: docker-compose -f apps/wp6_plorabunt_fe/docker-compose.yml up --build

10. Come funziona la mappa

La mappa visualizza i marker sulla base dei luoghi presenti nei metadati. Poiché si basa su una lista statica di città è importante siano precisi i dati del dataset (nazione, città) e che vengano utilizzati i nomi ufficiali delle città e delle nazioni.