Leecheng/shop_12_wireui
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

角色列表改版 20250425

Browse Source
This commit is contained in:
allen.yan 2025-04-24 18:15:47 +08:00
parent 97d2fdd3c9
commit b48d55197b
12 changed files with 366 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/Livewire/Admin/EditUserModal.php
View File

@ -1,42 +0,0 @@
<?php
namespace App\Livewire\Admin;
use LivewireUI\Modal\ModalComponent;
use App\Models\User;
class EditUserModal extends ModalComponent
{
public $userId;
public $name;
public $email;
public function mount($userId)
{
$user = User::findOrFail($userId);
$this->userId = $user->id;
$this->name = $user->name;
$this->email = $user->email;
}
public function save()
{
$this->validate([
'name' => 'required',
'email' => 'required|email',
]);
User::find($this->userId)->update([
'name' => $this->name,
'email' => $this->email,
]);
$this->closeModal();
$this->dispatch('notify', '使用者更新成功');
}
public function render()
{
return view('livewire.admin.edit-user-modal');
}
}

81
app/Livewire/Admin/RoleForm.php Normal file
View File

@ -0,0 +1,81 @@
<?php
namespace App\Livewire\Admin;
use Livewire\Component;
use Spatie\Permission\Models\Role;
use Spatie\Permission\Models\Permission;
class RoleForm extends Component
{
protected $listeners = ['openCreateRoleModal','openEditRoleModal', 'deleteRole'];
public $showCreateModal=false;
public ?int $roleId = null;
public $name = '';
public $permissions = []; // 所有權限清單
public $selectedPermissions = []; // 表單中選到的權限
public function mount()
{
$this->permissions = Permission::all();
}
public function openCreateRoleModal()
{
$this->resetFields();
$this->showCreateModal = true;
}
public function openEditRoleModal($id)
{
$role = Role::findOrFail($id);
$this->roleId = $role->id;
$this->name = $role->name;
$this->selectedPermissions = $role->permissions()->pluck('id')->toArray();
$this->showCreateModal = true;
}
public function save()
{
$this->validate([
'name' => 'required|string|max:255',
'selectedPermissions' => 'array',
]);
if ($this->roleId) {
$role = Role::findOrFail($this->roleId);
$role->update(['name' => $this->name]);
$role->syncPermissions($this->selectedPermissions);
session()->flash('message', '角色已更新');
} else {
$role = Role::create(['name' => $this->name]);
$role->syncPermissions($this->selectedPermissions);
session()->flash('message', '角色已新增');
}
$this->resetFields();
$this->showCreateModal = false;
}
public function deleteRole($id)
{
Role::findOrFail($id)->delete();
session()->flash('message', '角色已刪除');
}
public function resetFields()
{
$this->name = '';
$this->selectedPermissions = [];
$this->roleId = null;
}
public function render()
{
return view('livewire.admin.role-form');
}
}

104
app/Livewire/Admin/RoleTable.php Normal file
View File

@ -0,0 +1,104 @@
<?php
namespace App\Livewire\Admin;
use Spatie\Permission\Models\Role;
use Illuminate\Support\Carbon;
use Illuminate\Database\Eloquent\Builder;
use PowerComponents\LivewirePowerGrid\Button;
use PowerComponents\LivewirePowerGrid\Column;
use PowerComponents\LivewirePowerGrid\Facades\Filter;
use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
use PowerComponents\LivewirePowerGrid\PowerGridFields;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
final class RoleTable extends PowerGridComponent
{
public string $tableName = 'role-table';
public function boot(): void
{
config(['livewire-powergrid.filter' => 'outside']);
}
public function setUp(): array
{
//$this->showCheckBox();
return [
//PowerGrid::header()
// ->showSearchInput(),
//PowerGrid::footer()
// ->showPerPage()
// ->showRecordCount(),
];
}
public function datasource(): Builder
{
//dd(Role::with('permissions'));
return Role::with('permissions');
}
public function relationSearch(): array
{
return [];
}
public function fields(): PowerGridFields
{
return PowerGrid::fields()
->add('id')
->add('name')
->add('created_at_formatted', fn (Role $model) => Carbon::parse($model->created_at)->format('d/m/Y H:i:s'));
}
public function columns(): array
{
return [
Column::make('ID', 'id')->sortable()->searchable(),
Column::make('名稱', 'name')->sortable()->searchable(),
//Column::make('權限', 'permissions_list', function ($role) {
// return $role->permissions->pluck('name')->implode(', ');
//}),
Column::make('Created at', 'created_at_formatted', 'created_at')->sortable(),
Column::action('Action')
];
}
public function filters(): array
{
return [
Filter::datetimepicker('created_at'),
];
}
public function actions(Role $row): array
{
return [
Button::add('edit')
->slot('編輯')
->icon('solid-pencil-square')
->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
->dispatchTo('admin.role-form', 'openEditRoleModal', ['id' => $row->id]),
Button::add('delete')
->slot('刪除')
->icon('solid-trash')
->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
->dispatchTo('admin.role-form', 'deleteRole', ['id' => $row->id]),
];
}
/*
public function actionRules($row): array
{
return [
// Hide button edit for ID 1
Rule::button('edit')
->when(fn($row) => $row->id === 1)
->hide(),
];
}
*/
}

