feat: integrate Spatie Media Library (#4)
- Added Spatie Media Library - Added media library configuration file - Updated Entry model to support media handling - Added featured image upload with gallery selection and preview - Added login tests with Dusk for user authentication - Added Dusk test for featured image selection Co-authored-by: jon brookes <marshyon@gmail.com> Reviewed-on: https://codeberg.org/headshed/share-lt/pulls/4
This commit is contained in:
Jon Brookes
parent
6cf8d5dfd4
commit
56607285bd
38 changed files with 2200 additions and 16 deletions
|
|
@ -2,13 +2,18 @@
|
|||
|
||||
namespace App\Filament\Resources\Entries\Schemas;
|
||||
|
||||
use Filament\Actions\Action;
|
||||
use Filament\Forms\Components\DatePicker;
|
||||
use Filament\Forms\Components\RichEditor;
|
||||
use Filament\Forms\Components\TextInput;
|
||||
use Filament\Forms\Components\Select;
|
||||
use Filament\Forms\Components\SpatieMediaLibraryFileUpload;
|
||||
use Filament\Forms\Components\Textarea;
|
||||
use Filament\Forms\Components\TextInput;
|
||||
use Filament\Forms\Components\Toggle;
|
||||
use Filament\Schemas\Schema;
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
use Illuminate\Support\Str;
|
||||
use Spatie\MediaLibrary\MediaCollections\Models\Media;
|
||||
|
||||
class EntryForm
|
||||
{
|
||||
|
|
@ -18,22 +23,184 @@ class EntryForm
|
|||
->components([
|
||||
TextInput::make('title')
|
||||
->required()
|
||||
->reactive()
|
||||
->live(onBlur: true)
|
||||
->afterStateUpdated(function ($state, $set): void {
|
||||
$set('slug', Str::slug((string) $state));
|
||||
}),
|
||||
TextInput::make('slug')
|
||||
->required()
|
||||
->disabled(),
|
||||
->dehydrated()
|
||||
->readOnly(),
|
||||
Textarea::make('description')
|
||||
->columnSpanFull(),
|
||||
SpatieMediaLibraryFileUpload::make('featured_image')
|
||||
->collection('featured-image')
|
||||
->image()
|
||||
->imageEditor()
|
||||
->disk('public')
|
||||
->visibility('public')
|
||||
->columnSpanFull()
|
||||
->dehydrated(false)
|
||||
->hintAction(
|
||||
Action::make('featured_picker')
|
||||
->label('Featured Image from Gallery')
|
||||
->icon('heroicon-m-photo')
|
||||
->extraAttributes(['id' => 'featured-picker-button'])
|
||||
->schema([
|
||||
Select::make('image_id')
|
||||
->label('Select an existing image')
|
||||
->allowHtml()
|
||||
->options(function () {
|
||||
return Media::where('model_type', 'temp')
|
||||
->where('model_id', 0)
|
||||
->where('disk', 'public')
|
||||
->latest()
|
||||
->limit(30)
|
||||
->get(['id', 'file_name', 'name', 'disk'])
|
||||
->mapWithKeys(function (Media $item) {
|
||||
try {
|
||||
$url = $item->getUrl();
|
||||
$fileName = e($item->file_name);
|
||||
$name = e($item->name ?? '');
|
||||
|
||||
$html = "<div class='flex items-center gap-3'>" .
|
||||
"<img src='{$url}' class='rounded' style='width:60px;height:60px;object-fit:cover;' alt='{$fileName}' loading='lazy' />" .
|
||||
"<div class='flex flex-col'>" .
|
||||
"<span class='font-medium text-sm'>{$name}</span>" .
|
||||
"<span class='text-xs text-gray-500'>{$fileName}</span>" .
|
||||
"</div></div>";
|
||||
|
||||
return [$item->id => $html];
|
||||
} catch (\Exception $e) {
|
||||
return [];
|
||||
}
|
||||
})->toArray();
|
||||
})
|
||||
->searchable()
|
||||
->preload()
|
||||
->required(),
|
||||
])
|
||||
->action(function (array $data, SpatieMediaLibraryFileUpload $component): void {
|
||||
$record = $component->getRecord();
|
||||
|
||||
if (!$record) {
|
||||
\Filament\Notifications\Notification::make()
|
||||
->warning()
|
||||
->title('Save the entry first')
|
||||
->send();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!$data['image_id']) {
|
||||
return;
|
||||
}
|
||||
|
||||
$sourceMedia = Media::find($data['image_id']);
|
||||
if (!$sourceMedia || !file_exists($sourceMedia->getPath())) {
|
||||
\Filament\Notifications\Notification::make()
|
||||
->danger()
|
||||
->title('Image file not found')
|
||||
->send();
|
||||
return;
|
||||
}
|
||||
|
||||
$sourceFile = $sourceMedia->getPath();
|
||||
$tempCopy = sys_get_temp_dir() . '/' . uniqid() . '_' . $sourceMedia->file_name;
|
||||
copy($sourceFile, $tempCopy);
|
||||
|
||||
try {
|
||||
// Verify record has ID
|
||||
if (!$record->id) {
|
||||
\Filament\Notifications\Notification::make()
|
||||
->danger()
|
||||
->title('Entry must be saved first')
|
||||
->send();
|
||||
return;
|
||||
}
|
||||
|
||||
// Add the copy to the entry's featured-image collection
|
||||
$newMedia = $record->addMedia($tempCopy)
|
||||
->usingName($sourceMedia->name ?: pathinfo($sourceMedia->file_name, PATHINFO_FILENAME))
|
||||
->usingFileName($sourceMedia->file_name)
|
||||
->toMediaCollection('featured-image', 'public');
|
||||
|
||||
// Dispatch event for app.js to handle
|
||||
$component->getLivewire()->dispatch('featured-image-added', ['mediaId' => $newMedia->id]);
|
||||
|
||||
\Filament\Notifications\Notification::make()
|
||||
->success()
|
||||
->title('Image added to featured image')
|
||||
->send();
|
||||
} catch (\Exception $e) {
|
||||
\Filament\Notifications\Notification::make()
|
||||
->danger()
|
||||
->title('Error: ' . $e->getMessage())
|
||||
->send();
|
||||
} finally {
|
||||
if (file_exists($tempCopy)) {
|
||||
unlink($tempCopy);
|
||||
}
|
||||
}
|
||||
})
|
||||
),
|
||||
Toggle::make('is_published')
|
||||
->required(),
|
||||
Toggle::make('is_featured')
|
||||
->required(),
|
||||
DatePicker::make('published_at'),
|
||||
RichEditor::make('content')
|
||||
->columnSpanFull(),
|
||||
->columnSpanFull()
|
||||
->hintAction(
|
||||
Action::make('picker')
|
||||
->label('Gallery Picker')
|
||||
->icon('heroicon-m-photo')
|
||||
->schema([
|
||||
Select::make('image_url')
|
||||
->label('Select an existing image')
|
||||
->allowHtml()
|
||||
->options(function () {
|
||||
return Media::latest()
|
||||
->limit(30) // Limit to 30 most recent items for performance
|
||||
->get(['id', 'file_name', 'name', 'uuid', 'collection_name', 'model_type', 'model_id', 'disk'])
|
||||
->filter(function (Media $item) {
|
||||
// Only include media items that have a valid disk
|
||||
return $item->disk !== null;
|
||||
})
|
||||
->mapWithKeys(function (Media $item) {
|
||||
try {
|
||||
$url = $item->getUrl();
|
||||
} catch (\Exception $e) {
|
||||
// Skip items that can't generate URLs
|
||||
return [];
|
||||
}
|
||||
|
||||
$fileName = e($item->file_name);
|
||||
$name = e($item->name ?? '');
|
||||
|
||||
// Smaller image preview for better performance
|
||||
$html = "<div class='flex items-center gap-3'>" .
|
||||
"<img src='{$url}' class='rounded' style='width:60px;height:60px;object-fit:cover;' alt='{$fileName}' loading='lazy' />" .
|
||||
"<div class='flex flex-col'>" .
|
||||
"<span class='font-medium text-sm'>{$name}</span>" .
|
||||
"<span class='text-xs text-gray-500'>{$fileName}</span>" .
|
||||
"</div></div>";
|
||||
|
||||
return [$url => $html];
|
||||
})->toArray();
|
||||
})
|
||||
->searchable()
|
||||
->preload()
|
||||
->required(),
|
||||
])
|
||||
->action(function (array $data, RichEditor $component) {
|
||||
// We dispatch the URL to the browser to be inserted into TipTap
|
||||
$component->getLivewire()->dispatch('insert-editor-content', [
|
||||
'statePath' => $component->getStatePath(),
|
||||
'html' => "<img src='{$data['image_url']}' alt=''>",
|
||||
]);
|
||||
})
|
||||
),
|
||||
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue