Skip to content

Commit b36e889

Browse files
AzGasimAzGasim
committed
pagination
1 parent b8e7d00 commit b36e889

File tree

3 files changed

+116
-110
lines changed

3 files changed

+116
-110
lines changed

‎packages/media/resources/views/livewire/media-picker-modal.blade.php‎

Lines changed: 40 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<x-filament::modal id="mediaPickerModal" width="max-w-7xl">
1+
<x-filament::modal id="mediaPickerModal" width="7xl">
22
<x-slot name="header">
33
<h2 class="text-lg font-bold">Upload & Select Media</h2>
44
</x-slot>
55

6-
<div>
6+
<div class="min-w-[1000px]">
77
@if($modelId)
88
<livewire:media-uploader :model-id="$modelId" :model-class="$modelClass" collection="default" />
99
@endif
@@ -73,48 +73,49 @@ class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 foc
7373
@endphp
7474

7575
<x-filament::grid class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
76-
@foreach ($media as $item)
77-
@php
78-
$mimeType = $item->mime_type;
79-
$fileData = $mimeTypeLabels[$mimeType] ?? null;
80-
@endphp
81-
82-
<div wire:click="toggleMediaSelection({{ $item->id }})"
83-
class="relative rounded-lg shadow-md overflow-hidden bg-gray-100 hover:shadow-lg transition cursor-pointer
84-
{{ in_array($item->id, $selectedMediaIds) ? 'ring-2 ring-blue-600' : 'border border-gray-200' }}
85-
{{ $selectedMediaMeta['id'] == $item->id ? 'ring-4 ring-blue-700 border-2 border-blue-700' : '' }}">
86-
87-
@if ($fileData)
88-
<div class="flex flex-col justify-between items-center w-full h-32 bg-gray-200">
89-
<x-filament::icon icon="{{ $fileData['icon'] }}" class="w-16 h-16 text-gray-600" />
90-
<div
91-
class="text-xs text-gray-700 w-full mt-2 overflow-hidden text-ellipsis whitespace-normal break-words px-2">
92-
{{ $item->file_name }}
76+
@if($mediaItems)
77+
@foreach ($mediaItems as $item)
78+
@php
79+
$mimeType = $item['mime_type'];
80+
$fileData = $mimeTypeLabels[$mimeType] ?? null;
81+
@endphp
82+
83+
<div wire:click="toggleMediaSelection({{ $item['id'] }})"
84+
class="relative rounded-lg shadow-md overflow-hidden bg-gray-100 hover:shadow-lg transition cursor-pointer
85+
{{ in_array($item['id'], $selectedMediaIds) ? 'ring-2 ring-blue-600' : 'border border-gray-200' }}
86+
{{ $selectedMediaMeta['id'] == $item['id'] ? 'ring-4 ring-blue-700 border-2 border-blue-700' : '' }}">
87+
@if ($fileData)
88+
<div class="flex flex-col justify-between items-center w-full h-32 bg-gray-200">
89+
<x-filament::icon icon="{{ $fileData['icon'] }}" class="w-16 h-16 text-gray-600" />
90+
<div
91+
class="text-xs text-gray-700 w-full mt-2 overflow-hidden text-ellipsis whitespace-normal break-words px-2">
92+
{{ $item['file_name'] }}
93+
</div>
94+
</div>
95+
@else
96+
<div class="relative w-full h-32">
97+
<img src="{{ $item['original_url'] }}" class="object-cover w-full h-full rounded-t-lg" />
98+
</div>
99+
@endif
100+
101+
@if(in_array($item['id'], $selectedMediaIds))
102+
<div class="absolute top-1 right-1">
103+
<x-filament::icon icon="heroicon-o-check-circle" class="w-6 h-6" fill="#3B82F6" />
104+
</div>
105+
@endif
93106
</div>
94-
</div>
95-
@else
96-
<div class="relative w-full h-32">
97-
<img src="{{ $item->getUrl() }}" class="object-cover w-full h-full rounded-t-lg" />
98-
</div>
99-
@endif
100-
101-
@if(in_array($item->id, $selectedMediaIds))
102-
<div class="absolute top-1 right-1">
103-
<x-filament::icon icon="heroicon-o-check-circle" class="w-6 h-6" fill="#3B82F6" />
104-
</div>
105-
@endif
106-
</div>
107-
@endforeach
107+
@endforeach
108+
@endif
108109
</x-filament::grid>
109110

