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 { HttpClient } from '@angular/common/http';
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 http.HttpClient, private alertController.AlertController) { }

  async ngOnInit() {
    // Cargar tareas desde el almacenamiento local
    const { value } = await Storage.get({ key.'tasks' });
    this.tasks = value ? JSON.parse(value) .[];
  }

  async addTask() {
    // Verificar si el campo de la nueva tarea no está vacío
    if (this.newTask.trim().length === 0) {
      return;
    }
    // Agregar la nueva tarea a la lista
    this.tasks.push(this.newTask);
    // Resetea el campo de entrada de la nueva tarea
    this.newTask = '';
    // Guardar la lista de tareas en el almacenamiento local
    await Storage.set({ key.'tasks', value.JSON.stringify(this.tasks) });
  }

  async removeTask(index.number) {
    // Eliminar la tarea de la lista en el índice especificado
    this.tasks.splice(index, 1);
    // Guardar la lista de tareas actualizada en el almacenamiento local
    await Storage.set({ key.'tasks', value.JSON.stringify(this.tasks) });
  }

  async editTask(index.number) {
    // Crear una alerta para editar la tarea
    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;
            }
            // Actualizar la tarea en la lista
            this.tasks[index] = data.task;
            // Guardar la lista de tareas actualizada en el almacenamiento local
            Storage.set({ key.'tasks', value.JSON.stringify(this.tasks) });
          }
        }
      ]
    });
    await alert.present();
  }

  syncTasks() {
    // Sincronizar las tareas con el servidor remoto
    this.http.post('https://example.com/api/tasks', { tasks.this.tasks })
      .subscribe(response => {
        console.log('Tareas sincronizadas', response);
      });
  }
}

Conceptos Básicos

En Angular, los componentes definen la lógica y el comportamiento de las vistas. Los servicios HTTP permiten realizar peticiones a servidores remotos. Capacitor Storage permite almacenar datos localmente en el dispositivo.

Ejercicio

Implementa la lógica para agregar, ver, actualizar y eliminar tareas. Verifica que las tareas se guarden y se carguen correctamente desde el almacenamiento local.