Skip to content

Commit ab696bb

Browse files
AzGasimAzGasim
committed
File information for media picker, some refactoring
1 parent 6d5225a commit ab696bb

File tree

3 files changed

+180
-110
lines changed

3 files changed

+180
-110
lines changed

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

Lines changed: 107 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -176,69 +176,117 @@ class="text-xs text-gray-700 w-full mt-2 overflow-hidden text-ellipsis whitespac
176176
</x-filament::section>
177177
</div>
178178

179-
<div class="w-full md:w-2/5 lg:w-1/3 max-w-md flex-shrink-0 border-l pl-4">
180-
<x-filament::section>
181-
<h3 class="text-lg font-semibold mb-4">{{ __('media::fields.edit_metadata') }}</h3>
182-
183-
@if(!empty($selectedMediaMeta['id']))
184-
<form wire:submit.prevent="saveMetadata">
185-
<x-filament-forms::field-wrapper.label class="block text-sm font-medium text-gray-700 mb-1">
186-
{{ __('media::fields.title') }}
187-
</x-filament-forms::field-wrapper.label>
188-
<x-filament::input.wrapper class="mb-4">
189-
<x-filament::input type="text" wire:model.lazy="selectedMediaMeta.title" placeholder="{{ __('media::fields.title') }}"
190-
:disabled="(bool) $selectedMediaMeta['write_protected']"
191-
class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" />
192-
</x-filament::input.wrapper>
193-
194-
<x-filament-forms::field-wrapper.label class="block text-sm font-medium text-gray-700 mb-1">
195-
{{ __('media::fields.description') }}
196-
</x-filament-forms::field-wrapper.label>
197-
<x-filament::input.wrapper class="mb-4">
198-
<x-filament::input type="text" wire:model.lazy="selectedMediaMeta.description"
199-
placeholder="{{ __('media::fields.description') }}" :disabled="$selectedMediaMeta['write_protected'] === true"
200-
class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" />
201-
</x-filament::input.wrapper>
202-
203-
<x-filament-forms::field-wrapper.label class="block text-sm font-medium text-gray-700 mb-1">
204-
{{ __('media::fields.internal_note') }}
205-
</x-filament-forms::field-wrapper.label>
206-
<x-filament::input.wrapper class="mb-4">
207-
<x-filament::input type="text" wire:model.lazy="selectedMediaMeta.internal_note"
208-
placeholder="{{ __('media::fields.internal_note') }}" :disabled="$selectedMediaMeta['write_protected'] === true"
209-
class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" />
210-
</x-filament::input.wrapper>
211-
212-
<x-filament-forms::field-wrapper.label class="block text-sm font-medium text-gray-700 mb-1">
213-
{{ __('media::fields.alt_text') }}
214-
</x-filament-forms::field-wrapper.label>
215-
<x-filament::input.wrapper class="mb-4">
216-
<x-filament::input type="text" wire:model.lazy="selectedMediaMeta.alt" placeholder="{{ __('media::fields.alt_text') }}"
217-
:disabled="$selectedMediaMeta['write_protected'] === true"
218-
class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" />
219-
</x-filament::input.wrapper>
220-
221-
<x-filament-forms::field-wrapper.label class="block text-sm font-medium text-gray-700 mb-1">
222-
{{ __('media::fields.file_type') }}
223-
</x-filament-forms::field-wrapper.label>
224-
<x-filament::input.wrapper class="mb-4">
225-
<x-filament::input type="text" disabled wire:model.lazy="selectedMediaMeta.mime_type"
226-
class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" />
227-
</x-filament::input.wrapper>
228-
</form>
229-
@else
179+
<div class="w-full md:w-2/5 lg:w-1/3 max-w-md flex-shrink-0 border-l pl-4 flex flex-col h-full">
180+
@if(!empty($selectedMediaMeta['id']))
181+
<div class="flex-1">
182+
<x-filament::section>
183+
<div class="space-y-4">
184+
<div>
185+
<span class="text-sm font-medium text-gray-500">{{ __('media::fields.file_name') }}</span>
186+
<p class="mt-1 text-sm text-gray-900">{{ $selectedMediaMeta['file_name'] }}</p>
187+
</div>
188+
189+
<div>
190+
<span class="text-sm font-medium text-gray-500">{{ __('media::fields.file_type') }}</span>
191+
<p class="mt-1 text-sm text-gray-900">{{ $selectedMediaMeta['mime_type'] }}</p>
192+
</div>
193+
194+
<div>
195+
<span class="text-sm font-medium text-gray-500">{{ __('media::fields.size') }}</span>
196+
<p class="mt-1 text-sm text-gray-900">{{ number_format($selectedMediaMeta['size'] / 1024, 2) }} KB</p>
197+
</div>
198+
199+
<div>
200+
<span class="text-sm font-medium text-gray-500">{{ __('media::fields.dimensions') }}</span>
201+
<p class="mt-1 text-sm text-gray-900">{{ $selectedMediaMeta['dimensions']['width'] ?? '-' }} x {{ $selectedMediaMeta['dimensions']['height'] ?? '-' }}</p>
202+
</div>
203+
204+
<div>
205+
<span class="text-sm font-medium text-gray-500">{{ __('media::fields.created_at') }}</span>
206+
<p class="mt-1 text-sm text-gray-900">{{ $selectedMediaMeta['created_at'] ? \Carbon\Carbon::parse($selectedMediaMeta['created_at'])->format('d.m.Y H:i') : '-' }}</p>
207+
</div>
208+
209+
<div>
210+
<span class="text-sm font-medium text-gray-500">{{ __('media::fields.updated_at') }}</span>
211+
<p class="mt-1 text-sm text-gray-900">{{ $selectedMediaMeta['updated_at'] ? \Carbon\Carbon::parse($selectedMediaMeta['updated_at'])->format('d.m.Y H:i') : '-' }}</p>
212+
</div>
213+
214+
<div>
215+
<span class="text-sm font-medium text-gray-500">{{ __('media::fields.uploaded_by') }}</span>
216+
<p class="mt-1 text-sm text-gray-900">{{ $selectedMediaMeta['uploader_name'] ?? '-' }}</p>
217+
</div>
218+
</div>
219+
</x-filament::section>
220+
221+
<x-filament::section class="mt-2">
222+
<h3 class="text-lg font-semibold mb-4">{{ __('media::fields.metadata') }}</h3>
223+
<form wire:submit.prevent="saveMetadata">
224+
<x-filament-forms::field-wrapper.label class="block text-sm font-medium text-gray-700 mb-1">
225+
{{ __('media::fields.name') }}
226+
</x-filament-forms::field-wrapper.label>
227+
<x-filament::input.wrapper class="mb-4">
228+
<x-filament::input type="text" wire:model.lazy="selectedMediaMeta.name" placeholder="{{ __('media::fields.name') }}"
229+
:disabled="(bool) $selectedMediaMeta['write_protected']"
230+
class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" />
231+
</x-filament::input.wrapper>
232+
233+
<x-filament-forms::field-wrapper.label class="block text-sm font-medium text-gray-700 mb-1">
234+
{{ __('media::fields.title') }}
235+
</x-filament-forms::field-wrapper.label>
236+
<x-filament::input.wrapper class="mb-4">
237+
<x-filament::input type="text" wire:model.lazy="selectedMediaMeta.title" placeholder="{{ __('media::fields.title') }}"
238+
:disabled="(bool) $selectedMediaMeta['write_protected']"
239+
class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" />
240+
</x-filament::input.wrapper>
241+
242+
<x-filament-forms::field-wrapper.label class="block text-sm font-medium text-gray-700 mb-1">
243+
{{ __('media::fields.description') }}
244+
</x-filament-forms::field-wrapper.label>
245+
<x-filament::input.wrapper class="mb-4">
246+
<x-filament::input type="text" wire:model.lazy="selectedMediaMeta.description"
247+
placeholder="{{ __('media::fields.description') }}" :disabled="$selectedMediaMeta['write_protected'] === true"
248+
class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" />
249+
</x-filament::input.wrapper>
250+
251+
<x-filament-forms::field-wrapper.label class="block text-sm font-medium text-gray-700 mb-1">
252+
{{ __('media::fields.alt_text') }}
253+
</x-filament-forms::field-wrapper.label>
254+
<x-filament::input.wrapper class="mb-4">
255+
<x-filament::input type="text" wire:model.lazy="selectedMediaMeta.alt" placeholder="{{ __('media::fields.alt_text') }}"
256+
:disabled="$selectedMediaMeta['write_protected'] === true"
257+
class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" />
258+
</x-filament::input.wrapper>
259+
</form>
260+
</x-filament::section>
261+
262+
<x-filament::section class="mt-2">
263+
<h3 class="text-lg font-semibold mb-4">{{ __('media::fields.internal_note') }}</h3>
264+
<form wire:submit.prevent="saveMetadata">
265+
<x-filament::input.wrapper class="mb-4">
266+
<x-filament::input type="text" wire:model.lazy="selectedMediaMeta.internal_note"
267+
placeholder="{{ __('media::fields.internal_note') }}" :disabled="$selectedMediaMeta['write_protected'] === true"
268+
class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" />
269+
</x-filament::input.wrapper>
270+
</form>
271+
</x-filament::section>
272+
</div>
273+
274+
<div class="mt-2 flex gap-2 justify-end">
275+
<x-filament::button wire:click="applySelection" color="primary">
276+
{{ __('media::fields.apply_selection') }}
277+
</x-filament::button>
278+
<x-filament::button wire:click="$dispatch('close-modal', { id: 'mediaPickerModal' })">
279+
{{ __('media::fields.close') }}
280+
</x-filament::button>
281+
</div>
282+
@else
283+
<x-filament::section>
230284
<p class="text-gray-500">{{ __('media::fields.no_media_selected') }}</p>
231-
@endif
232-
</x-filament::section>
285+
</x-filament::section>
286+
@endif
233287
</div>
234288
</div>
235289

