Admin: order history

PODCAST

• 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

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.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::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');
    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