Dashboard運用拡張プラグイン（統合エクスポート）¶
概要¶
React Dashboard のアクションバー拡張を1つのプラグインに集約し、注文・商品バリアントのCSVエクスポートを提供する。UIのみを拡張し、バックエンドは既存プラグイン（SMILE連携 / ProductVariants公開クエリ）を再利用する。
- ソース:
apps/vendure-server/src/dashboard/index.tsx - プラグイン登録:
apps/vendure-server/src/plugins/ritsubi-admin-extensions.plugin.ts（dashboard エントリとして読み込み）
提供機能¶
- 注文CSVエクスポート
- 対象ページ:
order-list（注文一覧アクションバー） - 権限:
SuperAdmin - API:
exportSmileOrders（SMILE連携プラグインのAdmin API）を呼び出し、SHIFT_JISでCSVをダウンロード -
ファイル名: API応答の
filenameがあればそれを使用。無い場合はorders-YYYYMMDD-hhmm-<encoding>.csv -
商品バリアントCSVエクスポート
- 対象ページ:
product-list（商品一覧アクションバー） - 権限:
ReadProduct - API:
productVariantsクエリを200件ずつページング取得し、全件をCSV化 - 出力カラム:
productVariantId, productId, productName, variantName, sku, priceWithTax, currency, stockOnHand, enabled, createdAt, updatedAt - ファイル名:
product-variants-YYYYMMDD-hhmm.csv
依存関係¶
- SMILE連携プラグイン (
packages/plugins/smile-integration) - Admin API の
exportSmileOrdersを利用。 - Shop ProductVariants 拡張
(
apps/vendure-server/src/plugins/shop-product-variants.plugin.ts) productVariantsクエリを公開し、CSV生成に使用。
UI挙動とエラーハンドリング¶
- 実行中はボタンを disabled にし、「エクスポート中…」表示。
- 成功時: toast で件数を通知し、自動ダウンロード。
- 失敗時: toast でエラーメッセージを表示（APIエラー文言をそのまま表示）。
実装詳細¶
ファイルダウンロード処理¶
CSVエクスポート機能では、共通ユーティリティ関数（utils/download-helper.ts）を使用してファイルダウンロードを実装しています。
- 注文CSV: GraphQL APIからBase64エンコードされたCSVデータを受け取り、
downloadBase64()を使用 - 商品バリアントCSV: クライアント側でCSV文字列を生成し、
downloadText()を使用
詳細は Vendure開発ハンドブック - 共通ユーティリティ を参照してください。
運用手順¶
- Vendure を起動し Dashboard にログイン。
- 注文一覧ページ: アクションバーの「注文CSVエクスポート」をクリック → ダウンロードを確認。
- 商品一覧ページ: アクションバーの「商品CSVエクスポート」をクリック → 出力内容を確認。
- 権限がないロールではボタンが表示されないことを確認。
拡張・統合方針¶
- シンプルなダッシュボード拡張（アクションバー、ページブロック、簡易ルート）は本プラグインに集約する。
- 新しい機能を追加する場合は、
apps/vendure-server/src/dashboard配下にコンポーネントを追加し、index.tsxで登録する形を維持する。 - 大規模な独立機能（例: 大量の設定ページやワークフロー）は別プラグイン検討だが、まず本プラグイン内での共存を優先する。