111+
<div class="pt-4 mt-4">
112+
<x-filament::pagination :paginator="$mediaItems" />
113+
</div>
110114

111115
</x-filament::section>
112116
</div>
113117

114118
<div class="w-full md:w-2/5 lg:w-1/3 max-w-md flex-shrink-0 border-l pl-4">
115-
<x-filament::button wire:click="applySelection" color="primary" class="mb-4 w-full">
116-
Auswahl übernehmen
117-
</x-filament::button>
118119
<x-filament::section>
119120
<h3 class="text-lg font-semibold mb-4">Metadaten bearbeiten</h3>
120121

@@ -171,10 +172,10 @@ class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 foc
171172
</div>
172173
</div>
173174

174-
175-
176-
177175
<x-slot name="footer">
176+
<x-filament::button wire:click="applySelection" color="primary" class="mb-4">
177+
Auswahl übernehmen
178+
</x-filament::button>
178179
<x-filament::button wire:click="$dispatch('close-modal', { id: 'mediaPickerModal' })">
179180
Schließen
180181
</x-filament::button>

‎packages/media/resources/views/livewire/media-uploader.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<div>
22
@filepondScripts
33
<x-filepond::upload wire:model="file" multiple max-files="5" />
4-
</div>
4+
</div>

‎packages/media/src/Http/Livewire/MediaPickerModal.php‎

Lines changed: 75 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,19 @@
33
namespace Moox\Media\Http\Livewire;
44

55
use Livewire\Component;
6+
use Livewire\WithPagination;
67
use Moox\Media\Models\Media;
8+
use Illuminate\Contracts\Pagination\LengthAwarePaginator;
79

