- Add TableHeader DTO - Refactor Toggle component to have checked prop, as wire:model does not work - add null collasing for php 8.5 strict compatibility in scope directive - refactor card component so that actions stay on the right - make button component scaled small on active and change color on hover
61 lines
1.9 KiB
PHP
61 lines
1.9 KiB
PHP
<?php
|
|
|
|
use App\Data\Ui\ManageRoles\PermissionData;
|
|
use App\Data\Ui\TableHeader;
|
|
use Livewire\Component;
|
|
use Spatie\LaravelData\Attributes\DataCollectionOf;
|
|
use Spatie\LaravelData\DataCollection;
|
|
|
|
new class extends Component {
|
|
#[DataCollectionOf(TableHeader::class)]
|
|
public DataCollection $header;
|
|
|
|
#[DataCollectionOf(PermissionData::class)]
|
|
public DataCollection $rolePermissions;
|
|
|
|
public function mount(): void
|
|
{
|
|
$this->header = TableHeader::collect([
|
|
new TableHeader('name', 'Permission'),
|
|
new TableHeader('view', 'View'),
|
|
new TableHeader('create', 'Create'),
|
|
new TableHeader('update', 'Edit'),
|
|
new TableHeader('delete', 'Delete'),
|
|
], DataCollection::class);
|
|
|
|
$this->rolePermissions = PermissionData::collect([
|
|
new PermissionData('Outlook - emails', true, true, false, false),
|
|
new PermissionData('Teams - Messages', true, false, true, true),
|
|
], DataCollection::class);
|
|
}
|
|
};
|
|
?>
|
|
|
|
<div>
|
|
<x-shared.card title="Role Permission - HR Manager" icon="lucide-lock" class="p-0">
|
|
<x-slot:actions>
|
|
<x-shared.button icon="lucide-x">
|
|
{{ __('Revoke All') }}
|
|
</x-shared.button>
|
|
<x-shared.button icon="lucide-check">
|
|
{{ __('Save') }}
|
|
</x-shared.button>
|
|
</x-slot:actions>
|
|
|
|
<x-table :headers="$header->toArray()" :rows="$rolePermissions">
|
|
@scope('cell_view', $row)
|
|
<x-shared.toggle :checked="$row->view" />
|
|
@endscope
|
|
@scope('cell_create', $row)
|
|
<x-shared.toggle :checked="$row->create" />
|
|
@endscope
|
|
@scope('cell_update', $row)
|
|
<x-shared.toggle :checked="$row->update" />
|
|
@endscope
|
|
@scope('cell_delete', $row)
|
|
<x-shared.toggle :checked="$row->update" />
|
|
@endscope
|
|
</x-table>
|
|
</x-shared.card>
|
|
</div>
|