ChickenDev Posts - Answer Overflow

ChickenDev

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

Prevent Livewire Event Refresh

I have a Table Widget that I would like to receive events when an Eloquent Model is updated, but I would like to prevent the component from refreshing the table data automatically. I have the following code blocks

    protected function getListeners(): array
    {
        return [
            "echo:InvoiceUpdateNotifications,InvoiceUpdateNotification" => 'onInvoiceUpdated',
        ];
    }
    public function onInvoiceUpdated(Invoice $record) {
        $this->showRefresh = true;
    }

    protected function getListeners(): array
    {
        return [
            "echo:InvoiceUpdateNotifications,InvoiceUpdateNotification" => 'onInvoiceUpdated',
        ];
    }
    public function onInvoiceUpdated(Invoice $record) {
        $this->showRefresh = true;
    }

which correctly receives the event from my models. I have a table header action tied to the showRefresh variable that appears correctly when the event is triggered, so I know that the method is being called correctly. However, the table data also refreshes automatically. My goal on this is to require the user to request new data so that the location of items doesn't shift around as there are other components on the page that provide a process for the user to work through. I don't want the table to change without the user's knowledge, to rpevent confusion. When I remove the listener, the table does not refresh (the event is still being broadcast).

2 replies

FFilament

•Created by ChickenDev on 8/28/2024 in #❓┊help

Importer RowImportFailedException

I've created an importer that is supposed to bail if it encounters references to data that doesn't exist in my database. However, when I run a test using a CSV with 1 valid row and 1 invalid row, the exception is thrown but the importer then ends up in an infinite loop and I get multiple copies of the valid row imported until I kill the queue. Here's my resolveRecord function that is intended to throw the exception:

public function resolveRecord(): ?InvoiceItem
    {
        $invoiceNumber = $this->data['invoice_number'];
        $invoice = Invoice::query()
            ->where('invoice_number', $invoiceNumber)
            ->first();

        $productSku = $this->data['product_sku'];
        $product = Product::query()
            ->where('sku', $productSku)
            ->first();

        if ($invoice == NULL || $product == NULL) {
            throw new RowImportFailedException("Product with SKU [{$this->data['product_sku']}] and/or Invoice with Name [{$this->data['invoice_number']}] not found.");
        }

        $newInvoiceItem = new InvoiceItem();
        $newInvoiceItem->invoice_id = $invoice->id;
        $newInvoiceItem->product_id = $product->id;

        return $newInvoiceItem;
    }

public function resolveRecord(): ?InvoiceItem
    {
        $invoiceNumber = $this->data['invoice_number'];
        $invoice = Invoice::query()
            ->where('invoice_number', $invoiceNumber)
            ->first();

        $productSku = $this->data['product_sku'];
        $product = Product::query()
            ->where('sku', $productSku)
            ->first();

        if ($invoice == NULL || $product == NULL) {
            throw new RowImportFailedException("Product with SKU [{$this->data['product_sku']}] and/or Invoice with Name [{$this->data['invoice_number']}] not found.");
        }

        $newInvoiceItem = new InvoiceItem();
        $newInvoiceItem->invoice_id = $invoice->id;
        $newInvoiceItem->product_id = $product->id;

        return $newInvoiceItem;
    }

The exception gets logged in my laravel.log file, but I do not see any results in the UI for the import.

3 replies

FFilament

•Created by ChickenDev on 7/18/2024 in #❓┊help

Action in Sub Navigation

Is it possible to add an Action component to a sub-navigation for a page. I have a cluster with the sub-navigation showing just fine. What I would like is to add the "Create" action (preferably styled as a button) below each item in the sub-navigation. I currently have the following code in my page component as a proof of concept:

    public function getSubNavigation(): array
    {
        $cluster = static::getCluster();

        $existingNav = $this->generateNavigationItems($cluster::getClusteredComponents());

        foreach ($existingNav as $navItem) {

            $navItem
                ->isActiveWhen(fn (): bool => true)
                ->childItems([
                    NavigationItem::make("Sub-Google")
                        ->group(static::getNavigationGroup())
                        ->parentItem(static::getNavigationParentItem())
                        ->icon(static::getNavigationIcon())
                        ->isActiveWhen(fn (): bool => false)
                        ->url("https://www.google.ca"),
                    Actions\CreateAction::make(),
                ]);
        }

        return $existingNav;
    }

    public function getSubNavigation(): array
    {
        $cluster = static::getCluster();

        $existingNav = $this->generateNavigationItems($cluster::getClusteredComponents());

        foreach ($existingNav as $navItem) {

            $navItem
                ->isActiveWhen(fn (): bool => true)
                ->childItems([
                    NavigationItem::make("Sub-Google")
                        ->group(static::getNavigationGroup())
                        ->parentItem(static::getNavigationParentItem())
                        ->icon(static::getNavigationIcon())
                        ->isActiveWhen(fn (): bool => false)
                        ->url("https://www.google.ca"),
                    Actions\CreateAction::make(),
                ]);
        }

        return $existingNav;
    }

