Tambahkan bidang tambahan ke Tabel Pivot – Panel Admin Cepat

QuickAdminpanel kami memiliki bidang hubungan yang dimiliki, tetapi kami tidak memiliki kemampuan untuk menambahkan kolom tambahan ke tabel pivot. Jangan khawatir, artikel ini akan menunjukkan kepada Anda cara membuat perubahan ini secara manual, atau mengimplementasikannya dalam proyek Laravel Anda yang tidak dihasilkan oleh QuickAdminpanel.

Bayangkan sebuah skenario: Anda memiliki Resep Situs web, dan setiap resep dapat terdiri dari banyak bahan, sehingga Anda membuat hubungan banyak-ke-banyak, dan menambahkan bahan dengan dropdown select2 yang kami hasilkan:

Tapi lebih masuk akal untuk menambahkan bahan dengan kuantitasnya, bukan? Jadi berapa banyak masing -masing bahan yang kita butuhkan dalam resep. Untuk itu, kita membutuhkan bidang tambahan bahan_recipe Tabel pivot.

Mari kita terapkan itu dalam artikel ini, dan juga mengubah formulir untuk dapat menentukan kuantitas ini. Inilah hasil akhirnya:

Atau, jika Anda lebih suka demo video:

Jadi, mari kita lakukan perubahan, langkah demi langkah.

---

Langkah 1. Jumlah Lapangan Baru: Migrasi/Model

Dari default yang dihasilkan QuickAdminpanel, kami memiliki struktur ini.

app/model/recipe.php:

public function ingredients()
{
    return $this->belongsToMany(Ingredient::class);
}

Mari tambahkan jumlah bidang di sini.

php artisan make:migration add_amount_to_ingredient_recipe_table

Dan dalam migrasi:

public function up()
{
    Schema::table('ingredient_recipe', function (Blueprint $table) {
        $table->string('amount');
    });
}

Dan kemudian kita perlu menentukannya app/model/recipe.php:

public function ingredients()
{
    return $this->belongsToMany(Ingredient::class)->withPivot('amount');
}

Anda dapat membaca lebih lanjut tentang perubahan fasih dalam dokumentasi Laravel resmi.

---

Langkah 2. Blade+Controller: Buat/Edit Formulir

Di pengontrol, kita perlu meneruskan bahan -bahannya membuat() metode:

public function create()
{
    return view('admin.recipes.create', [
        'ingredients' => Ingredient::all(),
    ]);
}

Dan kemudian masuk Sumber Daya/Tampilan/Admin/Resep/create.blade.phpAlih-alih bidang Select2 itu, kami akan membuat pisau parsial yang akan digunakan kembali dalam tampilan Buat dan menyimpan. Jadi bagian ini akan identik resep/create.blade.php Dan resep/edit.blade.php:

<div class="form-group">
    <label class="required" for="ingredients">{{ trans('cruds.recipe.fields.ingredients') }}</label>

    @include('admin.recipes.partials.ingredients')

    @if($errors->has('ingredients'))
        <div class="invalid-feedback">
            {{ $errors->first('ingredients') }}
        </div>
    @endif
    <span class="help-block">{{ trans('cruds.recipe.fields.ingredients_helper') }}</span>
</div>

Sekarang, apa yang ada di dalamnya Sumber Daya/Tampilan/Admin/Resep/Partials/bahan.blade.php?

<table>
    @foreach($ingredients as $ingredient)
        <tr>
            <td><input {{ $ingredient->value ? 'checked' : null }} data-id="{{ $ingredient->id }}" type="checkbox" class="ingredient-enable"></td>
            <td>{{ $ingredient->name }}</td>
            <td><input value="{{ $ingredient->value ?? null }}" {{ $ingredient->value ? null : 'disabled' }} data-id="{{ $ingredient->id }}" name="ingredients[{{ $ingredient->id }}]" type="text" class="ingredient-amount form-control" placeholder="Amount"></td>
        </tr>
    @endforeach
