How to make sortable select multiply in laravel backpack? - laravel

Question

I need to make sortable select2_multiple with Laravel Backpack - or a custom one with similar functionality.
In the docs there is a way to simply implement select2_multiple just like this:
$this->crud->addField([
'label' => "Ingredients",
'type' => 'select2_multiple',
'name' => 'ingredients', // the method that defines the relationship in your Model
'entity' => 'ingredients', // the method that defines the relationship in your Model
'attribute' => 'name', // foreign key attribute that is shown to user
'model' => Ingredient::class, // foreign key model
'pivot' => true,
'select_all' => true
]);
But! I dont see any way to store sort data of the entries we selected!
I have created field SORT in my DB ingredients_to_products
table, this should do the trick, but how to implement this to Backpack?
DB structure is really simple: products, ingredients, ingredients_to_products tables. Ingredients_to_products table have only 3 fields: product_id, ingredient_id, sort.
Laravel 5.6, Backpack CRUD 3.3
Any help is appreciated. Thanks!

Answer 1

I found how to do this.
I made a custom view and put some changes to CrudController, manually resolving sort value.
In view section I created some JS and new fields that represents sort values of relevant entries.
By the way, there is a $entry->pivot function that also can help.
So, what i've done: created new view called "ingredients"
<table class="table table-bordered" id="table">
<p>Connected ingredients:</p>
<select hidden multiple name="ingredients[]" id="ingredients">
<?php foreach ($field['value'] as $item){ ?>
<option selected data-id="<?= $item->id ?>" value="<?= $item->id ?>"><?= $item->name ?></option>
<?php } ?>
</select>
<select hidden multiple name="ingredients_sort[]" id="ingredients_sort">
<?php foreach ($field['value'] as $item){ ?>
<option data-id="<?= $item->id ?>" selected value="<?= $item->pivot->sort ?>"><?= $item->pivot->sort ?></option>
<?php } ?>
</select>
<?php foreach ($field['value'] as $item){ ?>
<tr class="item">
<td>
<p><?= $item->name ?></p>
</td>
<td>
<input class="sorter form-control" data-id="<?= $item->id ?>" value="<?= $item->pivot->sort ?>">
</td>
<td>
<span data-id="<?= $item->id ?>" class="btn btn-primary remover">Remove</span>
</td>
</tr>
<?php } ?>
So as you see we now have the ingredients and ingredients_sort arrays that syncronized by positions by JavaScript.
We get list of all avaliable ingredients by AJAX.
Sorting value - is a connected input field to every ingredient entry.
let selected_ingredients = <?= isset($field['value']) ? json_encode($field['value']) : '' ?>;
let ingredients = [];
document.addEventListener("DOMContentLoaded", load);
function load(){
getIngredients();
}
function getIngredients() {
$.get('/ingredients/get').done( (response) => {
ingredients = JSON.parse(response);
printList(ingredients);
} );
}
function printList(ingredients){
// #todo : print search
for (let i = 0; i < ingredients.length; i++){
let item = ingredients[i];
let _item = document.createElement('div');
_item.className = 'item btn btn-default';
_item.setAttribute('data-id', item.id);
_item.innerHTML = `${item.name}`;
_item.onclick = function () {
// #todo: add ingredient to product
let needAdd = true;
for (let i = 0; i < selected_ingredients.length; i++){
if (selected_ingredients[i].id == item.id){
needAdd = false;
}
}
if (needAdd){
$('#ingredients').append(`<option selected data-id="${item.id}" value="${item.id}">${item.name}</option>`);
$('#ingredients_sort').append(`<option data-id=${item.id} selected value="0">0</option>`);
$('#table').append(
`<tr><td>
<p>${item.name}</p>
</td>
<td>
<input class="sorter form-control" data-id="${item.id}" value="0">
</td>
<td>
<span data-id="${item.id}" class="remover btn btn-primary">remove</span>
</td>
</tr>`);
$('.remover').unbind().click(function () {
$(this).parent().parent().remove();
});
$('.sorter').unbind().change(function(){
let id = $(this).attr('data-id');
$(`#ingredients_sort [data-id=${id}]`).val( $(this).val() ).html( $(this).val() );
});
}
};
$('#list').append(_item);
}
$('.remover').unbind().click(function () {
let id = $(this).attr('data-id');
$(`#ingredients [data-id=${id}], #ingredients_sort [data-id=${id}]`).remove();
$(this).parent().parent().remove();
});
$('.sorter').unbind().change(function() {
let id = $(this).attr('data-id');
$(`#ingredients_sort [data-id=${id}]`).val( $(this).val() ).html( $(this).val() );
});
}
function remove(){
console.log(this);
}
And the last step - putting the Update method in ItemCrudController (which in my app is "product" controller)
public function update(UpdateRequest $request)
{
// your additional operations before save here
$redirect_location = parent::updateCrud($request);
$obj = \App\Models\Item::find( $request->get('id') );
$obj->ingredients()->detach();
$i = 0;
foreach ( $request->get('ingredients') as $item){
$obj->ingredients()->save( \App\Models\Ingredient::find($item), ['sort' => $request->get('ingredients_sort')[$i]]);
$i++;
}
return $redirect_location;
}
So - it works.
The result photo below. Hope this will help someone.