Filament•13mo ago

Livewire custom component - Livewire Sortable

Hello everyone, actually loosing my mind trying to debug an error. I'm working with the last version of Laravel with Filament to help me customize my backend. I had to code a custom livewire component because i need to do a custom drag and drop form. I successfully handle the custom component, added the sortable livewire plugin and i tought it were working but nope! It seems like it was working because in updateAppointmentOrder() (the method that sortable triggers each time i move an item) i was dumping dd($items), but without that dd() i get an error in console and the item doesnt change position... i'll paste here my code, please help me out with this issue! 😦 Below the livewire view (as a pic because it is too much code)

3 Replies

SirAlyonOP•13mo ago

Livewire View:

SirAlyonOP•13mo ago

Filament Custom View:

<x-filament-panels::page>
@livewire('create-open-funds-d')

@livewireScripts
<script src="https://cdn.jsdelivr.net/gh/livewire/[email protected]/dist/livewire-sortable.js"></script>
</x-filament-panels::page>

<x-filament-panels::page>
@livewire('create-open-funds-d')

@livewireScripts
<script src="https://cdn.jsdelivr.net/gh/livewire/[email protected]/dist/livewire-sortable.js"></script>
</x-filament-panels::page>

Livewire Controller:

class CreateOpenFundsD extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];
    public $counter = 2;



    public function mount(): void
    {
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                /*              Hidden::make('ckey'),
            Hidden::make('cvalue'), */

                Select::make('open_funds_lunivid')
                    ->relationship(name: 'openFundsT', titleAttribute: 'cfilename')
            ])
            ->statePath('data')
            ->model(OpenfundsD::class);;
    }

    public function create(): void
    {
        //dd($this->data, $this->data['open_funds_lunivid']);
        $open_funds_lunivid = array_shift($this->data);
        $inputCouples = count($this->data) / 2;

        //dd($this->data, $inputCouples, $this->data['cvalue-'. '0'], $this->data['ckey-'. '0']);

        for ($i = 0; $i < $inputCouples; $i++) {
            DB::table('openfunds_d')->insert([
                'open_funds_lunivid' => $open_funds_lunivid,
                'cvalue' => $this->data['cvalue-'.$i],
                'ckey' => $this->data['ckey-'.$i],
            ]);
        }

        $this->reset('data');
    }


    public function render()
    {
        return view('livewire.create-open-funds-d');
    }

    public static function getFormSchema(): array
    {
        return [
            TextInput::make('ckey')
                ->label('Header Originale')
                ->hidden(),

            TextInput::make('cvalue')
                ->label('Header Finale')
                ->hidden(),

            Select::make('open_funds_lunivid')
                ->relationship(name: 'openFundsT', titleAttribute: 'cfilename')
        ];
    }

    public function increment()
    {
        $this->counter++;
    }

    public function updateAppointmentOrder($items)
    {
        //dd($items);
    }
}

class CreateOpenFundsD extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];
    public $counter = 2;



    public function mount(): void
    {
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                /*              Hidden::make('ckey'),
            Hidden::make('cvalue'), */

                Select::make('open_funds_lunivid')
                    ->relationship(name: 'openFundsT', titleAttribute: 'cfilename')
            ])
            ->statePath('data')
            ->model(OpenfundsD::class);;
    }

    public function create(): void
    {
        //dd($this->data, $this->data['open_funds_lunivid']);
        $open_funds_lunivid = array_shift($this->data);
        $inputCouples = count($this->data) / 2;

        //dd($this->data, $inputCouples, $this->data['cvalue-'. '0'], $this->data['ckey-'. '0']);

        for ($i = 0; $i < $inputCouples; $i++) {
            DB::table('openfunds_d')->insert([
                'open_funds_lunivid' => $open_funds_lunivid,
                'cvalue' => $this->data['cvalue-'.$i],
                'ckey' => $this->data['ckey-'.$i],
            ]);
        }

        $this->reset('data');
    }


    public function render()
    {
        return view('livewire.create-open-funds-d');
    }

    public static function getFormSchema(): array
    {
        return [
            TextInput::make('ckey')
                ->label('Header Originale')
                ->hidden(),

            TextInput::make('cvalue')
                ->label('Header Finale')
                ->hidden(),

            Select::make('open_funds_lunivid')
                ->relationship(name: 'openFundsT', titleAttribute: 'cfilename')
        ];
    }

    public function increment()
    {
        $this->counter++;
    }

    public function updateAppointmentOrder($items)
    {
        //dd($items);
    }
}

SirAlyonOP•13mo ago

The error i get in console (every time i move an item over another one, to change his position):

Gaming

Programming

Livewire custom component - Livewire Sortable