Admin: order history

• On this page, the administrators get an overview of all orders that have already been place

Preparation

Create a Orders component

• Create a new Livewire component with the terminal command php artisan make:livewire Admin/Orders
  • app/Http/Livewire/Admin/Orders.php (the component class)
  • resources/views/livewire/admin/orders.blade.php (the component view)
• Open the component class and change the layout to layouts.vinylshop

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

Add a new route

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

• Add the route in the new admin group
  • The URL is admin/orders (prefix is already set to admin)
  • The view is admin/orders
  • The route name is admin.orders (the group name is already set to admin.)

Route::view('/', 'home')->name('home');
Route::get('shop', Shop::class)->name('shop');
Route::view('contact', 'contact')->name('contact');
Route::get('basket', Basket::class)->name('basket');
Route::view('playground', 'playground')->name('playground');
Route::get('itunes', Itunes::class)->name('itunes');

Route::middleware(['auth', 'active'])->prefix('user')->name('user.')->group(function () {
    Route::redirect('/', '/user/history');
    Route::get('history', History::class)->name('history');
});

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');
    Route::get('users/advanced', UsersAdvanced::class)->name('users.advanced');
    Route::get('users/expert', UsersExpert::class)->name('users.expert');
    Route::get('covers', Covers::class)->name('covers');
    Route::get('orders', Orders::class)->name('orders');
});

...

• Line 16: update route('home') to route('admin.orders')

@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('admin.covers') }}">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('admin.orders') }}">Orders</x-jet-dropdown-link>
@endif

Exercise: orders overview

TIP

• The code for the orders overview is almost the same as the code for the order history for the users
• Most of the code can be copied from the user history page, but there are some differences

• The recordset is not filtered by the user id, but contains all orders
• The recordset is ordered descending by the order date (last order comes first)
• Also add some pagination to the recordset because there can be a lot of orders
  (Pagination is not visible in the screenshot below because there are only 4 orders)
• Notice that every card (every order) contains data from three different tables:
  • table orderlines (red)
  • table orders (green)
  • table users (yellow)

REMARK

• To make it easier to understand what's happening behind the scenes, you first have to make a couple of orders with different users
• It's important that the last order, in this example the order with id = 4 (marked as # 4):
  • comes from the user ITF User 25 (email: itf_user_25@mailinator.com and password: itfuser25)
  • contains the records 1 x The Clash - London Calling and 2 x Sonic Youth - EVOL
• We already know how to add the relation between the order and the orderlines, but now we have to add the relation between the order and the user as well
  • Order with relation to the orderlines: Order::with('orderlines')->...
  • Order with relation to the users: Order::with('users')->...
  • Order with relation to the orderlines AND to the user: Order::with('orderlines', 'users')->...
• Pay special attention to the date inside the card header!
  • When adding the date using $order->created_at, you get the full date with the timestamp 2022-11-10 09:15:18, as this is the format in our database
  • The created_at property and the updated_at property are automatically cast to a Carbon object when you use the withTimestamps() method in the model, so you can use the format() method directly to format the date
  • You can format a date field inside Blade with format()
    • The format string argument within this method corresponds to the default PHP date formats (opens new window), e.g:
      $order->created_at->format('M d Y') returns Nov 10 2022
$order->created_at->format('l: n-j-Y') returns Thursday: 11-10-2022