# Admin: covers (part 2)

If, for whatever reason, any covers remain in storage, we are going to show and delete them in this chapter
Remember that this chapter only works when the route contains no parameter:
http://vinyl_shop.test/admin/covers/ (opens new window)
Maybe it's best to start with a clean slate and install the original covers again:
- Select all files in the storage/app/public/covers folder and delete them
- Open http://vinyl_shop.test/download_covers.php (opens new window) in the browser to download the original covers

# Get all the covers

Let's start with fetching all the covers from the disk and show them in a grid

Line 20: get all the files from the covers folder
Line 21: store the result in the $redundantCovers property

class Covers extends Component
{

    use WithFileUploads;

    public $showModal = false;
    public $record = null;
    public $newCover;
    public $redundantCovers = [];
    
    ... 
    
    public function mount($id = null)
    {
        if ($id) {
            // get the selected record if id is not null
            $this->record = Record::findOrFail($id);
        } else {
            // get all the redundant covers from the disk
            $covers = Storage::disk('public')->files('covers');
            $this->redundantCovers = $covers;
        }
    }

}
 
        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

Loop over the $redundantCovers array, show the cover in a grid and add a delete button

<div>
    @if($record)
        ... 
    @else
        <h1 class="text-3xl mb-4">Redundant covers</h1>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            @foreach($redundantCovers as $cover)
                <figure class="relative">
                    <img class="border border-gray-300 rounded shadow-lg"
                        src="{{ '/storage/' . $cover }}" alt="">
                    <figcaption
                        class="absolute -top-2 -left-2 w-12 h-12 border border-red-700 bg-red-500 hover:bg-red-700 text-white p-3 rounded-full shadow-lg cursor-pointer">
                        <x-phosphor-trash-fill />
                    </figcaption>
                </figure>
            @endforeach
        </div>
    @endif
</div>
 
        Copied!

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

# Remove the dummy cover

Line 8: remove the no-cover.png from the array

public function mount($id = null)
{
    if ($id) { ... }
    else {
        // get all the redundant covers from the disk
        $covers = Storage::disk('public')->files('covers');
        // remove no-cover.png from the array
        $covers = array_diff($covers, ['covers/no-cover.png']);
        $this->redundantCovers = $covers;
    }
}
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11

# Get all the covers from the database

Line 10: get all the records from the database
Line 11: initialize an empty array where we will store the paths to the covers
Line 12 - 14: loop over the records and add the path to the cover to the array
Line 15: dump the array to the browser (temporary)

public function mount($id = null)
{
    if ($id) { ... }
    else {
        // get all the redundant covers from the disk
        $covers = Storage::disk('public')->files('covers');
        // remove no-cover.png from the array
        $covers = array_diff($covers, ['covers/no-cover.png']);
        // get all the covers from the records table
        $records = Record::get();
        $dbCovers = [];
        foreach ($records as $record) {
            $dbCovers[] = 'covers/' . $record->mb_id . '.jpg';
        }
        dump($dbCovers);
        $this->redundantCovers = $covers;
    }
}
 
        Copied!

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

# Remove used covers from the array

Line 15: hide (or remove) the temporary dump
Line 17: limit $covers to the covers that are not in the $dbCovers array

public function mount($id = null)
{
    if ($id) { ... }
    else {
        // get all the redundant covers from the disk
        $covers = Storage::disk('public')->files('covers');
        // remove no-cover.png from the array
        $covers = array_diff($covers, ['covers/no-cover.png']);
        // get all the covers from the records table
        $records = Record::get();
        $dbCovers = [];
        foreach ($records as $record) {
            $dbCovers[] = 'covers/' . $record->mb_id . '.jpg';
        }
        // dump($dbCovers);
        // limit $covers to the covers that are not in the $dbCovers array
        $covers = array_diff($covers, $dbCovers);
        $this->redundantCovers = $covers;
    }
}
 
        Copied!

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

# Delete the cover

We already have a delete method from the previous chapter, so we can refactor it a bit

Line 1: add a parameter $redundantCover to the method and give it a default value of null
Line 3 - 5: if $redundantCover is not null, remove the cover from the $redundantCovers array and delete the file from the disk
Line 7 - 8: if $redundantCover is null: this is the same code as before the refactoring

public function deleteCover($redundantCover = null)
{
    if ($redundantCover) {
        $this->redundantCovers = array_diff($this->redundantCovers, [$redundantCover]);
        Storage::disk('public')->delete($redundantCover);
    } else {
        $coverName = 'covers/' . $this->record->mb_id . '.jpg';
        Storage::disk('public')->delete($coverName);
    }
}
 
        Copied!

1
2
3
4
5
6
7
8
9
10

Line 6: add a wire:click attribute to the figcaption element and pass the path to the cover as a parameter to the deleteCover method

@foreach($redundantCovers as $cover)
    <figure class="relative">
        <img class="border border-gray-300 rounded shadow-lg"
            src="{{ '/storage/' . $cover }}" alt="">
        <figcaption
            wire:click="deleteCover('{{ $cover }}')"
            class="absolute -top-2 -left-2 w-12 h-12 border border-red-700 bg-red-500 hover:bg-red-700 text-white p-3 rounded-full shadow-lg cursor-pointer">
            <x-phosphor-trash-fill/>
        </figcaption>
    </figure>
@endforeach
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11