236290
<x-slot name="footer">
237-
<x-filament::button wire:click="applySelection" color="primary" class="mb-4">
238-
{{ __('media::fields.apply_selection') }}
239-
</x-filament::button>
240-
<x-filament::button wire:click="$dispatch('close-modal', { id: 'mediaPickerModal' })">
241-
{{ __('media::fields.close') }}
242-
</x-filament::button>
243291
</x-slot>
244292
</x-filament::modal>

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

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ class MediaPickerModal extends Component implements HasForms
4141
public array $selectedMediaMeta = [
4242
'id' => null,
4343
'file_name' => '',
44+
'name' => '',
4445
'title' => '',
4546
'description' => '',
4647
'internal_note' => '',
@@ -250,26 +251,47 @@ public function toggleMediaSelection(int $mediaId)
250251
$media = Media::where('id', $mediaId)->first();
251252

252253
if ($media) {
254+
$uploaderName = '-';
255+
if ($media->uploader) {
256+
if (isset($media->uploader->name)) {
257+
$uploaderName = $media->uploader->name;
258+
} elseif (isset($media->uploader->first_name) && isset($media->uploader->last_name)) {
259+
$uploaderName = $media->uploader->first_name . ' ' . $media->uploader->last_name;
260+
}
261+
}
262+
253263
$this->selectedMediaMeta = [
254264
'id' => $media->id,
255265
'file_name' => $media->file_name,
266+
'name' => $media->getAttribute('name') ?? '',
256267
'title' => $media->getAttribute('title') ?? '',
257268
'description' => $media->getAttribute('description') ?? '',
258269
'internal_note' => $media->getAttribute('internal_note') ?? '',
259270
'alt' => $media->getAttribute('alt') ?? '',
260271
'mime_type' => $media->mime_type ?? '',
261272
'write_protected' => (bool) $media->getOriginal('write_protected'),
273+
'size' => $media->size,
274+
'dimensions' => $media->getCustomProperty('dimensions', []),
275+
'created_at' => $media->created_at,
276+
'updated_at' => $media->updated_at,
277+
'uploader_name' => $uploaderName,
262278
];
263279
} else {
264280
$this->selectedMediaMeta = [
265281
'id' => null,
266282
'file_name' => '',
283+
'name' => '',
267284
'title' => '',
268285
'description' => '',
269286
'internal_note' => '',
270287
'alt' => '',
271288
'mime_type' => '',
272289
'write_protected' => false,
290+
'size' => 0,
291+
'dimensions' => [],
292+
'created_at' => null,
293+
'updated_at' => null,
294+
'uploader_name' => '-',
273295
];
274296
}
275297
}
@@ -311,7 +333,7 @@ public function updatedSelectedMediaMeta($value, $field)
311333
if ($this->selectedMediaMeta['id']) {
312334
$media = Media::where('id', $this->selectedMediaMeta['id'])->first();
313335

314-
if (in_array($field, ['title', 'description', 'internal_note', 'alt'])) {
336+
if (in_array($field, ['title', 'description', 'internal_note', 'alt', 'name'])) {
315337
if ($media->getOriginal('write_protected')) {
316338
return;
317339
}

0 commit comments

Comments
 (0)