ステップ⑤ タスクの変更・削除をAPIと組み合わせて実装する

Author: rdlabo

src/app/task-list/task-list.page.html

@@ -9,7 +9,8 @@
 
 <ion-content>
   <ion-list>
-    <ion-item *ngFor="let t of tasks">
+    <ion-item *ngFor="let t of tasks; let i = index" [button]="true"
+              (click)="changeTask(i)">
       <ion-label>{{t.name}}</ion-label>
     </ion-item>
   </ion-list>

src/app/task-list/task-list.page.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ActionSheetController, AlertController } from '@ionic/angular';
 
 @Component({
   selector: 'app-task-list',
@@ -10,7 +11,10 @@ export class TaskListPage implements OnInit {
     { name: 'タスク１' },
     { name: 'タスク２' },
   ];
-  constructor() { }
+  constructor(
+    public actionSheetController: ActionSheetController,
+    public alertController: AlertController,
+  ) { }
 
   ngOnInit() {
   }
@@ -21,4 +25,60 @@ export class TaskListPage implements OnInit {
     }
   }
 
+  async changeTask(index: number) {
+    const actionSheet = await this.actionSheetController.create({
+      header: 'タスクの変更',
+      buttons: [
+        {
+          text: '削除',
+          role: 'destructive',
+          icon: 'trash',
+          handler: () => {
+            this.tasks.splice(index, 1);
+            localStorage.tasks = JSON.stringify(this.tasks);
+          }
+        }, {
+          text: '変更',
+          icon: 'create',
+          handler: () => {
+            this._renameTask(index);
+          }
+        }, {
+          text: '閉じる',
+          icon: 'close',
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        },
+      ]
+    });
+    actionSheet.present();
+  }
+
+  async _renameTask(index: number) {
+    const prompt = await this.alertController.create({
+      header: '変更後のタスク',
+      inputs: [
+        {
+          name: 'task',
+          placeholder: 'タスク',
+          value: this.tasks[index].name
+        },
+      ],
+      buttons: [
+        {
+          text: '閉じる'
+        },
+        {
+          text: '保存',
+          handler: data => {
+            this.tasks[index] = { name: data.task };
+            localStorage.tasks = JSON.stringify(this.tasks);
+          }
+        }
+      ]
+    });
+    prompt.present();
+  }
 }