rubendn Posts - Answer Overflow

rubendn

•Created by rubendn on 6/5/2024 in #❓┊help

New Project Recommended Installation Steps/Order?

What would be the recommended installation steps for a new project that will be using Filament (/admin route) and will also use Breeze, Livewire, Volt, & Alpine outside of Filament and build both Filament and other pages with Vite? This order? Laravel Breeze Filament (installs Livewire & Alpine?) Volt Anything else I would need to do besides include the @livewireStyles & @livewireScript tags in the non-Filament layout in order for the project to build correctly? Thanks! Ruben

6 replies

FFilament

•Created by rubendn on 4/11/2024 in #❓┊help

FileUpload Previewing with File Name not based on Stored Field

I'm uploading an image using the FileUpload component using the following code where the image name is not stored in one of the database fields and it is stored in the public directory directly.

                Forms\Components\FileUpload::make('player_image')
                    ->disk('public')
                    ->directory('front/images/player_photos')
                    ->label('Player Image')
                    ->dehydrated(false)
                    ->getUploadedFileNameForStorageUsing(static fn (?Model $record) => $record->PlayerID . '.jpg'),

                Forms\Components\FileUpload::make('player_image')
                    ->disk('public')
                    ->directory('front/images/player_photos')
                    ->label('Player Image')
                    ->dehydrated(false)
                    ->getUploadedFileNameForStorageUsing(static fn (?Model $record) => $record->PlayerID . '.jpg'),

This uploads the image correctly into the public folder. Is there a way I can get it to preview the image in the filepond component when I go back into the form to edit the record? This is the config for the public disk:

    'disks' => [
        'public' => [
            'driver' => 'local',
            'root' => public_path('/'),
            'url' => env('APP_URL').'/',
            'visibility' => 'public',
            'throw' => false,
        ],
    ],

    'disks' => [
        'public' => [
            'driver' => 'local',
            'root' => public_path('/'),
            'url' => env('APP_URL').'/',
            'visibility' => 'public',
            'throw' => false,
        ],
    ],

Thank you.

5 replies

FFilament

•Created by rubendn on 11/20/2023 in #❓┊help

Keydown Event on Input Field

With a filament form, is it possible to do something like this:

                 <select name="sport_id wire:model="inputs.sport_id"  @keydown.ctrl="$wire.inputs.copySport = !$wire.inputs.copySport">
                      <option value=0>Select Sport</option>
                      <option value=1>Football</option>
                      <option value=2>Baseball</option>
                      <option value=3>Basketball</option>
                 </select>
                <input type="checkbox" tabindex="-1" class="mt-6 ml-2" wire:model="inputs.copySport" />

                 <select name="sport_id wire:model="inputs.sport_id"  @keydown.ctrl="$wire.inputs.copySport = !$wire.inputs.copySport">
                      <option value=0>Select Sport</option>
                      <option value=1>Football</option>
                      <option value=2>Baseball</option>
                      <option value=3>Basketball</option>
                 </select>
                <input type="checkbox" tabindex="-1" class="mt-6 ml-2" wire:model="inputs.copySport" />

I've done this with Alpine but was wondering if it can be done using the form builder.

6 replies

FFilament

•Created by rubendn on 10/21/2023 in #❓┊help

Many Identical Forms on the Same Custom Page

Is there a way to add X number of identical forms on the same page on a Custom Page that can be submitted individually? Like an array of forms? I've kind of gotten it to work using Livewire but it would be great if I could use the Filament Fields. The use case is I'm going to have a bunch of images with a form to the right of the image with around 4-5 fields that need to be filled out and submitted. Once one is submitted it hides and the user can continue with the next one. Or is there a way to use a Filament field in a Filament Livewire Custom page but that isn't a part of "Filament" form?

15 replies

FFilament

•Created by rubendn on 10/14/2023 in #❓┊help

Function after selecting from datalist in TextInput

