nurmuhammet/tbbank-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor media display logic in SpatieMediaLibraryFileEntry component

Browse Source 
- Simplified media handling by removing the check for images only.
- Updated grid layout for media items to use a consistent column size.
- Enhanced modal functionality to open specific image previews based on item ID.
- Improved code readability by renaming variables and streamlining the foreach loop.
This commit is contained in:
Nurmuhammet Allanov
2025-12-09 01:40:07 +05:00
parent c56e3383d1
commit 4c0917e6ba
1 changed files with 57 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
resources/views/filament/infolists/components/spatie-media-library-file-entry.blade.php
View File

@@ -1,96 +1,85 @@
<x-filament-infolists::entry-wrapper :entry="$entry"> <x-filament-infolists::entry-wrapper :entry="$entry">
@php @php
$media = $getMedia(); $media = $getMedia();
$hasImagesOnly = $media->every(fn($m) => str_starts_with($m->mime_type, 'image/'));
@endphp @endphp
@if ($media->isEmpty()) @if ($media->isEmpty())
<div class="flex items-center justify-center rounded-xl border border-dashed border-gray-200 bg-white/50 p-4 text-sm text-gray-500 dark:border-white/10 dark:bg-white/5 dark:text-gray-400"> <div class="flex items-center justify-center rounded-xl border border-dashed border-gray-200 bg-white/50 p-4 text-sm text-gray-500 dark:border-white/10 dark:bg-white/5 dark:text-gray-400">
{{ __('No files uploaded') }} {{ __('No files uploaded') }}
</div> </div>
@elseif ($hasImagesOnly) @else
<div <div
@class([ @class([
'grid gap-4', 'grid gap-4',
'grid-cols-[repeat(auto-fill,minmax(120px,1fr))]' => $media->count() > 1, 'grid-cols-[repeat(auto-fill,minmax(200px,1fr))]',
]) ])
> >
@foreach ($media as $medium) @foreach ($media as $item)
<div class="flex flex-col items-center gap-2"> @if (str_starts_with($item->mime_type, 'image/'))
<img <div class="flex flex-col items-center gap-2">
src="{{ $entry->getMediaUrl($medium, $media->count() > 1 ? 'thumb' : null) }}" <img
class="w-full rounded-lg" src="{{ $entry->getMediaUrl($item, $media->count() > 1 ? 'thumb' : null) }}"
/> class="w-full rounded-lg"
<button />
type="button" <button
class="text-sm font-medium text-primary-600 decoration-2 center underline focus:outline-none dark:text-primary-500" type="button"
@click="$dispatch('open-modal', { id: 'preview-image' })" class="text-sm font-medium text-primary-600 decoration-2 center underline focus:outline-none dark:text-primary-500"
> @click="$dispatch('open-modal', { id: 'preview-image-{{ $item->id }}' })"
{{ __('Watch Full') }} >
</button> {{ __('Watch Full') }}
</div> </button>
</div>
<x-filament::modal id="preview-image" width="5xl" :close-button="true"> <x-filament::modal id="preview-image-{{ $item->id }}" width="5xl" :close-button="true">
<x-slot name="heading"> <x-slot name="heading">
{{ $getLabel() }} {{ $getLabel() }}
</x-slot> </x-slot>
<img <img
src="{{ $entry->getMediaUrl($medium) }}" src="{{ $entry->getMediaUrl($item) }}"
class="w-full h-full object-contain" class="w-full h-full object-contain"
/> />
</x-filament::modal> </x-filament::modal>
@endforeach @else
</div> <div class="flex items-center gap-3 rounded-xl border border-gray-200 bg-white p-2 shadow-sm dark:border-white/10 dark:bg-white/5">
@else <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-gray-100 dark:bg-white/10 overflow-hidden">
<div class="flex flex-col gap-3">
@foreach ($getMedia() as $media)
<div class="flex items-center gap-3 rounded-xl border border-gray-200 bg-white p-2 shadow-sm dark:border-white/10 dark:bg-white/5">
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-gray-100 dark:bg-white/10 overflow-hidden">
@if (str_starts_with($media->mime_type, 'image/'))
<img
src="{{ $media->hasGeneratedConversion('thumb') ? $entry->getMediaUrl($media, 'thumb') : $entry->getMediaUrl($media) }}"
alt="{{ $media->name }}"
class="h-full w-full object-cover"
/>
@else
<div class="flex h-full w-full items-center justify-center bg-white dark:bg-gray-800"> <div class="flex h-full w-full items-center justify-center bg-white dark:bg-gray-800">
<x-filament::icon <x-filament::icon
icon="heroicon-o-document" icon="heroicon-o-document"
class="h-6 w-6 text-gray-500 dark:text-gray-400" class="h-6 w-6 text-gray-500 dark:text-gray-400"
/> />
</div> </div>
@endif </div>
</div>
<div class="flex-grow overflow-hidden"> <div class="flex-grow overflow-hidden">
<p class="truncate text-sm font-medium text-gray-950 dark:text-white" title="{{ $media->name }}"> <p class="truncate text-sm font-medium text-gray-950 dark:text-white" title="{{ $item->name }}">
{{ $media->name }} {{ $item->name }}
</p> </p>
<p class="text-xs text-gray-500 dark:text-gray-400"> <p class="text-xs text-gray-500 dark:text-gray-400">
{{ $media->human_readable_size }} {{ $item->human_readable_size }}
<span class="text-gray-300 dark:text-gray-600 px-1">•</span> <span class="text-gray-300 dark:text-gray-600 px-1">•</span>
<span class="uppercase">{{ $media->extension }}</span> <span class="uppercase">{{ $item->extension }}</span>
</p> </p>
</div> </div>
<div class="flex shrink-0 items-center gap-2 pr-2"> <div class="flex shrink-0 items-center gap-2 pr-2">
@if ($isPreviewable()) @if ($isPreviewable())
<a <a
href="{{ $entry->getMediaUrl($media) }}" href="{{ $entry->getMediaUrl($item) }}"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="flex items-center justify-center h-8 w-8 rounded-full hover:bg-gray-50 dark:hover:bg-white/10 text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-500 transition-colors" class="flex items-center justify-center h-8 w-8 rounded-full hover:bg-gray-50 dark:hover:bg-white/10 text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-500 transition-colors"
title="{{ __('View') }}" title="{{ __('View') }}"
> >
<x-filament::icon <x-filament::icon
icon="heroicon-m-eye" icon="heroicon-m-eye"
class="h-5 w-5" class="h-5 w-5"
/> />
</a> </a>
@endif @endif
</div>
</div> </div>
</div> @endif
@endforeach @endforeach
</div> </div>
@endif @endif