Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Michael Fayez's avatar

please help - would like to save selected post with Livewire

I am tired more than week,, please read the code and tell me what is the problem .. why the post didn't saved in the database ?? here is the Livewire 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 $post_id;
    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();
    }



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


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

    // Assign the selected project and post IDs to the design instance
    $this->design->project_id = $this->selectedProjectId;
    $this->design->post_id = $this->post_id;
    $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();
    }
}

here is the blade

<form wire:submit.prevent="submit" class="pt-3">

    <div class="form-group {{ $errors->has('design.project_id') ? 'invalid' : '' }}">
        <label class="form-label" for="project">{{ trans('cruds.design.fields.project') }}</label>
            <select wire:model="selectedProjectId" name="project"
                class="mt-2 text-sm sm:text-base pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
                required>
            <option value="">-- choose project --</option>
            @foreach ($projects as $project)
                <option value="{{ $project->id }}">{{ $project->name }}</option>
            @endforeach
        </select>
        <div class="validation-message">
            {{ $errors->first('design.project_id') }}
        </div>
        <div class="help-block">
            {{ trans('cruds.design.fields.project_helper') }}
        </div>
    </div>
    <div class="form-group {{ $errors->has('design.post_id') ? 'invalid' : '' }}">
        <label class="form-label" for="post">{{ trans('cruds.design.fields.post') }}</label>

            <select wire:model="post_id" name="post"
                    class="mt-2 text-sm sm:text-base pl-2 pr-4 rounded-lg border
                    border-gray-400 w-full py-2 focus:outline-none
                    focus:border-blue-400" required>
            @foreach ($posts as $post)
                <option value="{{ $post->id }}">{{ $post->title }}</option>
            @endforeach
            </select>
        <div class="validation-message">
            {{ $errors->first('design.post_id') }}
        </div>
        <div class="help-block">
            {{ trans('cruds.design.fields.post_helper') }}
        </div>
    </div>
    <div class="form-group {{ $errors->has('mediaCollections.design_design') ? 'invalid' : '' }}">
        <label class="form-label required" for="design">{{ trans('cruds.design.fields.design') }}</label>
        <x-dropzone id="design" name="design" action="{{ route('admin.designs.storeMedia') }}" collection-name="design_design" max-file-size="5" max-width="1200" max-height="630" />
        <div class="validation-message">
            {{ $errors->first('mediaCollections.design_design') }}
        </div>
        <div class="help-block">
            {{ trans('cruds.design.fields.design_helper') }}
        </div>
    </div>
    <div class="form-group {{ $errors->has('design.statues') ? 'invalid' : '' }}">
        <label class="form-label">{{ trans('cruds.design.fields.statues') }}</label>
        @foreach($this->listsForFields['statues'] as $key => $value)
            <label class="radio-label"><input type="radio" name="statues" wire:model="design.statues" value="{{ $key }}">{{ $value }}</label>
        @endforeach
        <div class="validation-message">
            {{ $errors->first('design.statues') }}
        </div>
        <div class="help-block">
            {{ trans('cruds.design.fields.statues_helper') }}
        </div>
    </div>
    <div class="form-group {{ $errors->has('design.confirmation') ? 'invalid' : '' }}">
        <label class="form-label">{{ trans('cruds.design.fields.confirmation') }}</label>
        @foreach($this->listsForFields['confirmation'] as $key => $value)
            <label class="radio-label"><input type="radio" name="confirmation" wire:model="design.confirmation" value="{{ $key }}">{{ $value }}</label>
        @endforeach
        <div class="validation-message">
            {{ $errors->first('design.confirmation') }}
        </div>
        <div class="help-block">
            {{ trans('cruds.design.fields.confirmation_helper') }}
        </div>
    </div>
    <div class="form-group {{ $errors->has('design.note') ? 'invalid' : '' }}">
        <label class="form-label" for="note">{{ trans('cruds.design.fields.note') }}</label>
        <input class="form-control" type="text" name="note" id="note" wire:model.defer="design.note">
        <div class="validation-message">
            {{ $errors->first('design.note') }}
        </div>
        <div class="help-block">
            {{ trans('cruds.design.fields.note_helper') }}
        </div>
    </div>
    <div class="form-group {{ $errors->has('design.review') ? 'invalid' : '' }}">
        <label class="form-label">{{ trans('cruds.design.fields.review') }}</label>
        @foreach($this->listsForFields['review'] as $key => $value)
            <label class="radio-label"><input type="radio" name="review" wire:model="design.review" value="{{ $key }}">{{ $value }}</label>
        @endforeach
        <div class="validation-message">
            {{ $errors->first('design.review') }}
        </div>
        <div class="help-block">
            {{ trans('cruds.design.fields.review_helper') }}
        </div>
    </div>
    @if(auth()->user()->is_Admin)
        <div class="form-group {{ $errors->has('design.team_id') ? 'invalid' : '' }}">
            <label class="form-label required" for="team">{{ trans('cruds.design.fields.team') }}</label>
            <x-select-list class="form-control" required id="team" name="team" :options="$this->listsForFields['team']" wire:model="design.team_id" />
            <div class="validation-message">
                {{ $errors->first('design.team_id') }}
            </div>
            <div class="help-block">
                {{ trans('cruds.design.fields.team_helper') }}
            </div>
        </div>
    @endif
    <div class="form-group">
        <button class="btn btn-indigo mr-2" type="submit">
            {{ trans('global.save') }}
        </button>
        <a href="{{ route('admin.designs.index') }}" class="btn btn-secondary">
            {{ trans('global.cancel') }}
        </a>
    </div>
