65 lines
2.6 KiB
PHP

<div class="space-y-4">
<div class="flex justify-between items-center">
<h2 class="text-xl font-bold">{{ __('users.list') }}</h2>
<x-button primary label="{{__('users.CreateNewRole')}}" wire:click="openCreateModal" />
</div>
<div class="flex items-center gap-2">
<x-input wire:model.debounce.300ms="search" placeholder="搜尋使用者名稱..." class="w-64" />
</div>
<x-table divider="thin" has_shadow="true" celled="true">
<x-slot name="header">
<th class="cursor-pointer" wire:click="sortBy('id')">{{__('users.no')}}</th>
<th class="cursor-pointer" wire:click="sortBy('name')">{{__('users.name')}}</th>
<th>{{__('users.action')}}</th>
</x-slot>
@forelse ($users as $user)
<tr>
<td>{{ $user->id }}</td>
<td>{{ $user->name }}</td>
<td class="space-x-2">
@can('role-edit')
<x-button flat label="{{ __('users.edit') }}" color="yellow" icon="pencil-square" wire:click="openEditModal({{ $user->id }})" />
@endcan
@can('role-delete')
<x-button flat label="{{ __('users.delete') }}" color="red" icon="trash" wire:click="delete({{ $user->id }})" />
@endcan
</td>
</tr>
@empty
<tr>
<td colspan="3">{{ __('No users found.') }}</td>
</tr>
@endforelse
</x-table>
<div class="mt-4">
{!! $users->links('pagination::tailwind') !!}
</div>
@if ($showCreateModal)
<x-modal-card title="{{ $editingUserId ? '編輯使用者' : '新增使用者' }}" blur wire:model.defer="showCreateModal">
<div class="space-y-4">
<x-input label="使用者名稱" wire:model.defer="name" />
<x-select
label="角色"
wire:model.defer="selectedRoles"
placeholder="選擇角色"
option-label="label"
option-value="value"
:options="$roles->map(fn($p) => ['value' => $p->id, 'label' => $p->name])->toArray()"
/>
</div>
<x-slot name="footer">
<div class="flex justify-center gap-2">
<x-button primary label="{{__('users.cancel')}}" x-on:click="$dispatch('close')" />
<x-button primary label="{{__('users.submit')}}" wire:click="save" />
</div>
</x-slot>
</x-modal-card>
@endif
</div>