2
app/Livewire/Admin/Roles.php
View File

@ -99,6 +99,6 @@ class Roles extends Component
{
return view('livewire.admin.roles', [
'roles' => $this->roles,
])->layout('layouts.admin');
]);
}
}

90
app/Livewire/Admin/UserForm.php Normal file
View File

@ -0,0 +1,90 @@
<?php
namespace App\Livewire\Admin;
use Livewire\Component;
use App\Models\User;
use Spatie\Permission\Models\Role;
class UserForm extends Component
{
protected $listeners = ['openCreateUserModal','openEditUserModal', 'deleteUser','bulkDeleteUser'];
public bool $showCreateModal = false;
public ?int $userId = null;
public $name;
public $email;
public $roles = []; // 所有角色清單
public $selectedRoles = []; // 表單中選到的權限
protected $rules = [
'name' => 'required|string|max:255',
'email' => 'required|string|max:255',
];
public function mount()
{
$this->roles = Role::all();
}
public function openCreateUserModal()
{
$this->resetFields();
$this->showCreateModal = true;
}
public function openEditUserModal($id)
{
$user = User::findOrFail($id);
$this->userId = $user->id;
$this->name = $user->name;
$this->email =$user->email;
$this->selectedRoles = $user->roles()->pluck('id')->toArray();
$this->showCreateModal = true;
}
public function save()
{
$this->validate();
if ($this->userId) {
$role = User::findOrFail($this->userId);
$role->update([
'name' => $this->name,
'email' => $this->email,
]);
$role->syncRolses($this->selectedRoles);
session()->flash('message', '使用者已更新');
} else {
$role = User::create([
'name' => $this->name,
'email' => $this->email,
]);
$role->syncRolses($this->selectedRoles);
session()->flash('message', '使用者已新增');
}
$this->resetFields();
$this->showCreateModal = false;
}
public function deleteUser($id)
{
User::findOrFail($id)->delete();
session()->flash('message', '使用者已刪除');
}
public function resetFields()
{
$this->name = '';
$this->email = '';
$this->selectedRoles = [];
$this->userId = null;
}
public function render()
{
return view('livewire.admin.user-form');
}
}

32
app/Livewire/Admin/UserTable.php
View File

