ChrisR
ChrisR
PostsComments
FFilament
Created by Vazaios on 6/30/2024 in #❓┊help
Custom Livewire component that sets a new item to the repeater component inside the resource's form
Did you come across a solution for this? I'm doing something similar - I want to use scanning to dynamically add repeater fields.
3 replies
FFilament
Created by ChrisR on 7/4/2024 in #❓┊help
How to know when a modal, opened via a Table action, has been closed?
Great - thanks! The code that is currently working is: 
return $table
  ->query($query)
  ->actions([
      Action::make('scan-item')
          ->label('Scan Items')
          ->modalContent(fn(Order $order) => view('livewire.scanning.bar-code-scanner-wrapper', ['order' => $order]))
          ->modalWidth('Screen')
          ->modalCancelAction(false)
          ->modalSubmitAction(false)
          ->extraModalFooterActions(function (Action $action) {
              $submit = $action->makeModalSubmitAction('associateItems', ['associate' => true])
                  ->label('Associate Items');
              $cancel = $action->makeModalSubmitAction('cancel', ['cancel' => true]);
              return [ $submit, $cancel ];
          })
          ->action(function (array $data, array $arguments, Action $action): void {
              // from the $arguments I can know which button was clicked
              $this->dispatch('order-scanner-modal-closed', $data);
          })
          ->slideOver(),
  ])
  ->columns([
      ...
  ]);
return $table
  ->query($query)
  ->actions([
      Action::make('scan-item')
          ->label('Scan Items')
          ->modalContent(fn(Order $order) => view('livewire.scanning.bar-code-scanner-wrapper', ['order' => $order]))
          ->modalWidth('Screen')
          ->modalCancelAction(false)
          ->modalSubmitAction(false)
          ->extraModalFooterActions(function (Action $action) {
              $submit = $action->makeModalSubmitAction('associateItems', ['associate' => true])
                  ->label('Associate Items');
              $cancel = $action->makeModalSubmitAction('cancel', ['cancel' => true]);
              return [ $submit, $cancel ];
          })
          ->action(function (array $data, array $arguments, Action $action): void {
              // from the $arguments I can know which button was clicked
              $this->dispatch('order-scanner-modal-closed', $data);
          })
          ->slideOver(),
  ])
  ->columns([
      ...
  ]);
9 replies
FFilament
Created by ChrisR on 7/4/2024 in #❓┊help
How to know when a modal, opened via a Table action, has been closed?
9 replies
FFilament
Created by ChrisR on 7/4/2024 in #❓┊help
How to know when a modal, opened via a Table action, has been closed?
I tried this, but I get the same result: 
->modalFooterActions([
    Action::make('submit')
        ->label('Link item to inventory')
        ->action(function (Action $action) {
            $this->dispatch('order-scanner-modal-closed', true);
            $action->close(true);
        }),
    Action::make('cancel')
        ->label('Cancel')
        ->action(function (Action $action) {
            $this->dispatch('order-scanner-modal-closed', true);
            $action->close(true);
        }),
])
->modalFooterActions([
    Action::make('submit')
        ->label('Link item to inventory')
        ->action(function (Action $action) {
            $this->dispatch('order-scanner-modal-closed', true);
            $action->close(true);
        }),
    Action::make('cancel')
        ->label('Cancel')
        ->action(function (Action $action) {
            $this->dispatch('order-scanner-modal-closed', true);
            $action->close(true);
        }),
])
The Action that I'm using here is Filament\Tables\Actions\Action. I'm getting a little confused because StaticAction, from what I can tell, is the only class that uses the CanClose trait, but maybe my IDE is failing me here.
9 replies
FFilament
Created by ChrisR on 7/4/2024 in #❓┊help
Modal submit action button is white text on white background - I can't figure out how to change that
Ah! Thanks @awcodes - that did it :). I was missing @filamentStyles and @filamentScripts
20 replies
FFilament
Created by ChrisR on 7/4/2024 in #❓┊help
Modal submit action button is white text on white background - I can't figure out how to change that
You're right - I added the action to an existing Resource that I have, OrderResource, and the color is correct. I'll have to just make this work and then come back to why it wasn't working in a custom LW component. Thank you for your help!
20 replies
FFilament
Created by ChrisR on 7/4/2024 in #❓┊help
Modal submit action button is white text on white background - I can't figure out how to change that
In other words, I'm wondering if the color is just a symptom of a larger issue I'm having with setting this up
20 replies
FFilament
Created by ChrisR on 7/4/2024 in #❓┊help
Modal submit action button is white text on white background - I can't figure out how to change that
Something is telling me that I've botched this up, though.
I would expect this code to be executed when either the submit or cancel button on the modal is clicked: 
->modalSubmitAction(function(Order $order) {
                        $this->dispatch('order-scanner-modal-closed', true);
                    })
                    ->modalCancelAction(function() {
                        $this->dispatch('order-scanner-modal-closed', false);
                    })
