# 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',
            ]);
    }
}
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11

# 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');
});

...
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 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)

Database model

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