👏

Nuxt.jsでWebアプリケーション開発メモ15

に公開
toast
Nuxt 3
Claude
Nuxt UI
umodal
tech

概要

ユーザー削除機能の追加。

プロンプト15

# 命令15
ユーザー削除機能を追加してください。
- user.vueで各行のactionメニューから削除をクリックすると、確認ダイアログを表示します。
- 確認ダイアログには、削除確認のメッセージの表示と、`OK`ボタン、`キャンセル`ボタンを表示します。
- OKをクリックするとそのユーザーを削除します。
    - 削除中は最上位のレイヤーにloadingを半透明で表示して、画面操作できないようにしてください。
    - 削除が成功したら、以下を実施します。
        - loadingを非表示にします。
        - 成功メッセージをvuetifyのスナックバーのように表示します。
        - 一覧表示を更新します。
    - 削除が失敗したら以下を実施します。
        - loadingを非表示にします。
        - モーダルダイアログでエラーメッセージを表示します。
            - エラーメッセージは削除処理が失敗した旨のメッセージと、バックエンドからのエラーメッセージの両方を見やすい形式で表示してください。
        - モーダルダイアログには`OK`ボタンを表示しクリックするとダイアログを消去し、一覧を更新します。
- ログイン中ユーザーの`削除`項目はdisableにしてクリックできないようにしてください。

追加命令

  • UModalの使い方を間違えていたので修正を命令。

    • 表示/非表示のバインド方法が間違っており、要素が表示されたままの状態だったので、最新のNuxtUI仕様を確認させる。

      • <UModal v-model="showErrorDialog"のように間違って記載。
      • <UModal v-model:open="showErrorDialog"に修正。

    • UModal内にUCard要素を埋め込んでおり正しく表示されない。

      • <template #body>でメッセージ要素を表示させるよう手動修正し、Claude Codeに教示。

    • モーダルダイアログの背景色等デザイン修正を命令するも意図通り修正されないので、ドキュメントを確認し、:ui属性で任意のクラス指定できる旨をClaude Codeに教示。
      また、NuxtUIのデフォルトで設定されるcss(.min-h-16 {min-height: calc(var(--spacing) * 16);})のせいでモーダルのヘッダ要素の高さが変わらないので高さを変えれるようにしてくれと命令。→ !min-h-0 !h-autoの追加で解決。

      • <UModal :ui="{header: 'bg-blue-500 text-white px-4 py-2 !min-h-0 !h-auto', ...

画面

対応内容

  • pages/admin/user/index.vueにメニューの削除項目にユーザー削除処理を追加。
    • 削除をクリックすると確認ダイアログが表示。
    • 削除を実行するとユーザー削除を実施し、トーストでメッセージを表示。
      メッセージ表示時間は25秒にした。
    • 削除失敗時は別途ダイアログを表示。（失敗させるのが難しいので機能未確認。）

ソース差分

https://github.com/tkure/prototype-frontend/commit/ff3855ca65114424b7c805541e6c2fa2f07d24e2

→ Nuxt.jsでWebアプリケーション開発メモ16

Discussion