ionic (tim) – modalcontroller

We maken gebruik van ion-modal. Hiermee kunnen we een modaal venster(beter pagina) openen en terugkeren naar de hoofdpagina. De modale pagina kan zichzelf sluiten + data doorgeven via de dismiss functie. De hoofdpagina kan via de onDidDismiss functie de data terug verkrijgen.

Zie ook:
https://ionicframework.com/docs/api/modal

Maak een nieuwe page (additem.page)

additem.page.html – formulier voorzien en binden via ngmodel + zorg zelf voor een header met kruisje

<ion-content class="ion-padding">
    <ion-list>

        <ion-item>
            <ion-label position="floating">Omschrijving</ion-label>
            <ion-input type="text" [(ngModel)]="...... IN TE VULLEN ......"></ion-input>
        </ion-item>


    </ion-list>

    <ion-button expand="full" color="primary" (click)="">Opslaan</ion-button>
</ion-content>

additem.page.ts – opgelet: zorg zelf voor de benodige property voor de 2-way binding. Werken hier best met een object ipv een aparte variabele met alleen een string.

  constructor(modalController: ModalController) { }


  close(){   //oproepen bij het klikken van het kruisje rechtsboven
    this.modalController.dismiss();
  }
  save(){   //oproepen bij het klikken op de knop
    this.modalController.dismiss(..... hier komt property.... );   
    //dit geeft aan wat er terug moet komen bij een dismiss. Dat zal het item zijn dat je hebt aangepast via 2way binding/ngmodel
  }

home.page.ts – voeg toe + deze functie ga je moeten oproepen bij klikken op het plustekentje (vul aan in de html)

  async addItem(){

      let modal = await this.modalController.create({
        component: AdditemPage,
        cssClass: 'my-custom-class'
      });

      await modal.present();
      const{ data } = await modal.onDidDismiss();   //destruct. assignment - hier komt het item terug

      if(data){  
        this.todos.push(data);   //we zetten het enkel nog maar in de array, dit gaat nog niet naar de db.
      }
  }

Test jouw app. Als het goed is moet je op dit moment items kunnen toevoegen en weergeven op de homepage, ze komen echter nog niet in de databank terecht. Dat doen we in de volgende stap.

Opdracht: To Do App Afwerken

Tracht nu zelf de app verder af te werken. We gaan hiervoor best een service voorzien (todoservice) waarin we de acties naar de Sqlite DB gaan bundelen. We doen dit liever niet rechtstreeks in de .ts file. De code die je hebt in de ionViewWillEnter kan je hergebruiken in de service.

Mogelijke structuur voor een Todoservice:

export class TodoService {
  db:any;
  constructor(private _sqlite: SQLiteService) {   //belangrijk, zorg dat je de sqlite service injecteert, bekijkt dit als de bibliotheek die je nodig hebt om met sqlite te werken.
    this.initDb();
  }

  async initDb() {
   ... db aanmaken ... schema maken ...

  }

  async addItem(td: Todoitem){
    ... een item toevoegen aan de databank ...
  }

  async getItems() {
    ... query uitvoeren om alles op te halen...
  }
}

Extra Uitdagingen

• zorg dat je een item ook kunt verwijderen
• voorzie een extra veld met prioriteiten (hoog-gemiddeld-laag – eventueel via een dropdown) en sorteer de items zodat deze met de hoogste prioriteit altijd bovenaan staan.