演習: 完了の切り替えと削除

この章では、タスクの完了の切り替えと削除を加え、tasks の CRUD を完成させます。T- はタスク管理アプリ tasks の問題です。

完成イメージです。チェックボックスで完了を切り替え、ボタンで削除します。

T-10. 完了の切り替え

各タスクのチェックボックスで、完了・未完了を切り替えます。完了の切り替えも削除も、どのタスクへの操作かを /tasks/{id} の id で指定します。次のとおり実装します。

• Task に Long id を加え、findAll の SELECT にも id を加える
• TaskRepository に、completed を反転するメソッド toggleCompleted を加える
• TasksController で POST /tasks/{id}/toggle を受け取り、TaskService を介して toggleCompleted を呼び、一覧へリダイレクトする
• tasks.html で、各タスクのチェックボックスを <form> で囲み、チェックすると POST /tasks/{id}/toggle を送るようにする

チェックボックスをクリックすると完了になって取り消し線が付き、もう一度で未完了に戻れば成功です。

ヒント

完了の反転は、UPDATE tasks SET completed = NOT completed WHERE id = :id です。NOT completed が真偽を反転します。id は @PathVariable で受け取り、データを変える操作なのでフォームの POST で送ります。チェックボックスのクリックで送信するには、<input type="checkbox"> に onchange="this.form.submit()" を付けます。この演習で唯一 JavaScript を使う箇所です。

Task に id を加えたら、query(Task.class) を使う findAll の SELECT にも id を加えます。id 列がないと、Task の id にマッピングできずエラーになります。

T-11. タスクの削除

各タスクの削除ボタンで、タスクを削除します。本文 本の削除 と同じ作りです。次のとおり実装します。

• TaskRepository に、id でタスクを削除するメソッド deleteById を加える
• TasksController で POST /tasks/{id}/delete を受け取り、TaskService を介して deleteById を呼び、一覧へリダイレクトする
• tasks.html で、各タスクに削除ボタンのフォーム（POST /tasks/{id}/delete）を置く

削除ボタンを押すと、そのタスクが一覧から消えれば成功です。

ヒント

削除は、DELETE FROM tasks WHERE id = :id を update() で実行します。本文の deleteById と同じです。削除はフォームの POST で送り、削除後はリダイレクトで一覧へ戻します。