Add scouthub-eventi-fe
This commit is contained in:
Lorenzo Sanesi
@@ -0,0 +1,17 @@
|
||||
# Editor configuration, see https://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.ts]
|
||||
quote_type = single
|
||||
ij_typescript_use_double_quotes = false
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
@@ -0,0 +1,45 @@
|
||||
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
!.vscode/mcp.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
__screenshots__/
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
/.vscode/
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"printWidth": 100,
|
||||
"singleQuote": true,
|
||||
"overrides": [
|
||||
{
|
||||
"files": "*.html",
|
||||
"options": {
|
||||
"parser": "angular"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
FROM node:22-bookworm-slim AS build
|
||||
|
||||
ARG KEYCLOAK_BASE_URL
|
||||
ARG EVENTI_API_BASE_URL
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
RUN npm ci
|
||||
|
||||
COPY . .
|
||||
RUN sed -i \
|
||||
-e "s#__KEYCLOAK_BASE_URL__#${KEYCLOAK_BASE_URL}#" \
|
||||
-e "s#__EVENTI_API_BASE_URL__#${EVENTI_API_BASE_URL}#" \
|
||||
src/environments/environment.ts
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:1.27-alpine
|
||||
|
||||
COPY --from=build /app/dist/scouthub-eventi-fe/browser /usr/share/nginx/html
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
EXPOSE 80
|
||||
@@ -0,0 +1,172 @@
|
||||
# scouthub-eventi-fe
|
||||
|
||||
Frontend Angular per la gestione degli **eventi** Scouthub (calendario per branca, con
|
||||
sotto-eventi a due livelli), affianca `scouthub-attivita-fe`, `scouthub-home-fe` e
|
||||
`scouthub-magazzino-fe` nello stesso ecosistema. Parla con `scouthub-eventi-be` per le API e con
|
||||
Keycloak per l'autenticazione.
|
||||
|
||||
Componenti standalone (nessun NgModule), routing con lazy loading per feature, Angular Material
|
||||
per la UI.
|
||||
|
||||
## Stato del progetto
|
||||
|
||||
Le viste calendario (annuale, mensile) e il form di creazione/modifica evento sono implementati e
|
||||
funzionanti. L'intera app è privata (richiede login): non esiste ancora una vista pubblica del
|
||||
calendario.
|
||||
|
||||
## Struttura cartelle
|
||||
|
||||
```
|
||||
src/app/
|
||||
core/
|
||||
auth/
|
||||
keycloak.provider.ts provideKeycloakAngular() — login OIDC Authorization Code + PKCE
|
||||
auth-context.ts extractAuthContext() — ruoli + branche ("groups") dal token
|
||||
branca-access.ts hasBrancaAccess()/hasAnyBrancaAccess(), rispecchia assertBrancaAccess del BE
|
||||
require-branca-access.guard.ts guard di routing per creazione/modifica evento
|
||||
require-auth.guard.ts requireAuthGuard — richiede login, altrimenti avvia keycloak.login()
|
||||
eventi-api.service.ts client HTTP verso GET/POST/PUT /eventi (dettaglio, crea, aggiorna)
|
||||
utils/
|
||||
colore-tipo.ts colore deterministico per "tipo" evento (hash su palette fissa)
|
||||
nomi-mesi.ts nomi mesi in italiano per le viste calendario
|
||||
vista-annuale/ feature "calendario annuale" (/vista-annuale, lazy-loaded)
|
||||
vista-annuale-api.service.ts client verso GET /eventi?vista=anno
|
||||
vista-mensile/ feature "calendario mensile" (/vista-mensile, lazy-loaded, home di default)
|
||||
vista-mensile-api.service.ts client verso GET /eventi?vista=mese, filtro branca lato client
|
||||
vista-evento/ feature "dettaglio/form evento" (/vista-evento, lazy-loaded)
|
||||
evento-form/ form condiviso per crea/modifica/sotto-evento
|
||||
src/environments/ environment.ts / environment.development.ts
|
||||
public/
|
||||
silent-check-sso.html richiesto dal flusso check-sso silenzioso di Keycloak
|
||||
```
|
||||
|
||||
### Modulo di autenticazione
|
||||
|
||||
- **Login**: `provideKeycloak` (in `keycloak.provider.ts`) usa il client pubblico
|
||||
`scouthub-frontend` — **condiviso con tutti gli altri frontend** (`scouthub-attivita-fe`,
|
||||
`scouthub-home-fe`, `scouthub-magazzino-fe`) — con Authorization Code Flow + PKCE,
|
||||
`onLoad: 'check-sso'` e refresh automatico del token via `withAutoRefreshToken` (logout
|
||||
automatico dopo 5 minuti di inattività).
|
||||
- **requireAuthGuard** (`core/require-auth.guard.ts`): applicato sulla route radice in
|
||||
`app.routes.ts`, protegge quindi tutte le sotto-route in un colpo solo (l'app non ha aree
|
||||
pubbliche).
|
||||
- **extractAuthContext** (`core/auth/auth-context.ts`): rispecchia lato client la stessa logica
|
||||
di `verify-token.middleware.ts` sul backend — i ruoli sono `realm_access.roles` più i ruoli
|
||||
sull'organizzazione attiva (claim `organization`), le branche vengono dal claim standard
|
||||
`groups` (path tipo `/Lupetti`, normalizzati togliendo lo slash iniziale). Non esiste ancora un
|
||||
claim branca dedicato.
|
||||
- **hasBrancaAccess / hasAnyBrancaAccess** (`core/auth/branca-access.ts`): `capo-gruppo` ha
|
||||
accesso in scrittura a qualunque branca dell'organizzazione; `capo-unita` solo alle branche a
|
||||
cui appartiene. Usate solo per nascondere via routing gli entry point non pertinenti: **il
|
||||
controllo autoritativo resta lato backend** (`assertBrancaAccess` su `POST`/`PUT /eventi`).
|
||||
- Le chiamate verso `eventiApiBaseUrl` ricevono automaticamente l'header
|
||||
`Authorization: Bearer <token>` tramite l'interceptor `includeBearerTokenInterceptor` di
|
||||
`keycloak-angular`, condizionato via regex sull'URL base dell'API in `app.config.ts`.
|
||||
|
||||
### Feature `vista-mensile` (`/vista-mensile`, home di default)
|
||||
|
||||
Calendario del mese corrente/selezionato: carica **tutti** gli eventi del mese (radice e figli,
|
||||
trasversali a tutte le branche) tramite `GET /eventi?vista=mese`, e filtra lato client per branca
|
||||
tramite un select — così il filtro resta popolato con tutte le branche presenti nel mese anche
|
||||
dopo aver selezionato una branca specifica.
|
||||
|
||||
### Feature `vista-annuale` (`/vista-annuale`)
|
||||
|
||||
Vista d'insieme dell'anno: per ogni giorno con almeno un evento radice, mostra un conteggio e
|
||||
l'elenco sintetico (titolo/tipo/branca) tramite `GET /eventi?vista=anno`. Nessun dettaglio
|
||||
descrizione/risorse in questa vista (aggregato leggero, coerente con quanto espone il backend).
|
||||
|
||||
### Feature `vista-evento` (`/vista-evento`)
|
||||
|
||||
- `/vista-evento/:id` — dettaglio completo di un evento, con i suoi eventuali figli (2° livello)
|
||||
e le risorse collegate create da altri backend (`RisorsaCollegata`).
|
||||
- `/vista-evento/nuovo` — crea un evento radice su una branca a scelta tra quelle dell'utente
|
||||
(`requireCreaEventoGuard`, visibile solo a chi ha accesso ad almeno una branca).
|
||||
- `/vista-evento/:id/modifica` — modifica un evento esistente (`requireBrancaAccessEventoGuard`,
|
||||
carica prima l'evento per conoscerne la branca e poter decidere l'accesso).
|
||||
- `/vista-evento/:id/sotto-evento` — crea un sotto-evento del padre `:id`; il form eredita
|
||||
branca/vincoli di data dal genitore e blocca il campo branca. Non disponibile se `:id` è già
|
||||
esso stesso un sotto-evento (massimo due livelli di annidamento, imposto anche lato backend).
|
||||
|
||||
Il form (`evento-form/`) valida che la data/ora di fine non preceda l'inizio e, in modalità
|
||||
sotto-evento/modifica-di-un-figlio, vincola l'intervallo selezionabile a quello del genitore;
|
||||
resta comunque il backend l'autorità finale su questi vincoli.
|
||||
|
||||
## Prerequisiti
|
||||
|
||||
- Node.js 20+
|
||||
- I servizi dell'ecosistema Scouthub in esecuzione: Keycloak e `scouthub-eventi-be`
|
||||
(vedi `docker-compose.yml` e `scouthub-eventi-be/README.md` nella root del repo)
|
||||
|
||||
## Configurazione ambiente
|
||||
|
||||
`src/environments/environment.ts` (produzione) e `environment.development.ts` (dev, usato
|
||||
automaticamente da `ng serve`/`ng build --configuration development`) espongono:
|
||||
|
||||
- `keycloakBaseUrl` — URL base dell'istanza Keycloak (default `http://localhost:8081`, coerente
|
||||
con `KEYCLOAK_PORT` in `.env` alla root del repo)
|
||||
- `keycloakRealm` — realm Keycloak (`scouthub`)
|
||||
- `keycloakClientId` — client pubblico condiviso già definito in `keycloak/realm-export.json`
|
||||
(`scouthub-frontend`)
|
||||
- `eventiApiBaseUrl` — URL base di `scouthub-eventi-be` (default `http://localhost:8084`)
|
||||
|
||||
## Collegare Keycloak in locale
|
||||
|
||||
1. Avviare Keycloak (e Postgres) dalla root del repo:
|
||||
```bash
|
||||
docker compose up -d keycloak-db keycloak
|
||||
```
|
||||
Il realm `scouthub` viene importato automaticamente da `keycloak/realm-export.json` al primo
|
||||
avvio (`--import-realm`).
|
||||
2. Il client pubblico `scouthub-frontend` ha `redirectUris`/`webOrigins` che includono anche
|
||||
`http://localhost:4204` (porta di default di questo progetto, vedi sotto) — se si cambia porta,
|
||||
aggiornare `keycloak/realm-export.json` di conseguenza e reimportare il realm (o aggiornarlo
|
||||
da console admin Keycloak).
|
||||
3. `provideKeycloakAngular()` (`src/app/core/auth/keycloak.provider.ts`) inizializza il client con
|
||||
`onLoad: 'check-sso'`: all'avvio l'app verifica in un iframe nascosto se esiste già una sessione
|
||||
Keycloak, senza forzare subito un redirect di login.
|
||||
|
||||
## Collegare scouthub-eventi-be in locale
|
||||
|
||||
1. Avviare `scouthub-eventi-be` seguendo il suo README (`npm run dev`, porta di default `8084`).
|
||||
2. Le richieste verso `eventiApiBaseUrl` ricevono automaticamente l'header
|
||||
`Authorization: Bearer <token>` tramite l'interceptor `includeBearerTokenInterceptor` di
|
||||
`keycloak-angular`, configurato in `app.config.ts`.
|
||||
|
||||
## Development server
|
||||
|
||||
Questo progetto usa la porta `4204` (per non collidere con `scouthub-attivita-fe` sulla `4200`,
|
||||
`scouthub-home-fe` sulla `4201` e `scouthub-magazzino-fe` sulla `4203`):
|
||||
|
||||
```bash
|
||||
ng serve
|
||||
```
|
||||
|
||||
Apri il browser su `http://localhost:4204/`.
|
||||
|
||||
## Build
|
||||
|
||||
```bash
|
||||
ng build
|
||||
```
|
||||
|
||||
Artefatti di build in `dist/scouthub-eventi-fe/browser` (percorso usato anche dal `Dockerfile`
|
||||
multistage node→nginx).
|
||||
|
||||
## Test
|
||||
|
||||
```bash
|
||||
ng test
|
||||
```
|
||||
|
||||
Esegue gli unit test con il builder `@angular/build:unit-test` (Vitest).
|
||||
|
||||
## Versione Angular CLI usata per lo scaffold
|
||||
|
||||
```
|
||||
Angular CLI : 22.0.7
|
||||
Angular : 22.0.8
|
||||
Node.js : 24.16.0
|
||||
Package Manager : npm 11.12.0
|
||||
Operating System : win32 x64
|
||||
```
|
||||
@@ -0,0 +1,80 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"cli": {
|
||||
"packageManager": "npm"
|
||||
},
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"scouthub-eventi-fe": {
|
||||
"projectType": "application",
|
||||
"schematics": {},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular/build:application",
|
||||
"options": {
|
||||
"browser": "src/main.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"assets": [
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "public"
|
||||
}
|
||||
],
|
||||
"styles": ["src/material-theme.scss", "src/styles.css"]
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kB",
|
||||
"maximumError": "1MB"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "4kB",
|
||||
"maximumError": "8kB"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.development.ts"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular/build:dev-server",
|
||||
"options": {
|
||||
"port": 4204
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "scouthub-eventi-fe:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "scouthub-eventi-fe:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular/build:unit-test"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
Generated
+8287
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "scouthub-eventi-fe",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test"
|
||||
},
|
||||
"private": true,
|
||||
"packageManager": "npm@11.12.0",
|
||||
"dependencies": {
|
||||
"@angular/cdk": "^22.0.6",
|
||||
"@angular/common": "^22.0.0",
|
||||
"@angular/compiler": "^22.0.0",
|
||||
"@angular/core": "^22.0.0",
|
||||
"@angular/forms": "^22.0.0",
|
||||
"@angular/material": "^22.0.6",
|
||||
"@angular/platform-browser": "^22.0.0",
|
||||
"@angular/router": "^22.0.0",
|
||||
"keycloak-angular": "^22.0.0",
|
||||
"keycloak-js": "^26.2.4",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/build": "^22.0.7",
|
||||
"@angular/cli": "^22.0.7",
|
||||
"@angular/compiler-cli": "^22.0.0",
|
||||
"jsdom": "^28.0.0",
|
||||
"prettier": "^3.8.1",
|
||||
"typescript": "~6.0.2",
|
||||
"vitest": "^4.0.8"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,7 @@
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
parent.postMessage(location.href, location.origin);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { provideHttpClient, withInterceptors } from '@angular/common/http';
|
||||
import {
|
||||
createInterceptorCondition,
|
||||
IncludeBearerTokenCondition,
|
||||
includeBearerTokenInterceptor,
|
||||
INCLUDE_BEARER_TOKEN_INTERCEPTOR_CONFIG
|
||||
} from 'keycloak-angular';
|
||||
|
||||
import { routes } from './app.routes';
|
||||
import { provideKeycloakAngular } from './core/auth/keycloak.provider';
|
||||
import { environment } from '../environments/environment';
|
||||
|
||||
const escapedEventiApiBaseUrl = environment.eventiApiBaseUrl.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
|
||||
const eventiApiBearerCondition = createInterceptorCondition<IncludeBearerTokenCondition>({
|
||||
urlPattern: new RegExp(`^${escapedEventiApiBaseUrl}(/.*)?$`, 'i'),
|
||||
bearerPrefix: 'Bearer'
|
||||
});
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideBrowserGlobalErrorListeners(),
|
||||
provideRouter(routes),
|
||||
provideKeycloakAngular(),
|
||||
{
|
||||
provide: INCLUDE_BEARER_TOKEN_INTERCEPTOR_CONFIG,
|
||||
useValue: [eventiApiBearerCondition]
|
||||
},
|
||||
provideHttpClient(withInterceptors([includeBearerTokenInterceptor]))
|
||||
]
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
<router-outlet />
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { requireAuthGuard } from './core/require-auth.guard';
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
// L'intera app è privata: la guard sulla root protegge tutte le sotto-route.
|
||||
path: '',
|
||||
canActivate: [requireAuthGuard],
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
pathMatch: 'full',
|
||||
redirectTo: 'vista-mensile'
|
||||
},
|
||||
{
|
||||
path: 'vista-annuale',
|
||||
loadChildren: () => import('./vista-annuale/vista-annuale.routes').then((m) => m.VISTA_ANNUALE_ROUTES)
|
||||
},
|
||||
{
|
||||
path: 'vista-mensile',
|
||||
loadChildren: () => import('./vista-mensile/vista-mensile.routes').then((m) => m.VISTA_MENSILE_ROUTES)
|
||||
},
|
||||
{
|
||||
path: 'vista-evento',
|
||||
loadChildren: () => import('./vista-evento/vista-evento.routes').then((m) => m.VISTA_EVENTO_ROUTES)
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { App } from './app';
|
||||
|
||||
describe('App', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [App],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
imports: [RouterOutlet],
|
||||
templateUrl: './app.html',
|
||||
styleUrl: './app.css'
|
||||
})
|
||||
export class App {}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { KeycloakTokenParsed } from 'keycloak-js';
|
||||
|
||||
export interface AuthContextInfo {
|
||||
roles: string[];
|
||||
branche: string[];
|
||||
}
|
||||
|
||||
interface OrganizationClaimEntry {
|
||||
id?: string;
|
||||
roles?: string[];
|
||||
}
|
||||
|
||||
function normalizeGroupPath(path: string): string {
|
||||
return path.replace(/^\//, '');
|
||||
}
|
||||
|
||||
/**
|
||||
* Rispecchia lato client la stessa logica di scouthub-eventi-be
|
||||
* (verify-token.middleware.ts, buildAuthContext): i ruoli sono
|
||||
* realm_access.roles + i ruoli sull'organizzazione attiva del token; le
|
||||
* branche vengono dal claim standard "groups" (path del tipo "/Lupetti"),
|
||||
* non ancora esposto da un claim dedicato.
|
||||
*/
|
||||
export function extractAuthContext(tokenParsed: KeycloakTokenParsed | undefined): AuthContextInfo {
|
||||
const realmRoles = (tokenParsed?.['realm_access'] as { roles?: string[] } | undefined)?.roles ?? [];
|
||||
const organizationClaim = tokenParsed?.['organization'] as Record<string, OrganizationClaimEntry> | undefined;
|
||||
const [organization] = organizationClaim ? Object.values(organizationClaim) : [];
|
||||
const orgRoles = organization?.roles ?? [];
|
||||
const groups = (tokenParsed?.['groups'] as string[] | undefined) ?? [];
|
||||
|
||||
return {
|
||||
roles: Array.from(new Set([...realmRoles, ...orgRoles])),
|
||||
branche: groups.map(normalizeGroupPath)
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { AuthContextInfo } from './auth-context';
|
||||
|
||||
// Rispecchia assertBrancaAccess lato backend (scouthub-eventi-be): capo-gruppo
|
||||
// ha accesso in scrittura a qualunque branca dell'org, capo-unita/capo solo
|
||||
// alle branche a cui appartiene (claim "groups" del token). capo ha per ora
|
||||
// gli stessi permessi di capo-unita, da differenziare in futuro.
|
||||
export function hasBrancaAccess(auth: AuthContextInfo, brancaId: string): boolean {
|
||||
if (auth.roles.includes('capo-gruppo')) {
|
||||
return true;
|
||||
}
|
||||
return (
|
||||
(auth.roles.includes('capo-unita') || auth.roles.includes('capo')) && auth.branche.includes(brancaId)
|
||||
);
|
||||
}
|
||||
|
||||
// Usata per l'entry point "crea evento" (nessuna branca specifica ancora
|
||||
// selezionata): basta poter scrivere su almeno una branca.
|
||||
export function hasAnyBrancaAccess(auth: AuthContextInfo): boolean {
|
||||
return (
|
||||
auth.roles.includes('capo-gruppo') ||
|
||||
((auth.roles.includes('capo-unita') || auth.roles.includes('capo')) && auth.branche.length > 0)
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { EnvironmentProviders } from '@angular/core';
|
||||
import { provideKeycloak, withAutoRefreshToken, AutoRefreshTokenService, UserActivityService } from 'keycloak-angular';
|
||||
|
||||
import { environment } from '../../../environments/environment';
|
||||
|
||||
export function provideKeycloakAngular(): EnvironmentProviders {
|
||||
return provideKeycloak({
|
||||
config: {
|
||||
url: environment.keycloakBaseUrl,
|
||||
realm: environment.keycloakRealm,
|
||||
clientId: environment.keycloakClientId
|
||||
},
|
||||
initOptions: {
|
||||
onLoad: 'check-sso',
|
||||
silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
|
||||
redirectUri: window.location.origin + '/'
|
||||
},
|
||||
features: [
|
||||
withAutoRefreshToken({
|
||||
onInactivityTimeout: 'logout',
|
||||
sessionTimeout: 300000
|
||||
})
|
||||
],
|
||||
providers: [AutoRefreshTokenService, UserActivityService]
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, provideRouter, Router } from '@angular/router';
|
||||
import Keycloak from 'keycloak-js';
|
||||
import { of, throwError } from 'rxjs';
|
||||
|
||||
import { EventiApiService, EventoDettaglioView } from '../eventi-api.service';
|
||||
import { requireBrancaAccessEventoGuard, requireCreaEventoGuard } from './require-branca-access.guard';
|
||||
|
||||
const state = {} as RouterStateSnapshot;
|
||||
|
||||
const eventoLupetti: EventoDettaglioView = {
|
||||
id: 'evento-1',
|
||||
orgId: 'org-1',
|
||||
brancaId: 'Lupetti',
|
||||
parentId: null,
|
||||
titolo: 'Campo estivo',
|
||||
descrizione: null,
|
||||
dataInizio: '2026-07-10T08:00:00.000Z',
|
||||
dataFine: '2026-07-10T18:00:00.000Z',
|
||||
tipo: 'campo',
|
||||
location: null,
|
||||
creatoDa: 'user-1',
|
||||
creatoIl: '2026-06-01T00:00:00.000Z',
|
||||
figli: [],
|
||||
risorseCollegate: []
|
||||
};
|
||||
|
||||
function setup(options: {
|
||||
roles?: string[];
|
||||
groups?: string[];
|
||||
getEvento?: ReturnType<typeof vi.fn>;
|
||||
}): void {
|
||||
const keycloakMock = {
|
||||
tokenParsed: {
|
||||
realm_access: { roles: options.roles ?? [] },
|
||||
groups: options.groups ?? []
|
||||
}
|
||||
};
|
||||
|
||||
TestBed.configureTestingModule({
|
||||
providers: [
|
||||
provideRouter([]),
|
||||
{ provide: Keycloak, useValue: keycloakMock },
|
||||
{ provide: EventiApiService, useValue: { getEvento: options.getEvento ?? vi.fn().mockReturnValue(of(eventoLupetti)) } }
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
describe('requireCreaEventoGuard', () => {
|
||||
const route = {} as ActivatedRouteSnapshot;
|
||||
|
||||
it('lascia proseguire capo-gruppo', () => {
|
||||
setup({ roles: ['capo-gruppo'] });
|
||||
const result = TestBed.runInInjectionContext(() => requireCreaEventoGuard(route, state));
|
||||
expect(result).toBe(true);
|
||||
});
|
||||
|
||||
it('lascia proseguire capo-unita con almeno una branca', () => {
|
||||
setup({ roles: ['capo-unita'], groups: ['/Lupetti'] });
|
||||
const result = TestBed.runInInjectionContext(() => requireCreaEventoGuard(route, state));
|
||||
expect(result).toBe(true);
|
||||
});
|
||||
|
||||
it('reindirizza alla vista mensile per censito', () => {
|
||||
setup({ roles: ['censito'], groups: ['/Lupetti'] });
|
||||
const result = TestBed.runInInjectionContext(() => requireCreaEventoGuard(route, state));
|
||||
const router = TestBed.inject(Router);
|
||||
expect((result as UrlTree).toString()).toBe(router.parseUrl('/vista-mensile').toString());
|
||||
});
|
||||
|
||||
it('reindirizza alla vista mensile per capo-unita senza nessuna branca', () => {
|
||||
setup({ roles: ['capo-unita'], groups: [] });
|
||||
const result = TestBed.runInInjectionContext(() => requireCreaEventoGuard(route, state));
|
||||
const router = TestBed.inject(Router);
|
||||
expect((result as UrlTree).toString()).toBe(router.parseUrl('/vista-mensile').toString());
|
||||
});
|
||||
|
||||
it('lascia proseguire capo con almeno una branca (stessi permessi di capo-unita)', () => {
|
||||
setup({ roles: ['capo'], groups: ['/Lupetti'] });
|
||||
const result = TestBed.runInInjectionContext(() => requireCreaEventoGuard(route, state));
|
||||
expect(result).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('requireBrancaAccessEventoGuard', () => {
|
||||
function buildRoute(id: string | null): ActivatedRouteSnapshot {
|
||||
return { paramMap: { get: () => id } } as unknown as ActivatedRouteSnapshot;
|
||||
}
|
||||
|
||||
it('lascia proseguire capo-gruppo su qualunque branca', async () => {
|
||||
setup({ roles: ['capo-gruppo'] });
|
||||
const result = await TestBed.runInInjectionContext(() => requireBrancaAccessEventoGuard(buildRoute('evento-1'), state));
|
||||
expect(result).toBe(true);
|
||||
});
|
||||
|
||||
it('lascia proseguire capo-unita sulla branca dell\'evento', async () => {
|
||||
setup({ roles: ['capo-unita'], groups: ['/Lupetti'] });
|
||||
const result = await TestBed.runInInjectionContext(() => requireBrancaAccessEventoGuard(buildRoute('evento-1'), state));
|
||||
expect(result).toBe(true);
|
||||
});
|
||||
|
||||
it('reindirizza al dettaglio evento per capo-unita di un\'altra branca', async () => {
|
||||
setup({ roles: ['capo-unita'], groups: ['/Esploratori'] });
|
||||
const result = await TestBed.runInInjectionContext(() => requireBrancaAccessEventoGuard(buildRoute('evento-1'), state));
|
||||
const router = TestBed.inject(Router);
|
||||
expect((result as UrlTree).toString()).toBe(router.parseUrl('/vista-evento/evento-1').toString());
|
||||
});
|
||||
|
||||
it('reindirizza alla vista mensile se il caricamento dell\'evento fallisce', async () => {
|
||||
setup({ roles: ['capo-gruppo'], getEvento: vi.fn().mockReturnValue(throwError(() => new Error('404'))) });
|
||||
const result = await TestBed.runInInjectionContext(() => requireBrancaAccessEventoGuard(buildRoute('evento-1'), state));
|
||||
const router = TestBed.inject(Router);
|
||||
expect((result as UrlTree).toString()).toBe(router.parseUrl('/vista-mensile').toString());
|
||||
});
|
||||
|
||||
it('reindirizza alla vista mensile se manca il param id', async () => {
|
||||
setup({ roles: ['capo-gruppo'] });
|
||||
const result = await TestBed.runInInjectionContext(() => requireBrancaAccessEventoGuard(buildRoute(null), state));
|
||||
const router = TestBed.inject(Router);
|
||||
expect((result as UrlTree).toString()).toBe(router.parseUrl('/vista-mensile').toString());
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,42 @@
|
||||
import { inject } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, CanActivateFn, Router } from '@angular/router';
|
||||
import Keycloak from 'keycloak-js';
|
||||
import { firstValueFrom } from 'rxjs';
|
||||
|
||||
import { EventiApiService } from '../eventi-api.service';
|
||||
import { extractAuthContext } from './auth-context';
|
||||
import { hasAnyBrancaAccess, hasBrancaAccess } from './branca-access';
|
||||
|
||||
// Nascondere l'entry point via routing è solo una comodità UX: il backend
|
||||
// rifà comunque la verifica autoritativa su POST/PUT /eventi
|
||||
// (assertBrancaAccess). Da usare insieme a requireAuthGuard (già applicata
|
||||
// sulla root delle route in app.routes.ts).
|
||||
export const requireCreaEventoGuard: CanActivateFn = () => {
|
||||
const router = inject(Router);
|
||||
const keycloak = inject(Keycloak);
|
||||
|
||||
const auth = extractAuthContext(keycloak.tokenParsed);
|
||||
return hasAnyBrancaAccess(auth) ? true : router.parseUrl('/vista-mensile');
|
||||
};
|
||||
|
||||
// Per modifica/sotto-evento la branca da verificare è quella dell'evento
|
||||
// esistente (id in route), non nota staticamente: va quindi caricato prima
|
||||
// di poter decidere.
|
||||
export const requireBrancaAccessEventoGuard: CanActivateFn = async (route: ActivatedRouteSnapshot) => {
|
||||
const router = inject(Router);
|
||||
const keycloak = inject(Keycloak);
|
||||
const eventiApi = inject(EventiApiService);
|
||||
|
||||
const id = route.paramMap.get('id');
|
||||
if (!id) {
|
||||
return router.parseUrl('/vista-mensile');
|
||||
}
|
||||
|
||||
try {
|
||||
const evento = await firstValueFrom(eventiApi.getEvento(id));
|
||||
const auth = extractAuthContext(keycloak.tokenParsed);
|
||||
return hasBrancaAccess(auth, evento.brancaId) ? true : router.parseUrl(`/vista-evento/${id}`);
|
||||
} catch {
|
||||
return router.parseUrl('/vista-mensile');
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,76 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
import { environment } from '../../environments/environment';
|
||||
|
||||
export interface EventoView {
|
||||
id: string;
|
||||
orgId: string;
|
||||
brancaId: string;
|
||||
parentId: string | null;
|
||||
titolo: string;
|
||||
descrizione: string | null;
|
||||
dataInizio: string;
|
||||
dataFine: string;
|
||||
tipo: string;
|
||||
location: string | null;
|
||||
creatoDa: string;
|
||||
creatoIl: string;
|
||||
}
|
||||
|
||||
export interface RisorsaCollegataView {
|
||||
id: string;
|
||||
tipoRisorsa: string;
|
||||
risorsaId: string;
|
||||
servizioOrigine: string;
|
||||
metadata: unknown;
|
||||
creatoIl: string;
|
||||
}
|
||||
|
||||
export interface EventoDettaglioView extends EventoView {
|
||||
figli: EventoView[];
|
||||
risorseCollegate: RisorsaCollegataView[];
|
||||
}
|
||||
|
||||
export interface CreaEventoInput {
|
||||
titolo: string;
|
||||
descrizione: string | null;
|
||||
dataInizio: string;
|
||||
dataFine: string;
|
||||
tipo: string;
|
||||
location: string | null;
|
||||
// Obbligatorio per un evento radice, ignorato/non richiesto per un
|
||||
// sotto-evento (eredita la branca del genitore lato backend).
|
||||
brancaId?: string;
|
||||
parentId?: string;
|
||||
}
|
||||
|
||||
export interface AggiornaEventoInput {
|
||||
titolo?: string;
|
||||
descrizione?: string | null;
|
||||
dataInizio?: string;
|
||||
dataFine?: string;
|
||||
tipo?: string;
|
||||
location?: string | null;
|
||||
}
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class EventiApiService {
|
||||
private readonly http = inject(HttpClient);
|
||||
private readonly baseUrl = `${environment.eventiApiBaseUrl}/eventi`;
|
||||
|
||||
getEvento(id: string): Observable<EventoDettaglioView> {
|
||||
return this.http.get<EventoDettaglioView>(`${this.baseUrl}/${id}`);
|
||||
}
|
||||
|
||||
creaEvento(input: CreaEventoInput): Observable<EventoView> {
|
||||
return this.http.post<EventoView>(this.baseUrl, input);
|
||||
}
|
||||
|
||||
// brancaId e parentId non sono modificabili dopo la creazione: non
|
||||
// compaiono in AggiornaEventoInput perché il backend non li accetta in PUT.
|
||||
aggiornaEvento(id: string, input: AggiornaEventoInput): Observable<EventoView> {
|
||||
return this.http.put<EventoView>(`${this.baseUrl}/${id}`, input);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { ActivatedRouteSnapshot, CanActivateFn, RouterStateSnapshot, UrlTree } from '@angular/router';
|
||||
import { AuthGuardData, createAuthGuard } from 'keycloak-angular';
|
||||
|
||||
export async function isAuthenticated(
|
||||
_route: ActivatedRouteSnapshot,
|
||||
state: RouterStateSnapshot,
|
||||
authData: AuthGuardData
|
||||
): Promise<boolean | UrlTree> {
|
||||
const { authenticated, keycloak } = authData;
|
||||
|
||||
if (!authenticated) {
|
||||
await keycloak.login({ redirectUri: window.location.origin + state.url });
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export const requireAuthGuard: CanActivateFn = createAuthGuard<CanActivateFn>(isAuthenticated);
|
||||
@@ -0,0 +1,23 @@
|
||||
// Il backend non espone un colore per tipo/branca: lo deriviamo qui in modo
|
||||
// deterministico (hash del nome) da una palette fissa, cosi' lo stesso tipo
|
||||
// ha sempre lo stesso colore senza bisogno di uno stato condiviso.
|
||||
const PALETTE = [
|
||||
'#e57373',
|
||||
'#64b5f6',
|
||||
'#81c784',
|
||||
'#ffd54f',
|
||||
'#ba68c8',
|
||||
'#4db6ac',
|
||||
'#f06292',
|
||||
'#a1887f',
|
||||
'#90a4ae',
|
||||
'#ff8a65'
|
||||
];
|
||||
|
||||
export function coloreTipo(tipo: string): string {
|
||||
let hash = 0;
|
||||
for (let i = 0; i < tipo.length; i++) {
|
||||
hash = (hash * 31 + tipo.charCodeAt(i)) >>> 0;
|
||||
}
|
||||
return PALETTE[hash % PALETTE.length];
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
export const NOMI_MESI = [
|
||||
'Gennaio',
|
||||
'Febbraio',
|
||||
'Marzo',
|
||||
'Aprile',
|
||||
'Maggio',
|
||||
'Giugno',
|
||||
'Luglio',
|
||||
'Agosto',
|
||||
'Settembre',
|
||||
'Ottobre',
|
||||
'Novembre',
|
||||
'Dicembre'
|
||||
];
|
||||
@@ -0,0 +1,31 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
import { environment } from '../../environments/environment';
|
||||
|
||||
export interface EventoGiornoView {
|
||||
titolo: string;
|
||||
tipo: string;
|
||||
brancaId: string;
|
||||
}
|
||||
|
||||
export interface VistaAnnoGiornoView {
|
||||
data: string;
|
||||
conteggio: number;
|
||||
eventi: EventoGiornoView[];
|
||||
}
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class VistaAnnualeApiService {
|
||||
private readonly http = inject(HttpClient);
|
||||
|
||||
// orgId non va passato come query param: il backend lo ricava sempre da
|
||||
// req.auth.orgId (claim "organization" del JWT), mai da input client
|
||||
// (vedi requireOrgId nel backend eventi).
|
||||
getVistaAnno(anno: number): Observable<VistaAnnoGiornoView[]> {
|
||||
return this.http.get<VistaAnnoGiornoView[]>(`${environment.eventiApiBaseUrl}/eventi`, {
|
||||
params: { vista: 'anno', anno: String(anno) }
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
.vista-annuale__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.vista-annuale__header h2 {
|
||||
margin: 0;
|
||||
min-width: 4ch;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vista-annuale__stato {
|
||||
margin: 0 0 var(--space-4);
|
||||
}
|
||||
|
||||
.vista-annuale__stato--errore {
|
||||
color: var(--mat-sys-error);
|
||||
}
|
||||
|
||||
.vista-annuale__griglia {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.mese {
|
||||
background: var(--color-surface) !important;
|
||||
box-shadow: var(--shadow-sm) !important;
|
||||
}
|
||||
|
||||
.mese ::ng-deep .mat-mdc-card-header {
|
||||
padding: var(--space-3) var(--space-3) 0;
|
||||
}
|
||||
|
||||
.mese ::ng-deep .mat-mdc-card-content {
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.mese ::ng-deep .mat-mdc-card-title {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.mese__intestazione {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
color: var(--color-neutral-600);
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
.mese__celle {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.mese__giorno {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mese__giorno:hover {
|
||||
background: color-mix(in srgb, var(--color-text) 7%, transparent);
|
||||
}
|
||||
|
||||
.mese__giorno--vuoto {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mese__numero {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mese__badge {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
right: 2px;
|
||||
min-width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 9px;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.mese__badge:not(:empty) {
|
||||
min-width: 12px;
|
||||
height: 12px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
<div class="vista-annuale">
|
||||
<div class="vista-annuale__header">
|
||||
<button mat-icon-button (click)="annoPrecedente()" aria-label="Anno precedente">
|
||||
<mat-icon>chevron_left</mat-icon>
|
||||
</button>
|
||||
<h2>{{ anno() }}</h2>
|
||||
<button mat-icon-button (click)="annoSuccessivo()" aria-label="Anno successivo">
|
||||
<mat-icon>chevron_right</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (loading()) {
|
||||
<p class="vista-annuale__stato">Caricamento eventi...</p>
|
||||
}
|
||||
|
||||
@if (error()) {
|
||||
<p class="vista-annuale__stato vista-annuale__stato--errore">{{ error() }}</p>
|
||||
}
|
||||
|
||||
<div class="vista-annuale__griglia">
|
||||
@for (mese of mesi(); track mese.mese) {
|
||||
<mat-card class="mese" appearance="raised">
|
||||
<mat-card-header>
|
||||
<mat-card-title>{{ mese.nome }}</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="mese__intestazione">
|
||||
@for (nomeGiorno of giorniSettimana; track nomeGiorno) {
|
||||
<span>{{ nomeGiorno }}</span>
|
||||
}
|
||||
</div>
|
||||
<div class="mese__celle">
|
||||
@for (cella of mese.celle; track $index) {
|
||||
@if (cella) {
|
||||
<button
|
||||
type="button"
|
||||
class="mese__giorno"
|
||||
(click)="vaiAMese(mese.mese)"
|
||||
[attr.aria-label]="cella.conteggio + ' eventi il ' + cella.giorno + ' ' + mese.nome"
|
||||
>
|
||||
<span class="mese__numero">{{ cella.giorno }}</span>
|
||||
@if (cella.conteggio > 0) {
|
||||
<span class="mese__badge" [style.background-color]="cella.colore">
|
||||
{{ cella.conteggio > 1 ? cella.conteggio : '' }}
|
||||
</span>
|
||||
}
|
||||
</button>
|
||||
} @else {
|
||||
<span class="mese__giorno mese__giorno--vuoto"></span>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
export const VISTA_ANNUALE_ROUTES: Routes = [
|
||||
{
|
||||
path: '',
|
||||
loadComponent: () => import('./vista-annuale').then((m) => m.VistaAnnuale)
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,94 @@
|
||||
import { HttpErrorResponse } from '@angular/common/http';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { Router } from '@angular/router';
|
||||
import { of, throwError } from 'rxjs';
|
||||
|
||||
import { VistaAnnoGiornoView, VistaAnnualeApiService } from './vista-annuale-api.service';
|
||||
import { VistaAnnuale } from './vista-annuale';
|
||||
|
||||
describe('VistaAnnuale', () => {
|
||||
let component: VistaAnnuale;
|
||||
let fixture: ComponentFixture<VistaAnnuale>;
|
||||
let api: { getVistaAnno: ReturnType<typeof vi.fn> };
|
||||
let router: { navigate: ReturnType<typeof vi.fn> };
|
||||
|
||||
const anno = new Date().getFullYear();
|
||||
|
||||
const datiIniziali: VistaAnnoGiornoView[] = [
|
||||
{
|
||||
data: `${anno}-03-15`,
|
||||
conteggio: 1,
|
||||
eventi: [{ titolo: 'Uscita', tipo: 'uscita', brancaId: 'branca-1' }]
|
||||
},
|
||||
{
|
||||
data: `${anno}-03-16`,
|
||||
conteggio: 3,
|
||||
eventi: [
|
||||
{ titolo: 'Campo A', tipo: 'campo', brancaId: 'branca-1' },
|
||||
{ titolo: 'Campo B', tipo: 'campo', brancaId: 'branca-1' },
|
||||
{ titolo: 'Riunione', tipo: 'riunione', brancaId: 'branca-2' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
async function setup(response = of(datiIniziali)): Promise<void> {
|
||||
api = { getVistaAnno: vi.fn().mockReturnValue(response) };
|
||||
router = { navigate: vi.fn() };
|
||||
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [VistaAnnuale],
|
||||
providers: [
|
||||
{ provide: VistaAnnualeApiService, useValue: api },
|
||||
{ provide: Router, useValue: router }
|
||||
]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(VistaAnnuale);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
}
|
||||
|
||||
it('carica la vista annuale per l\'anno corrente all\'avvio', async () => {
|
||||
await setup();
|
||||
expect(api.getVistaAnno).toHaveBeenCalledWith(anno);
|
||||
expect(component.loading()).toBe(false);
|
||||
expect(component.error()).toBeNull();
|
||||
});
|
||||
|
||||
it('espone il conteggio corretto per i giorni con eventi', async () => {
|
||||
await setup();
|
||||
const marzo = component.mesi().find((m) => m.mese === 3)!;
|
||||
const giorno15 = marzo.celle.find((c) => c?.giorno === 15);
|
||||
const giorno16 = marzo.celle.find((c) => c?.giorno === 16);
|
||||
expect(giorno15?.conteggio).toBe(1);
|
||||
expect(giorno16?.conteggio).toBe(3);
|
||||
});
|
||||
|
||||
it('naviga alla vista mensile con anno e mese quando si clicca un giorno', async () => {
|
||||
await setup();
|
||||
component.vaiAMese(3);
|
||||
expect(router.navigate).toHaveBeenCalledWith(['/vista-mensile'], { queryParams: { anno, mese: 3 } });
|
||||
});
|
||||
|
||||
it('cambia anno e ricarica i dati', async () => {
|
||||
await setup();
|
||||
api.getVistaAnno.mockReturnValue(of([]));
|
||||
|
||||
component.annoSuccessivo();
|
||||
await fixture.whenStable();
|
||||
|
||||
expect(component.anno()).toBe(anno + 1);
|
||||
expect(api.getVistaAnno).toHaveBeenCalledWith(anno + 1);
|
||||
});
|
||||
|
||||
it('mostra un messaggio dedicato se manca un\'organizzazione attiva (403)', async () => {
|
||||
await setup(throwError(() => new HttpErrorResponse({ status: 403 })));
|
||||
expect(component.error()).toBe('Nessuna organizzazione attiva sul tuo account: impossibile caricare gli eventi.');
|
||||
});
|
||||
|
||||
it('mostra un messaggio generico per altri errori', async () => {
|
||||
await setup(throwError(() => new HttpErrorResponse({ status: 500 })));
|
||||
expect(component.error()).toBe('Impossibile caricare gli eventi. Riprova più tardi.');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,125 @@
|
||||
import { HttpErrorResponse } from '@angular/common/http';
|
||||
import { Component, computed, effect, inject, signal } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { firstValueFrom } from 'rxjs';
|
||||
|
||||
import { coloreTipo } from '../core/utils/colore-tipo';
|
||||
import { NOMI_MESI } from '../core/utils/nomi-mesi';
|
||||
import { VistaAnnoGiornoView, VistaAnnualeApiService } from './vista-annuale-api.service';
|
||||
|
||||
interface GiornoCella {
|
||||
giorno: number;
|
||||
conteggio: number;
|
||||
colore: string | null;
|
||||
}
|
||||
|
||||
interface MeseGrid {
|
||||
mese: number;
|
||||
nome: string;
|
||||
celle: (GiornoCella | null)[];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-vista-annuale',
|
||||
imports: [MatButtonModule, MatCardModule, MatIconModule],
|
||||
templateUrl: './vista-annuale.html',
|
||||
styleUrl: './vista-annuale.css'
|
||||
})
|
||||
export class VistaAnnuale {
|
||||
private readonly api = inject(VistaAnnualeApiService);
|
||||
private readonly router = inject(Router);
|
||||
|
||||
readonly giorniSettimana = ['Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom'];
|
||||
|
||||
readonly anno = signal(new Date().getFullYear());
|
||||
readonly loading = signal(false);
|
||||
readonly error = signal<string | null>(null);
|
||||
private readonly datiPerGiorno = signal<Map<string, VistaAnnoGiornoView>>(new Map());
|
||||
|
||||
readonly mesi = computed<MeseGrid[]>(() => this.costruisciGriglia(this.anno(), this.datiPerGiorno()));
|
||||
|
||||
constructor() {
|
||||
effect(() => {
|
||||
const anno = this.anno();
|
||||
void this.caricaAnno(anno);
|
||||
});
|
||||
}
|
||||
|
||||
annoPrecedente(): void {
|
||||
this.anno.update((a) => a - 1);
|
||||
}
|
||||
|
||||
annoSuccessivo(): void {
|
||||
this.anno.update((a) => a + 1);
|
||||
}
|
||||
|
||||
vaiAMese(mese: number): void {
|
||||
this.router.navigate(['/vista-mensile'], { queryParams: { anno: this.anno(), mese } });
|
||||
}
|
||||
|
||||
private async caricaAnno(anno: number): Promise<void> {
|
||||
this.loading.set(true);
|
||||
this.error.set(null);
|
||||
|
||||
try {
|
||||
const risultato = await firstValueFrom(this.api.getVistaAnno(anno));
|
||||
if (this.anno() !== anno) {
|
||||
return;
|
||||
}
|
||||
this.datiPerGiorno.set(new Map(risultato.map((g) => [g.data, g])));
|
||||
} catch (err) {
|
||||
if (this.anno() !== anno) {
|
||||
return;
|
||||
}
|
||||
this.datiPerGiorno.set(new Map());
|
||||
this.error.set(this.messaggioErrore(err as HttpErrorResponse));
|
||||
} finally {
|
||||
if (this.anno() === anno) {
|
||||
this.loading.set(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private messaggioErrore(err: HttpErrorResponse): string {
|
||||
if (err.status === 403) {
|
||||
return 'Nessuna organizzazione attiva sul tuo account: impossibile caricare gli eventi.';
|
||||
}
|
||||
return 'Impossibile caricare gli eventi. Riprova più tardi.';
|
||||
}
|
||||
|
||||
private costruisciGriglia(anno: number, dati: Map<string, VistaAnnoGiornoView>): MeseGrid[] {
|
||||
const mesi: MeseGrid[] = [];
|
||||
|
||||
for (let mese = 1; mese <= 12; mese++) {
|
||||
const giorniNelMese = new Date(anno, mese, 0).getDate();
|
||||
const primoGiorno = new Date(anno, mese - 1, 1);
|
||||
// getDay(): 0=Domenica..6=Sabato; la griglia mostra le settimane da Lunedì.
|
||||
const offset = (primoGiorno.getDay() + 6) % 7;
|
||||
|
||||
const celle: (GiornoCella | null)[] = new Array(offset).fill(null);
|
||||
|
||||
for (let giorno = 1; giorno <= giorniNelMese; giorno++) {
|
||||
const data = `${anno}-${String(mese).padStart(2, '0')}-${String(giorno).padStart(2, '0')}`;
|
||||
const giornoDati = dati.get(data);
|
||||
const primoEvento = giornoDati?.eventi[0];
|
||||
|
||||
celle.push({
|
||||
giorno,
|
||||
conteggio: giornoDati?.conteggio ?? 0,
|
||||
colore: primoEvento ? coloreTipo(primoEvento.tipo) : null
|
||||
});
|
||||
}
|
||||
|
||||
while (celle.length % 7 !== 0) {
|
||||
celle.push(null);
|
||||
}
|
||||
|
||||
mesi.push({ mese, nome: NOMI_MESI[mese - 1], celle });
|
||||
}
|
||||
|
||||
return mesi;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
.evento-form {
|
||||
max-width: 560px;
|
||||
margin: var(--space-6) auto;
|
||||
padding: 0 var(--space-3);
|
||||
}
|
||||
|
||||
.evento-form__card {
|
||||
background: var(--color-surface);
|
||||
border-radius: calc(var(--radius-lg) * 1.15);
|
||||
box-shadow: var(--shadow-md);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.evento-form__genitore {
|
||||
color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.evento-form__form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.evento-form__field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.evento-form__data-ora {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.evento-form__data-ora .evento-form__field {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.evento-form__error {
|
||||
color: var(--mat-sys-error);
|
||||
}
|
||||
|
||||
.evento-form__avviso {
|
||||
color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
<section class="evento-form">
|
||||
<div class="evento-form__card">
|
||||
<h1>{{ titolo }}</h1>
|
||||
|
||||
@if (loading()) {
|
||||
<p>Caricamento...</p>
|
||||
} @else if (loadError(); as message) {
|
||||
<p class="evento-form__error" role="alert">{{ message }}</p>
|
||||
} @else {
|
||||
@if (genitore(); as g) {
|
||||
<p class="evento-form__genitore">Sotto-evento di: <strong>{{ g.titolo }}</strong></p>
|
||||
}
|
||||
|
||||
<form class="evento-form__form" (submit)="$event.preventDefault(); submit()" novalidate>
|
||||
<mat-form-field appearance="outline" class="evento-form__field">
|
||||
<mat-label>Titolo</mat-label>
|
||||
<input matInput [formControl]="titoloControl" />
|
||||
@if (titoloControl.hasError('required')) {
|
||||
<mat-error>Il titolo è obbligatorio.</mat-error>
|
||||
} @else if (titoloControl.hasError('maxlength')) {
|
||||
<mat-error>Il titolo non può superare i 200 caratteri.</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="evento-form__field">
|
||||
<mat-label>Descrizione</mat-label>
|
||||
<textarea matInput [formControl]="descrizioneControl" rows="3"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="evento-form__field">
|
||||
<mat-label>Tipo</mat-label>
|
||||
<input matInput [formControl]="tipoControl" placeholder="Es. campo, riunione, uscita" />
|
||||
@if (tipoControl.hasError('required')) {
|
||||
<mat-error>Il tipo è obbligatorio.</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="evento-form__field">
|
||||
<mat-label>Location</mat-label>
|
||||
<input matInput [formControl]="locationControl" />
|
||||
</mat-form-field>
|
||||
|
||||
@if (modalita === 'crea') {
|
||||
<mat-form-field appearance="outline" class="evento-form__field">
|
||||
<mat-label>Branca</mat-label>
|
||||
<mat-select [formControl]="brancaControl">
|
||||
@for (branca of brancheUtente; track branca) {
|
||||
<mat-option [value]="branca">{{ branca }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
@if (brancaControl.hasError('required')) {
|
||||
<mat-error>Seleziona una branca.</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
@if (brancheUtente.length === 0) {
|
||||
<p class="evento-form__avviso">Non hai nessuna branca assegnata: non puoi creare eventi.</p>
|
||||
}
|
||||
} @else {
|
||||
<mat-form-field appearance="outline" class="evento-form__field">
|
||||
<mat-label>Branca</mat-label>
|
||||
<input matInput [value]="brancaControl.value" disabled />
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
<div class="evento-form__data-ora">
|
||||
<mat-form-field appearance="outline" class="evento-form__field">
|
||||
<mat-label>Data inizio</mat-label>
|
||||
<input matInput type="date" [formControl]="dataInizioControl" [attr.min]="minData()" [attr.max]="maxData()" />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="evento-form__field">
|
||||
<mat-label>Ora inizio</mat-label>
|
||||
<input
|
||||
matInput
|
||||
type="time"
|
||||
[formControl]="oraInizioControl"
|
||||
[attr.min]="minOraInizio()"
|
||||
[attr.max]="maxOraInizio()"
|
||||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="evento-form__data-ora">
|
||||
<mat-form-field appearance="outline" class="evento-form__field">
|
||||
<mat-label>Data fine</mat-label>
|
||||
<input matInput type="date" [formControl]="dataFineControl" [attr.min]="minData()" [attr.max]="maxData()" />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="evento-form__field">
|
||||
<mat-label>Ora fine</mat-label>
|
||||
<input matInput type="time" [formControl]="oraFineControl" [attr.min]="minOraFine()" [attr.max]="maxOraFine()" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
@if (submitError(); as message) {
|
||||
<p class="evento-form__error" role="alert">{{ message }}</p>
|
||||
}
|
||||
|
||||
<button mat-flat-button color="primary" type="submit" [disabled]="submitting()">
|
||||
{{ submitting() ? 'Salvataggio in corso...' : 'Salva' }}
|
||||
</button>
|
||||
</form>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,210 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import Keycloak from 'keycloak-js';
|
||||
import { Observable, of } from 'rxjs';
|
||||
|
||||
import { EventiApiService, EventoDettaglioView } from '../../core/eventi-api.service';
|
||||
import { EventoForm } from './evento-form';
|
||||
|
||||
describe('EventoForm', () => {
|
||||
let component: EventoForm;
|
||||
let fixture: ComponentFixture<EventoForm>;
|
||||
let api: {
|
||||
getEvento: ReturnType<typeof vi.fn>;
|
||||
creaEvento: ReturnType<typeof vi.fn>;
|
||||
aggiornaEvento: ReturnType<typeof vi.fn>;
|
||||
};
|
||||
let router: { navigate: ReturnType<typeof vi.fn> };
|
||||
|
||||
const eventoRadice: EventoDettaglioView = {
|
||||
id: 'evento-1',
|
||||
orgId: 'org-1',
|
||||
brancaId: 'Lupetti',
|
||||
parentId: null,
|
||||
titolo: 'Campo estivo',
|
||||
descrizione: 'Descrizione campo',
|
||||
dataInizio: '2026-07-10T08:00:00.000Z',
|
||||
dataFine: '2026-07-12T18:00:00.000Z',
|
||||
tipo: 'campo',
|
||||
location: 'Bosco',
|
||||
creatoDa: 'user-1',
|
||||
creatoIl: '2026-06-01T00:00:00.000Z',
|
||||
figli: [],
|
||||
risorseCollegate: []
|
||||
};
|
||||
|
||||
function buildRouteMock(options: {
|
||||
path: string;
|
||||
id?: string | null;
|
||||
queryParams?: Record<string, string>;
|
||||
}): Partial<ActivatedRoute> {
|
||||
return {
|
||||
snapshot: {
|
||||
routeConfig: { path: options.path },
|
||||
paramMap: { get: (key: string) => (key === 'id' ? (options.id ?? null) : null) },
|
||||
queryParamMap: { get: (key: string) => options.queryParams?.[key] ?? null }
|
||||
}
|
||||
} as unknown as ActivatedRoute;
|
||||
}
|
||||
|
||||
async function setup(options: {
|
||||
path: string;
|
||||
id?: string | null;
|
||||
queryParams?: Record<string, string>;
|
||||
roles?: string[];
|
||||
groups?: string[];
|
||||
getEventoImpl?: (id: string) => Observable<EventoDettaglioView>;
|
||||
}): Promise<void> {
|
||||
api = {
|
||||
getEvento: vi.fn().mockImplementation((id: string) => (options.getEventoImpl ? options.getEventoImpl(id) : of(eventoRadice))),
|
||||
creaEvento: vi.fn().mockReturnValue(of({ ...eventoRadice, id: 'nuovo-evento' })),
|
||||
aggiornaEvento: vi.fn().mockReturnValue(of({ ...eventoRadice }))
|
||||
};
|
||||
router = { navigate: vi.fn() };
|
||||
const keycloakMock = {
|
||||
tokenParsed: {
|
||||
realm_access: { roles: options.roles ?? [] },
|
||||
groups: options.groups ?? []
|
||||
}
|
||||
};
|
||||
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [EventoForm],
|
||||
providers: [
|
||||
{ provide: EventiApiService, useValue: api },
|
||||
{ provide: Router, useValue: router },
|
||||
{ provide: ActivatedRoute, useValue: buildRouteMock(options) },
|
||||
{ provide: Keycloak, useValue: keycloakMock }
|
||||
]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(EventoForm);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
}
|
||||
|
||||
describe('modalità crea', () => {
|
||||
it('preseleziona la branca dal query param se posseduta dall\'utente', async () => {
|
||||
await setup({ path: 'nuovo', queryParams: { branca: 'Lupetti' }, groups: ['/Lupetti'] });
|
||||
expect(component.brancaControl.value).toBe('Lupetti');
|
||||
});
|
||||
|
||||
it('invia brancaId scelto e naviga al dettaglio del nuovo evento', async () => {
|
||||
await setup({ path: 'nuovo', groups: ['/Lupetti'] });
|
||||
|
||||
component.titoloControl.setValue('Uscita');
|
||||
component.tipoControl.setValue('uscita');
|
||||
component.brancaControl.setValue('Lupetti');
|
||||
component.dataInizioControl.setValue('2026-08-01');
|
||||
component.oraInizioControl.setValue('09:00');
|
||||
component.dataFineControl.setValue('2026-08-01');
|
||||
component.oraFineControl.setValue('17:00');
|
||||
|
||||
await component.submit();
|
||||
|
||||
expect(api.creaEvento).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ titolo: 'Uscita', tipo: 'uscita', brancaId: 'Lupetti' })
|
||||
);
|
||||
expect(router.navigate).toHaveBeenCalledWith(['/vista-evento', 'nuovo-evento']);
|
||||
});
|
||||
|
||||
it('non invia la richiesta se i campi obbligatori mancano', async () => {
|
||||
await setup({ path: 'nuovo', groups: ['/Lupetti'] });
|
||||
await component.submit();
|
||||
expect(api.creaEvento).not.toHaveBeenCalled();
|
||||
expect(component.titoloControl.touched).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('modalità sotto-evento', () => {
|
||||
it('eredita la branca del genitore e disabilita il campo', async () => {
|
||||
await setup({ path: ':id/sotto-evento', id: 'evento-1' });
|
||||
expect(component.brancaControl.value).toBe('Lupetti');
|
||||
expect(component.brancaControl.disabled).toBe(true);
|
||||
});
|
||||
|
||||
it('vincola min/max data agli estremi del genitore', async () => {
|
||||
await setup({ path: ':id/sotto-evento', id: 'evento-1' });
|
||||
expect(component.minData()).toBe('2026-07-10');
|
||||
expect(component.maxData()).toBe('2026-07-12');
|
||||
});
|
||||
|
||||
it('invia parentId invece di brancaId alla creazione', async () => {
|
||||
await setup({ path: ':id/sotto-evento', id: 'evento-1' });
|
||||
|
||||
component.titoloControl.setValue('Laboratorio');
|
||||
component.tipoControl.setValue('attivita');
|
||||
component.dataInizioControl.setValue('2026-07-11');
|
||||
component.oraInizioControl.setValue('10:00');
|
||||
component.dataFineControl.setValue('2026-07-11');
|
||||
component.oraFineControl.setValue('12:00');
|
||||
|
||||
await component.submit();
|
||||
|
||||
expect(api.creaEvento).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ parentId: 'evento-1', titolo: 'Laboratorio' })
|
||||
);
|
||||
expect(api.creaEvento).toHaveBeenCalledWith(expect.not.objectContaining({ brancaId: expect.anything() }));
|
||||
});
|
||||
|
||||
it('mostra un errore se il genitore è già un sotto-evento (max due livelli)', async () => {
|
||||
const figlio: EventoDettaglioView = { ...eventoRadice, id: 'evento-2', parentId: 'evento-1' };
|
||||
await setup({ path: ':id/sotto-evento', id: 'evento-2', getEventoImpl: () => of(figlio) });
|
||||
|
||||
expect(component.loadError()).toBe(
|
||||
'Non è possibile creare un sotto-evento di un sotto-evento (massimo due livelli).'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('modalità modifica', () => {
|
||||
it('precompila il form con i dati dell\'evento', async () => {
|
||||
await setup({ path: ':id/modifica', id: 'evento-1' });
|
||||
expect(component.titoloControl.value).toBe('Campo estivo');
|
||||
expect(component.brancaControl.value).toBe('Lupetti');
|
||||
expect(component.brancaControl.disabled).toBe(true);
|
||||
});
|
||||
|
||||
it('invia le modifiche e naviga al dettaglio', async () => {
|
||||
await setup({ path: ':id/modifica', id: 'evento-1' });
|
||||
|
||||
component.titoloControl.setValue('Campo estivo (modificato)');
|
||||
|
||||
await component.submit();
|
||||
|
||||
expect(api.aggiornaEvento).toHaveBeenCalledWith(
|
||||
'evento-1',
|
||||
expect.objectContaining({ titolo: 'Campo estivo (modificato)' })
|
||||
);
|
||||
expect(router.navigate).toHaveBeenCalledWith(['/vista-evento', 'evento-1']);
|
||||
});
|
||||
|
||||
it('carica il genitore per vincolare le date se l\'evento modificato è un figlio', async () => {
|
||||
const figlio: EventoDettaglioView = { ...eventoRadice, id: 'evento-2', parentId: 'evento-1' };
|
||||
const getEventoImpl = (id: string) => of(id === 'evento-2' ? figlio : eventoRadice);
|
||||
|
||||
await setup({ path: ':id/modifica', id: 'evento-2', getEventoImpl });
|
||||
|
||||
expect(component.minData()).toBe('2026-07-10');
|
||||
expect(component.maxData()).toBe('2026-07-12');
|
||||
});
|
||||
});
|
||||
|
||||
it('mostra un errore se la data/ora di fine precede l\'inizio', async () => {
|
||||
await setup({ path: 'nuovo', groups: ['/Lupetti'] });
|
||||
|
||||
component.titoloControl.setValue('Uscita');
|
||||
component.tipoControl.setValue('uscita');
|
||||
component.brancaControl.setValue('Lupetti');
|
||||
component.dataInizioControl.setValue('2026-08-02');
|
||||
component.oraInizioControl.setValue('09:00');
|
||||
component.dataFineControl.setValue('2026-08-01');
|
||||
component.oraFineControl.setValue('17:00');
|
||||
|
||||
await component.submit();
|
||||
|
||||
expect(component.submitError()).toBe("La data/ora di fine deve essere successiva o uguale all'inizio.");
|
||||
expect(api.creaEvento).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,262 @@
|
||||
import { HttpErrorResponse } from '@angular/common/http';
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
import { AbstractControl, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import Keycloak from 'keycloak-js';
|
||||
import { firstValueFrom } from 'rxjs';
|
||||
|
||||
import { extractAuthContext } from '../../core/auth/auth-context';
|
||||
import { AggiornaEventoInput, CreaEventoInput, EventiApiService, EventoView } from '../../core/eventi-api.service';
|
||||
|
||||
type Modalita = 'crea' | 'modifica' | 'sotto-evento';
|
||||
|
||||
function toDateInputValue(iso: string): string {
|
||||
const d = new Date(iso);
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function toTimeInputValue(iso: string): string {
|
||||
const d = new Date(iso);
|
||||
return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function combineToIso(data: string, ora: string): string {
|
||||
return new Date(`${data}T${ora}`).toISOString();
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-evento-form',
|
||||
imports: [ReactiveFormsModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatSelectModule],
|
||||
templateUrl: './evento-form.html',
|
||||
styleUrl: './evento-form.css'
|
||||
})
|
||||
export class EventoForm implements OnInit {
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
private readonly api = inject(EventiApiService);
|
||||
private readonly keycloak = inject(Keycloak);
|
||||
|
||||
private readonly routePath = this.route.snapshot.routeConfig?.path ?? '';
|
||||
private readonly eventoId = this.route.snapshot.paramMap.get('id');
|
||||
|
||||
readonly modalita: Modalita =
|
||||
this.routePath === 'nuovo' ? 'crea' : this.routePath.endsWith('sotto-evento') ? 'sotto-evento' : 'modifica';
|
||||
|
||||
// Non c'è un catalogo branche lato backend: le opzioni per un evento radice
|
||||
// sono le sole branche (claim "groups") a cui appartiene l'utente corrente.
|
||||
readonly brancheUtente = extractAuthContext(this.keycloak.tokenParsed).branche;
|
||||
|
||||
readonly loading = signal(true);
|
||||
readonly loadError = signal<string | null>(null);
|
||||
|
||||
// Evento che vincola l'intervallo data/ora selezionabile: il genitore in
|
||||
// modalità sotto-evento, oppure il genitore dell'evento in modifica se
|
||||
// quest'ultimo è già un figlio.
|
||||
readonly genitore = signal<EventoView | null>(null);
|
||||
|
||||
readonly titoloControl = new FormControl('', {
|
||||
nonNullable: true,
|
||||
validators: [Validators.required, Validators.maxLength(200)]
|
||||
});
|
||||
readonly descrizioneControl = new FormControl('', { nonNullable: true });
|
||||
readonly tipoControl = new FormControl('', { nonNullable: true, validators: [Validators.required] });
|
||||
readonly locationControl = new FormControl('', { nonNullable: true });
|
||||
readonly brancaControl = new FormControl<string | null>(null, { validators: [Validators.required] });
|
||||
readonly dataInizioControl = new FormControl('', { nonNullable: true, validators: [Validators.required] });
|
||||
readonly oraInizioControl = new FormControl('', { nonNullable: true, validators: [Validators.required] });
|
||||
readonly dataFineControl = new FormControl('', { nonNullable: true, validators: [Validators.required] });
|
||||
readonly oraFineControl = new FormControl('', { nonNullable: true, validators: [Validators.required] });
|
||||
|
||||
readonly submitting = signal(false);
|
||||
readonly submitError = signal<string | null>(null);
|
||||
|
||||
get titolo(): string {
|
||||
if (this.modalita === 'crea') {
|
||||
return 'Crea evento';
|
||||
}
|
||||
if (this.modalita === 'sotto-evento') {
|
||||
return 'Aggiungi sotto-evento';
|
||||
}
|
||||
return 'Modifica evento';
|
||||
}
|
||||
|
||||
async ngOnInit(): Promise<void> {
|
||||
await this.inizializza();
|
||||
}
|
||||
|
||||
minData(): string | null {
|
||||
const g = this.genitore();
|
||||
return g ? toDateInputValue(g.dataInizio) : null;
|
||||
}
|
||||
|
||||
maxData(): string | null {
|
||||
const g = this.genitore();
|
||||
return g ? toDateInputValue(g.dataFine) : null;
|
||||
}
|
||||
|
||||
minOraInizio(): string | null {
|
||||
const g = this.genitore();
|
||||
return g && this.dataInizioControl.value === toDateInputValue(g.dataInizio) ? toTimeInputValue(g.dataInizio) : null;
|
||||
}
|
||||
|
||||
maxOraInizio(): string | null {
|
||||
const g = this.genitore();
|
||||
return g && this.dataInizioControl.value === toDateInputValue(g.dataFine) ? toTimeInputValue(g.dataFine) : null;
|
||||
}
|
||||
|
||||
minOraFine(): string | null {
|
||||
const g = this.genitore();
|
||||
return g && this.dataFineControl.value === toDateInputValue(g.dataInizio) ? toTimeInputValue(g.dataInizio) : null;
|
||||
}
|
||||
|
||||
maxOraFine(): string | null {
|
||||
const g = this.genitore();
|
||||
return g && this.dataFineControl.value === toDateInputValue(g.dataFine) ? toTimeInputValue(g.dataFine) : null;
|
||||
}
|
||||
|
||||
async submit(): Promise<void> {
|
||||
if (this.submitting()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const controlli: AbstractControl[] = [
|
||||
this.titoloControl,
|
||||
this.tipoControl,
|
||||
this.dataInizioControl,
|
||||
this.oraInizioControl,
|
||||
this.dataFineControl,
|
||||
this.oraFineControl
|
||||
];
|
||||
if (this.modalita === 'crea') {
|
||||
controlli.push(this.brancaControl);
|
||||
}
|
||||
|
||||
if (controlli.some((c) => c.invalid)) {
|
||||
controlli.forEach((c) => c.markAsTouched());
|
||||
return;
|
||||
}
|
||||
|
||||
const dataInizioIso = combineToIso(this.dataInizioControl.value, this.oraInizioControl.value);
|
||||
const dataFineIso = combineToIso(this.dataFineControl.value, this.oraFineControl.value);
|
||||
|
||||
if (dataFineIso < dataInizioIso) {
|
||||
this.submitError.set("La data/ora di fine deve essere successiva o uguale all'inizio.");
|
||||
return;
|
||||
}
|
||||
|
||||
this.submitError.set(null);
|
||||
this.submitting.set(true);
|
||||
|
||||
try {
|
||||
const eventoSalvato = await (this.modalita === 'modifica'
|
||||
? this.salvaModifica(dataInizioIso, dataFineIso)
|
||||
: this.salvaCreazione(dataInizioIso, dataFineIso));
|
||||
await this.router.navigate(['/vista-evento', eventoSalvato.id]);
|
||||
} catch (err) {
|
||||
this.submitError.set(this.messaggioErroreSalvataggio(err as HttpErrorResponse));
|
||||
} finally {
|
||||
this.submitting.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
private salvaModifica(dataInizioIso: string, dataFineIso: string): Promise<EventoView> {
|
||||
const input: AggiornaEventoInput = {
|
||||
titolo: this.titoloControl.value.trim(),
|
||||
descrizione: this.descrizioneControl.value.trim() || null,
|
||||
tipo: this.tipoControl.value.trim(),
|
||||
location: this.locationControl.value.trim() || null,
|
||||
dataInizio: dataInizioIso,
|
||||
dataFine: dataFineIso
|
||||
};
|
||||
return firstValueFrom(this.api.aggiornaEvento(this.eventoId!, input));
|
||||
}
|
||||
|
||||
private salvaCreazione(dataInizioIso: string, dataFineIso: string): Promise<EventoView> {
|
||||
const input: CreaEventoInput = {
|
||||
titolo: this.titoloControl.value.trim(),
|
||||
descrizione: this.descrizioneControl.value.trim() || null,
|
||||
tipo: this.tipoControl.value.trim(),
|
||||
location: this.locationControl.value.trim() || null,
|
||||
dataInizio: dataInizioIso,
|
||||
dataFine: dataFineIso,
|
||||
...(this.modalita === 'sotto-evento' ? { parentId: this.eventoId! } : { brancaId: this.brancaControl.value! })
|
||||
};
|
||||
return firstValueFrom(this.api.creaEvento(input));
|
||||
}
|
||||
|
||||
private messaggioErroreSalvataggio(err: HttpErrorResponse): string {
|
||||
if (err.status === 403) {
|
||||
return 'Non hai i permessi per salvare un evento su questa branca.';
|
||||
}
|
||||
if (err.status === 400) {
|
||||
return typeof err.error?.message === 'string' ? err.error.message : 'Dati non validi: controlla i campi del form.';
|
||||
}
|
||||
return 'Impossibile salvare. Riprova più tardi.';
|
||||
}
|
||||
|
||||
private async inizializza(): Promise<void> {
|
||||
this.loading.set(true);
|
||||
this.loadError.set(null);
|
||||
|
||||
try {
|
||||
if (this.modalita === 'crea') {
|
||||
const brancaPreselezionata = this.route.snapshot.queryParamMap.get('branca');
|
||||
if (brancaPreselezionata && this.brancheUtente.includes(brancaPreselezionata)) {
|
||||
this.brancaControl.setValue(brancaPreselezionata);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.modalita === 'sotto-evento') {
|
||||
await this.inizializzaSottoEvento();
|
||||
return;
|
||||
}
|
||||
|
||||
await this.inizializzaModifica();
|
||||
} catch {
|
||||
this.loadError.set('Impossibile caricare i dati necessari. Riprova più tardi.');
|
||||
} finally {
|
||||
this.loading.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
private async inizializzaSottoEvento(): Promise<void> {
|
||||
const genitore = await firstValueFrom(this.api.getEvento(this.eventoId!));
|
||||
if (genitore.parentId !== null) {
|
||||
this.loadError.set('Non è possibile creare un sotto-evento di un sotto-evento (massimo due livelli).');
|
||||
return;
|
||||
}
|
||||
|
||||
this.genitore.set(genitore);
|
||||
this.brancaControl.setValue(genitore.brancaId);
|
||||
this.brancaControl.disable();
|
||||
this.dataInizioControl.setValue(toDateInputValue(genitore.dataInizio));
|
||||
this.oraInizioControl.setValue(toTimeInputValue(genitore.dataInizio));
|
||||
this.dataFineControl.setValue(toDateInputValue(genitore.dataFine));
|
||||
this.oraFineControl.setValue(toTimeInputValue(genitore.dataFine));
|
||||
}
|
||||
|
||||
private async inizializzaModifica(): Promise<void> {
|
||||
const evento = await firstValueFrom(this.api.getEvento(this.eventoId!));
|
||||
|
||||
this.titoloControl.setValue(evento.titolo);
|
||||
this.descrizioneControl.setValue(evento.descrizione ?? '');
|
||||
this.tipoControl.setValue(evento.tipo);
|
||||
this.locationControl.setValue(evento.location ?? '');
|
||||
this.brancaControl.setValue(evento.brancaId);
|
||||
this.brancaControl.disable();
|
||||
this.dataInizioControl.setValue(toDateInputValue(evento.dataInizio));
|
||||
this.oraInizioControl.setValue(toTimeInputValue(evento.dataInizio));
|
||||
this.dataFineControl.setValue(toDateInputValue(evento.dataFine));
|
||||
this.oraFineControl.setValue(toTimeInputValue(evento.dataFine));
|
||||
|
||||
if (evento.parentId) {
|
||||
const genitore = await firstValueFrom(this.api.getEvento(evento.parentId));
|
||||
this.genitore.set(genitore);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
.vista-evento {
|
||||
max-width: 760px;
|
||||
margin: var(--space-6) auto;
|
||||
padding: 0 var(--space-3);
|
||||
}
|
||||
|
||||
.vista-evento__error {
|
||||
color: var(--mat-sys-error);
|
||||
}
|
||||
|
||||
.vista-evento__card {
|
||||
background: var(--color-surface);
|
||||
border-radius: calc(var(--radius-lg) * 1.15);
|
||||
box-shadow: var(--shadow-md);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.vista-evento__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.vista-evento__meta {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
margin: var(--space-1) 0 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.vista-evento__tag {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--color-accent-100);
|
||||
color: var(--color-accent-800);
|
||||
}
|
||||
|
||||
.vista-evento__azioni {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.vista-evento__descrizione {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.vista-evento__dettagli {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin: var(--space-4) 0;
|
||||
background: var(--color-bg);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.vista-evento__dettagli dt {
|
||||
font-size: 12px;
|
||||
color: color-mix(in srgb, var(--color-text) 70%, transparent);
|
||||
}
|
||||
|
||||
.vista-evento__dettagli dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.vista-evento__timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.timeline-giorno {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.timeline-giorno__etichetta {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.timeline-giorno__corsia {
|
||||
position: relative;
|
||||
height: 22px;
|
||||
width: 100%;
|
||||
background: var(--color-bg);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.timeline-giorno__corsia--figlio {
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.timeline-blocco {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
min-width: 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 6px;
|
||||
font-size: 11px;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.timeline-blocco--genitore {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.vista-evento__vuoto {
|
||||
color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||
}
|
||||
|
||||
.vista-evento__risorse {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.vista-evento__risorsa {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: var(--color-bg);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.vista-evento__risorsa-tipo {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.vista-evento__risorsa-id {
|
||||
color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vista-evento__risorsa-origine {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--color-neutral-100);
|
||||
color: var(--color-neutral-800);
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
<section class="vista-evento">
|
||||
@if (loading()) {
|
||||
<p>Caricamento evento...</p>
|
||||
} @else if (loadError(); as message) {
|
||||
<p class="vista-evento__error" role="alert">{{ message }}</p>
|
||||
} @else if (evento(); as ev) {
|
||||
<div class="vista-evento__card">
|
||||
<div class="vista-evento__header">
|
||||
<div>
|
||||
<h1>{{ ev.titolo }}</h1>
|
||||
<p class="vista-evento__meta">
|
||||
<span class="vista-evento__tag">{{ ev.tipo }}</span>
|
||||
<span class="vista-evento__tag">{{ ev.brancaId }}</span>
|
||||
@if (ev.parentId) {
|
||||
<span class="vista-evento__tag">sotto-evento</span>
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="vista-evento__azioni">
|
||||
@if (puoGestireEvento()) {
|
||||
<button mat-stroked-button type="button" (click)="vaiAModifica()">Modifica</button>
|
||||
}
|
||||
@if (puoGestireEvento()) {
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
type="button"
|
||||
[disabled]="!puoAggiungereSottoEvento()"
|
||||
[attr.title]="ev.parentId ? 'Un sotto-evento non può avere a sua volta sotto-eventi' : null"
|
||||
(click)="vaiASottoEvento()"
|
||||
>
|
||||
Aggiungi sotto-evento
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (ev.descrizione) {
|
||||
<p class="vista-evento__descrizione">{{ ev.descrizione }}</p>
|
||||
}
|
||||
|
||||
<dl class="vista-evento__dettagli">
|
||||
<div>
|
||||
<dt>Inizio</dt>
|
||||
<dd>{{ formatData(ev.dataInizio) }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Fine</dt>
|
||||
<dd>{{ formatData(ev.dataFine) }}</dd>
|
||||
</div>
|
||||
@if (ev.location) {
|
||||
<div>
|
||||
<dt>Location</dt>
|
||||
<dd>{{ ev.location }}</dd>
|
||||
</div>
|
||||
}
|
||||
</dl>
|
||||
|
||||
<h2>Timeline</h2>
|
||||
<div class="vista-evento__timeline">
|
||||
@for (giorno of timeline(); track giorno.data) {
|
||||
<div class="timeline-giorno">
|
||||
<span class="timeline-giorno__etichetta">{{ giorno.etichetta }}</span>
|
||||
|
||||
<div class="timeline-giorno__corsia" [title]="giorno.genitore.orarioLabel">
|
||||
<div
|
||||
class="timeline-blocco timeline-blocco--genitore"
|
||||
[style.left.%]="giorno.genitore.inizioPercento"
|
||||
[style.width.%]="giorno.genitore.larghezzaPercento"
|
||||
[style.background-color]="giorno.genitore.colore"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
@for (figlio of giorno.figli; track figlio.id) {
|
||||
<button
|
||||
type="button"
|
||||
class="timeline-giorno__corsia timeline-giorno__corsia--figlio"
|
||||
[title]="figlio.titolo + ' · ' + figlio.orarioLabel"
|
||||
(click)="vaiAEvento(figlio.id)"
|
||||
>
|
||||
<span
|
||||
class="timeline-blocco"
|
||||
[style.left.%]="figlio.inizioPercento"
|
||||
[style.width.%]="figlio.larghezzaPercento"
|
||||
[style.background-color]="figlio.colore"
|
||||
>
|
||||
{{ figlio.titolo }}
|
||||
</span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<h2>Risorse collegate</h2>
|
||||
@if (ev.risorseCollegate.length === 0) {
|
||||
<p class="vista-evento__vuoto">Nessuna risorsa collegata.</p>
|
||||
} @else {
|
||||
<ul class="vista-evento__risorse">
|
||||
@for (risorsa of ev.risorseCollegate; track risorsa.id) {
|
||||
<li class="vista-evento__risorsa">
|
||||
<span class="vista-evento__risorsa-tipo">{{ risorsa.tipoRisorsa }}</span>
|
||||
<span class="vista-evento__risorsa-id">{{ risorsa.risorsaId }}</span>
|
||||
<span class="vista-evento__risorsa-origine">{{ risorsa.servizioOrigine }}</span>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { requireBrancaAccessEventoGuard, requireCreaEventoGuard } from '../core/auth/require-branca-access.guard';
|
||||
|
||||
export const VISTA_EVENTO_ROUTES: Routes = [
|
||||
{
|
||||
// Deve precedere ':id': altrimenti "nuovo" verrebbe interpretato come id evento.
|
||||
path: 'nuovo',
|
||||
loadComponent: () => import('./evento-form/evento-form').then((m) => m.EventoForm),
|
||||
canActivate: [requireCreaEventoGuard]
|
||||
},
|
||||
{
|
||||
path: ':id/modifica',
|
||||
loadComponent: () => import('./evento-form/evento-form').then((m) => m.EventoForm),
|
||||
canActivate: [requireBrancaAccessEventoGuard]
|
||||
},
|
||||
{
|
||||
path: ':id/sotto-evento',
|
||||
loadComponent: () => import('./evento-form/evento-form').then((m) => m.EventoForm),
|
||||
canActivate: [requireBrancaAccessEventoGuard]
|
||||
},
|
||||
{
|
||||
path: ':id',
|
||||
loadComponent: () => import('./vista-evento').then((m) => m.VistaEvento)
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,157 @@
|
||||
import { HttpErrorResponse } from '@angular/common/http';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import Keycloak from 'keycloak-js';
|
||||
import { Observable, of, throwError } from 'rxjs';
|
||||
|
||||
import { EventiApiService, EventoDettaglioView } from '../core/eventi-api.service';
|
||||
import { VistaEvento } from './vista-evento';
|
||||
|
||||
describe('VistaEvento', () => {
|
||||
let component: VistaEvento;
|
||||
let fixture: ComponentFixture<VistaEvento>;
|
||||
let api: { getEvento: ReturnType<typeof vi.fn> };
|
||||
let router: { navigate: ReturnType<typeof vi.fn> };
|
||||
|
||||
const eventoBase: EventoDettaglioView = {
|
||||
id: 'evento-1',
|
||||
orgId: 'org-1',
|
||||
brancaId: 'Lupetti',
|
||||
parentId: null,
|
||||
titolo: 'Campo estivo',
|
||||
descrizione: 'Tre giorni sul campo',
|
||||
dataInizio: '2026-07-10T08:00:00.000Z',
|
||||
dataFine: '2026-07-11T18:00:00.000Z',
|
||||
tipo: 'campo',
|
||||
location: 'Bosco',
|
||||
creatoDa: 'user-1',
|
||||
creatoIl: '2026-06-01T00:00:00.000Z',
|
||||
figli: [
|
||||
{
|
||||
id: 'evento-2',
|
||||
orgId: 'org-1',
|
||||
brancaId: 'Lupetti',
|
||||
parentId: 'evento-1',
|
||||
titolo: 'Laboratorio',
|
||||
descrizione: null,
|
||||
dataInizio: '2026-07-10T10:00:00.000Z',
|
||||
dataFine: '2026-07-10T12:00:00.000Z',
|
||||
tipo: 'attivita',
|
||||
location: null,
|
||||
creatoDa: 'user-1',
|
||||
creatoIl: '2026-06-01T00:00:00.000Z'
|
||||
}
|
||||
],
|
||||
risorseCollegate: [
|
||||
{
|
||||
id: 'risorsa-1',
|
||||
tipoRisorsa: 'attivita',
|
||||
risorsaId: 'attivita-9',
|
||||
servizioOrigine: 'scouthub-attivita-be',
|
||||
metadata: null,
|
||||
creatoIl: '2026-06-02T00:00:00.000Z'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
async function setup(options: {
|
||||
evento?: Observable<EventoDettaglioView>;
|
||||
id?: string;
|
||||
roles?: string[];
|
||||
groups?: string[];
|
||||
} = {}): Promise<void> {
|
||||
api = { getEvento: vi.fn().mockReturnValue(options.evento ?? of(eventoBase)) };
|
||||
router = { navigate: vi.fn() };
|
||||
const keycloakMock = {
|
||||
tokenParsed: {
|
||||
realm_access: { roles: options.roles ?? [] },
|
||||
groups: options.groups ?? []
|
||||
}
|
||||
};
|
||||
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [VistaEvento],
|
||||
providers: [
|
||||
{ provide: EventiApiService, useValue: api },
|
||||
{ provide: Router, useValue: router },
|
||||
{
|
||||
provide: ActivatedRoute,
|
||||
useValue: { snapshot: { paramMap: { get: () => options.id ?? 'evento-1' } } }
|
||||
},
|
||||
{ provide: Keycloak, useValue: keycloakMock }
|
||||
]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(VistaEvento);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
}
|
||||
|
||||
it('carica il dettaglio evento', async () => {
|
||||
await setup();
|
||||
expect(api.getEvento).toHaveBeenCalledWith('evento-1');
|
||||
expect(component.evento()?.titolo).toBe('Campo estivo');
|
||||
expect(component.loading()).toBe(false);
|
||||
});
|
||||
|
||||
it('costruisce una riga di timeline per ogni giorno tra inizio e fine', async () => {
|
||||
await setup();
|
||||
const timeline = component.timeline();
|
||||
expect(timeline.map((g) => g.data)).toEqual(['2026-07-10', '2026-07-11']);
|
||||
});
|
||||
|
||||
it('mostra il figlio nella timeline solo nel giorno in cui ricade', async () => {
|
||||
await setup();
|
||||
const timeline = component.timeline();
|
||||
const giorno10 = timeline.find((g) => g.data === '2026-07-10')!;
|
||||
const giorno11 = timeline.find((g) => g.data === '2026-07-11')!;
|
||||
|
||||
expect(giorno10.figli.map((f) => f.id)).toEqual(['evento-2']);
|
||||
expect(giorno11.figli).toEqual([]);
|
||||
});
|
||||
|
||||
it('naviga al form di modifica', async () => {
|
||||
await setup();
|
||||
component.vaiAModifica();
|
||||
expect(router.navigate).toHaveBeenCalledWith(['/vista-evento', 'evento-1', 'modifica']);
|
||||
});
|
||||
|
||||
it('naviga al form sotto-evento', async () => {
|
||||
await setup();
|
||||
component.vaiASottoEvento();
|
||||
expect(router.navigate).toHaveBeenCalledWith(['/vista-evento', 'evento-1', 'sotto-evento']);
|
||||
});
|
||||
|
||||
describe('gating "aggiungi sotto-evento"', () => {
|
||||
it('visibile e abilitato per capo-gruppo su un evento radice', async () => {
|
||||
await setup({ roles: ['capo-gruppo'] });
|
||||
expect(component.puoGestireEvento()).toBe(true);
|
||||
expect(component.puoAggiungereSottoEvento()).toBe(true);
|
||||
});
|
||||
|
||||
it('visibile e abilitato per capo-unita della branca dell\'evento', async () => {
|
||||
await setup({ roles: ['capo-unita'], groups: ['/Lupetti'] });
|
||||
expect(component.puoAggiungereSottoEvento()).toBe(true);
|
||||
});
|
||||
|
||||
it('nascosto per capo-unita di un\'altra branca', async () => {
|
||||
await setup({ roles: ['capo-unita'], groups: ['/Esploratori'] });
|
||||
expect(component.puoGestireEvento()).toBe(false);
|
||||
expect(component.puoAggiungereSottoEvento()).toBe(false);
|
||||
});
|
||||
|
||||
it('disabilitato se l\'evento corrente è già un sotto-evento (max due livelli)', async () => {
|
||||
const figlio: EventoDettaglioView = { ...eventoBase, id: 'evento-2', parentId: 'evento-1', figli: [] };
|
||||
await setup({ evento: of(figlio), id: 'evento-2', roles: ['capo-gruppo'] });
|
||||
|
||||
expect(component.puoGestireEvento()).toBe(true);
|
||||
expect(component.puoAggiungereSottoEvento()).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
it('mostra un messaggio dedicato se l\'evento non esiste (404)', async () => {
|
||||
await setup({ evento: throwError(() => new HttpErrorResponse({ status: 404 })) });
|
||||
expect(component.loadError()).toBe('Evento non trovato.');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,180 @@
|
||||
import { HttpErrorResponse } from '@angular/common/http';
|
||||
import { Component, OnInit, computed, inject, signal } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import Keycloak from 'keycloak-js';
|
||||
import { firstValueFrom } from 'rxjs';
|
||||
|
||||
import { extractAuthContext } from '../core/auth/auth-context';
|
||||
import { hasBrancaAccess } from '../core/auth/branca-access';
|
||||
import { coloreTipo } from '../core/utils/colore-tipo';
|
||||
import { EventiApiService, EventoDettaglioView, EventoView } from '../core/eventi-api.service';
|
||||
|
||||
interface BloccoTimeline {
|
||||
id: string;
|
||||
titolo: string;
|
||||
colore: string;
|
||||
inizioPercento: number;
|
||||
larghezzaPercento: number;
|
||||
orarioLabel: string;
|
||||
}
|
||||
|
||||
interface GiornoTimeline {
|
||||
data: string;
|
||||
etichetta: string;
|
||||
genitore: BloccoTimeline;
|
||||
figli: BloccoTimeline[];
|
||||
}
|
||||
|
||||
const MS_GIORNO = 24 * 60 * 60 * 1000;
|
||||
|
||||
@Component({
|
||||
selector: 'app-vista-evento',
|
||||
imports: [MatButtonModule, MatCardModule],
|
||||
templateUrl: './vista-evento.html',
|
||||
styleUrl: './vista-evento.css'
|
||||
})
|
||||
export class VistaEvento implements OnInit {
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
private readonly api = inject(EventiApiService);
|
||||
private readonly keycloak = inject(Keycloak);
|
||||
|
||||
private readonly eventoId = this.route.snapshot.paramMap.get('id') ?? '';
|
||||
|
||||
readonly loading = signal(true);
|
||||
readonly loadError = signal<string | null>(null);
|
||||
readonly evento = signal<EventoDettaglioView | null>(null);
|
||||
|
||||
readonly timeline = computed<GiornoTimeline[]>(() => {
|
||||
const ev = this.evento();
|
||||
return ev ? this.costruisciTimeline(ev) : [];
|
||||
});
|
||||
|
||||
// Nascosto/disabilitato per chi non ha accesso alla branca: la verifica
|
||||
// autoritativa resta comunque lato backend (assertBrancaAccess su
|
||||
// POST/PUT /eventi), qui è solo UX.
|
||||
readonly puoGestireEvento = computed(() => {
|
||||
const ev = this.evento();
|
||||
if (!ev) {
|
||||
return false;
|
||||
}
|
||||
const auth = extractAuthContext(this.keycloak.tokenParsed);
|
||||
return hasBrancaAccess(auth, ev.brancaId);
|
||||
});
|
||||
|
||||
readonly puoAggiungereSottoEvento = computed(() => {
|
||||
const ev = this.evento();
|
||||
return this.puoGestireEvento() && !!ev && ev.parentId === null;
|
||||
});
|
||||
|
||||
async ngOnInit(): Promise<void> {
|
||||
await this.carica();
|
||||
}
|
||||
|
||||
vaiAEvento(id: string): void {
|
||||
this.router.navigate(['/vista-evento', id]);
|
||||
}
|
||||
|
||||
vaiAModifica(): void {
|
||||
this.router.navigate(['/vista-evento', this.eventoId, 'modifica']);
|
||||
}
|
||||
|
||||
vaiASottoEvento(): void {
|
||||
this.router.navigate(['/vista-evento', this.eventoId, 'sotto-evento']);
|
||||
}
|
||||
|
||||
formatData(dataIso: string): string {
|
||||
return new Date(dataIso).toLocaleString('it-IT', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
private async carica(): Promise<void> {
|
||||
this.loading.set(true);
|
||||
this.loadError.set(null);
|
||||
|
||||
try {
|
||||
const evento = await firstValueFrom(this.api.getEvento(this.eventoId));
|
||||
this.evento.set(evento);
|
||||
} catch (err) {
|
||||
this.loadError.set(this.messaggioErrore(err as HttpErrorResponse));
|
||||
} finally {
|
||||
this.loading.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
private messaggioErrore(err: HttpErrorResponse): string {
|
||||
if (err.status === 404) {
|
||||
return 'Evento non trovato.';
|
||||
}
|
||||
return 'Impossibile caricare l\'evento. Riprova più tardi.';
|
||||
}
|
||||
|
||||
private costruisciTimeline(evento: EventoDettaglioView): GiornoTimeline[] {
|
||||
const inizio = new Date(evento.dataInizio);
|
||||
const fine = new Date(evento.dataFine);
|
||||
const giornoInizio = new Date(inizio.getFullYear(), inizio.getMonth(), inizio.getDate());
|
||||
const giornoFine = new Date(fine.getFullYear(), fine.getMonth(), fine.getDate());
|
||||
|
||||
const giorni: GiornoTimeline[] = [];
|
||||
const cursor = new Date(giornoInizio);
|
||||
while (cursor <= giornoFine) {
|
||||
const giorno = new Date(cursor);
|
||||
|
||||
giorni.push({
|
||||
data: this.isoDate(giorno),
|
||||
etichetta: giorno.toLocaleDateString('it-IT', { weekday: 'short', day: 'numeric', month: 'long' }),
|
||||
genitore: this.buildBlocco(evento, giorno),
|
||||
figli: evento.figli.filter((figlio) => this.toccaGiorno(figlio, giorno)).map((figlio) => this.buildBlocco(figlio, giorno))
|
||||
});
|
||||
|
||||
cursor.setDate(cursor.getDate() + 1);
|
||||
}
|
||||
|
||||
return giorni;
|
||||
}
|
||||
|
||||
private buildBlocco(evento: EventoView, giorno: Date): BloccoTimeline {
|
||||
const inizioPercento = this.frazioneGiorno(evento.dataInizio, giorno);
|
||||
const finePercento = this.frazioneGiorno(evento.dataFine, giorno);
|
||||
|
||||
return {
|
||||
id: evento.id,
|
||||
titolo: evento.titolo,
|
||||
colore: coloreTipo(evento.tipo),
|
||||
inizioPercento,
|
||||
larghezzaPercento: Math.max(finePercento - inizioPercento, 2),
|
||||
orarioLabel: `${this.formatOra(evento.dataInizio)}–${this.formatOra(evento.dataFine)}`
|
||||
};
|
||||
}
|
||||
|
||||
private toccaGiorno(evento: EventoView, giorno: Date): boolean {
|
||||
const inizio = new Date(evento.dataInizio);
|
||||
const fine = new Date(evento.dataFine);
|
||||
const inizioGiorno = new Date(giorno.getFullYear(), giorno.getMonth(), giorno.getDate());
|
||||
const fineGiorno = new Date(giorno.getFullYear(), giorno.getMonth(), giorno.getDate(), 23, 59, 59, 999);
|
||||
return inizio <= fineGiorno && fine >= inizioGiorno;
|
||||
}
|
||||
|
||||
private frazioneGiorno(dataIso: string, giorno: Date): number {
|
||||
const data = new Date(dataIso);
|
||||
const inizioGiorno = new Date(giorno.getFullYear(), giorno.getMonth(), giorno.getDate());
|
||||
const fineGiorno = new Date(giorno.getFullYear(), giorno.getMonth(), giorno.getDate(), 23, 59, 59, 999);
|
||||
const clamped = data < inizioGiorno ? inizioGiorno : data > fineGiorno ? fineGiorno : data;
|
||||
return ((clamped.getTime() - inizioGiorno.getTime()) / MS_GIORNO) * 100;
|
||||
}
|
||||
|
||||
private formatOra(dataIso: string): string {
|
||||
return new Date(dataIso).toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
|
||||
private isoDate(data: Date): string {
|
||||
return `${data.getFullYear()}-${String(data.getMonth() + 1).padStart(2, '0')}-${String(data.getDate()).padStart(2, '0')}`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
import { environment } from '../../environments/environment';
|
||||
import { EventoView } from '../core/eventi-api.service';
|
||||
|
||||
export type { EventoView };
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class VistaMensileApiService {
|
||||
private readonly http = inject(HttpClient);
|
||||
|
||||
// Nessun brancaId in query: si carica l'intero mese (lettura trasversale a
|
||||
// tutte le branche dell'org, vedi getVistaMese lato backend quando brancaId
|
||||
// e' assente) e si filtra lato client, cosi' il select "Branca" resta
|
||||
// popolato con tutte le branche del mese anche dopo aver filtrato.
|
||||
getVistaMese(anno: number, mese: number): Observable<EventoView[]> {
|
||||
const meseParam = `${anno}-${String(mese).padStart(2, '0')}`;
|
||||
return this.http.get<EventoView[]>(`${environment.eventiApiBaseUrl}/eventi`, {
|
||||
params: { vista: 'mese', mese: meseParam }
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
.vista-mensile__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.vista-mensile__navigazione {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.vista-mensile__navigazione h2 {
|
||||
margin: 0;
|
||||
min-width: 14ch;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vista-mensile__azioni {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.vista-mensile__azioni mat-form-field {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.vista-mensile__stato {
|
||||
margin: 0 0 var(--space-4);
|
||||
}
|
||||
|
||||
.vista-mensile__stato--errore {
|
||||
color: var(--mat-sys-error);
|
||||
}
|
||||
|
||||
.vista-mensile__calendario {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.vista-mensile__intestazione-settimana {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
color: var(--color-neutral-600);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.vista-mensile__griglia {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.giorno {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-height: 110px;
|
||||
padding: 6px;
|
||||
background: var(--color-bg);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.giorno--fuori-mese {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.giorno__numero {
|
||||
align-self: flex-end;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--color-neutral-700);
|
||||
}
|
||||
|
||||
.giorno__eventi {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.evento-blocco {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: var(--color-surface);
|
||||
border: none;
|
||||
border-left: 3px solid;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 3px 6px;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.evento-blocco:hover {
|
||||
background: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
|
||||
}
|
||||
|
||||
.evento-blocco__ora {
|
||||
font-size: 10px;
|
||||
color: var(--color-neutral-600);
|
||||
}
|
||||
|
||||
.evento-blocco__titolo {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.evento-blocco__figli {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
margin-left: var(--space-2);
|
||||
padding-left: var(--space-2);
|
||||
border-left: 1px dashed var(--color-divider);
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
<div class="vista-mensile">
|
||||
<div class="vista-mensile__header">
|
||||
<div class="vista-mensile__navigazione">
|
||||
<button mat-icon-button (click)="mesePrecedente()" aria-label="Mese precedente">
|
||||
<mat-icon>chevron_left</mat-icon>
|
||||
</button>
|
||||
<h2>{{ nomiMesi[mese() - 1] }} {{ anno() }}</h2>
|
||||
<button mat-icon-button (click)="meseSuccessivo()" aria-label="Mese successivo">
|
||||
<mat-icon>chevron_right</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="vista-mensile__azioni">
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-label>Branca</mat-label>
|
||||
<mat-select [value]="filtroBranca()" (selectionChange)="filtroBranca.set($event.value)">
|
||||
<mat-option [value]="null">Tutte</mat-option>
|
||||
@for (branca of branche(); track branca) {
|
||||
<mat-option [value]="branca">{{ branca }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
@if (puoCreareEvento()) {
|
||||
<button mat-flat-button color="primary" (click)="creaEvento()">
|
||||
<mat-icon>add</mat-icon>
|
||||
Crea evento
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (loading()) {
|
||||
<p class="vista-mensile__stato">Caricamento eventi...</p>
|
||||
}
|
||||
@if (error()) {
|
||||
<p class="vista-mensile__stato vista-mensile__stato--errore">{{ error() }}</p>
|
||||
}
|
||||
|
||||
<div class="vista-mensile__calendario">
|
||||
<div class="vista-mensile__intestazione-settimana">
|
||||
@for (nomeGiorno of giorniSettimana; track nomeGiorno) {
|
||||
<span>{{ nomeGiorno }}</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="vista-mensile__griglia">
|
||||
@for (settimana of settimane(); track $index) {
|
||||
@for (giorno of settimana; track giorno.data.getTime()) {
|
||||
<div class="giorno" [class.giorno--fuori-mese]="giorno.fuoriMese">
|
||||
<span class="giorno__numero">{{ giorno.numero }}</span>
|
||||
<div class="giorno__eventi">
|
||||
@for (nodo of giorno.radici; track nodo.evento.id) {
|
||||
<button
|
||||
type="button"
|
||||
class="evento-blocco"
|
||||
[style.border-left-color]="coloreEvento(nodo.evento.tipo)"
|
||||
(click)="vaiAEvento(nodo.evento)"
|
||||
>
|
||||
<span class="evento-blocco__ora">{{ formatOra(nodo.evento.dataInizio) }}–{{ formatOra(nodo.evento.dataFine) }}</span>
|
||||
<span class="evento-blocco__titolo">{{ nodo.evento.titolo }}</span>
|
||||
</button>
|
||||
|
||||
@if (nodo.figli.length > 0) {
|
||||
<div class="evento-blocco__figli">
|
||||
@for (figlio of nodo.figli; track figlio.id) {
|
||||
<button
|
||||
type="button"
|
||||
class="evento-blocco evento-blocco--figlio"
|
||||
[style.border-left-color]="coloreEvento(figlio.tipo)"
|
||||
(click)="vaiAEvento(figlio)"
|
||||
>
|
||||
<span class="evento-blocco__ora">{{ formatOra(figlio.dataInizio) }}–{{ formatOra(figlio.dataFine) }}</span>
|
||||
<span class="evento-blocco__titolo">{{ figlio.titolo }}</span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
export const VISTA_MENSILE_ROUTES: Routes = [
|
||||
{
|
||||
path: '',
|
||||
loadComponent: () => import('./vista-mensile').then((m) => m.VistaMensile)
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,192 @@
|
||||
import { HttpErrorResponse } from '@angular/common/http';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import Keycloak from 'keycloak-js';
|
||||
import { of, throwError } from 'rxjs';
|
||||
|
||||
import { EventoView, VistaMensileApiService } from './vista-mensile-api.service';
|
||||
import { VistaMensile } from './vista-mensile';
|
||||
|
||||
describe('VistaMensile', () => {
|
||||
let component: VistaMensile;
|
||||
let fixture: ComponentFixture<VistaMensile>;
|
||||
let api: { getVistaMese: ReturnType<typeof vi.fn> };
|
||||
let router: { navigate: ReturnType<typeof vi.fn> };
|
||||
|
||||
const anno = 2026;
|
||||
const mese = 7;
|
||||
|
||||
const eventoRadice: EventoView = {
|
||||
id: 'evento-1',
|
||||
orgId: 'org-1',
|
||||
brancaId: 'Lupetti',
|
||||
parentId: null,
|
||||
titolo: 'Campo estivo',
|
||||
descrizione: null,
|
||||
dataInizio: '2026-07-10T09:00:00.000Z',
|
||||
dataFine: '2026-07-10T17:00:00.000Z',
|
||||
tipo: 'campo',
|
||||
location: null,
|
||||
creatoDa: 'user-1',
|
||||
creatoIl: '2026-06-01T00:00:00.000Z'
|
||||
};
|
||||
|
||||
const eventoFiglio: EventoView = {
|
||||
...eventoRadice,
|
||||
id: 'evento-2',
|
||||
parentId: 'evento-1',
|
||||
titolo: 'Laboratorio',
|
||||
tipo: 'attivita'
|
||||
};
|
||||
|
||||
const eventoAltraBranca: EventoView = {
|
||||
...eventoRadice,
|
||||
id: 'evento-3',
|
||||
brancaId: 'Esploratori',
|
||||
parentId: null,
|
||||
titolo: 'Uscita reparto'
|
||||
};
|
||||
|
||||
function buildRouteMock(queryParams: Record<string, string> = {}): Partial<ActivatedRoute> {
|
||||
return {
|
||||
snapshot: {
|
||||
queryParamMap: { get: (key: string) => queryParams[key] ?? null }
|
||||
}
|
||||
} as unknown as ActivatedRoute;
|
||||
}
|
||||
|
||||
async function setup(options: {
|
||||
response?: ReturnType<typeof of>;
|
||||
queryParams?: Record<string, string>;
|
||||
roles?: string[];
|
||||
groups?: string[];
|
||||
} = {}): Promise<void> {
|
||||
api = { getVistaMese: vi.fn().mockReturnValue(options.response ?? of([eventoRadice, eventoFiglio, eventoAltraBranca])) };
|
||||
router = { navigate: vi.fn() };
|
||||
const keycloakMock = {
|
||||
tokenParsed: {
|
||||
realm_access: { roles: options.roles ?? [] },
|
||||
groups: options.groups ?? []
|
||||
}
|
||||
};
|
||||
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [VistaMensile],
|
||||
providers: [
|
||||
{ provide: VistaMensileApiService, useValue: api },
|
||||
{ provide: Router, useValue: router },
|
||||
{ provide: ActivatedRoute, useValue: buildRouteMock(options.queryParams) },
|
||||
{ provide: Keycloak, useValue: keycloakMock }
|
||||
]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(VistaMensile);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
}
|
||||
|
||||
it('carica il mese corrente di default', async () => {
|
||||
await setup();
|
||||
const oggi = new Date();
|
||||
expect(api.getVistaMese).toHaveBeenCalledWith(oggi.getFullYear(), oggi.getMonth() + 1);
|
||||
});
|
||||
|
||||
it('legge anno e mese iniziali dai query params', async () => {
|
||||
await setup({ queryParams: { anno: String(anno), mese: String(mese) } });
|
||||
expect(component.anno()).toBe(anno);
|
||||
expect(component.mese()).toBe(mese);
|
||||
expect(api.getVistaMese).toHaveBeenCalledWith(anno, mese);
|
||||
});
|
||||
|
||||
it('raggruppa gli eventi figli sotto il genitore nello stesso giorno', async () => {
|
||||
await setup({ queryParams: { anno: String(anno), mese: String(mese) } });
|
||||
|
||||
const settimane = component.settimane();
|
||||
const giorno10 = settimane.flat().find((g) => g.numero === 10 && !g.fuoriMese);
|
||||
|
||||
expect(giorno10?.radici.length).toBe(2);
|
||||
const radiceCampo = giorno10?.radici.find((n) => n.evento.id === 'evento-1');
|
||||
expect(radiceCampo?.figli.map((f) => f.id)).toEqual(['evento-2']);
|
||||
});
|
||||
|
||||
it('popola le opzioni branca con i valori distinti del mese', async () => {
|
||||
await setup({ queryParams: { anno: String(anno), mese: String(mese) } });
|
||||
expect(component.branche()).toEqual(['Esploratori', 'Lupetti']);
|
||||
});
|
||||
|
||||
it('filtra gli eventi per branca selezionata', async () => {
|
||||
await setup({ queryParams: { anno: String(anno), mese: String(mese) } });
|
||||
component.filtroBranca.set('Esploratori');
|
||||
|
||||
const settimane = component.settimane();
|
||||
const giorno10 = settimane.flat().find((g) => g.numero === 10 && !g.fuoriMese);
|
||||
expect(giorno10?.radici.map((n) => n.evento.id)).toEqual(['evento-3']);
|
||||
});
|
||||
|
||||
it('naviga alla vista evento al click su un blocco', async () => {
|
||||
await setup({ queryParams: { anno: String(anno), mese: String(mese) } });
|
||||
component.vaiAEvento(eventoRadice);
|
||||
expect(router.navigate).toHaveBeenCalledWith(['/vista-evento', 'evento-1']);
|
||||
});
|
||||
|
||||
it('naviga al form di creazione evento con la branca corrente come query param', async () => {
|
||||
await setup({ queryParams: { anno: String(anno), mese: String(mese) } });
|
||||
component.filtroBranca.set('Lupetti');
|
||||
|
||||
component.creaEvento();
|
||||
|
||||
expect(router.navigate).toHaveBeenCalledWith(['/vista-evento/nuovo'], { queryParams: { branca: 'Lupetti' } });
|
||||
});
|
||||
|
||||
it('cambia mese e aggiorna la query string', async () => {
|
||||
await setup({ queryParams: { anno: String(anno), mese: String(mese) } });
|
||||
api.getVistaMese.mockReturnValue(of([]));
|
||||
|
||||
component.meseSuccessivo();
|
||||
await fixture.whenStable();
|
||||
|
||||
expect(component.mese()).toBe(8);
|
||||
expect(api.getVistaMese).toHaveBeenCalledWith(anno, 8);
|
||||
expect(router.navigate).toHaveBeenCalledWith([], expect.objectContaining({
|
||||
queryParams: { anno, mese: 8 }
|
||||
}));
|
||||
});
|
||||
|
||||
describe('visibilità pulsante "crea evento"', () => {
|
||||
it('nascosto se non è selezionata una branca', async () => {
|
||||
await setup({ queryParams: { anno: String(anno), mese: String(mese) }, roles: ['capo-gruppo'] });
|
||||
expect(component.puoCreareEvento()).toBe(false);
|
||||
});
|
||||
|
||||
it('visibile per capo-gruppo su qualunque branca selezionata', async () => {
|
||||
await setup({ queryParams: { anno: String(anno), mese: String(mese) }, roles: ['capo-gruppo'] });
|
||||
component.filtroBranca.set('Esploratori');
|
||||
expect(component.puoCreareEvento()).toBe(true);
|
||||
});
|
||||
|
||||
it('visibile per capo-unita solo sulla propria branca', async () => {
|
||||
await setup({
|
||||
queryParams: { anno: String(anno), mese: String(mese) },
|
||||
roles: ['capo-unita'],
|
||||
groups: ['/Lupetti']
|
||||
});
|
||||
component.filtroBranca.set('Lupetti');
|
||||
expect(component.puoCreareEvento()).toBe(true);
|
||||
|
||||
component.filtroBranca.set('Esploratori');
|
||||
expect(component.puoCreareEvento()).toBe(false);
|
||||
});
|
||||
|
||||
it('nascosto per censito', async () => {
|
||||
await setup({ queryParams: { anno: String(anno), mese: String(mese) }, roles: ['censito'], groups: ['/Lupetti'] });
|
||||
component.filtroBranca.set('Lupetti');
|
||||
expect(component.puoCreareEvento()).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
it('mostra un messaggio dedicato se manca un\'organizzazione attiva (403)', async () => {
|
||||
await setup({ response: throwError(() => new HttpErrorResponse({ status: 403 })) });
|
||||
expect(component.error()).toBe('Nessuna organizzazione attiva sul tuo account: impossibile caricare gli eventi.');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,214 @@
|
||||
import { HttpErrorResponse } from '@angular/common/http';
|
||||
import { Component, computed, effect, inject, signal } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import Keycloak from 'keycloak-js';
|
||||
import { firstValueFrom } from 'rxjs';
|
||||
|
||||
import { extractAuthContext } from '../core/auth/auth-context';
|
||||
import { hasBrancaAccess } from '../core/auth/branca-access';
|
||||
import { coloreTipo } from '../core/utils/colore-tipo';
|
||||
import { NOMI_MESI } from '../core/utils/nomi-mesi';
|
||||
import { EventoView, VistaMensileApiService } from './vista-mensile-api.service';
|
||||
|
||||
interface NodoEvento {
|
||||
evento: EventoView;
|
||||
figli: EventoView[];
|
||||
}
|
||||
|
||||
interface GiornoCalendario {
|
||||
data: Date;
|
||||
numero: number;
|
||||
fuoriMese: boolean;
|
||||
radici: NodoEvento[];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-vista-mensile',
|
||||
imports: [MatButtonModule, MatFormFieldModule, MatIconModule, MatSelectModule],
|
||||
templateUrl: './vista-mensile.html',
|
||||
styleUrl: './vista-mensile.css'
|
||||
})
|
||||
export class VistaMensile {
|
||||
private readonly api = inject(VistaMensileApiService);
|
||||
private readonly router = inject(Router);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly keycloak = inject(Keycloak);
|
||||
|
||||
readonly giorniSettimana = ['Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom'];
|
||||
readonly nomiMesi = NOMI_MESI;
|
||||
|
||||
readonly anno = signal(this.leggiParamIniziale('anno') ?? new Date().getFullYear());
|
||||
readonly mese = signal(this.leggiParamIniziale('mese') ?? new Date().getMonth() + 1);
|
||||
|
||||
readonly loading = signal(false);
|
||||
readonly error = signal<string | null>(null);
|
||||
private readonly eventiMese = signal<EventoView[]>([]);
|
||||
|
||||
readonly filtroBranca = signal<string | null>(null);
|
||||
|
||||
readonly branche = computed(() => Array.from(new Set(this.eventiMese().map((e) => e.brancaId))).sort());
|
||||
|
||||
readonly eventiFiltrati = computed(() => {
|
||||
const branca = this.filtroBranca();
|
||||
const eventi = this.eventiMese();
|
||||
return branca ? eventi.filter((e) => e.brancaId === branca) : eventi;
|
||||
});
|
||||
|
||||
readonly settimane = computed(() => this.costruisciSettimane(this.anno(), this.mese(), this.eventiFiltrati()));
|
||||
|
||||
// Visibile solo con una branca corrente selezionata: capo-gruppo può creare
|
||||
// in qualunque branca dell'org, capo-unita/capo solo nelle branche a cui
|
||||
// appartiene (claim "groups" del token, vedi assertBrancaAccess lato backend).
|
||||
readonly puoCreareEvento = computed(() => {
|
||||
const branca = this.filtroBranca();
|
||||
if (!branca) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return hasBrancaAccess(extractAuthContext(this.keycloak.tokenParsed), branca);
|
||||
});
|
||||
|
||||
constructor() {
|
||||
effect(() => {
|
||||
const anno = this.anno();
|
||||
const mese = this.mese();
|
||||
void this.caricaMese(anno, mese);
|
||||
});
|
||||
}
|
||||
|
||||
coloreEvento(tipo: string): string {
|
||||
return coloreTipo(tipo);
|
||||
}
|
||||
|
||||
formatOra(dataIso: string): string {
|
||||
return new Date(dataIso).toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
|
||||
mesePrecedente(): void {
|
||||
this.spostaMese(-1);
|
||||
}
|
||||
|
||||
meseSuccessivo(): void {
|
||||
this.spostaMese(1);
|
||||
}
|
||||
|
||||
vaiAEvento(evento: EventoView): void {
|
||||
this.router.navigate(['/vista-evento', evento.id]);
|
||||
}
|
||||
|
||||
creaEvento(): void {
|
||||
this.router.navigate(['/vista-evento/nuovo'], { queryParams: { branca: this.filtroBranca() } });
|
||||
}
|
||||
|
||||
private spostaMese(delta: number): void {
|
||||
const data = new Date(this.anno(), this.mese() - 1 + delta, 1);
|
||||
this.anno.set(data.getFullYear());
|
||||
this.mese.set(data.getMonth() + 1);
|
||||
|
||||
void this.router.navigate([], {
|
||||
relativeTo: this.route,
|
||||
queryParams: { anno: this.anno(), mese: this.mese() },
|
||||
queryParamsHandling: 'merge',
|
||||
replaceUrl: true
|
||||
});
|
||||
}
|
||||
|
||||
private leggiParamIniziale(nome: 'anno' | 'mese'): number | null {
|
||||
const valore = this.route.snapshot.queryParamMap.get(nome);
|
||||
const numero = valore ? Number(valore) : NaN;
|
||||
return Number.isInteger(numero) ? numero : null;
|
||||
}
|
||||
|
||||
private async caricaMese(anno: number, mese: number): Promise<void> {
|
||||
this.loading.set(true);
|
||||
this.error.set(null);
|
||||
|
||||
try {
|
||||
const risultato = await firstValueFrom(this.api.getVistaMese(anno, mese));
|
||||
if (this.anno() !== anno || this.mese() !== mese) {
|
||||
return;
|
||||
}
|
||||
this.eventiMese.set(risultato);
|
||||
this.filtroBranca.set(null);
|
||||
} catch (err) {
|
||||
if (this.anno() !== anno || this.mese() !== mese) {
|
||||
return;
|
||||
}
|
||||
this.eventiMese.set([]);
|
||||
this.error.set(this.messaggioErrore(err as HttpErrorResponse));
|
||||
} finally {
|
||||
if (this.anno() === anno && this.mese() === mese) {
|
||||
this.loading.set(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private messaggioErrore(err: HttpErrorResponse): string {
|
||||
if (err.status === 403) {
|
||||
return 'Nessuna organizzazione attiva sul tuo account: impossibile caricare gli eventi.';
|
||||
}
|
||||
return 'Impossibile caricare gli eventi. Riprova più tardi.';
|
||||
}
|
||||
|
||||
private costruisciSettimane(anno: number, mese: number, eventi: EventoView[]): GiornoCalendario[][] {
|
||||
const primoGiornoMese = new Date(anno, mese - 1, 1);
|
||||
const ultimoGiornoMese = new Date(anno, mese, 0);
|
||||
const offsetInizio = (primoGiornoMese.getDay() + 6) % 7; // lun=0..dom=6
|
||||
const offsetFine = 6 - ((ultimoGiornoMese.getDay() + 6) % 7);
|
||||
|
||||
const inizioGriglia = new Date(anno, mese - 1, 1 - offsetInizio);
|
||||
const fineGriglia = new Date(anno, mese - 1, ultimoGiornoMese.getDate() + offsetFine);
|
||||
|
||||
const figliPerParent = new Map<string, EventoView[]>();
|
||||
for (const evento of eventi) {
|
||||
if (evento.parentId) {
|
||||
const lista = figliPerParent.get(evento.parentId) ?? [];
|
||||
lista.push(evento);
|
||||
figliPerParent.set(evento.parentId, lista);
|
||||
}
|
||||
}
|
||||
const radici = eventi.filter((e) => e.parentId === null).sort((a, b) => a.dataInizio.localeCompare(b.dataInizio));
|
||||
|
||||
const giorni: GiornoCalendario[] = [];
|
||||
const cursor = new Date(inizioGriglia);
|
||||
while (cursor <= fineGriglia) {
|
||||
const giorno = new Date(cursor);
|
||||
|
||||
const radiciDelGiorno = radici
|
||||
.filter((radice) => this.toccaGiorno(radice, giorno))
|
||||
.map((radice) => ({
|
||||
evento: radice,
|
||||
figli: (figliPerParent.get(radice.id) ?? [])
|
||||
.filter((figlio) => this.toccaGiorno(figlio, giorno))
|
||||
.sort((a, b) => a.dataInizio.localeCompare(b.dataInizio))
|
||||
}));
|
||||
|
||||
giorni.push({
|
||||
data: giorno,
|
||||
numero: giorno.getDate(),
|
||||
fuoriMese: giorno.getMonth() !== mese - 1,
|
||||
radici: radiciDelGiorno
|
||||
});
|
||||
|
||||
cursor.setDate(cursor.getDate() + 1);
|
||||
}
|
||||
|
||||
const settimane: GiornoCalendario[][] = [];
|
||||
for (let i = 0; i < giorni.length; i += 7) {
|
||||
settimane.push(giorni.slice(i, i + 7));
|
||||
}
|
||||
return settimane;
|
||||
}
|
||||
|
||||
private toccaGiorno(evento: EventoView, giorno: Date): boolean {
|
||||
const inizio = new Date(evento.dataInizio);
|
||||
const fine = new Date(evento.dataFine);
|
||||
const inizioGiorno = new Date(giorno.getFullYear(), giorno.getMonth(), giorno.getDate());
|
||||
const fineGiorno = new Date(giorno.getFullYear(), giorno.getMonth(), giorno.getDate(), 23, 59, 59, 999);
|
||||
return inizio <= fineGiorno && fine >= inizioGiorno;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export const environment = {
|
||||
production: false,
|
||||
keycloakBaseUrl: 'http://localhost:6999',
|
||||
keycloakRealm: 'scouthub',
|
||||
keycloakClientId: 'scouthub-frontend',
|
||||
eventiApiBaseUrl: 'http://localhost:8003'
|
||||
};
|
||||
@@ -0,0 +1,7 @@
|
||||
export const environment = {
|
||||
production: true,
|
||||
keycloakBaseUrl: '__KEYCLOAK_BASE_URL__',
|
||||
keycloakRealm: 'scouthub',
|
||||
keycloakClientId: 'scouthub-frontend',
|
||||
eventiApiBaseUrl: '__EVENTI_API_BASE_URL__'
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>ScouthubEventiFe</title>
|
||||
<base href="/" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Caprasimo:wght@400&family=Figtree:wght@400;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,6 @@
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { appConfig } from './app/app.config';
|
||||
import { App } from './app/app';
|
||||
|
||||
bootstrapApplication(App, appConfig)
|
||||
.catch((err) => console.error(err));
|
||||
@@ -0,0 +1,64 @@
|
||||
// Include theming for Angular Material with `mat.theme()`.
|
||||
// This Sass mixin will define CSS variables that are used for styling Angular Material
|
||||
// components according to the Material 3 design spec.
|
||||
// Learn more about theming and how to use it for your application's
|
||||
// custom components at https://material.angular.dev/guide/theming
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
@include mat.theme(
|
||||
(
|
||||
color: (
|
||||
primary: mat.$orange-palette,
|
||||
tertiary: mat.$chartreuse-palette,
|
||||
),
|
||||
typography: 'Figtree, system-ui, sans-serif',
|
||||
density: 0,
|
||||
)
|
||||
);
|
||||
|
||||
// Angoli morbidi e pillole, coerenti col design system "Organic".
|
||||
@include mat.card-overrides(
|
||||
(
|
||||
elevated-container-shape: 28px,
|
||||
outlined-container-shape: 28px,
|
||||
)
|
||||
);
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
filled-container-shape: 999px,
|
||||
outlined-container-shape: 999px,
|
||||
protected-container-shape: 999px,
|
||||
text-container-shape: 999px,
|
||||
)
|
||||
);
|
||||
@include mat.icon-button-overrides(
|
||||
(
|
||||
container-shape: 999px,
|
||||
)
|
||||
);
|
||||
@include mat.form-field-overrides(
|
||||
(
|
||||
outlined-container-shape: 999px,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
body {
|
||||
// Default the application to a light color theme. This can be changed to
|
||||
// `dark` to enable the dark color theme, or to `light dark` to defer to the
|
||||
// user's system settings.
|
||||
color-scheme: light;
|
||||
|
||||
// Set a default background, font and text colors for the application using
|
||||
// Angular Material's system-level CSS variables. Learn more about these
|
||||
// variables at https://material.angular.dev/guide/system-variables
|
||||
background-color: var(--mat-sys-surface);
|
||||
color: var(--mat-sys-on-surface);
|
||||
font: var(--mat-sys-body-medium);
|
||||
|
||||
// Reset the user agent margin.
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
/* Design tokens "Organic" — palette calda, tipografia Caprasimo/Figtree. */
|
||||
:root {
|
||||
--color-bg: #f5ead8;
|
||||
--color-surface: #ebddc5;
|
||||
--color-text: #201e1d;
|
||||
--color-accent: #c67139;
|
||||
--color-accent-2: #7a8a5e;
|
||||
--color-divider: color-mix(in srgb, #201e1d 16%, transparent);
|
||||
|
||||
--color-neutral-100: #f9f4ed;
|
||||
--color-neutral-200: #eee7db;
|
||||
--color-neutral-300: #dcd3c4;
|
||||
--color-neutral-400: #c0b6a5;
|
||||
--color-neutral-500: #a19786;
|
||||
--color-neutral-600: #82796a;
|
||||
--color-neutral-700: #645c50;
|
||||
--color-neutral-800: #474238;
|
||||
--color-neutral-900: #2e2b25;
|
||||
|
||||
--color-accent-100: #fff2eb;
|
||||
--color-accent-200: #ffe1d0;
|
||||
--color-accent-300: #ffc6a5;
|
||||
--color-accent-400: #f6a06b;
|
||||
--color-accent-500: #d67f48;
|
||||
--color-accent-600: #b2622d;
|
||||
--color-accent-700: #8c491a;
|
||||
--color-accent-800: #643312;
|
||||
--color-accent-900: #402310;
|
||||
|
||||
--color-accent-2-100: #f0fae1;
|
||||
--color-accent-2-200: #e1eecc;
|
||||
--color-accent-2-300: #ccdbb2;
|
||||
--color-accent-2-400: #aebf92;
|
||||
--color-accent-2-500: #8fa073;
|
||||
--color-accent-2-600: #728157;
|
||||
--color-accent-2-700: #56633f;
|
||||
--color-accent-2-800: #3d472b;
|
||||
--color-accent-2-900: #272e1b;
|
||||
|
||||
--font-heading: 'Caprasimo', system-ui, sans-serif;
|
||||
--font-body: 'Figtree', system-ui, sans-serif;
|
||||
|
||||
--space-1: 4.4px;
|
||||
--space-2: 8.8px;
|
||||
--space-3: 13.2px;
|
||||
--space-4: 17.6px;
|
||||
--space-6: 26.4px;
|
||||
--space-8: 35.2px;
|
||||
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 16px;
|
||||
--radius-lg: 28px;
|
||||
|
||||
--shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
|
||||
--shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
|
||||
--shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-body);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 400;
|
||||
line-height: 1.12;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"types": []
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"skipLibCheck": true,
|
||||
"isolatedModules": true,
|
||||
"experimentalDecorators": true,
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "preserve"
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true
|
||||
},
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.spec.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": [
|
||||
"vitest/globals"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.d.ts",
|
||||
"src/**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user