Tässä vaiheessa sovelluksemme osaa jo näyttää tehtävälistan ja ilmoittaa, kun tehtäviä ei ole. Käyttäjillä ei kuitenkaan vielä ole mahdollisuutta lisätä uusia tehtäviä.

Lisäämme mahdollisuuden luoda uusi tehtävä kätevän painikkeen ja modaalisen lomakkeen avulla.

Toteutamme:

• Tyylikkään Add-painikkeen;

• Modaalisen ikkunan, jossa on syöttökenttä tehtävän otsikolle;

• Tehtävän lisäämisen logiikan TaskService-palveluun;

• Automaattisen yksilöllisen tunnisteen luonnin.

Aloitus

Ensimmäiseksi meidän tulee laajentaa TaskService-palveluamme niin, että se osaa luoda ja tallentaa uusia tehtäviä. Palvelun tulee paitsi tallentaa tehtäviä, myös hallita kaikkea niihin liittyvää liiketoimintalogiikkaa.

Luomme palveluun addTask-metodin. Yksilöllisen tunnisteen luonti, tehtäväolion muodostaminen ja sen tallentaminen listaan tapahtuvat kaikki palvelun sisällä. Metodi vastaanottaa vain title-parametrin, joka välitetään TaskListComponent-komponentista.

Metodi addTask() ottaa vastaan vain tehtävän otsikon ja luo Task-olion sisäisesti. Se etsii ensin olemassa olevien tehtävien suurimman ID:n, lisää siihen 1 ja muodostaa näin yksilöllisen tunnisteen. Uusi tehtävä asetetaan aina keskeneräiseksi (completed: false) ja lisätään välittömästi tasks-taulukkoon.

Tämä lähestymistapa poistaa tarpeettoman logiikan komponentista ja tekee palvelusta sekä omavaraisen että uudelleenkäytettävän.

TaskListComponentin päivittäminen

Nyt kun kaikki uuden tehtävän luomiseen liittyvä logiikka on siirretty palveluun, komponentin vastuulle jää vain käyttäjän syötteen vastaanottaminen, tehtävän otsikon välittäminen palvelulle sekä paikallisen tehtävälistan päivittäminen. Tämä lähestymistapa yksinkertaistaa komponenttia ja keskittää liiketoimintalogiikan TaskService-palveluun.

Komponenttiin lisätään kaksi muuttujaa:

• showAddTask — lippu, joka ohjaa tehtävän lisäysikkunan näkyvyyttä;

• newTaskTitle — merkkijono, johon tallennetaan käyttäjän syöttämä tehtävän otsikko.

Lisäksi toteutetaan addTask()-metodi, joka:

1. Tarkistaa, että syötekenttä ei ole tyhjä;

2. Välittää tehtävän otsikon palvelun addTask(title: string)-metodille;

3. Päivittää paikallisen tehtävälistan;

4. Tyhjentää syötekentän ja sulkee lisäysikkunan.

Metodi addTask() on nyt mahdollisimman yksinkertainen: se käsittelee vain käyttäjän vuorovaikutuksen ja delegoi kaiken liiketoimintalogiikan palvelulle. Tämä tekee koodista helpommin ylläpidettävää ja testattavaa.

Varmista myös, että FormsModule on tuotu moduuliisi, sillä se on välttämätön kaksisuuntaista tietosidontaa varten muuttujan newTaskTitle kanssa.

Lisää-painike ja modaalinen ikkuna

Lisätään nyt käyttöliittymäosuus: Lisää-painike sekä HTML-rakenne modaaliselle ikkunalle, joka sisältää syötekentän ja painikkeet.

Kun käyttäjä napsauttaa Add-painiketta, showAddTask-muuttuja saa arvon true ja modaalinen ikkuna avautuu. Syötekenttä on sidottu newTaskTitle-muuttujaan [(ngModel)]-sidonnalla, ja painikkeiden toiminnot joko tallentavat tehtävän tai sulkevat modaalin ilman muutoksia.

Käyttäjät voivat kätevästi lisätä tehtäviä modaalilomakkeen kautta. Uusi tehtävä ilmestyy välittömästi listaan ilman sivun päivitystä.

Olemme nyt toteuttaneet vuorovaikutteisuuden, joka tekee sovelluksestamme täysipainoisen ja käyttäjäystävällisen jokapäiväiseen käyttöön.