コレクションエージェント(3)

私たちの「Todo リスト」アプリを Cape.JS 1.2 にアップグレードするシリーズの最終回です。前回は、タスクの「済み（done）」フラグをトグルする機能と、タスクの削除機能が動くようにしました。

今回は、タスクを新規追加する機能と既存のタスクのタイトルを変更する機能を作り直します。

---

まずは TodoList クラス（app/assets/javascripts/todo_list.es6）の render() メソッドで一時的にコメントアウトされた部分を元に戻します。

  render(m) {
    m.ul(m => {
      this.agent.objects.forEach(task => {
        m.li(m => this.renderTask(m, task));
      });
    });
    if (this.editingTask) this.renderUpdateForm(m);
    else this.renderCreateForm(m);
  }

下から3行目と2行目です。

次に、同じく TodoList クラスの renderCreateForm() メソッドを修正します。次に示すのが修正前。

  renderCreateForm(m) {
    m.formFor('new_task', m => {
      m.onkeyup(e => this.refresh());
      m.textField('title', { value: this.val('new_task.title') }).sp();
      m.attr({ disabled: this.val('new_task.title').trim() === '' });
      m.onclick(e =>
        this.ds.createTask(this.val('new_task.title', '')));
      m.btn(`Add task #${ this.ds.tasks.length + 1 }`);
    });
  }

修正後がこちら。

  renderCreateForm(m) {
    m.formFor('new_task', m => {
      m.onkeyup(e => this.refresh());
      m.textField('title', { value: this.val('new_task.title') }).sp();
      m.attr({ disabled: this.val('new_task.title').trim() === '' });
      m.onclick(e =>
        this.agent.createTask(this.val('new_task.title', '')));
      m.btn(`Add task #${ this.agent.objects.length + 1 }`);
    });
  }

修正箇所は2つです。下から4行目の this.ds を this.agent で置き換え、下から3行目の this.ds.tasks を this.agent.objects で置き換えました。

さらに、TodoList クラスの updateTask() メソッドを修正します。次に示すのが修正前。

  updateTask() {
    var task = this.editingTask;
    task.modifying = false;
    this.editingTask = null;
    this.ds.updateTask(task, this.val('task.title', ''));
  }

修正後がこちら。

  updateTask() {
    var task = this.editingTask;
    task.modifying = false;
    this.editingTask = null;
    this.agent.updateTask(task, this.val('task.title', ''));
  }

以上で、TodoList クラスの修正が完了しました。

---

続いて、TaskCollectionAgent クラス（app/assets/javascripts/task_collection_agent.es6）に createTask() メソッドと updateTask() メソッドを追加します。

  createTask(title) {
    this.create({ task: { title: title } });
  }

  updateTask(task, title) {
    this.update(task.id, { task: { title: title } })
  }

これで、「Todo リスト」アプリが元通り動くようになったはずです。動作確認しましょう。

ターミナルで次のコマンドを実行し、データベースを初期状態に戻してからサーバーを起動します。

bin/rake db:reset
bin/rails s

そしてブラウザで http://localhost:3000 を開くと、次のような画面になります。

テキスト入力フォームに適当な文字列を入力して「Add task #5」ボタンをクリックすると、新しいタスクとして登録されます。また、適当なタスクの右にある「Edit」ボタンをクリックすると、テキスト入力欄にそのタスクのタイトルが入ります。そして、そのタイトルを適宜書き換えてから「Update」ボタンをクリックすれば、そのタスクのタイトルが変更されます。「Update」ボタンの代わりに「Cancel」ボタンをクリックすれば、テキスト入力フォームは初期状態に戻ります。

---

参考までに TaskStore クラスの createTask() メソッドと updateTask() メソッドは次のように記述されています。

  createTask(title) {
    $.ajax({
      type: 'POST',
      url: '/api/tasks',
      data: { task: { title: title } }
    }).done(data => {
      if (data === 'OK') this.refresh();
    });
  }

  updateTask(task, title) {
    $.ajax({
      type: 'PATCH',
      url: '/api/tasks/' + task.id,
      data: { task: { title: title } }
    }).done(data => {
      if (data === 'OK') {
        task.title = title;
        this.propagate();
      }
    });
  }

TaskCollectionAgent クラスの同名メソッドと比較してみてください。随分と短くなりましたね。

---

さて、もはや TaskStore クラスは必要ありませんので、ソースコードを削除しましょう。

rm app/assets/javascripts/task_store.es6

以上で、私たちの「Todo リスト」アプリは Cape.JS 1.2 対応完了です。

次回は、少し方向を変えて、タスクの表示順を入れ替える機能を追加する予定です。