På dette tidspunkt kan vores applikation allerede vise en liste over opgaver og vise en besked, når der ikke er nogen. Brugerne har dog stadig ikke mulighed for at tilføje 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.

Introduktion

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 sendes fra TaskListComponent.

Metoden addTask() tager 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 eliminerer 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øjer vi 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 metodens addTask(title: string) i servicen;

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 knap-handlingerne gemmer enten opgaven eller lukker modalvinduet uden ændringer.

Brugere kan nemt tilføje opgaver via en modalformular. 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.