Resource picker

composer.json

@@ -14,6 +14,7 @@
         "php": "^8.2",
         "blade-ui-kit/blade-icons": "^1.5",
         "codedor/filament-translatable-tabs": "^0.1",
+        "codedor/filament-resource-picker": "dev-master as 0.1",
         "filament/filament": "^3.0",
         "illuminate/contracts": "^10.0",
         "livewire/livewire": "^3.0",

resources/views/components/picture.blade.php

@@ -6,15 +6,15 @@
         :class="$class"
         :alt="$alt"
     />
-@elseif (! $formats && ! $formats)
+@elseif ($format && ! $formats)
     <img
         alt="{{ $alt }}"
         title="{{ $title }}"
         @class([
             $class ?? 'img-fluid',
             'lazyload' => $lazyload,
         ])
-        src="{{ $image->getFormatOrOriginal('thumbnail') }}"
+        src="{{ $image->getFormatOrOriginal($format) }}"
     >
 @elseif ($image)
     <picture class="{{ $pictureClass }}">

resources/views/components/resource-picker/item.blade.php

@@ -0,0 +1,12 @@
+<label for="resource-picker::{{ $statePath }}-{{ $item->{$keyField} }}">
+    <div style="display: none">
+        {{ $slot }}
+    </div>
+
+    <div :class="{
+        'transition-all cursor-pointer': true,
+        'rounded-lg p-1 border-2 border-primary-600': state.includes('{{ $item->{$keyField} }}')
+    }">
+        <x-filament-media-library::attachment :attachment="$item" />
+    </div>
+</label>

resources/views/filament/attachment-input.blade.php

@@ -1,4 +1,12 @@
-<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
+<x-dynamic-component
+    :component="$getFieldWrapperView()"
+    :field="$field"
+    x-on:picked-resource.window="(event) => {
+        // Set the state only if the event is for this resource picker
+        if (event.detail.statePath !== '{{ $getStatePath() }}') return
+        $wire.$set(event.detail.statePath, event.detail.resources)
+    }"
+>
     @php
         $attachments = $getAttachments();
     @endphp

src/Filament/AttachmentInput.php

@@ -53,6 +53,18 @@ protected function setUp(): void
             $component->getRelationship()->sync($state->toArray());
         });
 
+        $this->dehydrateStateUsing(function (self $component, $state) {
+            if ($component->isMultiple()) {
+                return;
+            }
+
+            if (is_string($state)) {
+                return $state;
+            }
+
+            return $state[0] ?? null;
+        });
+
         $this->registerActions([
             Action::make('remove-attachment')
                 ->icon('heroicon-o-x-circle')
@@ -101,7 +113,22 @@ protected function setUp(): void
 
             Action::make('attachment-picker')
                 ->label(__('filament-media-library::picker.select existing media'))
-                ->color('gray'),
+                ->modalHeading(__('filament-media-library::picker.select existing media'))
+                ->color('gray')
+                ->modalSubmitAction(false)
+                ->modalCancelAction(false)
+                ->modalContent(function (self $component) {
+                    return view('filament-resource-picker::picker', [
+                        'resourceClass' => AttachmentResource::class,
+                        'displayType' => 'filament-media-library::resource-picker.item',
+                        'statePath' => $component->getStatePath(),
+                        'state' => $component->getState() ?? [],
+                        'keyField' => 'id',
+                        'labelField' => 'id',
+                        'isMultiple' => $component->isMultiple(),
+                        'isGrid' => true,
+                    ]);
+                }),
         ]);
     }
 

src/Resources/AttachmentResource.php

@@ -22,6 +22,7 @@
 use Filament\Tables\Columns\TextColumn;
 use Filament\Tables\Filters;
 use Filament\Tables\Table;
+use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Support\HtmlString;
 use Illuminate\Support\Str;
 use Livewire\Component;
@@ -226,4 +227,13 @@ public static function getPages(): array
             'edit' => Pages\EditAttachment::route('/{record}/edit'),
         ];
     }
+
+    public static function resourcePickerQuery(Builder $query, string $search = null): Builder
+    {
+        return $query
+            ->when(
+                $search,
+                fn () => $query->where('name', 'like', '%' . $search . '%')
+            );
+    }
 }