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

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

変更する内容#

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

もともとのステータス

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

変更したステータス

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

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

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

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

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

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

  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",
},
]
};

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