@ -24,18 +24,11 @@ final class UserTable extends PowerGridComponent
public bool $showFilters = false;
public bool $showEditModal = false;
public $editingUserId;
public $name;
public $email;
public function boot(): void
{
config(['livewire-powergrid.filter' => 'outside']);
}
/* */
public function setUp(): array
{
@ -104,17 +97,17 @@ final class UserTable extends PowerGridComponent
public function actions(User $row): array
{
return [
Button::add('edit')
->slot('編輯')
->icon('solid-pencil-square')
->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
->openModal('admin.edit-user-modal', ['userId' => $row->id]),
->slot('編輯')
->icon('solid-pencil-square')
->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
->dispatchTo('admin.user-form', 'openEditUserModal', ['id' => $row->id]),
Button::add('delete')
->slot('刪除')
->icon('solid-trash')
->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
->confirmPrompt('確定要刪除這位使用者嗎？|DELETE', 'DELETE') // 使用 'DELETE' 作為標識符
->dispatch('delete-user', ['userId' => $row->id]),
->slot('刪除')
->icon('solid-trash')
->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
->dispatchTo('admin.user-form', 'deleteUser', ['id' => $row->id]),
];
}
#[On('bulkDelete.{tableName}')]
@ -127,13 +120,6 @@ final class UserTable extends PowerGridComponent
}
}
#[\Livewire\Attributes\On('delete-user')]
public function deleteUser($userId): void
{
User::findOrFail($userId)->delete();
$this->dispatch('notify', '刪除成功');
}
/* public function actionRules($row): array
{

16
resources/views/livewire/admin/edit-user-modal.blade.php
View File

@ -1,16 +0,0 @@
<div class="p-6 space-y-4">
<h2 class="text-xl font-semibold">編輯使用者</h2>
<div>
<x-wireui:input label="名稱" wire:model.defer="name" />
</div>
<div>
<x-wireui:input label="Email" type="email" wire:model.defer="email" />
</div>
<div class="flex justify-end gap-2 mt-4">
<x-wireui:button flat label="取消" wire:click="closeModal" />
<x-wireui:button primary label="儲存" wire:click="save" />
</div>
</div>

25
resources/views/livewire/admin/role-form.blade.php Normal file
View File

@ -0,0 +1,25 @@
<div>
@if ($showCreateModal)
<x-wireui:modal-card title="{{ $roleId ? '編輯角色' : '新增角色' }}" blur wire:model.defer="showCreateModal">
<div class="space-y-4">
<x-wireui:input label="角色名稱" wire:model.defer="name" />
<x-wireui:select
label="權限"
wire:model.defer="selectedPermissions"
placeholder="選擇權限"
multiselect
option-label="label"
option-value="value"
:options="$permissions->map(fn($p) => ['value' => $p->id, 'label' => $p->name])->toArray()"
/>
</div>
<x-slot name="footer">
<div class="flex justify-center gap-2">
<x-wireui:button primary label="{{__('roles.cancel')}}" x-on:click="$dispatch('close')" />
<x-wireui:button primary label="{{__('roles.submit')}}" wire:click="save" />
</div>
</x-slot>
</x-wireui:modal-card>
@endif
</div>

81
resources/views/livewire/admin/roles.blade.php
View File

@ -1,66 +1,21 @@
<div class="space-y-4">
<div class="flex justify-between items-center">
<h2 class="text-xl font-bold">{{ __('roles.list') }}</h2>
<x-button primary label="{{__('roles.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-layouts.admin>
<x-slot name="header">
角色管理
</x-slot>
<x-table divider="thin" has_shadow="true" celled="true">
<x-slot name="header">
<th class="cursor-pointer" wire:click="sortBy('id')">{{__('roles.no')}}</th>
<th class="cursor-pointer" wire:click="sortBy('name')">{{__('roles.name')}}</th>
<th>{{__('roles.action')}}</th>
</x-slot>
@forelse ($roles as $role)
<tr>
<td>{{ $role->id }}</td>
<td>{{ $role->name }}</td>
<td class="space-x-2">
@can('role-edit')
<x-button flat label="{{ __('roles.edit') }}" color="yellow" icon="pencil-square" wire:click="openEditModal({{ $role->id }})" />
@endcan
@can('role-delete')
<x-button flat label="{{ __('roles.delete') }}" color="red" icon="trash" wire:click="delete({{ $role->id }})" />
@endcan
</td>
</tr>
@empty
<tr>
<td colspan="3">{{ __('No roles found.') }}</td>
</tr>
@endforelse
</x-table>
<div class="mt-4">
{!! $roles->links('pagination::tailwind') !!}
</div>
@if ($showCreateModal)
<x-modal-card title="{{ $editingRoleId ? '編輯角色' : '新增角色' }}" blur wire:model.defer="showCreateModal">
<div class="space-y-4">
<x-input label="角色名稱" wire:model.defer="name" />
<x-select
label="權限"
wire:model.defer="selectedPermissions"
placeholder="選擇權限"
multiselect
option-label="label"
option-value="value"
:options="$permissions->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="{{__('roles.cancel')}}" x-on:click="$dispatch('close')" />
<x-button primary label="{{__('roles.submit')}}" wire:click="save" />
</div>
</x-slot>
</x-modal-card>
@if (session()->has('message'))
<x-wireui:notifications />
<script>
window.$wireui.notify({
title: '提示',
description: '{{ session('message') }}',
icon: 'success'
});
</script>
@endif
</div>
{{-- 單一 Livewire 元件，內含資料表與 Modal --}}
<livewire:admin.role-table />
<livewire:admin.role-form />
</x-layouts.admin>

28
resources/views/livewire/admin/user-form.blade.php Normal file
View File

@ -0,0 +1,28 @@
<div class="p-6 space-y-4">
@if ($showCreateModal)
<x-wireui:modal-card title="{{ $userId ? '編輯使用者' : '新增使用者' }}" blur wire:model.defer="showCreateModal">
<div class="space-y-4">
<x-wireui:input label="名稱" wire:model.defer="name" />
<x-wireui:input label="Email" wire:model.defer="email" />
<x-wireui:select
label="角色"
wire:model.defer="selectedRoles"
placeholder="選擇角色"
multiselect
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-wireui:button primary label="{{__('users.cancel')}}" x-on:click="$dispatch('close')" />
<x-wireui:button primary label="{{__('users.submit')}}" wire:click="save" />
</div>
</x-slot>
</x-wireui:modal-card>
@endif
</div>

1
resources/views/livewire/admin/users.blade.php
View File

@ -17,4 +17,5 @@
{{-- 單一 Livewire 元件，內含資料表與 Modal --}}
<livewire:admin.user-table />
<livewire:admin.user-form />
</x-layouts.admin>

13
routes/web.php
View File

@ -3,7 +3,7 @@
use Illuminate\Support\Facades\Route;
use App\Livewire\Admin\Dashboard as AdminDashboard;
use App\Livewire\Admin\Roles;
use App\Livewire\Admin\RoleTable;
use App\Livewire\Admin\UserTable;
Route::view('/', 'welcome');
@ -19,11 +19,16 @@ Route::view('profile', 'profile')
require __DIR__.'/auth.php';
Route::middleware(['auth'])->prefix('admin')->name('admin.')->group(function () {
Route::get('/dashboard', AdminDashboard::class)->name('dashboard');
Route::get('/roles', function () {
return view('livewire.admin.roles');
})->name('roles');
Route::get('/roles-table', RoleTable::class)->name('roles-table');
Route::get('/users', function () {
return view('livewire.admin.users');
})->name('users');
Route::get('/dashboard', AdminDashboard::class)->name('dashboard');
Route::get('/roles', Roles::class)->name('roles');
//Route::get('/users', Users::class)->name('users');
Route::get('/users-table', UserTable::class)->name('users-table');
});