_andypeacock Comments - Answer Overflow

Tables\Columns\TextColumn::make('name')
                    ->searchable()
                    ->action(
                        Action::make('viewThumbnail')
                            ->label('View Thumbnail')
                            ->icon('heroicon-o-photograph')
                            ->modalHeading(fn ($record) => "Thumbnail for {$record->name}")
                            ->modalContent(fn ($record) => view('filament.tables.thumbnail-modal', [ 'imageUrl' => $record->thumbnail_url ]))
                            ->modalSubmitAction(false)
                            ->modalCancelAction(false)
                    ),

Tables\Columns\TextColumn::make('name')
                    ->searchable()
                    ->action(
                        Action::make('viewThumbnail')
                            ->label('View Thumbnail')
                            ->icon('heroicon-o-photograph')
                            ->modalHeading(fn ($record) => "Thumbnail for {$record->name}")
                            ->modalContent(fn ($record) => view('filament.tables.thumbnail-modal', [ 'imageUrl' => $record->thumbnail_url ]))
                            ->modalSubmitAction(false)
                            ->modalCancelAction(false)
                    ),

Then the filament.tables.thumbnail_modal.blade.php:

<div class="flex justify-center">
    <img src="{{ $imageUrl }}" alt="Block Thumbnail" class="max-w-full max-h-[80vh]">
</div>

<div class="flex justify-center">
    <img src="{{ $imageUrl }}" alt="Block Thumbnail" class="max-w-full max-h-[80vh]">
</div>

10 replies

FFilament

•Created by bionary on 6/26/2024 in #❓┊help

Anybody find a decent solution for table images to a lightbox?

Hi @bionary I found the same problem as you. Did you find a solution?

10 replies

FFilament

•Created by _andypeacock on 9/17/2024 in #❓┊help

A hint, not a question

Solution above

4 replies

FFilament

•Created by justlasse on 1/11/2024 in #❓┊help

custom toggle action

app/Livewire/ToggleButton.php

<?php

namespace App\Livewire;

use Filament\Actions\Action;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Livewire\Component;

class ToggleButton extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;

    public bool $isActive = false;
    public $name;
    public $label = "";

    public function mount($name, $initialState = false)
    {
        $this->name     = $name;
        $this->isActive = $initialState;
    }

    public function toggleAction() : Action
    {
        return Action::make('toggle')
            ->action(function (array $arguments) {
                $this->isActive = ! $this->isActive;
                $this->dispatch('toggleChanged', $arguments, $this->isActive);
            })
            ->view('filament.components.toggle');
    }

    public function render()
    {
        return view('livewire.toggle-button');
    }
}

<?php

namespace App\Livewire;

use Filament\Actions\Action;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Livewire\Component;

class ToggleButton extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;

    public bool $isActive = false;
    public $name;
    public $label = "";

    public function mount($name, $initialState = false)
    {
        $this->name     = $name;
        $this->isActive = $initialState;
    }

    public function toggleAction() : Action
    {
        return Action::make('toggle')
            ->action(function (array $arguments) {
                $this->isActive = ! $this->isActive;
                $this->dispatch('toggleChanged', $arguments, $this->isActive);
            })
            ->view('filament.components.toggle');
    }

    public function render()
    {
        return view('livewire.toggle-button');
    }
}

resources/views/livewire/toggle-button.blade.php

<button wire:click="mountAction('toggle', { name: 'showCompleted' })"
    class="{{ $isActive ? 'bg-green-500' : 'bg-gray-300' }} relative w-14 h-8 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500">
    <span class="sr-only" x-text="$wire.entangle('isActive') ? 'On' : 'Off'"></span>
    <span
        class="{{ $isActive ? 'translate-x-6' : 'translate-x-0' }} absolute left-1 top-1 w-6 h-6 rounded-full bg-white shadow transform transition-transform duration-300 ease-in-out"></span>
</button>

<button wire:click="mountAction('toggle', { name: 'showCompleted' })"
    class="{{ $isActive ? 'bg-green-500' : 'bg-gray-300' }} relative w-14 h-8 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500">
    <span class="sr-only" x-text="$wire.entangle('isActive') ? 'On' : 'Off'"></span>
    <span
        class="{{ $isActive ? 'translate-x-6' : 'translate-x-0' }} absolute left-1 top-1 w-6 h-6 rounded-full bg-white shadow transform transition-transform duration-300 ease-in-out"></span>
</button>

I'm still convinced there are some efficiencies that could be done there, but that works Hope that helps!

10 replies

FFilament

•Created by justlasse on 1/11/2024 in #❓┊help

custom toggle action

OK, initial state sorted: In header actions:

Action::make('toggle')
    ->action(function () {
        // This action will be handled by the Livewire component
        logger("filament toggle");
    })
    ->view('filament.components.toggle', [
        'label' => "Show completed?"
    ]),

Action::make('toggle')
    ->action(function () {
        // This action will be handled by the Livewire component
        logger("filament toggle");
    })
    ->view('filament.components.toggle', [
        'label' => "Show completed?"
    ]),

resources/views/filament/components/toggle.blade.php

