401 lines
10 KiB
Markdown
401 lines
10 KiB
Markdown
# Changelog - Frontend Angular
|
|
|
|
Tracciamento modifiche specifiche del frontend Angular.
|
|
|
|
---
|
|
|
|
## ✅ Completato
|
|
|
|
### Setup Iniziale
|
|
- [x] Inizializzazione progetto Angular 20
|
|
- [x] Configurazione Vite come bundler
|
|
- [x] Configurazione Tailwind CSS
|
|
- [x] Setup TypeScript 5.8
|
|
- [x] Configurazione RxJS 7.8
|
|
|
|
### Architettura & Struttura
|
|
|
|
#### Servizi
|
|
- [x] **ApiService** (`services/api.service.ts`)
|
|
- Comunicazione HTTP con backend
|
|
- Base URL configurabile
|
|
- Metodi per tutte le entità (users, groups, bets, friends)
|
|
- Gestione errori HTTP
|
|
|
|
- [x] **DataService** (`services/data.service.ts`)
|
|
- State management con RxJS signals
|
|
- Cache dati utente corrente
|
|
- Cache amici, gruppi, scommesse
|
|
- Metodi per refresh dati
|
|
- Observable streams per reactive updates
|
|
|
|
#### Modelli TypeScript
|
|
- [x] **Bet Model** (`models/bet.model.ts`)
|
|
- Interface Bet completa
|
|
- Enum BetStatus (ACTIVE, AWAITING_VALIDATION, COMPLETED)
|
|
- Enum ParticipantRole (PARTICIPANT, OBSERVER)
|
|
- Type BetParticipant
|
|
|
|
- [x] **User Model** (inline nei servizi per ora)
|
|
- [x] **Group Model** (inline nei servizi per ora)
|
|
|
|
### Componenti Implementati
|
|
|
|
#### App Component
|
|
- [x] **AppComponent** (`app.component.ts`)
|
|
- Layout principale con navigation bar
|
|
- Gestione routing tra viste con signal
|
|
- Bottom navigation responsive
|
|
- 5 sezioni: Home, Scopri, Crea Scommessa, Gruppi, Profilo
|
|
- FAB centrale per creazione scommessa
|
|
|
|
#### Home Section
|
|
- [x] **HomeComponent** (`components/home/home.component.ts`)
|
|
- Dashboard principale
|
|
- Visualizzazione scommesse attive/passate
|
|
- Toggle tra filtri temporali e per gruppo
|
|
- Integrazione con sotto-componenti
|
|
|
|
- [x] **BetsByTimeComponent** (`components/home/bets-by-time/bets-by-time.component.ts`)
|
|
- Filtro scommesse per periodo temporale
|
|
- Periodi: Oggi, Questa Settimana, Questo Mese
|
|
- Indicatore visuale periodo selezionato
|
|
- Fetch dati da API con filtri
|
|
|
|
- [x] **BetsByGroupComponent** (`components/home/bets-by-group/bets-by-group.component.ts`)
|
|
- Filtro scommesse per gruppo
|
|
- Selezione gruppo da dropdown
|
|
- Opzione "Tutti i Gruppi"
|
|
- Fetch dati da API per gruppo specifico
|
|
|
|
#### Discover Section
|
|
- [x] **DiscoverComponent** (`components/discover/discover.component.ts`)
|
|
- Esplorazione scommesse pubbliche
|
|
- Lista scommesse scopribili
|
|
- Possibilità di entrare come observer
|
|
|
|
#### Create Bet Section
|
|
- [x] **CreateBetComponent** (`components/create-bet/create-bet.component.ts`)
|
|
- Form creazione nuova scommessa
|
|
- Campi: titolo, descrizione, posta in gioco, data fine, gruppo, visibilità
|
|
- Validazione form
|
|
- Event emitter per chiusura
|
|
- Integrazione con API
|
|
|
|
#### Groups Section
|
|
- [x] **GroupsComponent** (`components/groups/groups.component.ts`)
|
|
- Lista tutti i gruppi dell'utente
|
|
- Navigazione verso dettaglio gruppo
|
|
- Creazione nuovo gruppo
|
|
- Badge contatore membri
|
|
|
|
- [x] **GroupDetailComponent** (`components/groups/group-detail/group-detail.component.ts`)
|
|
- Dettaglio singolo gruppo
|
|
- Lista membri con avatar
|
|
- Aggiunta membri al gruppo
|
|
- Rimozione membri (se admin)
|
|
- Eliminazione gruppo
|
|
|
|
#### Profile Section
|
|
- [x] **ProfileComponent** (`components/profile/profile.component.ts`)
|
|
- Visualizzazione profilo utente
|
|
- Avatar, nome, email, punteggio
|
|
- Statistiche personali
|
|
- Lista richieste di amicizia pending
|
|
- Bottone modifica profilo
|
|
|
|
- [x] **EditProfileComponent** (`components/profile/edit-profile/edit-profile.component.ts`)
|
|
- Form modifica dati profilo
|
|
- Campi: nome, email, avatar URL
|
|
- Validazione input
|
|
- Save/Cancel actions
|
|
|
|
#### Shared Components
|
|
- [x] **BetCardComponent** (`components/bet-card/bet-card.component.ts`)
|
|
- Card riutilizzabile per visualizzare scommesse
|
|
- Badge stato scommessa (Attiva, In Attesa, Completata)
|
|
- Informazioni partecipanti con avatar
|
|
- Posta in gioco
|
|
- Date inizio/fine
|
|
- Responsive design
|
|
|
|
### UI/UX
|
|
|
|
#### Design System
|
|
- [x] Tema dark con palette:
|
|
- Background: slate-900
|
|
- Cards: slate-800
|
|
- Accenti: cyan-400/cyan-500
|
|
- Testo: white/slate-300
|
|
- [x] Tailwind CSS utilities
|
|
- [x] Responsive layout mobile-first
|
|
- [x] Icone SVG per navigation
|
|
|
|
#### Navigation
|
|
- [x] Bottom navigation bar sticky
|
|
- [x] 5 tab con icone e label
|
|
- [x] Indicatore visuale tab attiva (color cyan)
|
|
- [x] FAB centrale per azione primaria (Crea Scommessa)
|
|
- [x] Hover states e transitions
|
|
|
|
#### Interazioni
|
|
- [x] Click handlers per navigazione
|
|
- [x] Form submissions
|
|
- [x] Toggle filters
|
|
- [x] Dropdown selects
|
|
- [x] Event emitters tra parent/child components
|
|
|
|
### Configurazione
|
|
|
|
- [x] **package.json** - Dipendenze e scripts
|
|
- [x] **angular.json** - Configurazione Angular CLI
|
|
- [x] **tsconfig.json** - TypeScript configuration
|
|
- [x] **tailwind.config.js** (implicito con Tailwind)
|
|
- [x] **vite.config** (gestito da Angular)
|
|
|
|
---
|
|
|
|
## 📋 Da Fare
|
|
|
|
### Funzionalità Core Mancanti
|
|
|
|
#### Scommesse
|
|
- [ ] Visualizzazione dettaglio scommessa completo
|
|
- Modal o pagina dedicata
|
|
- Cronologia eventi
|
|
- Commenti (se implementati)
|
|
- [ ] Modifica scommessa esistente
|
|
- [ ] Eliminazione scommessa con conferma
|
|
- [ ] Dichiarazione vincitore
|
|
- [ ] Sistema di votazione vincitore
|
|
- [ ] Join scommessa pubblica come observer
|
|
- [ ] Leave scommessa
|
|
- [ ] Invita amici a scommessa
|
|
|
|
#### Profilo & Amici
|
|
- [ ] Ricerca utenti
|
|
- [ ] Invio richiesta di amicizia (UI)
|
|
- [ ] Accetta/rifiuta richiesta amicizia (UI)
|
|
- [ ] Lista amici visualizzata nel profilo
|
|
- [ ] Visualizzazione profilo altri utenti
|
|
- [ ] Statistiche avanzate profilo
|
|
- Win rate
|
|
- Streak
|
|
- Classifica generale
|
|
- [ ] Notifiche
|
|
|
|
#### Gruppi
|
|
- [ ] Modifica info gruppo
|
|
- [ ] Invita utenti al gruppo
|
|
- [ ] Gestione permessi gruppo (admin/membro)
|
|
- [ ] Statistiche gruppo
|
|
- [ ] Ricerca membri
|
|
- [ ] Leave gruppo
|
|
|
|
### UX Improvements
|
|
|
|
#### Stati & Feedback
|
|
- [ ] Loading states per tutti i componenti
|
|
- Skeleton loaders
|
|
- Spinners
|
|
- Progress indicators
|
|
- [ ] Error handling UI
|
|
- Toast notifications
|
|
- Error messages inline
|
|
- Retry mechanisms
|
|
- [ ] Empty states
|
|
- Nessuna scommessa
|
|
- Nessun amico
|
|
- Nessun gruppo
|
|
- [ ] Success confirmations
|
|
- Toast per azioni completate
|
|
- Feedback visuale
|
|
|
|
#### Animazioni & Transizioni
|
|
- [ ] Animazioni transizione tra viste
|
|
- [ ] Micro-interazioni su bottoni
|
|
- [ ] Slide/fade effects per modal
|
|
- [ ] Loading animations
|
|
- [ ] Skeleton loading per cards
|
|
|
|
#### Interattività
|
|
- [ ] Pull-to-refresh
|
|
- [ ] Infinite scroll per liste lunghe
|
|
- [ ] Swipe gestures (elimina, archivia)
|
|
- [ ] Drag and drop (riordino)
|
|
- [ ] Conferme azioni critiche
|
|
- Modal di conferma eliminazione
|
|
- Double-tap protection
|
|
|
|
#### Filtri & Ricerca
|
|
- [ ] Ricerca scommesse per titolo
|
|
- [ ] Filtri avanzati scommesse
|
|
- Per stato
|
|
- Per partecipanti
|
|
- Per data
|
|
- Per posta in gioco
|
|
- [ ] Ordinamento scommesse
|
|
- Per data
|
|
- Per popolarità
|
|
- Per punteggio
|
|
- [ ] Salvataggio preferenze filtri
|
|
|
|
### Componenti da Creare
|
|
|
|
- [ ] **BetDetailModal/Page** - Dettaglio completo scommessa
|
|
- [ ] **ToastNotification** - Notifiche toast
|
|
- [ ] **ConfirmDialog** - Dialog conferma generica
|
|
- [ ] **SearchBar** - Barra di ricerca riutilizzabile
|
|
- [ ] **UserCard** - Card utente riutilizzabile
|
|
- [ ] **EmptyState** - Componente empty state generico
|
|
- [ ] **LoadingSpinner** - Spinner riutilizzabile
|
|
- [ ] **AvatarUpload** - Upload avatar con preview
|
|
- [ ] **DatePicker** - Selettore date customizzato
|
|
- [ ] **FriendsList** - Lista amici con azioni
|
|
- [ ] **NotificationsList** - Lista notifiche
|
|
- [ ] **StatsCard** - Card statistiche riutilizzabile
|
|
|
|
### Routing & Navigation
|
|
|
|
- [ ] Implementare Angular Router
|
|
- Route per ogni vista
|
|
- Route parametriche (es. /group/:id)
|
|
- Query parameters per filtri
|
|
- Route guards
|
|
- [ ] Deep linking
|
|
- [ ] Browser back button handling
|
|
- [ ] Route transition animations
|
|
|
|
### State Management
|
|
|
|
- [ ] Migliorare DataService
|
|
- Gestione stato più robusta
|
|
- Cache invalidation strategy
|
|
- Optimistic updates
|
|
- Rollback on error
|
|
- [ ] Considerare NgRx o Signals API avanzate
|
|
- [ ] Persistent state (localStorage)
|
|
- [ ] Sync state across tabs
|
|
|
|
### Forms & Validation
|
|
|
|
- [ ] Reactive forms everywhere
|
|
- [ ] Validatori custom
|
|
- [ ] Error messages user-friendly
|
|
- [ ] Form dirty/pristine tracking
|
|
- [ ] Unsaved changes warning
|
|
- [ ] Auto-save drafts
|
|
|
|
### Testing
|
|
|
|
- [ ] Unit test per componenti
|
|
- [ ] Unit test per servizi
|
|
- [ ] Integration test
|
|
- [ ] E2E test con Cypress/Playwright
|
|
- [ ] Coverage almeno 80%
|
|
- [ ] Visual regression testing
|
|
|
|
### Performance
|
|
|
|
- [ ] Lazy loading components
|
|
- [ ] Virtual scrolling per liste lunghe
|
|
- [ ] Image lazy loading
|
|
- [ ] OnPush change detection
|
|
- [ ] Memoization expensive computations
|
|
- [ ] Bundle size optimization
|
|
- [ ] Tree shaking
|
|
- [ ] Code splitting
|
|
|
|
### Accessibilità (a11y)
|
|
|
|
- [ ] ARIA labels
|
|
- [ ] Keyboard navigation
|
|
- [ ] Focus management
|
|
- [ ] Screen reader support
|
|
- [ ] Contrast ratios WCAG AA
|
|
- [ ] Semantic HTML
|
|
|
|
### PWA Features
|
|
|
|
- [ ] Service Worker
|
|
- [ ] Offline mode
|
|
- [ ] App manifest
|
|
- [ ] Install prompt
|
|
- [ ] Push notifications
|
|
- [ ] Background sync
|
|
|
|
### Internazionalizzazione
|
|
|
|
- [ ] i18n setup (Angular i18n)
|
|
- [ ] Traduzioni IT/EN
|
|
- [ ] Date/number formatting locale-aware
|
|
- [ ] RTL support (se necessario)
|
|
|
|
### DevOps & Build
|
|
|
|
- [ ] Environment files (dev, staging, prod)
|
|
- [ ] Build optimization per production
|
|
- [ ] Source maps
|
|
- [ ] Linting (ESLint)
|
|
- [ ] Formatting (Prettier)
|
|
- [ ] Pre-commit hooks (Husky)
|
|
- [ ] CI/CD pipeline
|
|
|
|
### Monitoring & Analytics
|
|
|
|
- [ ] Error tracking (Sentry)
|
|
- [ ] Analytics (Google Analytics / Plausible)
|
|
- [ ] Performance monitoring
|
|
- [ ] User behavior tracking
|
|
|
|
---
|
|
|
|
## 🐛 Bug Conosciuti
|
|
|
|
- [ ] Nessun handling errori API in caso di network failure
|
|
- [ ] Refresh dati non automatico (solo manuale al mount)
|
|
- [ ] Possibili race conditions su multiple API calls
|
|
|
|
---
|
|
|
|
## 🔧 Miglioramenti Tecnici Proposti
|
|
|
|
- [ ] Separare models in file dedicati
|
|
- [ ] Creare barrel exports per organizzazione
|
|
- [ ] Introdurre design patterns (Repository, Facade)
|
|
- [ ] Standardizzare naming conventions
|
|
- [ ] Constants file per magic strings
|
|
- [ ] Utility functions file
|
|
- [ ] Typed HTTP responses
|
|
- [ ] Error types customizzati
|
|
- [ ] Logging service
|
|
- [ ] Configuration service
|
|
|
|
---
|
|
|
|
## Note Tecniche
|
|
|
|
### Dipendenze Principali
|
|
- **@angular/core**: ^20.3.0
|
|
- **@angular/common**: ^20.3.0
|
|
- **@angular/platform-browser**: ^20.3.0
|
|
- **rxjs**: ^7.8.2
|
|
- **tailwindcss**: latest
|
|
- **typescript**: ~5.8.2
|
|
- **vite**: ^6.2.0
|
|
|
|
### Scripts NPM
|
|
```bash
|
|
npm run dev # Avvia dev server (porta 4200)
|
|
npm run build # Build production
|
|
npm run preview # Preview build production
|
|
```
|
|
|
|
### Porte
|
|
- Dev server: `4200`
|
|
- API backend: `3000`
|
|
|
|
### Browser Target
|
|
- Modern browsers (Chrome, Firefox, Safari, Edge)
|
|
- ES2022+ support required
|