Is there a way to run a function after selecting an option from a dynamically created datalist in a TextInput? This is the scenario: I have three TextInputs: FirstName, LastName, Suffix When the user starts typing in the FirstName field, I want to return a datalist of current FirstName+LastName+Suffix from the database for them to choose. I think I can do this using a function in the datalist of FirstName. What I want to do next is fill in the FirstName, LastName and Suffix fields based on the selection from the datalist in FirstName. I don't want to use Selects because I want the user to easily add new values to the fields. Thanks!

2 replies

FFilament

•Created by rubendn on 9/25/2023 in #❓┊help

Markdown Editor Preview in V3?

Is there no longer a way to see a preview of the markdown using the Markdown Editor in V3? The docs still say "The markdown editor allows you to edit and preview markdown content, as well as upload images using drag and drop" but there is no preview button and don't see an option to enable it. Thanks.

10 replies

FFilament

•Created by rubendn on 9/1/2023 in #❓┊help

Vite Build Process for existing Laravel App and Panel Builder

What is the recommended process for incorporating panel builder into the build process of an existing application using Vite/Tailwind? I don't want to have separate build processes for the front-end and Filament because I want to use components from each in the other. I've tried importing the Filament preset into tailwind.config.js but I encounter some conflicts with the GRAY color that I'm already using on the front-end? Also, how do I tell Filament to use my front-end build with imported preset (if I'm able to resolve the conflict above)? Is it using ->viteTheme in the Admin panel provider?

4 replies

FFilament

•Created by rubendn on 8/29/2023 in #❓┊help

Viewing image after upload with FileUpload component - insecure resource

I'm using the FileUpload component in a form and it works correctly during Add (over HTTPS). I can see the image after it is selected and it saves fine. However, when I go to the the Edit page of that record, the FilePond component stays on Waiting for size and Loading. I have set the correct local APP_URL. This is the error I see in the console...

Mixed Content: The page at 'https://fcs-new.test/admin/posts/4' was loaded over HTTPS, but requested an insecure resource 'http://fcs-new.test/front/images/blog//HJ8w71aC1PflgCu3ul9HBHdUo2TxbU-metaMjU3ODQ5LmpwZw==-.jpg'. This request has been blocked; the content must be served over HTTPS.

Mixed Content: The page at 'https://fcs-new.test/admin/posts/4' was loaded over HTTPS, but requested an insecure resource 'http://fcs-new.test/front/images/blog//HJ8w71aC1PflgCu3ul9HBHdUo2TxbU-metaMjU3ODQ5LmpwZw==-.jpg'. This request has been blocked; the content must be served over HTTPS.

This is the component:

                    Forms\Components\FileUpload::make('thumbnail')
                        ->disk('public')
                        ->directory('front/images/blog'),

                    Forms\Components\FileUpload::make('thumbnail')
                        ->disk('public')
                        ->directory('front/images/blog'),

How can I fix this so it is requested over HTTPS instead of HTTP.

3 replies

FFilament

•Created by rubendn on 8/11/2023 in #❓┊help

Icon Visibility on Text Column depending on record value

I have a Text Column with a modal where I'm showing an Icon and Text. I'm able to hide the text depending on the status of the $record->StatusID from the model by using formatStateUsing() but the icon still shows. Is there a way to make the display of the icon conditional? See code below.

        Tables\Columns\TextColumn::make('tracking')
            ->action(Action::make('updateShipping')
                ->action(function (Model $record, array $data): void {
                    $record->ConfirmationNumber = $data['ConfirmationNumber'];
                    $record->StatusID = 3;
                    $record->save();
                    \Mail::to($record->EmailAddress)->send(new \App\Mail\TrackingNumber($record));
                })
                ->form([
                TextInput::make('ConfirmationNumber')
                    ->label('Delivery Confirmation #')
                    ->required(),
                ])
                    ->label(fn (Model $record) => "Order#: {$record->OrderID} - {$record->FirstName} {$record->LastName}")
                )
                ->icon('heroicon-o-truck')
                ->label('Tracking')
                ->alignCenter()
                ->formatStateUsing(function (Model $record): string {
                        return $record->StatusID == 5 ? 'SHIP' : '';
                    }),

        Tables\Columns\TextColumn::make('tracking')
            ->action(Action::make('updateShipping')
                ->action(function (Model $record, array $data): void {
                    $record->ConfirmationNumber = $data['ConfirmationNumber'];
                    $record->StatusID = 3;
                    $record->save();
                    \Mail::to($record->EmailAddress)->send(new \App\Mail\TrackingNumber($record));
                })
                ->form([
                TextInput::make('ConfirmationNumber')
                    ->label('Delivery Confirmation #')
                    ->required(),
                ])
                    ->label(fn (Model $record) => "Order#: {$record->OrderID} - {$record->FirstName} {$record->LastName}")
                )
                ->icon('heroicon-o-truck')
                ->label('Tracking')
                ->alignCenter()
                ->formatStateUsing(function (Model $record): string {
                        return $record->StatusID == 5 ? 'SHIP' : '';
                    }),

