TODOサンプル：ステータスを追加する

ここでは、TODOサンプルに新しいステータスを追加してみます。これは、管理画面とフロントエンドのコードの両方で作業が必要です。

変更する内容

TODOサンプルのステータスは、もともと次のようになっています。矢印は、ステータスを変更するアクションです。アクションの下にアクションIDを記載しています。このアクションを呼び出すことで、ステータスを変更します。

ここに、「段取り」(planning)ステータスを追加します。そして、このステータスに移動するアクションを追加します。また、前後のアクションの移動元を変更します。

管理画面で、ステータスを追加

それでは、実際に変更作業をやっていきましょう。最初に、管理画面で「段取り」(planning)ステータスを追加します。

1. 管理画面を呼び出す
2. アプリケーションの任意のアイテムをクリック
3. アイテム詳細画面で、「ステータスの編集」ボタンをクリック
4. ステータスの編集画面で、「ステータスの追加」ボタンをクリック
5. 追加したステータスのステータス名を設定する
6. ステータスを配置する
7. 「保存」ボタンをクリック

管理画面で、アクションを追加・変更

続いて、各ステータスのアクションを追加・変更します。

1. 変更したいステータスになっているアイテムを選択
2. 「＋メニュー追加」、または「メニュー変更」をクリック
3. アクションとアクションIDを設定する
4. 「保存」ボタンをクリック

ここでは、次のステータスにアクションを設定します。

受付ステータス
- 段取りに進める：Move to planning 、アクションid = MoveToPlanning *
- 新規へ戻す：Back to New 、アクションid = BackToNew

段取りステータス
- 作業中へ進める：Move to InProgress 、アクションid = MoveToInProgress *
- 受付へ戻す：Back to Assigned 、アクションid = BackToAssigned *

作業中ステータス
- 確認中へ進める：Move to InReview 、アクションid = MoveToInReview
- 段取りへ戻す：Back to planning 、アクションid = BackToPlanning *

動作確認

ここまで設定できたら、ステータスとアクションがきちんと動作するか、動作を確認しておきましょう。管理画面では、ステータスをアクションで遷移させられるはずです。そして、管理画面で「段取り」ステータスを設定しておくと、フロントエンド側では空欄で表示されます。

• 管理画面：ステータスが、アクションで遷移する
• フロンエンド「段取り」ステータスは空欄

フロントエンド：追加ステータスを表示させる

TODOサンプルのタスク一覧で追加したステータスを表示させるには、 フロントエンドのsrc/constants/datastore.js で、段取りステータスのコードを追加します。このとき、段取りステータスの背景色も指定します。

src\components\ItemList.vue

    getStatusColor(item) {
      const status = item[FIELDS.STATUS];
      let color = "white";
      switch (status) {
        case "新規":
          color = "light-blue lighten-3";
          break;
        case "受付":
          color = "light-blue darken-1";
          break;
        case "段取り":
          color = "purple lighten-2";
          break;
        case "作業中":
          color = "light-blue darken-4";
          break;
        case "確認":
          color = "cyan darken-1";
          break;
        case "完了":
          color = "cyan darken-4";
          break;
      }

      return color;
    },

フロントエンド：追加ステータスのアクションを設定

TODOサンプルでスタータスを遷移させるアクションは、src\constants\datastore.js で、次のコードを追加します。このとき、idには、アクションidを指定します。追加・変更するのは、管理画面で追加・変更したアクションです。

src\constants\datastore.js

export const STATUS_ACTIONS = {
  // prettier-ignore
  "新規": [
    {
      id: "MoveToAssigned",
      name: "受け付ける",
      icon: "mdi-arrow-right-box",
    },
  ],
  // prettier-ignore
  "受付": [
    {
      id: "BackToNew",
      name: "新規へ戻す",
      icon: "mdi-arrow-left-box",
    },
    {
      id: "MoveToPlanning",
      name: "段取りへ進める",
      icon: "mdi-arrow-right-box",
    },
  ],
  // prettier-ignore
  "段取り": [
    {
      id: "BackToAssigned",
      name: "受付へ戻す",
      icon: "mdi-arrow-left-box",
    },
    {
      id: "MoveToInProgress",
      name: "作業中へ進める",
      icon: "mdi-arrow-right-box",
    },
  ],
  // prettier-ignore
  "作業中": [
    {
      id: "MoveToPlanning",
      name: "段取りへ戻す",
      icon: "mdi-arrow-left-box",
    },
    {
      id: "MoveToInReview",
      name: "確認へ進める",
      icon: "mdi-arrow-right-box",
    },
  ],
  // prettier-ignore
  "確認": [
    {
      id: "BackToInProgress",
      name: "作業中へ戻す",
      icon: "mdi-arrow-left-box",
    },
    {
      id: "MoveToClosed",
      name: "完了する",
      icon: "mdi-arrow-right-box",
    },
  ],
  // prettier-ignore
  "完了": [
    {
      id: "BackToInReview",
      name: "確認へ戻す",
      icon: "mdi-arrow-left-box",
    },
  ]
};

これで、追加した「段取り」ステータスをフロントエンドでも操作できるようになりました。