Admin: users

PODCAST

EXERCISE

• This is an exercise to test your knowledge about the previous chapters
• This chapter only shows different versions to solve the same problem
• Be creative and try to solve the problem in your own way

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

• app/Livewire/Admin/UsersBasic.php
• resources/views/livewire/admin/users-basic.blade.php
• Open the component class and change the layout to layouts.vinylshop

<?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::class, ActiveUser::class])->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');
});
...

Excercise

• Create at least one CRUD for the User model
• Use Livewire's Form Objects to keep your component class cleaner by grouping all form-related code into a separate class

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 (except yourself)
  • Ask for confirmation before deleting

WARNING

• As a logged in admin, you can't update and delete yourself!

Some versions to inspire you

Basic version

• Meets the minimum requirements
  • Extra: preloader

Advanced version

• Name and email filter
• Filter on status
• Pagination
• Hidden form for adding and editing a user
• Adding or editing a user shows the form
  • Adding a user: gives an empty form
  • Editing a user: fills in the details of the user
  • Notice the different text on the submit button
• The password field:
  • Adding a user: choose a password or leave it empty to set a default password (user1234)
  • Editing a user: leave the password field empty to keep the current password or choose a new password
• Submitting the form validates the data and adds/edits the user
• You can also delete a user (except yourself)
• You can refresh the form (clear the fields) and close the form by clicking the corresponding icons
• 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