</table>

@section('scripts')
    @parent
    <script>
        $('document').ready(function () {
            $('.ingredient-enable').on('click', function () {
                let id = $(this).attr('data-id')
                let enabled = $(this).is(":checked")
                $('.ingredient-amount[data-id="' + id + '"]').attr('disabled', !enabled)
                $('.ingredient-amount[data-id="' + id + '"]').val(null)
            })
        });
    </script>
@endsection

Jadi, kami memuat $ bahan Sebagai tabel, memeriksa apakah setiap jumlah memiliki nilai atau diatur ke null dan apakah kita perlu menonaktifkan input itu.

Juga, ada @section (‘skrip’) Itu menambah cuplikan jQuery untuk mengaktifkan/menonaktifkan bidang jumlah di baris, jika beberapa kotak centang bahan dicentang.

Sekarang, dari mana kita mendapatkannya $ bahan-> nilai? Di dalam Recipescontroller metode edit ()inilah yang kami miliki:

public function edit(Recipe $recipe)
{
    abort_if(Gate::denies('recipe_edit'), Response::HTTP_FORBIDDEN, '403 Forbidden');

    $recipe->load('ingredients');

    $ingredients = Ingredient::get()->map(function($ingredient) use ($recipe) {
        $ingredient->value = data_get($recipe->ingredients->firstWhere('id', $ingredient->id), 'pivot.amount') ?? null;
        return $ingredient;
    });

    return view('admin.recipes.edit', [
        'ingredients' => $ingredients,
        'recipe' => $recipe,
    ]);
}

Seperti yang Anda lihat, kami menggunakan metode Collection peta() dan kemudian dapatkan nilainya pivot.amount struktur.

---

Langkah 3. Memvalidasi/Menyimpan Bahan

Pertama, perubahan kecil dari kode QuickAdminpanel default: kita perlu mengubah aturan validasi: dari bilangan bulat ke rangkaian Di sini, karena jumlah kita adalah string.

APP/HTTP/Permintaan/Storereciperequest.phpdan identik Updaterecerquest.php:

public function rules()
{
    return [
        'name'          => [
            'string',
            'required',
        ],
        'ingredients.*' => [
            'string',
        ],
        'ingredients'   => [
            'required',
            'array',
        ],
    ];
}

Akhirnya, bagaimana kami menyimpan dan memperbarui data, di Recipescontroller:

public function store(StoreRecipeRequest $request)
{
    $data = $request->validated();

    $recipe = Recipe::create($data);

    $recipe->ingredients()->sync($this->mapIngredients($data['ingredients']));

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

public function update(UpdateRecipeRequest $request, Recipe $recipe)
{
    $data = $request->validated();

    $recipe->update($data);
    $recipe->ingredients()->sync($this->mapIngredients($data['ingredients']));

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

private function mapIngredients($ingredients)
{
    return collect($ingredients)->map(function ($i) {
        return ['amount' => $i];
    });
}

Sekali lagi, beberapa koleksi “sihir” dalam metode Mapingredients Untuk membuat metode toko/perbarui lebih mudah dibaca dan lebih pendek.

---

Langkah 4. Tampilkan bahan dengan jumlah

Perubahan kecil terakhir harus masuk Sumber Daya/Tampilan/Admin/Resep/Show.blade.php:

<tr>
    <th>
        {{ trans('cruds.recipe.fields.ingredients') }}
    </th>
    <td>
        @foreach($recipe->ingredients as $key => $ingredients)
            <div class="label label-info">{{ $ingredients->name }} 
                ({{ $ingredients->pivot->amount }})</div>
        @endforeach
    </td>
</tr>

Seperti yang Anda lihat, kami menggunakan $ bahan-> pivot-> jumlah untuk menunjukkan jumlah masing -masing bahan.

---

Dan, itu saja!

Anda dapat melihat transformasi dalam demo-repositori publik ini di sini.