# 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/coversfolder and delete them - Open http://vinyl_shop.test/download_covers.php (opens new window) in the browser to download the original covers
- Select all files in the
# 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
coversfolder - Line 21: store the result in the
$redundantCoversproperty
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;
}
}
}
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
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
$redundantCoversarray, 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- For now, all the covers are shown (also the dummy cover no-cover.png)
# Remove the dummy cover
- Line 8: remove the
no-cover.pngfrom 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;
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- For now, all the covers are shown (also the dummy cover no-cover.png)
# 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;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- For now, all the covers are shown (also the dummy cover no-cover.png)
# Remove used covers from the array
- Line 15: hide (or remove) the temporary dump
- Line 17: limit
$coversto the covers that are not in the$dbCoversarray
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;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- The final result where only the covers are shown do not have a record in the database
# 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
$redundantCoverto the method and give it a default value ofnull - Line 3 - 5: if
$redundantCoveris notnull, remove the cover from the$redundantCoversarray and delete the file from the disk - Line 7 - 8: if
$redundantCoverisnull: 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);
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- Line 6: add a
wire:clickattribute to thefigcaptionelement and pass the path to the cover as a parameter to thedeleteCovermethod
@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
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- The result after clicking on the trash icon of the last cover
