Я пишу всю реализацию без проверки. Надеюсь, это будет хорошо для вас. Сделал только небольшие изменения и улучшения. Таким образом, вы можете настроить, если хотите ..
Лезвие со скриптом
<div class="modal" id="rolesEditModal" role="dialog" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Roles</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert" id="imgMessage" style="display:none"></div>
<div class="modal-body bg-gray">
<div class="editRolesElement">
<label for="modalTitle" id="userRolesLabel"><span> </span> User Roles </label>
@foreach($roles as $role)
<div class="form-group form-check">
<input data-id="{{ $role->id }}" type="checkbox" class="form-check-input" id="checkbox_{{ $role->id }}">
<label class="form-check-label" for="checkbox_{{ $role->id }}">{{ $role->name }}</label>
</div>
@endforeach
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button id="submitModal" type="button" class="btn btn-success" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
<script>
function getRoles() {
let roles = {};
$('#rolesEditModal .form-check-input').each(function(i) {
roles [$(this).data('id')] = $(this).prop('checked');
});
return roles;
}
function submitRoles(roles) {
$.ajax({
data: {
_token: "{{ csrf_token() }}",
user_id: "{{ $user->id }}",
roles: roles
},
url: "{{ route('userManagement.editRoles') }}",
type: "POST"
}).done(function (data) {
console.log(data.message);
}).fail(function (jqXHR, ajaxOptions, thrownError) {
console.log("Server error!");
});
}
function destructCheckboxes() {
$('#rolesEditModal .form-check-input').prop('checked', false);
}
$("#submitModal").on('click', function() {
let roles = getRoles();
submitRoles(roles);
destructCheckboxes();
$('#rolesEditModal').modal('hide');
});
</script>
МАРШРУТ
// here you just need to write one more route, which from action will return $roles collection and $user (or $users for your case with foreach in blade) object to the view
Route::post('editRoles', 'UserManagementController@editRoles')->name('userManagement.editRoles');
КОНТРОЛЛЕР
public function editRoles(Request $request)
{
$user = User::findOrfail($request->get('user_id'));
$roles = Role::whereIn('id', $request->get('roles'))->get();
$user->roles()->delete();
$user->roles()->saveMany($roles);
return response()->json([
'success' => true,
'message' => "Roles successfully assigned to the user.",
], 200);
}
НОВЫЕ ОБНОВЛЕНИЯ
В вашем контроллере у вас также есть какой-то способ получения вашей страницы, верно? Я думаю, что в вашем блейде у вас есть один $ user (для страницы одного пользователя) или $ users (для отображения нескольких пользователей). Так что я не знаю, что именно в вашем лезвии, но вы можете использовать один из этих методов для вашего конкретного случая, или оба, если вам нужно:
public function singleUserPage($user_id)
{
$user = User::findOrFail($user_id);
$roles = Role::all();
return view('user-management', [ // view for single user
'user' => $user,
'roles' => $roles,
]);
}
// for this you need to loop over on each user in the view, and it will have a same functionality
public function multipleUsersPage()
{
$users = User::all();
$roles = Role::all();
return view('users-management', [ // view for multiple users
'users' => $users,
'roles' => $roles,
]);
}
У вас будет (или уже есть) соответствующиймаршруты для этих методов, например, такие:
Route::get('user/{user_id}', 'UserManagementController@singleUserPage')->name('user_page');
Route::get('users', 'UserManagementController@multipleUsersPage')->name('users_page');
Так что, если вы получаете $ user как "undefined", вам нужно сначала отправить его с контроллера на страницу (как я в двух методах сверху).