Admin: order history

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

Preparation

Create an Orders component

Create a new Livewire component with the terminal command php artisan livewire:make Admin/Orders
- app/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

php

<?php

namespace App\Livewire\Admin;

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

class Orders extends Component
{
    #[Layout('layouts.vinylshop', ['title' => 'Overview orders', 'description' => 'Overview orders'])]       

    public function render()
    {
        return view('livewire.admin.orders');
    }
}

<?php

namespace App\Livewire\Admin;

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

class Orders extends Component
{
    #[Layout('layouts.vinylshop', ['title' => 'Overview orders', 'description' => 'Overview orders'])]       

    public function render()
    {
        return view('livewire.admin.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.)

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::get('covers/{id?}', Covers::class)->name('covers');
    Route::get('orders', Orders::class)->name('orders');    
});

...

...

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::get('covers/{id?}', Covers::class)->name('covers');
    Route::get('orders', Orders::class)->name('orders');    
});

...

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 2023-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, e.g:
    $order->created_at->format('M d Y') returns Nov 10 2023
    $order->created_at->format('l: n-j-Y') returns Thursday: 11-10-2023

Admin: order history ​

Preparation ​

Create an Orders component ​

Add a new route ​

Exercise: orders overview ​

Admin: order history

Preparation

Create an Orders component

Add a new route

Exercise: orders overview