添加到播放列表Eloquent - Laravel

Question

I am creating a 'Add to Playlist' function for my cocktail app. The user will be able to add Cocktails to a Playlist. This is a many to many relationship.

Cocktail.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class cocktail extends Model
{
    protected $primaryKey = 'idDrink';
    protected $fillable = ['strDrink', 'strCategory', 'strGlass', 'strInstructions', 'strIngredient1'];

    public function playlist()
    {
        return $this->belongsTo(Playlist::class);
    }

    public function favourite()
    {
        return $this->hasMany(Favourite::class); 
    } 

}

Playlist.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class playlist extends Model
{
    protected $fillable = ['name', 'description'];

    public function cocktails()
    {
        return $this->hasMany(Cocktail::class);
    }
}

I have a 'Add to Playlist' button on the cocktail, that has a name of {{ $cocktail-idDrink }}. When the user clicks that button, a modal pops up with the list of available playlists that are also links with a name of the {{ $playlist->id }}. I am trying to connect these 2 some two, so when the playlist button is clicked, the cocktail is added to that playlist.

I know I need some sort of form on the Add to Playlist button, but am not sure how to achieve this. When I add a form to the button, I get a 'No Message' error.

Add to Playlist Btn

<button type="submit" href="#" class="primary-btn add-btn" name="{{ $cocktail->idDrink }}" data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-plus"></i>Add to Playlist</button>

Modal Playlist Btn

@foreach($playlists as $playlist)
  <div class="modal-body">
    <a name="{{ $playlist->id }}" href="#">{{ $playlist->name }}</a>
  </div>
@endforeach

Playlist Modal Image

Add to Playlist Button Image

Answer 1

I don't know if am getting this right, but I think the best solution is to work with the relationship as stated, a cocktail belongs to a playlist. Therefore, you'll need to add cocktails to a playlist. So probably would have a flow like:

• A listing of all the playlists with the add cocktail button on each
• Then at click add cocktail, show your pop up modal here which will fetch all the cocktails,
• You can use select2 here or if your are using vuetify, use v-autocomplete component with multiple prop enabled.
• After this, you will select all the cocktails to add to your playlist at click save, you attach all the selected cocktails.