Admin: Managing Users

EXERCISE

This chapter is an exercise to test your knowledge of the concepts covered in the previous sections. It outlines a problem and showcases different possible solutions to inspire you. We encourage you to be creative and try to solve the problem in your own way before looking at the provided examples.

Preparation

Before we begin building the user management interface, we need to set up the necessary components, routes, and navigation links. We'll create three separate pages for this exercise—Basic, Advanced, and Expert—to allow for different approaches to solving the same problem.

Create the User Components

We'll start by generating the Livewire components that will power our three user management pages.

• Open your terminal in the project directory.
• Execute the following Artisan commands to generate the new Livewire components:

php artisan livewire:make Admin/UsersBasic
php artisan livewire:make Admin/UsersAdvanced
php artisan livewire:make Admin/UsersExpert

These commands will create the corresponding class and view files for each component inside the app/Livewire/Admin and resources/views/livewire/admin directories.

Add Three New User Routes

Next, we need to make these new components accessible via URLs. We'll add three new routes to our admin route group.

• Open the routes/web.php file.
• Inside the main admin route group, add a new prefixed group for /users and define the routes for our three components.

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

Now, let's link these new routes from the admin section of our main navigation bar.

• Open the resources/views/components/layouts/vinylshop/navbar.blade.php file.
• Add a new expandable group for "Users" within the @auth block and link to the newly created routes.

@auth
    <flux:separator variant="subtle"/>
    <flux:navlist.group expandable heading="Admin">
        <flux:navlist.item href="{{ route('admin.genres') }}">Genres</flux:navlist.item>
        <flux:navlist.item href="{{ route('admin.records') }}">Records</flux:navlist.item>
        <flux:navlist.item href="#">Covers</flux:navlist.item>
        <flux:navlist.group expandable expanded="false" heading="Users">
            <flux:navlist.item href="{{ route('admin.users.basic') }}">Basic</flux:navlist.item>
            <flux:navlist.item href="{{ route('admin.users.advanced') }}">Advanced</flux:navlist.item>
            <flux:navlist.item href="{{ route('admin.users.expert') }}">Expert</flux:navlist.item>
        </flux:navlist.group>
        <flux:navlist.item href="#">Orders</flux:navlist.item>
    </flux:navlist.group>
@endauth

Basic Scaffolding for the Views

With the routes and components ready, let's set up the initial content for each view file. For now, we'll just add the page title and description.

• resources/views/livewire/admin/users-basic.blade.php

<div>
    <x-slot:title>Users (basic)</x-slot:title>
    <x-slot:description>Manage users (basic)</x-slot:description>

    <x-itf.livewire-log />
</div>

Exercise

Your task is to implement full CRUD (Create, Read, Update, Delete) functionality for the User model on at least one of the pages you just created (e.g., UsersBasic). Use Livewire's Form Objects to keep your component class clean by grouping all form-related code into a separate class.

Minimum Requirements for this CRUD

• Create
  • Creating a new user is not strictly required, as this functionality is already implemented in the registration form. However, you can add it for a complete admin experience.
• Read
  • Display a list, table, or card layout of all users.
  • Implement pagination for the user list.
  • Allow sorting the results by name, email, admins first, and inactive users first.
  • Implement a filter to search for users by name.
• Update
  • Allow updating a user's name and email (using an inline form, a modal, or another method).
  • Implement validation before updating, remembering that the email attribute must be unique across all users.
• Delete
  • Allow deleting a user (but not the currently authenticated user).
  • Display a confirmation dialog before permanently deleting a user.

IMPORTANT

As a logged-in administrator, you must not be able to update or delete your own account! Implement logic to prevent this.

Some Versions to Inspire You

Here are a few examples of how you could implement the user management functionality, from a basic version that meets the minimum requirements to more advanced solutions with extra features.

Basic version

This version meets all the minimum requirements with a clean and simple table layout.

Advanced version

This version introduces a more dynamic interface with a hidden form for adding and editing users.

• Separate filters for name or email, and status.
• Pagination controls.
• A hidden form for adding and editing users, which appears when needed.
  • Adding a user: The form is empty.
  • Editing a user: The form is pre-filled with the user's details.
  • The submit button text changes dynamically ("Create User" vs. "Save User").
• Password handling:
  • Adding: Leave the field empty to set a default password (user1234) or enter a new one.
  • Editing: Leave the field empty to keep the current password or enter a new one to update it.
• Full validation and toast notifications for feedback.
• Ability to delete a user (with confirmation) and sort by clicking column headers.

Expert version

This advanced version moves away from a traditional table to a card-based layout with enhanced interactivity and inline editing.

• A card-based layout with color-coding:
  • Blue card: Administrator.
  • Green card: Active user.
  • Red card: Inactive (soft-deleted) user.
• Advanced sorting and filtering options, including buttons to show only active users or only admins.
• The logged-in administrator's card has a thicker, highlighted border for easy identification.
• Ability for an admin to generate a new random password for any user.
  • Hint: Don't forget to hash the password and add password to the $fillable array in the User model.
• Inline editing for name, email, and password using the contenteditable HTML attribute.
• All feedback (validation errors, status changes) is shown directly within the user's card.