EC · DOCS Engage Ch 設計書
← 設計書一覧

複製アクションの ⋯ プルダウン集約

詳細ヘッダに操作ボタンが増えていくのを抑えるため、二次的・破壊的な操作(複製・削除)を ケバブ(⋯)メニューへ集約する。主要導線はボタンのまま残す。

01 背景と目的

「メッセージの複製」「リッチメニューの複製」に続き、流入経路(Landing)アンケート(QuestionSet)にも複製機能を追加した。しかし詳細ヘッダに 複製ボタンを単純追加すると、既存の保存/編集/削除などと並んでボタンが増え続け、 ヘッダが手狭になる。

  • 目的: ヘッダの表示ボタン数を増やさずに複製導線を提供する。
  • 方針: 今後もアクションは「⋯ プルダウンへ寄せる」ことを既定とし、UI の一貫性を保つ。
  • 非目的: 複製・削除のロジックやバックエンド仕様の変更。UI 表現のみを対象とする。

02 対象画面

画面ファイルヘッダ位置
流入経路 詳細 pages/actions/index.vue HalfModal のヘッダ(保存/編集の右)
アンケート 詳細 pages/questions.vue 詳細ヘッダ(route questions-id、右端)

03 Before / After

Before
編集 複製 削除

操作ごとにボタンが並び、増えるほどヘッダが圧迫される。

After
編集
複製
削除

主要導線はボタン、複製・削除は ⋯ メニューへ集約。

04 メニュー仕様

  • トリガー: mdi-dots-horizontal(⋯)のアイコンボタン。v-menuoffset-y で下方向に開く。
  • 項目順: 複製 → 削除。削除は破壊的操作のため末尾に置く。
  • 複製: クリックで即実行(確認ダイアログなし)。完了後は一覧を再読込し、成功トーストを表示。
  • 削除: 既存の確認ダイアログ(deleteDialog / deleteConfirmModal)をそのまま呼ぶ。挙動は変更しない。
  • 残すボタン: 流入経路は「保存/編集」、アンケートは「内容編集/シナリオ設定」を主要導線としてボタンのまま維持する。
! 複製フラグが無効なときの見え方

複製項目はフラグで v-if 制御する(下記)。無効時はメニュー内に 削除だけが残る(メニュー自体は表示される)。単独項目になる点は許容とする。

05 表示条件とフラグ

複製項目は account の extension フラグで出し分ける。判定は既存の enable_copy_message と同形の computed(canCopyXxx)で行い、項目に v-if を付ける。

対象extension identifiercomputed無効時
流入経路の複製 enable_copy_landing canCopyLanding 複製項目を非表示
アンケートの複製 enable_copy_question_set canCopyQuestionSet 複製項目を非表示

両フラグは pages/settings/extensions.vue の一覧にも登録済み (流入経路の複製=分析カテゴリ、アンケートの複製=アンケートカテゴリ)。

06 実装メモ

  • Mutation: copyLanding / copyQuestionSet。input は { accountId, id, name? }、返却は LandingType / QuestionSetType(workflow-engine-api)。
  • name: 任意引数。現状はクライアントから送らず、サーバの複製サービス既定命名に委ねる。
  • gql: apollo/mutations/copyLanding.gql / apollo/mutations/copyQuestionSet.gql
  • アンケート一覧(pages/questions/index.vueの行メニューは意図的に非表示のため、そこには複製導線を足していない。

07 更新履歴

  • v0.2 2026-07-31 ⋯ メニューへ集約 独立していた複製・削除ボタンを、詳細ヘッダの ⋯ プルダウンへ統合。複製項目はフラグで v-if 制御。
  • v0.1 2026-07-31 初版 複製ボタンを削除ボタンの隣に独立配置。enable_copy_landing / enable_copy_question_set で表示ゲート。