# Shop: detail section

Clicking on "show tracks" will show a popup with the tracks of the album
The tracks are not stored in the database, but are retrieved from the MusicBrainz API (opens new window) where the attribute mb_id in our database is the unique key of the album
- E.g. the album Rumours by Fleetwood Mac has the mb_id value 081ea37e-db59-4332-8cd2-ad020cb93af6
- https://musicbrainz.org/ws/2/release/081ea37e-db59-4332-8cd2-ad020cb93af6?inc=recordings&fmt=json (opens new window)
- We will extract the tracks (position, title and length) from the JSON response and show them in a table

tracks

# Get selected record

We will use the wire:click attribute on the Show Tracks icon to pass the id of the selected record to the showTracks method in the component
The showTracks method will retrieve the record from the database and store it in a new public property $selectedRecord

Add the wire:click attribute to the Show Tracks icon

<div class="w-6 cursor-pointer hover:text-red-900">
    <x-phosphor-music-notes-light
        wire:click="showTracks({{ $record->id }})"
        class="outline-0"
        data-tippy-content="Show tracks"/>
</div>
 
        Copied!

1
2
3
4
5
6

Line 8: add a public property $selectedRecord
Line 10: create a public method showTracks that takes the id of the selected record as a parameter $record
- Line 12: store the parameter $record in the public property $selectedRecord
- Line 13: (temporary) dump the property $selectedRecord to the page

class Shop extends Component
{
    use WithPagination;

    // public properties
    public $perPage = 6;
    public $loading = 'Please wait...';
    public $selectedRecord;
    
    public function showTracks($record)
    {
        $this->selectedRecord = $record;
        dump($this->selectedRecord);
    }

    public function render() { ... }
}
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Instead of only the id we want to store the complete record in the public property $selectedRecord
The long way is to query the database for the record with the id and store the result in the public property $selectedRecord
But there is a better way: we can use Laravel's Route Model Binding (opens new window) to get the complete record with only the id as a parameter in the method showTracks

Line 1: type-hint the parameter $record with the model Record => replace showTracks($record) with showTracks(Record $record)
Line 4: dump the property $selectedRecord as an array to the page (add ->toArray())

public function showTracks(Record $record)
{
    $this->selectedRecord = $record;
    dump($this->selectedRecord->toArray());
}
 
        Copied!

1
2
3
4
5

Now we have the complete record in the public property $selectedRecord, we can use it to pop up a modal
Let's start with only the artist, the title of the album and the cover image