</form>
0 likes
3 replies
LaryAI's avatar
Level 58

Based on the code provided, it seems that the Livewire component is set up to handle the creation of a Design model and associate it with a Project and a Post. However, without knowing the exact error message or behavior you're experiencing, it's difficult to pinpoint the problem. Here are a few things to check and consider that might help resolve the issue:

  1. Ensure that the Design model has the project_id and post_id fields fillable. In your Design model, you should have something like this:
protected $fillable = [
    // ... other fields ...
    'project_id',
    'post_id',
    // ... other fields ...
];
  1. Make sure that the submit method is being called correctly. The wire:submit.prevent="submit" directive in your form should prevent the default form submission and instead call the submit method in your Livewire component.

  2. Check your validation rules to ensure they are not preventing the model from saving. If there are validation errors, the model will not be saved. You can debug this by adding dd($this->errors()); at the beginning of your submit method to see if there are any validation errors.

  3. Ensure that the Design model's relationships are correctly defined. If you have foreign keys for project_id and post_id, make sure the relationships are set up in the Design model:

public function project()
{
    return $this->belongsTo(Project::class, 'project_id');
}

public function post()
{
    return $this->belongsTo(Post::class, 'post_id');
}
  1. Verify that the selectedProjectId and post_id properties are being set correctly. You can debug this by adding dd($this->selectedProjectId, $this->post_id); at the beginning of your submit method to see if they have the expected values.

  2. Check your database and ensure that the designs table is set up correctly with the project_id and post_id columns and that they allow null values if they are nullable.

  3. If you're using events, make sure that the DesignCreated event and the DesignCreatedEmail listener are not causing the issue. Comment out the event(new DesignCreated($this->design)); line temporarily to see if the problem persists.

  4. Lastly, check your server logs and browser console for any errors that might give you more information about what's going wrong.

If after checking all these points the issue still persists, please provide more details about the error or behavior you're experiencing, including any error messages or logs, so that we can give you a more precise solution.

Snapey's avatar

You need to debug for yourself using dd to find out what is going wrong. I don't think anyone is going to trawl through all that code.

Use debugbar or use dd() at different places

Snapey's avatar

I don't think anyone is going to trawl through all that code.

unless they are a robot

Please or to participate in this conversation.