AdminTableコンポーネントと関連API

AdminTableは、管理画面で表形式のデータを表示・管理するための多機能なVueコンポーネントです。ページネーション、ソート、フィルタリング、カラム表示切替、行選択などの機能を備えています。

AdminTableコンポーネント

app/components/AdminTable/index.vue

このコアコンポーネントは、テーブルの表示と操作を統括します。

主な機能:

• データ取得: fetchDataプロップを受け取り、ページネーション・ソート・フィルタリングのパラメータに基づいてデータを取得します。
• カラム定義: columnsプロップでテーブル構造（ヘッダーやデータアクセサ）を定義します。
• フィルタリング: filtersプロップで定義された様々なフィルタータイプ（input、checkbox、tabs、daterange）に対応。フィルター変更時にデータを再取得します。
• ページネーション: ページ番号や1ページあたりの件数をURLクエリパラメータと同期するコンポーネントを統合。
• ソート: ソートオプションもURLクエリパラメータと同期します。
• カラム表示切替: カラムの表示・非表示をユーザーが切り替えられるよう、コンポーザブルやコンポーネントを活用。
• 行選択: canSelectがtrueの場合、行選択機能を有効化し、コンポーザブルで管理します。
• 状態管理: ページ・リミット・ソートオプションなどの状態はリアクティブで、URLクエリパラメータと同期され、ユーザー体験や共有性を向上させます。
• エラーハンドリング: データ取得時の基本的なエラー処理を含み、失敗時にはトースト通知を表示します。
• リフレッシュ機能: handleRefreshメソッドで手動でテーブルデータを再取得できます。

バックエンドAPI

AdminTableコンポーネントを支える主なAPIエンドポイントは2つあります。

1. リストAPI（/api/admin/list/[tableName].get.ts）

   • この動的GETエンドポイントは、指定したtableNameのレコード一覧をページネーション・フィルタリング付きで取得します。
   • パスパラメータ: tableName（string）- クエリ対象のデータベーステーブル名。
   • クエリパラメータ:
     • page（number, 任意, デフォルト: 1）: ページ番号。
     • limit（number, 任意, デフォルト: 20, 最大: 100）: 1ページあたりの件数。
     • filter（string, 任意）: フィルター条件の配列を表すJSON文字列（例: [{ "col": "name", "op": "like", "v": "test" }]）。
     • sort（string, 任意）: ソート条件の配列を表すJSON文字列（例: [[ "createdAt", "desc" ]]）。
   • 機能:
     • tableNameのバリデーション。
     • filterとsortのクエリパラメータを解析・適用。
     • pageとlimitによるページネーション適用。
     • data（レコード配列）、total（総件数）、page、limitを含むオブジェクトを返却。
     • データベース操作にはDrizzle ORMを使用。

2. カウントAPI（/api/admin/count/[tableName]/[columnName].get.ts）

   • この動的GETエンドポイントは、指定したtableName内のcolumnNameのユニーク値ごとの件数を、必要に応じてフィルタリングして取得します。
   • パスパラメータ:
     • tableName（string）: データベーステーブル名。
     • columnName（string）: カウント対象のカラム名。
   • クエリパラメータ:
     • filter（string, 任意）: リストAPIと同様のフィルター条件配列のJSON文字列。
   • 機能:
     • tableNameとcolumnNameのバリデーション。
     • filterクエリパラメータの解析・適用。
     • 各ユニークなカラム値とその件数を含むオブジェクト配列を返却。
     • 統計情報やフィルターオプション（例: 件数付きチェックボックス）の生成に便利。

柔軟なフロントエンドコンポーネントと堅牢なバックエンドAPIの組み合わせにより、管理画面でのデータ管理を強力にサポートします。