Timster8989 Posts - Answer Overflow

Timster8989

Posts Comments

FFilament

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

"Independent" panel columns

2 replies

FFilament

•Created by Timster8989 on 11/19/2023 in #❓┊help

afterStateUpdated in custom component

I have a Filament widget which includes a Livewire component from it's blade. I have a select-field rendering fine and it will update the value. However, I can't get it to run method no matter what I do. Here is the code I've been trying with:

namespace App\Http\Livewire;
...
use Livewire\Component;

class CompanyComparisonForm extends Component implements HasForms
{
    use InteractsWithForms;

    protected $form;
    public $technologies;

    public function formFieldUpdated($propertyName, $value)
    {
        // never gets here
        Log::error('formFieldUpdated2');
    }

    public function render()
    {
        $this->form = $this->makeForm()
            ->schema([
                Select::make('technologies')
                    ->reactive()
                    //->callAfterStateUpdated()
                    ->afterStateUpdated(function ($state) {
                        // never gets here either
                        Log::error('Updating...');
                        // tried these too
                        //$this->formFieldUpdated('technologies', $state);
                        //$this->dispatch('formFieldUpdated', $state);
                    })
                    // these don't make a difference
                    //->live()
                    //->native()
                    ->options([
                        'tailwind' => 'Tailwind CSS',
                        'alpine' => 'Alpine.js',
                        'laravel' => 'Laravel',
                        'livewire' => 'Laravel Livewire',
                    ])
            ])

            // this also doesn't change whether it's enabled or not
            ->live();
        return view('livewire.company-comparison-form');
    }
}`

namespace App\Http\Livewire;
...
use Livewire\Component;

class CompanyComparisonForm extends Component implements HasForms
{
    use InteractsWithForms;

    protected $form;
    public $technologies;

    public function formFieldUpdated($propertyName, $value)
    {
        // never gets here
        Log::error('formFieldUpdated2');
    }

    public function render()
    {
        $this->form = $this->makeForm()
            ->schema([
                Select::make('technologies')
                    ->reactive()
                    //->callAfterStateUpdated()
                    ->afterStateUpdated(function ($state) {
                        // never gets here either
                        Log::error('Updating...');
                        // tried these too
                        //$this->formFieldUpdated('technologies', $state);
                        //$this->dispatch('formFieldUpdated', $state);
                    })
                    // these don't make a difference
                    //->live()
                    //->native()
                    ->options([
                        'tailwind' => 'Tailwind CSS',
                        'alpine' => 'Alpine.js',
                        'laravel' => 'Laravel',
                        'livewire' => 'Laravel Livewire',
                    ])
            ])

            // this also doesn't change whether it's enabled or not
            ->live();
        return view('livewire.company-comparison-form');
    }
}`

The view has nothing else than this:

<div>
    {{$technologies}}
    {{ $this->form }}
</div>

<div>
    {{$technologies}}
    {{ $this->form }}
</div>