<div class="grid grid-cols-1 grid-rows-2 justify-items-center">
    <div>
        <livewire:toggle-button name="show-completed" :initial-state="true" />
    </div>
    <div>{{ $label }}</div>
</div>

<div class="grid grid-cols-1 grid-rows-2 justify-items-center">
    <div>
        <livewire:toggle-button name="show-completed" :initial-state="true" />
    </div>
    <div>{{ $label }}</div>
</div>

10 replies

FFilament

•Created by justlasse on 1/11/2024 in #❓┊help

custom toggle action

And got it sorted. Except the initial state isn't working quite right. Will post code here later.

10 replies

FFilament

•Created by justlasse on 1/11/2024 in #❓┊help

custom toggle action

Almost got it sorted. The livewire component is rendered via the action view() which renders a view consisting of only the livewire component (that seems inefficient, but it's the only way I know to render livewire in the view). The UI toggles, and it's internal state changes. Just need to work out how to get that state back into the action. I'll share code later today when I'm back at my pc

10 replies

FFilament

•Created by justlasse on 1/11/2024 in #❓┊help

custom toggle action

I've never gotten my head round how to get livewire working properly for passing properties. I've been busy spamming ChatGPT and Clause, and still can't get it working 😦 I think I'm going to give up and try again tomorrow.

10 replies

FFilament

•Created by justlasse on 1/11/2024 in #❓┊help

custom toggle action

Hi @justlasse Did you ever find a good solution to this? I'm looking for a toggle in the headerActions section as well.

10 replies

FFilament

•Created by uendel on 7/13/2024 in #❓┊help

I can't change default create action's notification title

In both cases, I just get a green icon with "Created", that's all.

8 replies

FFilament

•Created by uendel on 7/13/2024 in #❓┊help

I can't change default create action's notification title

Agreed, it's not working for me. Nor does the alternative approach listed:

use Filament\Actions\CreateAction;
use Filament\Notifications\Notification;
use <package>\Resources\ProjectResource;
use Filament\Actions;
use Filament\Resources\Pages\ListRecords;

class ListProjects extends ListRecords
{
    protected static string $resource = ProjectResource::class;

    // protected function getHeaderActions() : array
    // {
    //     return [
    //         Actions\CreateAction::make(),
    //     ];
    // }

    protected function getHeaderActions() : array
    {
        return [
            CreateAction::make()
                ->successNotification(
                    Notification::make()
                        ->success()
                        ->title('User registered')
                        ->body('The user has been created successfully.'),
                )
        ];
    }
}

use Filament\Actions\CreateAction;
use Filament\Notifications\Notification;
use <package>\Resources\ProjectResource;
use Filament\Actions;
use Filament\Resources\Pages\ListRecords;

class ListProjects extends ListRecords
{
    protected static string $resource = ProjectResource::class;

    // protected function getHeaderActions() : array
    // {
    //     return [
    //         Actions\CreateAction::make(),
    //     ];
    // }

    protected function getHeaderActions() : array
    {
        return [
            CreateAction::make()
                ->successNotification(
                    Notification::make()
                        ->success()
                        ->title('User registered')
                        ->body('The user has been created successfully.'),
                )
        ];
    }
}

8 replies

FFilament

•Created by ramclospapp on 7/11/2024 in #❓┊help

The right approach to a multi-user type

I do. I've added middleware to A) get the subdomain/domain to identify the tenant, and store the tenant on the request, B) check the user's access to that tenant, and C) check they have access to that panel on that tenant. The reason for the later is that (possibly) a user might have one role in one tenant, and another role in another tenant, and the two roles need different panels in my case. However, you could accomplish the same thing just by showing/hiding navigation items based on user role.

8 replies

FFilament

•Created by ramclospapp on 7/11/2024 in #❓┊help

The right approach to a multi-user type

Agreed. I've built my boilerplate around four roles: superadmin (me), tenant owner, tenant staff, and the tenant's customers. I've got 3 panels: one for me, one for tenant owner + staff, one for the tenant's customers. Keep it nice and separated, trust me.

8 replies

FFilament

•Created by khairulazmi_ on 2/29/2024 in #❓┊help

Custom Pages ignore tenant

Hi @khairulazmi_ did you ever find a result for this?

3 replies

FFilament

•Created by MartinRaiola on 3/8/2024 in #❓┊help

Make page tenant aware

Hi Martin, did you ever find a solution for this?

4 replies

FFilament

•Created by Ben on 5/3/2024 in #❓┊help

Custom Save Button for Create/Edit with Disable on FileUpload

And for the edit page:

public function saveAndPublish()
    {

        $record           = $this->getRecord();
        $record['status'] = 'published';
        $record->save();

        Notification::make()
            ->success()
            ->title('Content published')
            ->send();

        $this->redirect($this->getResource()::getUrl('index'));
    }

public function saveAndPublish()
    {

        $record           = $this->getRecord();
        $record['status'] = 'published';
        $record->save();

        Notification::make()
            ->success()
            ->title('Content published')
            ->send();

        $this->redirect($this->getResource()::getUrl('index'));
    }

6 replies

Gaming

Programming