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 modal-lomakkeen avulla.

Toteutamme:

• Tyylikkään Add-painikkeen;

• Modal-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, jotta se osaa luoda ja tallentaa uusia tehtäviä. Palvelun tulee paitsi tallentaa tehtäviä, myös huolehtia kaikesta niihin liittyvästä liiketoimintalogiikasta.

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.

Toteutamme myös addTask()-metodin, joka:

1. Tarkistaa, ettei syötekenttä 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 tarpeellinen 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 monipuolisen ja käyttäjäystävällisen jokapäiväiseen käyttöön.