Admin: users ​

Preparation ​

Create a Users component ​

• Create three new Livewire components with the terminal command:
  • php artisan livewire:make Admin/UsersBasic
  • php artisan livewire:make Admin/UsersAdvanced
  • php artisan livewire:make Admin/UsersExpert

<?php

namespace App\Livewire\Admin;

use Livewire\Attributes\Layout;         
use Livewire\Component;

class UsersBasic extends Component
{
    #[Layout('layouts.vinylshop', ['title' => 'Users (basic)', 'description' => 'Manage users (basic)',])] 
    public function render()
    {
        return view('livewire.admin.users-basic');
    }
}

<?php

namespace App\Livewire\Admin;

use Livewire\Attributes\Layout;         
use Livewire\Component;

class UsersBasic extends Component
{
    #[Layout('layouts.vinylshop', ['title' => 'Users (basic)', 'description' => 'Manage users (basic)',])] 
    public function render()
    {
        return view('livewire.admin.users-basic');
    }
}

Add three new routes ​

• Add three get-route for the UsersBasic class to the routes/web.php file
• Update the navigation menu in resources/views/components/layouts/nav-bar.blade.php

Route::middleware(['auth', 'admin', 'active'])->prefix('admin')->name('admin.')->group(function () {
    Route::redirect('/', '/admin/records');
    Route::get('genres', Genres::class)->name('genres');
    Route::get('records', Records::class)->name('records');
    Route::get('users/basic', UsersBasic::class)->name('users.basic');    
    Route::get('users/advanced', UsersAdvanced::class)->name('users.advanced');
    Route::get('users/expert', UsersExpert::class)->name('users.expert');
});
...

Route::middleware(['auth', 'admin', 'active'])->prefix('admin')->name('admin.')->group(function () {
    Route::redirect('/', '/admin/records');
    Route::get('genres', Genres::class)->name('genres');
    Route::get('records', Records::class)->name('records');
    Route::get('users/basic', UsersBasic::class)->name('users.basic');    
    Route::get('users/advanced', UsersAdvanced::class)->name('users.advanced');
    Route::get('users/expert', UsersExpert::class)->name('users.expert');
});
...

Minimum requirements for this CRUD ​

• Create
  • Create a new user is not required because this is already implemented in the registration form
• Read
  • Show a list (or table, or cards, or ...) of all users
  • Add pagination to the page
  • Order the result by the name, email, admins first and inactive users first
  • Filter the result by the name
• Update
  • Update a users name and email (inline, modal, ...)
  • Validate before updating (remember that the email attribute must be unique)
• Delete
  • Delete a user
  • Ask for confirmation before deleting

Some versions to inspire you ​

Basic version ​

• Meets the minimum requirements
  • Extra: preloader

Advanced version ​

• Button to sort based on created date
• Name and email filter
• Filter on status
• Pagination
• Hidden form
• Adding or editing a user shows the form
  • Editing a user fills in the details of the user
  • Adding a user gives an empty form
  • Notice the different text on the submit button
• Submitting the form validates the data and adds/edits the user
• You can also delete a user
• You can refresh the form (clear the fields) and close the form by clicking the corresponding icons
• In the grid the envelope represents the amount of orders
• You can sort by clicking on the column headers

Expert version ​

• The version below is a bit more advanced, and has some extra features that are not required for the minimum requirements
• This version is built with "cards" instead of a table
  • Blue card: admin
  • Green card: active user
  • Red card: inactive user
• The cards are sortable by
  • name: ascending and descending
  • email: ascending and descending
  • admin: admins come first, then all the other users and order by name
  • active: active users come first, then all the other users and order by name
  • Two extra buttons to show only the active users or only admins
• The logged in administrator has a thicker, blue border around his card
• The logged in administrator can generate a new password for a user
  • Don't forget to hash the password and add password to the $fillable array in the User model
• name, email and password are inline editable with the contenteditable attribute of HTML
• All feedback (validation, change status, ...) is shown in the card itself