->modalSubmitAction(function(Order $order) {
                        $this->dispatch('order-scanner-modal-closed', true);
                    })
                    ->modalCancelAction(function() {
                        $this->dispatch('order-scanner-modal-closed', false);
                    })
However, it is executed when I click "Scan items", i.e. the element that opens the modal - both the submit and cancel
20 replies
FFilament
Created by ChrisR on 7/4/2024 in #❓┊help
Modal submit action button is white text on white background - I can't figure out how to change that
It is a LW component: 
class OrderList extends Component implements HasTable, HasForms
{
    use InteractsWithTable;
    use InteractsWithForms;

    public function table(Table $table): Table
    {
        $query = Order::query()->whereIn('order_fullfillment_status', ['NOT_STARTED']);

        return $table
            ->query($query)
            ->actions([
                Action::make('scan-item')
                    ->label('Scan Items')
                    ->modalContent(fn(Order $order) => view('livewire.scanning.bar-code-scanner-wrapper', ['order' => $order]))
                    ->modalWidth('Screen')
//                            ->modalSubmitActionLabel('Link item to inventory')
                    ->modalSubmitAction(function(Order $order) {
                        $this->dispatch('order-scanner-modal-closed', true);
                    })
                    ->modalCancelAction(function() {
                        $this->dispatch('order-scanner-modal-closed', false);
                    })
                    ->slideOver()
            ])
            ->columns([
                TextColumn::make('order_id'),
                TextColumn::make('ship_full_name'),
                TextColumn::make('line_item_titles')
                    ->label('Items')
                    ->state(function ($record) {
                        return $record->lineItems->pluck('title')->join(', ');
                    }),
                TextColumn::make('ship_address_postal'),
                TextColumn::make('ship_address_country')
            ]);
    }

    public function render()
    {
        return view('livewire.order-list');
    }
}
class OrderList extends Component implements HasTable, HasForms
{
    use InteractsWithTable;
    use InteractsWithForms;

    public function table(Table $table): Table
    {
        $query = Order::query()->whereIn('order_fullfillment_status', ['NOT_STARTED']);

        return $table
            ->query($query)
            ->actions([
                Action::make('scan-item')
                    ->label('Scan Items')
                    ->modalContent(fn(Order $order) => view('livewire.scanning.bar-code-scanner-wrapper', ['order' => $order]))
                    ->modalWidth('Screen')
//                            ->modalSubmitActionLabel('Link item to inventory')
                    ->modalSubmitAction(function(Order $order) {
                        $this->dispatch('order-scanner-modal-closed', true);
                    })
                    ->modalCancelAction(function() {
                        $this->dispatch('order-scanner-modal-closed', false);
                    })
                    ->slideOver()
            ])
            ->columns([
                TextColumn::make('order_id'),
                TextColumn::make('ship_full_name'),
                TextColumn::make('line_item_titles')
                    ->label('Items')
                    ->state(function ($record) {
                        return $record->lineItems->pluck('title')->join(', ');
                    }),
                TextColumn::make('ship_address_postal'),
                TextColumn::make('ship_address_country')
            ]);
    }

