how to persist data in form after filtering

I have an issue after I filter the data with this function

 public function updatedSelectedProjectId($projectId)
    {
        $this->posts = Post::where('project_id', $projectId)->get(); // Update posts based on selected project
    }

the data didn't save or persist although it filtered here is the create component

<?php

namespace App\Http\Livewire\Design;

use App\Models\Design;
use App\Models\Post;
use App\Models\Project;
use App\Models\Team;
use Livewire\Component;
use Spatie\MediaLibrary\MediaCollections\Models\Media;
use App\Listeners\Design\DesignCreatedEmail;
use App\Events\Design\DesignCreated;

class Create extends Component
{
    public Design $design;

    public $posts;
    public $projects;
    public $post;
    public $project;

    public array $mediaToRemove = [];

    public array $listsForFields = [];

    public array $mediaCollections = [];

    public $selectedProjectId = null;

    public function addMedia($media): void
    {
        $this->mediaCollections[$media['collection_name']][] = $media;
    }

    public function removeMedia($media): void
    {
        $collection = collect($this->mediaCollections[$media['collection_name']]);

        $this->mediaCollections[$media['collection_name']] = $collection->reject(fn ($item) => $item['uuid'] === $media['uuid'])->toArray();

        $this->mediaToRemove[] = $media['uuid'];
    }

    protected function syncMedia(): void
    {
        collect($this->mediaCollections)->flatten(1)
            ->each(fn ($item) => Media::where('uuid', $item['uuid'])
                ->update(['model_id' => $this->design->id]));

        Media::whereIn('uuid', $this->mediaToRemove)->delete();
    }

    public function mount(Design $design)
    {
        $this->design = $design;
        $this->projects = Project::all(); // Load all projects
        $this->posts = collect();
        $this->initListsForFields();
    }

    public function updatedSelectedProjectId($projectId)
    {
        $this->posts = Post::where('project_id', $projectId)->get(); // Update posts based on selected project
    }



    public function render()
    {
        return view('livewire.design.create');
    }

    public function submit()
    {
        $this->validate();

        $this->design->save();
        $this->syncMedia();
        event(new DesignCreated($this->design));

        return redirect()->route('admin.designs.index');
    }


    protected function rules(): array
    {
        return [
            'design.project_id' => [
                'integer',
                'exists:projects,id',
                'nullable',
            ],
            'design.post_id' => [
                'integer',
                'exists:posts,id',
                'nullable',
            ],
            'mediaCollections.design_design' => [
                'array',
                'required',
            ],
            'mediaCollections.design_design.*.id' => [
                'integer',
                'exists:media,id',
            ],
            'design.statues' => [
                'nullable',
                'in:' . implode(',', array_keys($this->listsForFields['statues'])),
            ],
            'design.confirmation' => [
                'nullable',
                'in:' . implode(',', array_keys($this->listsForFields['confirmation'])),
            ],
            'design.note' => [
                'string',
                'nullable',
            ],
            'design.review' => [
                'nullable',
                'in:' . implode(',', array_keys($this->listsForFields['review'])),
            ],
            'design.team_id' => [
                'integer',
                'exists:teams,id',
                'required',
            ],
        ];
    }

    protected function initListsForFields(): void
    {
        $this->listsForFields['project']      = Project::pluck('name', 'id')->toArray();
        $this->listsForFields['post']         = Post::pluck('title', 'id')->toArray();
        $this->listsForFields['statues']      = $this->design::STATUES_RADIO;
        $this->listsForFields['confirmation'] = $this->design::CONFIRMATION_RADIO;
        $this->listsForFields['review']       = $this->design::REVIEW_RADIO;
        $this->listsForFields['team']         = Team::pluck('name', 'id')->toArray();
    }
}

LaryAI

2 years ago

Level 58

It seems like you're using Livewire for your component and you want to persist the selected project's posts after filtering. If the data isn't persisting, it could be due to a few reasons. Here's a solution that ensures the selected project's posts are stored and available for the form:

First, make sure that your Livewire component's properties are public and properly declared. It looks like you've done this correctly with $posts and $selectedProjectId.

Next, ensure that your Livewire component's view file is correctly using the wire:model directive to bind your select dropdown to the $selectedProjectId property. This will ensure that when the dropdown changes, the updatedSelectedProjectId method is called.

Here's an example of how your select dropdown might look in your Livewire view file:

<select wire:model="selectedProjectId">
    <option value="">Choose a project</option>
    @foreach($projects as $project)
        <option value="{{ $project->id }}">{{ $project->name }}</option>
    @endforeach
</select>

When the updatedSelectedProjectId method is triggered, it will update the $posts property with the filtered results. Make sure that your view file is also using this $posts property to display the filtered posts.

For example:

@foreach($posts as $post)
    <!-- Display your post data here -->
@endforeach

If you're using a form to submit data, make sure that the form is also using Livewire's wire:submit.prevent="submit" directive to handle the form submission through Livewire.

Here's an example of a form submission:

<form wire:submit.prevent="submit">
    <!-- Your form inputs here -->
    <button type="submit">Submit</button>
</form>

Lastly, if you're still facing issues with data not persisting, it could be due to the page being refreshed or the Livewire component being re-rendered without preserving the state. To debug this, you can add some logging to your updatedSelectedProjectId method to ensure it's being called as expected:

public function updatedSelectedProjectId($projectId)
{
    $this->posts = Post::where('project_id', $projectId)->get();
    logger('Updated posts for project: ' . $projectId);
}

Check your application's log to see if the method is being called and if the $projectId is correct.

If you've followed all these steps and the data is still not persisting, please provide more details about how the form is being used and how the data is expected to persist so that we can further assist you.

Please or to participate in this conversation.