Filament•12mo ago

Record data not updated after changes on a Livewire component within a Infolist

Hello. I'm building custom InfoList for a Document record. The document is shared throuh a form where the user can add emails and send the link. This behavior is already working in a livewire component that is being added in the infolist. Then below the form i have an Action component that allows me to disable the shared link. This action is not loaded until the document is shared and the shared link is available for the document (After submitting the form). The problem is that when I submit the form and the link is generated, the Action below is not being disaplayed until I refresh the page. This should be reactive on the infolist (i guess) but I dont know how to trigger the reactivity on the Action entry in order to display the button without reloading the whole page. Any help is appreciated.

15 Replies

LeandroFerreira•12mo ago

Could you share the code?

Jean RoumeauOP•12mo ago

Sure, might be too long.

message.txt

Jean RoumeauOP•12mo ago

Currently I'm having this issue:

Jean RoumeauOP•12mo ago

The workflows field dissapears and console show this message: Uncaught Snapshot missing on Livewire component with id: 3bwb9bwuaHSqfk8zBQhw

LeandroFerreira•12mo ago

Could you share the blade, where you are using the livewire component?

Jean RoumeauOP•12mo ago

<x-filament-panels::page
    @class([
        'fi-resource-view-record-page',
        'fi-resource-' . str_replace('/', '-', $this->getResource()::getSlug()),
        'fi-resource-record-' . $this->getRecord()->getKey(),
    ])
>
        @if ($this->hasInfolist())
            {{ $this->infolist }}
        @else
            <div
                wire:key="{{ $this->getId() }}.forms.{{ $this->getFormStatePath() }}"
            >
                {{ $this->form }}
            </div>
        @endif
</x-filament-panels::page>

<x-filament-panels::page
    @class([
        'fi-resource-view-record-page',
        'fi-resource-' . str_replace('/', '-', $this->getResource()::getSlug()),
        'fi-resource-record-' . $this->getRecord()->getKey(),
    ])
>
        @if ($this->hasInfolist())
            {{ $this->infolist }}
        @else
            <div
                wire:key="{{ $this->getId() }}.forms.{{ $this->getFormStatePath() }}"
            >
                {{ $this->form }}
            </div>
        @endif
</x-filament-panels::page>

I'm creating a custom Page because I was using a custom ListRecord page.

LeandroFerreira•12mo ago

Why you are using wire:key?

Jean RoumeauOP•12mo ago

Was trying to fix this: Uncaught Snapshot missing on Livewire component with id:

LeandroFerreira•12mo ago

Could you add a test? wire:key="{{ now() }}"

Jean RoumeauOP•12mo ago

Well, I'm not using that wire:key at all. I've copied the view-record view but I'm using an infolist so that condition is not loaded.

LeandroFerreira•12mo ago

Where is the select? Where is the "Guardar" button? In the {{ $this->form }} ? hum here? Workflow::getInfolistComponents($this->getRecord()) How are you rendering the fields?

Jean RoumeauOP•12mo ago

The select is in a livewire component

...Workflow::getInfolistComponents($this->getRecord()),

...Workflow::getInfolistComponents($this->getRecord()),

getInfolistComponents loads the livewire component:

public static function getInfolistComponents(Document $record, $editMode = true) : array
    {
        $documentType = $record->documentType;
        if ($documentType->workflows()->count() === 0) {
            return [];
        }

        if (!$editMode) {
            return self::getInfolistComponentsForView($record);
        }

        $workflowComponents = [];

        foreach ($documentType->workflows as $key => $workflow) {
            $workflowComponents[] = Section::make(__($workflow->name))
                ->icon('heroicon-o-rectangle-group')
                ->description(function () use ($workflow) { return $workflow->description ?? false; })
                ->collapsible()
                ->schema([
                    Livewire::make(DocumentWorkflow::class, ['record' => $record, 'workflow' => $workflow])
                ]);
        }

        return $workflowComponents;
    }

public static function getInfolistComponents(Document $record, $editMode = true) : array
    {
        $documentType = $record->documentType;
        if ($documentType->workflows()->count() === 0) {
            return [];
        }

        if (!$editMode) {
            return self::getInfolistComponentsForView($record);
        }

        $workflowComponents = [];

        foreach ($documentType->workflows as $key => $workflow) {
            $workflowComponents[] = Section::make(__($workflow->name))
                ->icon('heroicon-o-rectangle-group')
                ->description(function () use ($workflow) { return $workflow->description ?? false; })
                ->collapsible()
                ->schema([
                    Livewire::make(DocumentWorkflow::class, ['record' => $record, 'workflow' => $workflow])
                ]);
        }

        return $workflowComponents;
    }

And DocumentWorkflow::class is the livewire components which has InteractsWithForm

LeandroFerreira•12mo ago

hum, when you are using a loop, you should include a unique key value for each iteration

Jean RoumeauOP•12mo ago

You mean on Section ::make()...? I think I've already tried that, but will do it again.

LeandroFerreira•12mo ago

https://livewire.laravel.com/docs/nesting#rendering-children-in-a-loop

Laravel

Nesting Components | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

Gaming

Programming

Record data not updated after changes on a Livewire component within a Infolist