    public function render()
    {
        return view('livewire.order-list');
    }
}
Barcode scanner wrapper is just a way to display my livewire component in the modal 
<livewire:scanning.bar-code-scanner :order="$order ?? null" />
<livewire:scanning.bar-code-scanner :order="$order ?? null" />
20 replies
FFilament
Created by ChrisR on 7/4/2024 in #❓┊help
Modal submit action button is white text on white background - I can't figure out how to change that
I don't want to customize the colors - I just wanted to see what would happen if I did (I'm just learning how these work, really)
20 replies
FFilament
Created by ChrisR on 7/4/2024 in #❓┊help
Modal submit action button is white text on white background - I can't figure out how to change that
Which makes me think it's a stock configuration
20 replies
FFilament
Created by ChrisR on 7/4/2024 in #❓┊help
Modal submit action button is white text on white background - I can't figure out how to change that
It's possible, but I haven't worked on this app in awhile until this week. I think it's mostly stock. I even tried to add a custom color to my tailwind.config.css: 
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
        colors: {
            'red' : '#FF0000',
        }
    },

    safelist: [
        {
            pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
            variants: ['sm', 'md', 'lg', 'xl', '2xl'],
        },
    ],

    plugins: [forms, typography],
};
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
        colors: {
            'red' : '#FF0000',
        }
    },

    safelist: [
        {
            pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
            variants: ['sm', 'md', 'lg', 'xl', '2xl'],
        },
    ],

    plugins: [forms, typography],
};
That broke things with this error:
[vite] Internal server error: [postcss] /app/resources/css/app.css:1:1: 'colors.gray.400' does not exist in your theme config. 'colors' has the following keys: 'red'
20 replies
FFilament
Created by ChrisR on 7/4/2024 in #❓┊help
Modal submit action button is white text on white background - I can't figure out how to change that
No description
20 replies
FFilament
Created by ChrisR on 7/4/2024 in #❓┊help
Modal submit action button is white text on white background - I can't figure out how to change that
I've tried one of the default colors as well, stone
20 replies
FFilament
Created by ChrisR on 7/4/2024 in #❓┊help
Modal submit action button is white text on white background - I can't figure out how to change that
No description
20 replies
FFilament
Created by ChrisR on 7/4/2024 in #❓┊help
How to execute javascript within a modal
Thanks, I'll take a look at that as well. Right now I at least have my JS firing with a combo of: component blade file: <div class="wrapper flex flex-col" wire:init="initScanner"> component class: 
public function initScanner()
    {
        $this->dispatch('order-scanner-modal-opened');
    }
public function initScanner()
    {
        $this->dispatch('order-scanner-modal-opened');
    }
js 
if (window.Livewire) {
    initBarcodeCapture();
    Livewire.on('order-scanner-modal-opened', () => {
        console.log('Success...finally')
    });
}
if (window.Livewire) {
    initBarcodeCapture();
    Livewire.on('order-scanner-modal-opened', () => {
        console.log('Success...finally')
    });
}
I have no idea if this is the best way to do this yet. I'm still trying to figure out the relationship between Filament, Livewire, and Alpine and knowing when to use what where 🙂
8 replies
FFilament
Created by ChrisR on 7/4/2024 in #❓┊help
How to execute javascript within a modal
It seems as if wire:init is intended for calling actions - I don't see how that would allow me to execute JS in a modal - am I missing your meaning? That did lead me to https://livewire.laravel.com/docs/javascript but when I do something simple like: 
@script
<script>
    console.log('foo')
</script>
@endscript
@script
<script>
    console.log('foo')
</script>
@endscript
It just renders @script @endscript and never logs.
8 replies
FFilament
Created by ChrisR on 7/4/2024 in #❓┊help
How to execute javascript within a modal
I have not, I'll try it first thing - thanks!
8 replies
FFilament
Created by ChrisR on 11/10/2023 in #❓┊help
Having trouble figuring out best way to add a button to a modal, which triggers custom JS
This helps a lot - thank you!
10 replies
FFilament
Created by ChrisR on 11/10/2023 in #❓┊help
Having trouble figuring out best way to add a button to a modal, which triggers custom JS
Ok, thanks; I'll dig into Alpine. I was just reading through https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component and wondering if I need a livewire component that has a Filament form, which is displayed in a modal. I'm probably way over-complicating it as a result of not understanding everything I have at my disposal
10 replies