Listing rows of users - crud

Step 01: Adding jQuery with npm

npm i jquery

Step 02: Using bootstrap 5 icons

//Installing bootstrap 5 icons with following npm command 
npm install bootstrap-icons --save-dev

// importing bootstrap icons inside resources/sass/app.scss
@import '~bootstrap-icons/font/bootstrap-icons';

Step 03: Changing list.blade.php under views/resources/users folder with fetching and showing database rows using loop and adding a confirm delete modal for deleting a row of data

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
			<h2 class="">All Users</h2>
            <table class="table mt-3">                
                <thead class="table-dark">
                    <tr>
                        <th>Id</th>
                        <th class="text-center">Role</th>
                        <th class="text-center">Name</th>
                        <th class="text-center">Email</th>
                        <th class="text-center">Created</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                        @foreach ($users as $user)
                        <tr>
                            <td>{{$user->id}}</td>
                            <td class="text-center">{!! $user->role_id == 1 ? 'Admin':'Customer' !!}</td>
                            <td class="text-center">{{ $user->name }}</td>
                            <td class="">{{ $user->email }}</td>
                            <td class="text-center">{{ $user->created_at->format('M d, Y') }}</td>                           
                            <td class="text-center">
                                <a class="text-black" href="{{ route('users.edit', $user->id) }}"><i class="bi bi-pencil"></i></a>&nbsp;
                                <a class="text-black delete-row" href="javascript:void(0);" data-base-url="{{ url('') }}" data-rowname="{{ $user->name }}" data-resource="users" data-rowid="{{ $user->id }}"><i class="bi bi-trash"></i></a></td>                           
                        </tr>                       
                        @endforeach
                        @if (count($users) == 0)
                        <tr><td colspan="6"><span class="">Nothing found</span></td></tr>
                        @endif                        
                </tbody>
            </table>
            <div class="justify-content-center mt-3">
                {!! $users->links() !!}
             </div>            
        </div>
    </div>
</div>

<div id="modal-delete-confirm" class="modal fade">
	<div class="modal-dialog modal-md modal-dialog-centered" >
		<div class="modal-content" >
            <div class="modal-header">
                <h4><strong >Confirm Delete</strong></h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>    				
            </div>			
            <div class="modal-body text-center">              			  
                    <p>Would you like to delete this row <span id="modal-delete-title"></span>? <br>Once deleted it cannot be reverted.</p>						  					  
                    <div class="row justify-content-center">
                    <div class="col-3">                        
                    <form id="list-frm-modal" class="float-start" method="POST" action="">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-danger white">Yes</button>                        
                    </form>      
                    <a href="javascript:void(0);" class="btn btn-sm btn-info white float-end" data-bs-dismiss="modal">No</a>                
                    </div>
                </div>						
            </div>						 
		</div>
	</div>
</div>

@endsection

Above code is implemented in two sections. Listing users with foreach loop using appropriate database column values and adding a modal for deleting a row of data with help of javascript.

Step 04: Requring bootstrap and jquery inside app.js inside resource/js folder

window.bootstrap = require('bootstrap/dist/js/bootstrap.bundle.js');
window.$ = window.jQuery = require('jquery');

Step 05: Creating modal.js under resources/js/users folder for returning model delete method

const modal = {
    delete : () => {
          
          $('.delete-row').click(function(e) {

            $('#modal-delete-title').html($(this).data('rowname'));

                let delModal = document.getElementById("modal-delete-confirm");
                let modal = new bootstrap.Modal(delModal, 
                        {
                            backdrop: false
                        });
                modal.show();             

            });
    }
}

export default modal;

Step 06: Back in app.js importing user model js and using it

import userModel from './users/modal'

userModel.delete();

Please note we need to keep running mix with command npm run dev so that all the js or css changes get compiled and bundled in public/js/app.js and public/css/app.css for the right output of the project.