Hexabase JavaScript/TypeScript SDK × Vue3でアプリを作る（データストアの更新・削除編）

Hexabase JavaScript/TypeScript SDKをVue3アプリの中で利用します。あまり複雑にならないように解説しますので、ぜひ試してみてください。

前回はデータストア（クラウドデータベース）へのデータ作成と、データの一覧取得について実装しました。今回はデータストアの更新、そして削除について解説します。

コード

コードはhexabase/example-vue3-todo: Hexabase demo todo app by vue3 projectにアップしてあります。実装時の参考にしてください。

必要なもの

• Hexabaseのアカウント

データの編集について

データの編集については、まず一覧画面から画面遷移できるようにルーティングを作成します。これは router/index.ts に実装します。コンポーネントはタスク追加と同じ AddTaskView を使います。

{
	path: "/:id/edit",
	name: "editTask",
	component: AddTaskView,
},

フォームへのデフォルト値の設定

上記のルーティング設定で、 route.params.id を使って編集を行うIDが取得できます。

import { useRouter, useRoute } from "vue-router";
const route = useRoute();
const id = route.params.id as string | undefined;

このidの有無によって、新規作成と編集とを分けられます。idがあればデータストアから詳細情報を取得し、ストアにセットします。

if (id) {
  const { itemDetails, error } = await store.client.item.getItemDetail(
    store.datastoreId,
    id,
    store.projectId,
    {
      use_display_id: true,
      return_number_value: true,
      format: "map",
      include_linked_items: true,
      include_lookups: true,
    }
  );
  if (error) {
    message.value = "Failed to get item details.";
  }
  store.replaceItem(id, itemDetails);
}

replaceItem 関数は、指定されたidの内容を詳細情報に差し替える関数です。 stores/hexabase.ts にて定義しています。

// Replace Item
const replaceItem = (id: string, item: any) => {
	item.i_id = id;
	const i = items.value.findIndex((i) => i.i_id === item.i_id);
	if (i === -1) {
		items.value.push(item);
	} else {
		items.value[i] = item;
	}
};

そして、 id の有無によってフォームのデフォルト値を差し替えます。 id がない場合（=新規作成）には、デフォルト値を返します。

const _getDefaultValue = (id?: string) => {
  const defaultParams = {
    name: "",
    description: "",
    deadlineDate: "",
  };

  if (!id) return defaultParams;

  const item = store.getItem(id);
  if (!item) return defaultParams;
  return {
    name: item.field_values.name.value,
    description: item.field_values.description.value,
    deadlineDate: item.field_values.deadlineDate.value,
  };
};
// Form instance and inputs
const formRef = ref<FormInstance>();
const taskForm = reactive<{
  name: string;
  description: string;
  deadlineDate: string;
}>(_getDefaultValue(route.params.id as string));

これで編集時の表示が完了します。

更新処理

続いてデータの更新処理です。まず id の有無によって新規作成と更新とに処理を分けます。

const { item, error } = await (id ? _updateItem() : _createItem());

更新時の処理は以下のようになります。

const _updateItem = async (): Promise<{
  item: any;
  error: string | undefined;
}> => {
  const task = store.getItem(route.params.id as string);
  // Build item parameters
  const item = {
    name: taskForm.name,
    description: taskForm.description,
    deadlineDate: new Date(taskForm.deadlineDate),
  };
  // Build parameters
  const params: ItemActionParameters = {
    item,
    rev_no: task.rev_no,
    use_display_id: true,
    return_item_result: true,
  };
  const res = await store.client.item.update(
    store.projectId,
    store.datastoreId,
    id!,
    params
  );
  return { item: task, error: res.error };
};

これでデータストアの編集処理が完了します。

データの削除処理

データの削除処理は以下のようになります。注意点として、データ削除の a_id （アクションID）が必要になります。

// Delete item
const remove = async () => {
  if (!confirm("Are you sure you want to delete this item?")) return;
  // Get parameters
  const task = store.getItem(id!);
  const a_id = task.item_actions.DeleteItem.a_id;
  // Delete request
  const { error } = await store.client.item.delete(
    store.projectId,
    store.datastoreId,
    id!,
    {
      a_id,
    }
  );
  // Handling response
  if (error) {
    _setMessage("Failed to delete item.");
  } else {
    store.removeItem(id!);
    router.back();
  }
};

removeItem は指定したIDをストアから削除する処理です。 stores/hexabase.ts にて定義しています。

const removeItem = (id: string) => {
	const i = items.value.findIndex((i) => i.i_id === id);
	if (i !== -1) {
		items.value.splice(i, 1);
	}
};

まとめ

今回はHexabase JavaScript SDKを使って、データストアの編集と削除処理について実装しました。

次回はデータのステータス変更について解説します。

株式会社 Hexabaseー法人向けクラウドシステム『Hexabase』ー