Добавить в плейлист Eloquent - Laravel

Question

Я создаю функцию «Добавить в плейлист» для своего коктейльного приложения. Пользователь сможет добавлять коктейли в плейлист. Это отношение многих ко многим.

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);
    }
}

У меня есть кнопка «Добавить в плейлист» на коктейле, которая называется {{$ cocktail-idDrink}}. Когда пользователь нажимает эту кнопку, появляется модал со списком доступных списков воспроизведения, которые также являются ссылками с именем {{$ playlist-> id}}. Я пытаюсь соединить эти два с двумя, поэтому, когда нажата кнопка списка воспроизведения, коктейль добавляется в этот список воспроизведения.

Я знаю, что мне нужна какая-то форма для кнопки «Добавить в плейлист», но я не уверен, как этого добиться. Когда я добавляю форму к кнопке, я получаю сообщение об ошибке «Нет сообщения».

Добавить в плейлист 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>

Модальный плейлист Btn

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

Плейлист модальное изображение

Добавить в плейлист Button Image

Answer 1

Вы можете достичь этого несколькими различными способами, большинство людей, вероятно, будут использовать запрос AJAX.Однако это можно сделать с помощью формы, выполнив что-то вроде следующего: -

@foreach($cocktails as $cocktail)
<a class="primary-btn add-btn" href='#' data-toggle="modal" data-target="#cocktail-{{ $cocktail->id }}">i class="fas fa-plus"></i>Add to Playlist</a> 
<div class="modal" id="cocktail-{{ $cocktail->id }}">
    <div class="modal-body">
    <form action="/your-route" method="POST">
        @csrf
        <input type='hidden' name='cocktail' value='{{ $cocktail->id }}'>
        @foreach($playlists as $playlist)
            <label >
            <input type="radio" name="playlist" value="{{ $playlist->id }}">
            {{ $playlist->name }}
            </label>
        @endforeach 
        <button type="submit" class="primary-btn">Add To Playlist</button>
    </form                                
    </div>
</div>
@endforeach

При таком подходе будет создан модал для каждого коктейля, или вы также можете сделать это с одним модалом, используя несколько JS дляобновите значение скрытого cocktail поля.

Надеюсь, это даст вам представление о том, как это сделать.

Answer 2

Я не знаю, правильно ли я понимаю, но я думаю, что лучшее решение - это работать с отношениями, как указано, коктейль принадлежит плейлисту. Поэтому вам нужно добавить коктейли в плейлист. Так что, вероятно, будет иметь такой поток, как:

• Список всех плейлистов с кнопкой добавления коктейля на каждом
• Затем нажмите «Добавить коктейль», покажите здесь всплывающую модальную строку, которая будет вызывать все коктейли,
• Вы можете использовать select2 здесь или, если вы используете vuetify, использовать компонент v-autocomplete с включенной поддержкой нескольких проп.
• После этого вы выберете все коктейли, которые хотите добавить в свой плейлист, при нажатии кнопки «Сохранить» вы прикрепите все выбранные коктейли.