The "NavigationItem" to google works just fine, but I get the following error when I try to add the action: Method Filament\Actions\CreateAction::isActive does not exist. I assume this is because the Action does not extend NavigationItem or Component. Is there some way I can accomplish this? I can, of course, add a NavigationItem to the create/edit URLs manually, but I'd rather be able to use something that would auto-generate the correct URLs.

1 replies

FFilament

•Created by ChickenDev on 7/17/2024 in #❓┊help

ImageEntry src URL

I have a database column that contains a relative URL that, depending on context, needs to have a different domain and path prepended to it. For example, the DB column value is /bysZeUvSPZPJnku4qkHF34CdgMG.jpg and the same filename is used for a thumbnail using the https://domain.com/w/100 prefix and for the main image using the https://domain.com/w/500 prefix. How can I prepend these values to the ImageEntry component? I have tried creating a special disk inside filesystems.php using the following config

'remote_img_lg' => [
    'driver' => 'local',
    'root' => storage_path('app/public'),
    'url' => 'https://domain.com/w/500',
    'visibility' => 'public',
    'throw' => false,
]

'remote_img_lg' => [
    'driver' => 'local',
    'root' => storage_path('app/public'),
    'url' => 'https://domain.com/w/500',
    'visibility' => 'public',
    'throw' => false,
]

but when I use it in the component the src attribute of the img tag is not set.

7 replies

FFilament

•Created by ChickenDev on 7/16/2024 in #❓┊help

How do I change Button Colors?

How do I set my button colours using the Tailwind CSS configuration? I've created a custom theme and set a new set of CSS variables for the colours I want to substitute for "primary" in tailwind using the pattern --curiousblue-x However, no matter how I update the new theme.css file and the tailwind.config.js file, the buttons remain the same colour. When I look at the button in the DOM inspector it has inline styles:

style="--c-400:var(--primary-400);--c-500:var(--primary-500);--c-600:var(--primary-600);"

style="--c-400:var(--primary-400);--c-500:var(--primary-500);--c-600:var(--primary-600);"

I can force the colours to change by overriding --primary-x inside my theme.css file, but this seems a little clunky since it seems to be ignoring the tailwind configuration. Is this the best I can do, or is there a cleaner way to achieve what I'm looking for. Here's my theme.css:

@import '/vendor/filament/filament/resources/css/theme.css';

@layer base {
    :root {
        --curiousblue-50: 240, 249, 255;
        --curiousblue-100: 224, 242, 254;
        --curiousblue-200: 185, 230, 254;
        --curiousblue-300: 124, 211, 253;
        --curiousblue-400: 54, 190, 250;
        --curiousblue-500: 12, 166, 235;
        --curiousblue-600: 0, 141, 213;
        --curiousblue-700: 1, 105, 163;
        --curiousblue-800: 6, 89, 134;
        --curiousblue-900: 11, 74, 111;
        --curiousblue-950: 7, 47, 74;

        --primary-50: 240, 249, 255;
        --primary-100: 224, 242, 254;
        --primary-200: 185, 230, 254;
        --primary-300: 124, 211, 253;
        --primary-400: 54, 190, 250;
        --primary-500: 12, 166, 235;
        --primary-600: 0, 141, 213;
        --primary-700: 1, 105, 163;
        --primary-800: 6, 89, 134;
        --primary-900: 11, 74, 111;
        --primary-950: 7, 47, 74;
    }
}

@config 'tailwind.config.js';

@import '/vendor/filament/filament/resources/css/theme.css';

@layer base {
    :root {
        --curiousblue-50: 240, 249, 255;
        --curiousblue-100: 224, 242, 254;
        --curiousblue-200: 185, 230, 254;
        --curiousblue-300: 124, 211, 253;
        --curiousblue-400: 54, 190, 250;
        --curiousblue-500: 12, 166, 235;
        --curiousblue-600: 0, 141, 213;
        --curiousblue-700: 1, 105, 163;
        --curiousblue-800: 6, 89, 134;
        --curiousblue-900: 11, 74, 111;
        --curiousblue-950: 7, 47, 74;

        --primary-50: 240, 249, 255;
        --primary-100: 224, 242, 254;
        --primary-200: 185, 230, 254;
        --primary-300: 124, 211, 253;
        --primary-400: 54, 190, 250;
        --primary-500: 12, 166, 235;
        --primary-600: 0, 141, 213;
        --primary-700: 1, 105, 163;
        --primary-800: 6, 89, 134;
        --primary-900: 11, 74, 111;
        --primary-950: 7, 47, 74;
    }
}

@config 'tailwind.config.js';

My Tailwind config is attached. This is possibly a pretty basic question since but I've been out of the PHP/HTML/CSS space for a long time (probably since about PHP v5.6) and a lot has changed!

4 replies

Gaming

Programming