A questo punto, la nostra applicazione è già in grado di visualizzare un elenco di attività e mostrare un messaggio quando non ce ne sono. Tuttavia, gli utenti non hanno ancora la possibilità di inserire nuove attività.

Aggiungeremo la possibilità di creare una nuova attività utilizzando un comodo pulsante e un modulo in una finestra modale.

Implementeremo:

• Un elegante pulsante Add;

• Una finestra modale con un campo di input per il titolo dell'attività;

• La logica per aggiungere un'attività all'elenco nel TaskService;

• Generazione automatica di un identificatore univoco.

Introduzione

La prima cosa da fare è migliorare il nostro TaskService affinché possa creare e memorizzare nuove attività. Il servizio non deve solo conservare le attività, ma anche gestire tutta la logica di business ad esse relativa.

Creeremo un metodo addTask nel servizio. La generazione di un ID univoco, la creazione dell'oggetto attività e il suo salvataggio nell'elenco avverranno tutti all'interno del servizio. Al metodo verrà passato solo un title, che sarà fornito dal TaskListComponent.

Il metodo addTask() accetta solo il titolo dell'attività e crea internamente l'oggetto Task. Prima individua l'ID massimo tra le attività esistenti, quindi aggiunge 1 per generare un identificatore univoco. La nuova attività viene sempre impostata come incompleta (completed: false) e viene immediatamente aggiunta all'array tasks.

Questo approccio elimina la logica non necessaria dal componente e rende il servizio sia autosufficiente che riutilizzabile.

Aggiornamento del TaskListComponent

Ora che tutta la logica per la creazione di una nuova attività è stata spostata nel servizio, il componente è responsabile solo di ricevere l'input dell'utente, inviare il titolo dell'attività al servizio e aggiornare l'elenco locale delle attività. Questo approccio semplifica il componente e centralizza la logica di business nel TaskService.

All'interno del componente, aggiungeremo due variabili:

• showAddTask — flag che controlla la visibilità della finestra modale per l'aggiunta di un'attività;

• newTaskTitle — stringa che contiene il titolo dell'attività inserito dall'utente.

Implementeremo inoltre il metodo addTask(), che:

1. Verifica che la stringa di input non sia vuota;

2. Passa il titolo dell'attività al metodo addTask(title: string) del servizio;

3. Aggiorna l'elenco locale delle attività;

4. Pulisce il campo di input e chiude la finestra modale.

Il metodo addTask() è ora il più semplice possibile: gestisce solo l'interazione con l'utente e delega tutta la logica di business al servizio. Questo rende il codice più facile da mantenere e testare.

Inoltre, assicurati che FormsModule sia importato nel tuo modulo, poiché è necessario per il two-way data binding con newTaskTitle.

Pulsante Aggiungi e Finestra Modale

Ora aggiungiamo la parte UI: il pulsante Aggiungi e il markup HTML per la finestra modale che include il campo di input e i pulsanti.

Quando l'utente clicca sul pulsante Add, la variabile showAddTask diventa true e la finestra modale appare. Il campo di input è collegato alla variabile newTaskTitle tramite [(ngModel)], e le azioni dei pulsanti permettono di salvare il task o chiudere la modale senza modifiche.

Gli utenti potranno aggiungere comodamente i task tramite un modulo modale. Il nuovo task appare immediatamente nell'elenco senza richiedere il refresh della pagina.

Abbiamo ora implementato l'interattività che rende la nostra applicazione completa e facile da usare nella vita quotidiana.