810
class MediaPickerModal extends Component
911
{
12+
use WithPagination;
13+
1014
public ?int $modelId = null;
1115

1216
public ?string $modelClass = null;
1317

14-
public array $media = [];
18+
public $media;
1519

1620
public array $selectedMediaIds = [];
1721

@@ -47,65 +51,7 @@ public function setModel(?int $modelId, string $modelClass): void
4751

4852
public function refreshMedia()
4953
{
50-
$this->media = Media::query()
51-
->when($this->searchQuery, function ($query) {
52-
$query->where(function ($subQuery) {
53-
$subQuery->where('file_name', 'like', '%'.$this->searchQuery.'%')
54-
->orWhere('title', 'like', '%'.$this->searchQuery.'%')
55-
->orWhere('description', 'like', '%'.$this->searchQuery.'%')
56-
->orWhere('alt', 'like', '%'.$this->searchQuery.'%');
57-
});
58-
})
59-
->when($this->fileTypeFilter, function ($query) {
60-
switch ($this->fileTypeFilter) {
61-
case 'images':
62-
$query->whereIn('mime_type', [
63-
'image/jpeg',
64-
'image/png',
65-
'image/webp',
66-
'image/svg+xml',
67-
]);
68-
break;
69-
case 'videos':
70-
$query->whereIn('mime_type', [
71-
'video/mp4',
72-
'video/webm',
73-
]);
74-
break;
75-
case 'audios':
76-
$query->whereIn('mime_type', [
77-
'audio/mpeg',
78-
'audio/ogg',
79-
]);
80-
break;
81-
case 'documents':
82-
$query->whereIn('mime_type', [
83-
'application/pdf',
84-
'application/msword',
85-
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
86-
]);
87-
break;
88-
}
89-
})
90-
->when($this->dateFilter, function ($query) {
91-
switch ($this->dateFilter) {
92-
case 'today':
93-
$query->whereDate('created_at', now()->toDateString());
94-
break;
95-
case 'week':
96-
$query->whereBetween('created_at', [now()->subDays(7), now()]);
97-
break;
98-
case 'month':
99-
$query->whereBetween('created_at', [now()->subMonth(), now()]);
100-
break;
101-
case 'year':
102-
$query->whereBetween('created_at', [now()->subYear(), now()]);
103-
break;
104-
}
105-
})
106-
->orderBy('created_at', 'desc')
107-
->get()
108-
->all();
54+
$this->render();
10955
}
11056

11157
public function toggleMediaSelection(int $mediaId)
@@ -117,7 +63,7 @@ public function toggleMediaSelection(int $mediaId)
11763
$this->selectedMediaIds[] = $mediaId;
11864
}
11965
} else {
120-
if (! empty($this->selectedMediaIds) && $this->selectedMediaIds[0] === $mediaId) {
66+
if (!empty($this->selectedMediaIds) && $this->selectedMediaIds[0] === $mediaId) {
12167
$this->selectedMediaIds = [];
12268
} else {
12369
$this->selectedMediaIds = [$mediaId];
@@ -154,15 +100,15 @@ public function applySelection()
154100
$selectedMedia = Media::whereIn('id', $this->selectedMediaIds)->get();
155101

156102
if ($selectedMedia->isNotEmpty()) {
157-
if (! $this->multiple) {
103+
if (!$this->multiple) {
158104
$media = $selectedMedia->first();
159105
$this->dispatch('mediaSelected', [
160106
'id' => $media->id,
161107
'url' => $media->getUrl(),
162108
'file_name' => $media->file_name,
163109
]);
164110
} else {
165-
$selectedMediaData = $selectedMedia->map(fn ($media) => [
111+
$selectedMediaData = $selectedMedia->map(fn($media) => [
166112
'id' => $media->id,
167113
'url' => $media->getUrl(),
168114
'file_name' => $media->file_name,
@@ -189,25 +135,84 @@ public function updatedSelectedMediaMeta($value, $field)
189135
}
190136
}
191137

192-
public function updatedSearchQuery()
138+
public function updatingSearchQuery()
193139
{
194-
$this->refreshMedia();
140+
$this->resetPage();
195141
}
196142

197-
public function updatedFileTypeFilter()
143+
public function updatingFileTypeFilter()
198144
{
199-
$this->refreshMedia();
145+
$this->resetPage();
200146
}
201147

202-
public function updatedDateFilter()
148+
public function updatingDateFilter()
203149
{
204-
$this->refreshMedia();
150+
$this->resetPage();
205151
}
206152

207153
public function render()
208154
{
155+
$media = Media::query()
156+
->when($this->searchQuery, function ($query) {
157+
$query->where(function ($subQuery) {
158+
$subQuery->where('file_name', 'like', '%' . $this->searchQuery . '%')
159+
->orWhere('title', 'like', '%' . $this->searchQuery . '%')
160+
->orWhere('description', 'like', '%' . $this->searchQuery . '%')
161+
->orWhere('alt', 'like', '%' . $this->searchQuery . '%');
162+
});
163+
})
164+
->when($this->fileTypeFilter, function ($query) {
165+
switch ($this->fileTypeFilter) {
166+
case 'images':
167+
$query->whereIn('mime_type', [
168+
'image/jpeg',
169+
'image/png',
170+
'image/webp',
171+
'image/svg+xml',
172+
]);
173+
break;
174+
case 'videos':
175+
$query->whereIn('mime_type', [
176+
'video/mp4',
177+
'video/webm',
178+
]);
179+
break;
180+
case 'audios':
181+
$query->whereIn('mime_type', [
182+
'audio/mpeg',
183+
'audio/ogg',
184+
]);
185+
break;
186+
case 'documents':
187+
$query->whereIn('mime_type', [
188+
'application/pdf',
189+
'application/msword',
190+
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
191+
]);
192+
break;
193+
}
194+
})
195+
->when($this->dateFilter, function ($query) {
196+
switch ($this->dateFilter) {
197+
case 'today':
198+
$query->whereDate('created_at', now()->toDateString());
199+
break;
200+
case 'week':
201+
$query->whereBetween('created_at', [now()->subDays(7), now()]);
202+
break;
203+
case 'month':
204+
$query->whereBetween('created_at', [now()->subMonth(), now()]);
205+
break;
206+
case 'year':
207+
$query->whereBetween('created_at', [now()->subYear(), now()]);
208+
break;
209+
}
210+
})
211+
->orderBy('created_at', 'desc')
212+
->paginate(18);
213+
209214
return view('media::livewire.media-picker-modal', [
210-
'media' => $this->media,
215+
'mediaItems' => $media,
211216
]);
212217
}
213218
}

0 commit comments

Comments
 (0)