TODOサンプル:フィールドを追加する

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

変更する内容#

TODOサンプルのフィールドは、もともと次のようになっています。

画面項目名画面項目idデータ型
タイトルTitleテキスト
担当Assigneeテキスト
カテゴリCategory選択肢
ステータスStatus
期限DueDate日付

ここに、作業時間(WorkingTime)というテキスト型フィールドを追加してみましょう。

名前画面項目idデータ型
作業時間WorkingTimeテキスト

管理画面:フィールドを追加する#

まず最初に、管理画面で「作業時間」フィールドを追加します。

  1. 管理画面を呼び出す
  2. アプリケーションの任意のアイテムをクリック
  3. アイテム詳細画面で、「項目を編集・追加する」をクリック
  4. 「新しい画面項目を追加」ボタンをクリック
  5. 「新しい画面項目を追加」に、以下の情報を設定する
    • 画面項目名(en):WorkingTime
    • 画面項目名(en):作業時間
    • 画面項目の型:テキスト
  6. 「保存」ボタンをクリック

フィールドを追加する

管理画面:画面項目IDを設定する#

続いて、追加したフィールドの画面項目IDを設定します。

  1. 追加したフィールド(作業時間)の編集ボタンをクリック
  2. 画面項目IDを設定する(例:WorkingTime)
  3. 「保存」ボタンをクリック

画面項目IDを設定する

これで、管理画面のアイテム一覧に、追加したフィールドが表示されました。

フロントエンド:一覧に、見出しを追加する#

次は、フロントエンドのコードを修正します。まずは、タスク一覧に見出しだけ追加します。まだ、データは表示しません。これは、ItemList.vue を次のように修正します。

src\components\ItemList.vue

headers: [
{ text: "タイトル", value: FIELDS.TITLE },
{ text: "担当", value: FIELDS.ASSIGNEES },
{ text: "カテゴリ", value: FIELDS.CATEGORY },
{ text: "ステータス", value: FIELDS.STATUS },
{ text: "期限", value: FIELDS.DUEDATE },
{ text: "作業時間", value: FIELDS.WORKINGTIME }, // 追加
{ text: "操作", value: "actions", sortable: false },
],

フロントエンド:一覧にデータを表示させる#

続いて、タスク一覧に作業時間フィールドのデータを表示させます。まだ、データの追加・更新はできません。これは、datastore.js を、次のように修正します。

src\constants\datastore.js

export const FIELDS = {
TITLE: "Title",
ASSIGNEES: "Assignee",
CATEGORY: "Category",
STATUS: "Status",
WORKINGTIME: "WorkingTime", // 追加
DUEDATE: "DueDate",
};

フロントエンド:追加・更新ポップアップにフィールドを追加する#

さらに、追加・更新ポップアップにもフィールドを追加します。TODOサンプルのItemList.vue には、フィールドの値を追加・更新するポップアップのコードも含まれているので、ここだけでフィールドを追加できます。

src\components\ItemList.vue

<v-dialog v-model="dialog" max-width="600px">
<template v-slot:activator="{ on, attrs }">
<v-btn color="accent" dark class="mb-2" v-bind="attrs" v-on="on">
アイテム追加
</v-btn>
</template>
<v-card>
<v-card-title>
<span>{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12">
<v-text-field v-model="editedTitle" label="タイトル" />
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field v-model="editedAssignees" label="担当" />
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select
v-model="editedCategory"
:items="categories"
item-text="name"
item-value="value"
label="カテゴリ"
return-object
single-line
>
</v-select>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-menu
v-model="datepickerMenu"
:close-on-content-click="false"
:nudge-right="40"
transition="scale-transition"
min-width="290px"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="duedateFormatted"
label="期限"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="duedate"
no-title
@input="datepickerMenu = false"
/>
</v-menu>
</v-col>
</v-row>
<v-row> // 追加 --------------------------------------------
<v-col cols="12">
<v-text-field v-model="editedWorkingTime" label="作業時間" />
</v-col>
</v-row> // ここまで -----------------------------------------
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="close">
キャンセル
</v-btn>
<v-btn color="accent" @click="save">
<!-- <v-btn @click="save"> -->
{{ saveButtonTitle }}
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<Confirm ref="confirm" />

フロントエンド:データを追加・更新させる#

最後に、データを追加・更新させるため、ItemList.vueの3か所のコードを修正します。

まず、editedWorkingTime を追加します。

src\components\ItemList.vue

editedWorkingTime: {
get() {
if (!this.editedItem[FIELDS.WORKINGTIME]) {
return "";
}
return this.editedItem[FIELDS.WORKINGTIME];
},
set(val) {
this.$set(this.editedItem, FIELDS.WORKINGTIME, val;
},
},

editedItem[FIELDS.WORKINGTIME] を追加します。

src\components\ItemList.vue

const editedItem = {};
editedItem[FIELDS.TITLE] = itemDetails[FIELDS.TITLE].value;
editedItem[FIELDS.ASSIGNEES] = itemDetails[FIELDS.ASSIGNEES].value;
editedItem[FIELDS.CATEGORY] = itemDetails[FIELDS.CATEGORY].value;
editedItem[FIELDS.DUEDATE] = itemDetails[FIELDS.DUEDATE].value;
editedItem[FIELDS.WORKINGTIME] = itemDetails[FIELDS.WORKINGTIME].value; //追加

buildEditedItem() に、item[FIELDS.WORKINGTIME]を追加します。

src\components\ItemList.vue

buildEditedItem() {
const item = {};
if (this.duedate) {
const duedate =
new Date(this.duedate + "T00:00:00+0900")
.toISOString()
.split(".")[0] + "Z";
item[FIELDS.DUEDATE] = duedate;
}
item[FIELDS.TITLE] = this.editedItem[FIELDS.TITLE];
item[FIELDS.ASSIGNEES] = this.editedItem[FIELDS.ASSIGNEES];
item[FIELDS.CATEGORY] = this.editedItem[FIELDS.CATEGORY];
item[FIELDS.WORKINGTIME] = this.editedItem[FIELDS.WORKINGTIME]; //追加
return item;
},

これで、フロントエンドにフィールドを追加できました。

数値型フィールドを追加するには#

数値型フィールドを追加したい場合は、editedWorkingTime の set(val) の引数を「parseInt(val)」として数値型に変換します。

src\components\ItemList.vue

editedWorkingTime: {
get() {
if (!this.editedItem[FIELDS.WORKINGTIME]) {
return "";
}
return this.editedItem[FIELDS.WORKINGTIME];
},
set(val) {
this.$set(this.editedItem, FIELDS.WORKINGTIME, parseInt(val)); // 数値に変換
},
},