Hi, everyone
I will share the way I handle the editing part of Spatie Permissions in my app, create a role or permission is very straight forward so I decided to share the most tricky part, you can copy and paste this code in your livewire component, I’m using tailwind for styling.
public $selectedpermissions=[];
public $selectedrole;
public $checkall;
protected $rules=
['selectedrole'=>['required','integer','exists:roles,id'],
'selectedpermissions'=>['required','exists:permissions,id']
];
public function mount()
{
}
public function updatedSelectedRole($value)
{
$this->selectedpermissions=[];
$role=Role::find($value);
if($role) {
$this->selectedpermissions =$role->getAllPermissions()
->sortBy('name')
->pluck('id', 'id')
->toArray();
}
}
public function Updatedcheckall($value)
{
if($value) {
$this->selectedpermissions = Permission::all()
->pluck('id', 'id')
->toArray();
}
else
{
$this->selectedpermissions=[];
}
}
public function saveRolePermissions()
{
if($this->selectedpermissions)
{ // remove unchecked values that comes with false assign it
$this->selectedpermissions = Arr::where($this->selectedpermissions, function ($value) {
return $value;
});
}
$this->validate();
$role=Role::find($this->selectedrole);
if ($role) {
$role->syncPermissions(Permission::find(array_keys($this->selectedpermissions))->pluck('name'));
$this->selectedpermissions = $role->getAllPermissions()->sortBy('name')
->pluck('id', 'id')
->toArray();
$this->emit('saved');
}
}
public function render()
{
return view('livewire.configuration.roles-permissions',['Roles'=>
Role::all(),
'permissions'=>Permission::all() ->sortBy('name')
->pluck('name', 'id')
]);
}
front end
<div class="col-span-12 sm:col-span-8">
<select class="w-1/2" wire:model="selectedrole">
<option value="">Select a Rol</option>
@foreach($Roles as $role)
<option value="{{$role->id}}" >{{$role->name}}</option>
@endforeach
</select>
</div>
<div class="col-span-12 sm:col-span-8 border-t border-b border-gray-300 p-3 ">
<div class="flex justify-between">
<div class="w-1/2">Available Permissions</div>
<div class="flex justify-end w-1/2">
<div class="1/4">
<x-jet-input id="selectall" name="selectall" wire:model="checkall" type="checkbox" class="mt-1" />
</div>
<div class="text-wrap 3/4">
<x-jet-label class="ml-1 mt-0" for="selectall" value="Select All" />
</div>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-8">
<div class="flex flex-wrap mt-1 justify-between px-3 w-full">
@foreach($permissions as $key=>$permission)
<div class="flex flex-wrap mr-3 mt-3 w-1/3">
<div class="flex">
<div class="1/4">
<x-jet-input name="rolepermissions" wire:model="selectedpermissions.{{$key}}" type="checkbox" class="mt-1" />
</div>
<div class="text-wrap 3/4">
<x-jet-label class="ml-1 mt-0" for="{{$permission}}" value="{{$permission}}" />
</div>
</div>
</div>
@endforeach
</div>
</div>
</x-slot>
<x-slot name="actions">
<x-jet-action-message class="mr-3" on="saved">
{{ __('Saved.') }}
</x-jet-action-message>
<x-jet-button wire:loading.attr="disabled" wire:target="selectedrole">
{{ __('Save') }}
</x-jet-button>
</x-slot>
</x-jet-form-section>
Any question let me know