Any help here would be greatly appreciated (and yes, I've been reading documentation and other posts back and forth)!

3 replies

FFilament

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

View column javascript

Any good pointers for using Javascript / Livewire inside a view column? ie. this:

                    
Tables\Columns\ViewColumn::make('info')->view('tables.columns.profile'),

                    
Tables\Columns\ViewColumn::make('info')->view('tables.columns.profile'),

Vanilla JS to keep it simple:

 
<script>
        function expand{{$data->id}}() {
            var short = document.getElementById("short_summary{{$data->id}}");
            var long = document.getElementById("long_summary{{$data->id}}");
            short.style.display = 'none';
            long.style.display = 'block';
        }
    </script>

    <div id="short_summary{{$data->id}}" onclick="toggle_visibility{{$data->id}}()" style="display:block">
        Short summary
    </div>

    <div id="long_summary{{$data->id}}" onclick="toggle_visibility{{$data->id}}()" style="display:block">
        Long summary
    </div>

 
<script>
        function expand{{$data->id}}() {
            var short = document.getElementById("short_summary{{$data->id}}");
            var long = document.getElementById("long_summary{{$data->id}}");
            short.style.display = 'none';
            long.style.display = 'block';
        }
    </script>

    <div id="short_summary{{$data->id}}" onclick="toggle_visibility{{$data->id}}()" style="display:block">
        Short summary
    </div>

    <div id="long_summary{{$data->id}}" onclick="toggle_visibility{{$data->id}}()" style="display:block">
        Long summary
    </div>

This works on the first page, but when you navigate to second page in your listing, it will not have the function defined and it won't work. Any pointers from here?

4 replies

FFilament

•Created by Timster8989 on 10/30/2023 in #❓┊help

Column selector toggle button

2 replies

FFilament

•Created by Timster8989 on 10/30/2023 in #❓┊help

Custom table component + javascript library

I'm leveraging a custom view renderer in my table view:

Tables\Columns\ViewColumn::make('company')
                        ->view('tables.columns.company-record')

Tables\Columns\ViewColumn::make('company')
                        ->view('tables.columns.company-record')

and I'd like to use it to display Apex chart. I can of course include Apex chart for this view file, this way it works, but is hardly the way it should be done. If it was just another Livewire component that I could init myself, I could use x-init property. But as this is "Filament magic" that's happening here, I have not found a sensible way to include this script just once and make it work inside my custom view. If you want to test, here is a minimum example of a blade file to use:

<div>
    @php
    $data = $getRecord();
    $id = $data->id;
    @endphp

    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <div id="chart{{$id}}"></div>

    <script>
        var options = {
            chart: {
                type: 'bar',
            },
            series: [{
                data: [12, 14]
            }],
            xaxis: {
                categories: ['2021', '2022']
            }
        }

        var chart = new ApexCharts(document.querySelector("#chart{{$id}}"), options);
        chart.render();
    </script>
</div>

<div>
    @php
    $data = $getRecord();
    $id = $data->id;
    @endphp

    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <div id="chart{{$id}}"></div>

    <script>
        var options = {
            chart: {
                type: 'bar',
            },
            series: [{
                data: [12, 14]
            }],
            xaxis: {
                categories: ['2021', '2022']
            }
        }

        var chart = new ApexCharts(document.querySelector("#chart{{$id}}"), options);
        chart.render();
    </script>
</div>

As always, any help is greatly appreciated!

4 replies

FFilament

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

Widget order on a panel

Any pointers on how to change the order of widgets in a panel? I've tried changing the order in the panel provider, changing the sort attribute inside widget, but it doesn't seem to work. Any help here is appreciated!

11 replies

FFilament

•Created by Timster8989 on 10/3/2023 in #❓┊help

Custom Javascript inside widget

Excuse me for my ignorance, but I'm trying to understand the right way to use custom javascript inside Filament widget. Maybe I'm missing something basic, but I just can't get it to work. Case example here is swiper.js. I'm loading Swiper library & css in AppServiceProvider:

FilamentAsset::register([
            JS::make('swiper', 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js'),
            CSS::make('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css'),

FilamentAsset::register([
            JS::make('swiper', 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js'),
            CSS::make('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css'),

I've tried couple approaches: 1) Init the script inside widget 2) FilamentView::registerRenderHook('panels::body.end' Now if I render my test code using the renderHook, it works. But inside Livewire component it will not. Here is how to init the library:

        <script>
                document.addEventListener('DOMContentLoaded', function () {
                const swiper = new Swiper('.swiper', {
                    // Optional parameters
                    direction: 'vertical',
                    loop: true,
    
                    // If we need pagination
                    pagination: {
                        el: '.swiper-pagination',
                    },
    
                    // Navigation arrows
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }
                });
            });
            </script>

        <script>
                document.addEventListener('DOMContentLoaded', function () {
                const swiper = new Swiper('.swiper', {
                    // Optional parameters
                    direction: 'vertical',
                    loop: true,
    
                    // If we need pagination
                    pagination: {
                        el: '.swiper-pagination',
                    },
    
                    // Navigation arrows
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }
                });
            });
            </script>

Here is a test HTML:

    <!-- also tried with wire:ignore, doesn't make a difference -->
    <div class='swiper'>
        <!-- Additional required wrapper -->
        <div class='swiper-wrapper'>
            <!-- Slides -->
            <div class='swiper-slide'>Hello world!</div>
            <div class='swiper-slide'>Hello world 2!</div>
        </div>

        <div class='swiper-button-prev'></div>
        <div class='swiper-pagination'></div>
        <div class='swiper-button-next'></div>
    </div>

    <!-- also tried with wire:ignore, doesn't make a difference -->
    <div class='swiper'>
        <!-- Additional required wrapper -->
        <div class='swiper-wrapper'>
            <!-- Slides -->
            <div class='swiper-slide'>Hello world!</div>
            <div class='swiper-slide'>Hello world 2!</div>
        </div>

        <div class='swiper-button-prev'></div>
        <div class='swiper-pagination'></div>
        <div class='swiper-button-next'></div>
    </div>

4 replies

FFilament

•Created by Timster8989 on 9/17/2023 in #❓┊help

Related record, pivot extra column values

I'm trying to understand what happens in save over with this:
Forms\Components\BelongsToManyMultiSelect::make('role') ->multiple() ->relationship('role','title',fn($query) => $query->where('title','!=','Super Admin')) ->options(Roles::all()->pluck('title', 'id')->toArray()), It seems none of the model defaults are run, but the insert is raw SQL, so it's rather hard to hook into it to put some default values in place. Any pointers? ps. was trying to understand this through form components/Select.php, which has this nice 400 line Christmas tree method called "relationship" without really too relevant comments. Uh. Any clue as to why the whole Filament source code is largely undocumented?

3 replies

FFilament

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

Hiding "Dashboard" from a dashboard

11 replies

FFilament

•Created by Timster8989 on 9/8/2023 in #❓┊help

Understanding view rendering

I'm trying to get the css hooks to work, but I think I'm misunderstanding something. I have this problem both in my own app & in the demo app. If I add this: .fi-form { @apply !bg-blue-300 !p-12 rounded-xl; } to resources/css/app.css and run "npm run build", I get nothing. How is the publishing supposed to work? Thanks for the help in advance! ps. I'm not new to PHP and neither to Laravel or Livewire, but I'm really struggling to understand some aspects of Filament. There is a lot of power, but as there are no source code comments there is a lot of trial and error. If I continue with Filament, I'm sure to submit some PR's regarding the documentation and code comments...

41 replies

Gaming

Programming