Laravel5.4: 削除確認をBootstrapのModalで行う

  • 1
    いいね
  • 0
    コメント

記事やユーザーの削除ボタンを押したら、いきなり削除せずにモーダルウィンドウで確認できるようにします。
:link: Modal · Bootstrap

001.png

親記事

Laravel 5.4で基本的なCRUDを作る - Qiita

モーダル用のコンポーネントを作る

以前の記事で作ったform-del.blade.phpを修正します。
1ページの中で複数の削除ボタンを表示する場合があるので、id属性をmodal-delete-<コントローラ名>-<id番号>のようにユニークになるよう設定します。
最終確認の削除ボタンを<form>で囲って、削除用のアクションメソッドへ送信するようにしています。

resources/views/form-del.blade.php
@php
    $id_attr = 'modal-delete-' . $controller . '-' . $id;
@endphp

<!-- Delete button -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#{{ $id_attr }}">
  {{ __('Delete') }}
</button>

<!-- Modal -->
<div class="modal fade" id="{{ $id_attr }}" tabindex="-1" role="dialog" aria-labelledby="{{ $id_attr }}-label" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="{{ $id_attr }}-label">{{ __('Confirm delete') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>{{ __('Are you sure to delete?') }}</p>
                <p><strong>{{ $name }}</strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Cancel') }}</button>
                <form action="{{ url($controller . '/' . $id) }}" method="post">
                    {{ csrf_field() }}
                    {{ method_field('DELETE') }}
                    <button type="submit" class="btn btn-danger">{{ __('Delete') }}</button>
                </form>
            </div>
        </div>
    </div>
</div>

コンポーネントを呼び出す

:link: コンポーネントとスロット
コンポーネントで必要な3つのスロットを設定します。

ビュー
@component('form-del')
    @slot('controller', 'posts')
    @slot('id', $post->id)
    @slot('name', $post->title)
@endcomponent