Admin: users

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 a new Livewire component with the terminal command php artisan make:livewire Admin/UsersBasic
  • app/Http/Livewire/Admin/UsersBasic.php (the component class)
  • resources/views/livewire/admin/users-basic.blade.php (the component view)
• Open the component class and change the layout to layouts.vinylshop

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

Add a new route

• Add a new 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::view('/', 'home')->name('home');
Route::get('shop', Shop::class)->name('shop');
Route::view('contact', 'contact')->name('contact');
Route::view('playground', 'playground')->name('playground');
Route::get('itunes', Itunes::class)->name('itunes');

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

• Line 9: update route('home') to route('admin.users')

@if(auth()->user()->admin)
    <div class="border-t border-gray-100"></div>
    {{-- admins only --}}
    <div class="block px-4 py-2 text-xs text-gray-400">Admin</div>
    <x-jet-dropdown-link href="{{ route('admin.genres') }}">Genres</x-jet-dropdown-link>
    <x-jet-dropdown-link href="{{ route('admin.records.old') }}">Records (old)</x-jet-dropdown-link>
    <x-jet-dropdown-link href="{{ route('admin.records') }}">Records</x-jet-dropdown-link>
    <x-jet-dropdown-link href="{{ route('home') }}">Covers</x-jet-dropdown-link>
    <x-jet-dropdown-link href="{{ route('admin.users.basic') }}">Users (basic)</x-jet-dropdown-link>
    <x-jet-dropdown-link href="{{ route('home') }}">Orders</x-jet-dropdown-link>
@endif

TIP

You can always add extra components and routes if you want to try out different versions of the same exercise

@if(auth()->user()->admin)
    <div class="border-t border-gray-100"></div>
    {{-- admins only --}}
    <div class="block px-4 py-2 text-xs text-gray-400">Admin</div>
    <x-jet-dropdown-link href="{{ route('admin.genres') }}">Genres</x-jet-dropdown-link>
    <x-jet-dropdown-link href="{{ route('admin.records.old') }}">Records (old)</x-jet-dropdown-link>
    <x-jet-dropdown-link href="{{ route('admin.records') }}">Records</x-jet-dropdown-link>
    <x-jet-dropdown-link href="{{ route('home') }}">Covers</x-jet-dropdown-link>
    <div class="border-t border-gray-100"></div>
    <x-jet-dropdown-link href="{{ route('admin.users.basic') }}">Users (basic)</x-jet-dropdown-link>
    <x-jet-dropdown-link href="{{ route('admin.users.advanced') }}">Users (advanced)</x-jet-dropdown-link>
    <x-jet-dropdown-link href="{{ route('admin.users.expert') }}">Users (expert)</x-jet-dropdown-link>
    <div class="border-t border-gray-100"></div>
    <x-jet-dropdown-link href="{{ route('home') }}">Orders</x-jet-dropdown-link>
@endif

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

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

• 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 (opens new window)
• All feedback (validation, change status, ...) is shown in the card itself