På nuværende tidspunkt kan vores applikation allerede vise en liste over opgaver og vise en besked, når der ikke er nogen opgaver. Brugerne har dog stadig ikke mulighed for at indtaste nye opgaver.

Vi vil tilføje muligheden for at oprette en ny opgave ved hjælp af en praktisk knap og en modal formular.

Vi implementerer:

• En stilfuld Add-knap;

• Et modalvindue med et inputfelt til opgavetitel;

• Logikken for at tilføje en opgave til listen i TaskService;

• Automatisk generering af en unik identifikator.

Kom godt i gang

Det første, vi skal gøre, er at udvide vores TaskService, så den kan oprette og gemme nye opgaver. Servicen skal ikke kun gemme opgaver, men også håndtere al forretningslogik relateret til dem.

Vi opretter en addTask-metode i servicen. Genereringen af et unikt ID, oprettelsen af opgaveobjektet og lagringen på listen vil alle ske inde i servicen. Metoden vil kun modtage en title, som bliver sendt fra TaskListComponent.

Metoden addTask() modtager kun opgavens titel og opretter Task-objektet internt. Den finder først det maksimale ID blandt de eksisterende opgaver og lægger derefter 1 til for at generere en unik identifikator. Den nye opgave sættes altid som ufuldført (completed: false) og tilføjes straks til tasks-arrayet.

Denne tilgang fjerner unødvendig logik fra komponenten og gør servicen både selvstændig og genanvendelig.

Opdatering af TaskListComponent

Nu hvor al logik til oprettelse af en ny opgave er flyttet til servicen, er komponenten kun ansvarlig for at modtage brugerinput, sende opgavetitlen til servicen og opdatere den lokale opgaveliste. Denne tilgang forenkler komponenten og centraliserer forretningslogikken i TaskService.

Inde i komponenten tilføjes to variabler:

• showAddTask — et flag, der styrer synligheden af modalvinduet til tilføjelse af en opgave;

• newTaskTitle — en streng, der indeholder brugerens input til opgavetitlen.

Vi implementerer også metoden addTask(), som:

1. Kontrollerer, at inputstrengen ikke er tom;

2. Sender opgavetitlen til servicens metode addTask(title: string);

3. Opdaterer den lokale opgaveliste;

4. Rydder inputfeltet og lukker modalvinduet.

Metoden addTask() er nu så enkel som muligt: den håndterer kun brugerinteraktion og overlader al forretningslogik til servicen. Dette gør koden lettere at vedligeholde og teste.

Sørg også for, at FormsModule er importeret i dit modul, da det er nødvendigt for tovej databinding med newTaskTitle.

Tilføj-knap og modalvindue

Lad os nu tilføje UI-delen: Tilføj-knappen og HTML-markup for modalvinduet, der indeholder inputfeltet og knapperne.

Når brugeren klikker på Add-knappen, bliver variablen showAddTask sat til true, og modalvinduet vises. Inputfeltet er bundet til variablen newTaskTitle via [(ngModel)], og knapfunktionerne gemmer enten opgaven eller lukker modalvinduet uden ændringer.

Brugere kan nemt tilføje opgaver via en modalt formular. Den nye opgave vises straks i listen uden at siden skal genindlæses.

Vi har nu implementeret interaktivitet, der gør vores applikation fuldt funktionel og brugervenlig til daglig brug.