Paste the following code just before the last closing </div> tag
When the page first loads, the property $selectedRecord is empty and to avoid errors, we need to catch this in the model
- Line 6: if $selectedRecord->title doesn't exist, show the string Title
- Line 7: if $selectedRecord->artist doesn't exist, show the string Artist
- Line 10: if $selectedRecord->cover['url] doesn't exist, show a dummy cover image
- Line 12: if $selectedRecord has no tracks, hide the table
  (We push the tracks later in the array, so for now it doesn't exist)

{{-- Detail section --}}
<div class="fixed z-40 inset-0 p-8 grid h-screen place-items-center backdrop-blur-sm backdrop-grayscale-[.7] bg-slate-100/70">
    <div class="bg-white p-4 border border-gray-300 max-w-2xl">
        <div class="flex justify-between space-x-4 pb-2 border-b border-gray-300">
            <h3 class="font-medium">
                {{ $selectedRecord->title ?? 'Title' }}<br/>
                <span class="font-light">{{ $selectedRecord->artist ?? 'Artist' }}</span>
            </h3>
            <img class="w-20 h-20"
                 src="{{ $selectedRecord->cover['url'] ?? asset('storage/covers/no-cover.png') }}" alt="">
        </div>
        @isset($selectedRecord->tracks)
            <table class="w-full text-left align-top">
                <thead>
                <tr>
                    <th class="px-4 py-2">#</th>
                    <th class="px-4 py-2">Track</th>
                    <th class="px-4 py-2">Length</th>
                </tr>
                </thead>
                <tbody>
                <tr class="border-t border-gray-100">
                    <td class="px-4 py-2">........</td>
                    <td class="px-4 py-2">........</td>
                    <td class="px-4 py-2">........</td>
                </tr>
                </tbody>
            </table>
        @endisset
    </div>
</div>
 
        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
26
27
28
29
30
31

Luckily for us, Alpine and Livewire work together very well (both frameworks are from the same author)
With @entangle we can sync a public property from the Livewire component with an Alpine variable
- When a property in Livewire changes, the Alpine variable changes too
- When the Alpine variable changes, the Livewire property changes too
This is the technique we're going to use to show and hide the modal

Line 2: add a public property $showModal and set it default to false
(We can use the value of this variable with @entangle('showModal') in Alpine)
Line 14: after loading the selected record, set the property $showModal to true

class Shop extends Component
{
    use WithPagination;

    // public properties
    public $perPage = 6;
    public $loading = 'Please wait...';
    public $selectedRecord;
    public $showModal = false;

    public function showTracks(Record $record)
    {
        $this->selectedRecord = $record;
        $this->showModal = true;
        // dump($this->selectedRecord->toArray());
    }
    
    ...
}
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Line 3: initialize the component with x-data="{ open: @entangle('showModal') }"
- If the $showModal property in Livewire is false, then we have open: false in Alpine
- If the $showModal property in Livewire is true, then we have open: true in Alpine
Line 4: add the x-cloack directive to hide the modal until the Alpine variable open is set to true
Line 5: the modal is hidden by default, but when you click on Show tracks the $showModal property changes to true and the modal becomes visible
Line 6: the modal fades in and out with a duration of 500 milliseconds
Set the open value to false (both in Alpine and in Livewire) when:
- Line 9: clicking outside the modal
- Line 10: hitting the enter (return) key on the keyboard
- Line 11: hitting the escape key on the keyboard

{{-- Detail section --}}
<div
     x-data="{ open: @entangle('showModal') }"
     x-cloak
     x-show="open"
     x-transition.duration.500ms
     class="fixed z-40 inset-0 p-8 grid h-screen place-items-center backdrop-blur-sm backdrop-grayscale-[.7] bg-slate-100/70">
    <div
        @click.away="open = false;"
        @keyup.enter.window="open = false;"
        @keyup.esc.window="open = false;"
        class="bg-white p-4 border border-gray-300 max-w-2xl">
        <div class="flex justify-between space-x-4 pb-2 border-b border-gray-300">
            ...
    </div>
</div>
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# Get all tracks for the selected record

Get tracks info from MusicBrainz API (opens new window) with the Laravel HTTP client (opens new window)
- Get only the JSON data from the result

Line 4: the URL which contains the mb_id of the selected record
Line 5: $response fetches the URL with the Laravel HTTP client (include use Http;) and convert the result to JSON data
($response contains all the data from the API, like we can see in the first screenshot of this chapter)
Line 6:
- push a new key tracks to the selected record $this->selectedRecord['tracks']
- select only the tracks-array in the response ($response['media'][0]['tracks']) and add them to the tracks key
Line 7: (temporary) dump and die the selected record, with the tracks, to the page

public function showTracks(Record $record)
{
    $this->selectedRecord = $record;
    $url = "https://musicbrainz.org/ws/2/release/{$record->mb_id}?inc=recordings&fmt=json";
    $response = Http::get($url)->json();
    $this->selectedRecord['tracks'] = $response['media'][0]['tracks'];
    dd($this->selectedRecord->toArray());
    $this->showModal = true;
}
 
        Copied!

1
2
3
4
5
6
7
8
9

Tracks from API response

Line 11 - 17: loop over the tracks and show the title and duration (you don't need a wire:key here, because it's a static list)
Line 13 - 55: show the position, the title and the duration (length) of each track

@isset($selectedRecord->tracks)
<table class="w-full text-left align-top">
    <thead>
    <tr>
        <th class="px-4 py-2">#</th>
        <th class="px-4 py-2">Track</th>
        <th class="px-4 py-2">Length</th>
    </tr>
    </thead>
    <tbody>
    @foreach($selectedRecord['tracks'] as $track)
        <tr class="border-t border-gray-100">
            <td class="px-4 py-2">{{ $track['position'] }}</td>
            <td class="px-4 py-2">{{ $track['title'] }}</td>
            <td class="px-4 py-2">{{ $track['length'] }}</td>
        </tr>
    @endforeach
    </tbody>
</table>
@endisset
 
        Copied!

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

Don't forget to comment the dump in Livewire/Shop.php!

# Reformat the track length with Carbon

The track length is in milliseconds, so we need to convert it to mm:ss
You can make a custom function for it that handles the transformation, but we prefer to use the Carbon (opens new window) package for this
- Carbon is an easy to use PHP extension for date/time manipulation and formatting
- Carbon is by default installed in in every Laravel project
The Carbon method we need is createFromTimestampMs($milliseconds)->format('i:s') (opens new window)
- createFromTimestampMs creates a Carbon object from a timestamp in $milliseconds
- format formats the Carbon object to a string

Line 6: wrap the length of the song in a Carbon object
IMPORTANT
- Because there is no Blade helper for Carbon, we need to use the full namespace for the class Carbon\Carbon::createFromTimestampMs($milliseconds)->format('i:s')
- Another option is to use the use statement at the top of the file: @php use Carbon\Carbon; @endphp and then use Carbon::createFromTimestampMs($milliseconds)->format('i:s') in the view

<tbody>
@foreach($selectedRecord['tracks'] as $track)
    <tr class="border-t border-gray-100">
        <td class="px-4 py-2">{{ $track['position'] }}</td>
        <td class="px-4 py-2">{{ $track['title'] }}</td>
        <td class="px-4 py-2">{{ \Carbon\Carbon::createFromTimestampMs($track['length'])->format('i:s') }}</td>
    </tr>
@endforeach
</tbody>
 
        Copied!

1
2
3
4
5
6
7
8
9

# Shop: detail section

# Get selected record

# Add a modal to the view

# Show and hide the modal with Alpine

# Get all tracks for the selected record

# Show tracks in the modal

# Reformat the track length with Carbon