Paso 6.Lógica de la Página de Tareas

Objetivo

Implementar la lógica para agregar, ver, actualizar y eliminar tareas.

Editar tasks.page.ts

Abre src/app/tasks/tasks.page.ts y agrega la siguiente lógica:

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';
import { Storage } from '@capacitor/storage';

@Component({
  selector.'app-tasks',
  templateUrl.'./tasks.page.html',
  styleUrls.['./tasks.page.scss'],
})
export class TasksPage {
  newTask.string = '';
  tasks.string[] = [];

  constructor(private alertController.AlertController) { }

  async ngOnInit() {
    const { value } = await Storage.get({ key.'tasks' });
    this.tasks = value ? JSON.parse(value) .[];
  }

  async addTask() {
    if (this.newTask.trim().length === 0) {
      return;
    }
    this.tasks.push(this.newTask);
    this.newTask = '';
    await Storage.set({ key.'tasks', value.JSON.stringify(this.tasks) });
  }

  async removeTask(index.number) {
    this.tasks.splice(index, 1);
    await Storage.set({ key.'tasks', value.JSON.stringify(this.tasks) });
  }

  async editTask(index.number) {
    const alert = await this.alertController.create({
      header.'Editar Tarea',
      inputs.[
        {
          name.'task',
          type.'text',
          value.this.tasks[index],
          placeholder.'Nueva tarea'
        }
      ],
      buttons.[
        {
          text.'Cancelar',
          role.'cancel'
        },
        {
          text.'Guardar',
          handler.(data) => {
            if (data.task.trim().length === 0) {
              return;
            }
            this.tasks[index] = data.task;
            Storage.set({ key.'tasks', value.JSON.stringify(this.tasks) });
          }
        }
      ]
    });
    await alert.present();
  }
}