Thank you!

8 replies

FFilament

•Created by rubendn on 8/10/2023 in #❓┊help

Add HTML to Card value in Widget

Is there a simple way of doing this...

namespace App\Filament\Widgets;

use App\Models\Order;
use Filament\Widgets\StatsOverviewWidget\Card;
use Filament\Widgets\StatsOverviewWidget as BaseWidget;

class OrderStats extends BaseWidget
{
    protected function getCards(): array
    {
        return [
            Card::make('Pending Orders',Order::where('StatusID',5)->count()),
            Card::make('Cards To Ship',Order::where('StatusID',5)->withSum('OrderDetail','ItemQuantity')->get()->sum('order_detail_sum_item_quantity')),
            Card::make('Links:','<a href="/filament/resources/orders">Orders</a></br><a href="/filament/resources/orders">Orders</a>'),
        ];
    }
}

namespace App\Filament\Widgets;

use App\Models\Order;
use Filament\Widgets\StatsOverviewWidget\Card;
use Filament\Widgets\StatsOverviewWidget as BaseWidget;

class OrderStats extends BaseWidget
{
    protected function getCards(): array
    {
        return [
            Card::make('Pending Orders',Order::where('StatusID',5)->count()),
            Card::make('Cards To Ship',Order::where('StatusID',5)->withSum('OrderDetail','ItemQuantity')->get()->sum('order_detail_sum_item_quantity')),
            Card::make('Links:','<a href="/filament/resources/orders">Orders</a></br><a href="/filament/resources/orders">Orders</a>'),
        ];
    }
}

This does not work as it shows the full HTML. I tried the blade '{!!' but that doesn't have any effect. I tried creating a separate Widget but then it does not show all three cards on the same line. Is there a way to include another widget as the third item within this return statement?

6 replies

FFilament

•Created by rubendn on 5/17/2023 in #❓┊help

Display Action Text in Table as Button

Using the following code below, is there a simple way to change the current Icon and Text for the Action to a button instead without having to create a custom column?

    protected function getTableActions(): array
    {
        return [
            Action::make('updateShipping')
                ->action(function (Model $record, array $data): void {
                    $record->ConfirmationNumber = $data['ConfirmationNumber'];
                    $record->save();
                    \Mail::to($record->EmailAddress)->send(new \App\Mail\TrackingNumber($record));
                })
                ->icon('heroicon-o-truck')
                ->label('SHIP')
            ->form([
                 TextInput::make('ConfirmationNumber')
                    ->label('Delivery Confirmation #')
                    ->required(),
                ])

        ];

    }

    protected function getTableActions(): array
    {
        return [
            Action::make('updateShipping')
                ->action(function (Model $record, array $data): void {
                    $record->ConfirmationNumber = $data['ConfirmationNumber'];
                    $record->save();
                    \Mail::to($record->EmailAddress)->send(new \App\Mail\TrackingNumber($record));
                })
                ->icon('heroicon-o-truck')
                ->label('SHIP')
            ->form([
                 TextInput::make('ConfirmationNumber')
                    ->label('Delivery Confirmation #')
                    ->required(),
                ])

        ];

    }

10 replies

FFilament

•Created by rubendn on 5/9/2023 in #❓┊help

Custom Page without Livewire

Is there a way to create a custom page that uses the Filament template/navigation but isn’t a Livewire full-page component?

5 replies

Gaming

Programming