[FEAT] 完善機台授權模組：新增搜尋過濾功能、機台資訊排版優化、更換圖格裝飾並完成後端效能優化。
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 49s
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 49s
This commit is contained in:
@@ -19,6 +19,7 @@
|
||||
showMaintenanceQrModal: false,
|
||||
maintenanceQrMachineName: '',
|
||||
maintenanceQrUrl: '',
|
||||
permissionSearchQuery: '',
|
||||
openMaintenanceQr(machine) {
|
||||
this.maintenanceQrMachineName = machine.name;
|
||||
const baseUrl = '{{ route('admin.maintenance.create', ['serial_no' => 'SERIAL_NO']) }}';
|
||||
@@ -112,6 +113,71 @@
|
||||
this.loadingRegenerate = false;
|
||||
window.dispatchEvent(new CustomEvent('toast', { detail: { message: '{{ __('Error processing request') }}', type: 'error' } }));
|
||||
});
|
||||
},
|
||||
// Machine Permissions (Migrated from Account Management)
|
||||
showPermissionModal: false,
|
||||
isPermissionsLoading: false,
|
||||
targetUserId: null,
|
||||
targetUserName: '',
|
||||
allMachines: [],
|
||||
allMachinesCount: 0,
|
||||
permissions: {},
|
||||
openPermissionModal(user) {
|
||||
this.targetUserId = user.id;
|
||||
this.targetUserName = user.name;
|
||||
this.showPermissionModal = true;
|
||||
this.isPermissionsLoading = true;
|
||||
this.permissions = {};
|
||||
this.allMachines = [];
|
||||
this.permissionSearchQuery = '';
|
||||
|
||||
fetch(`/admin/basic-settings/machines/permissions/accounts/${user.id}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.machines) {
|
||||
this.allMachines = data.machines;
|
||||
this.allMachinesCount = data.machines.length;
|
||||
const tempPermissions = {};
|
||||
data.machines.forEach(m => {
|
||||
tempPermissions[m.id] = (data.assigned_ids || []).includes(m.id);
|
||||
});
|
||||
this.permissions = tempPermissions;
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
window.dispatchEvent(new CustomEvent('toast', { detail: { message: '{{ __('Failed to load permissions') }}', type: 'error' } }));
|
||||
})
|
||||
.finally(() => {
|
||||
this.isPermissionsLoading = false;
|
||||
});
|
||||
},
|
||||
togglePermission(machineId) {
|
||||
this.permissions = { ...this.permissions, [machineId]: !this.permissions[machineId] };
|
||||
},
|
||||
savePermissions() {
|
||||
const machineIds = Object.keys(this.permissions).filter(id => this.permissions[id]);
|
||||
|
||||
fetch(`/admin/basic-settings/machines/permissions/accounts/${this.targetUserId}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name=\'csrf-token\']').content,
|
||||
'Accept': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ machine_ids: machineIds })
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
window.dispatchEvent(new CustomEvent('toast', { detail: { message: data.message, type: 'success' } }));
|
||||
setTimeout(() => window.location.reload(), 500);
|
||||
} else {
|
||||
throw new Error(data.error || 'Update failed');
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
window.dispatchEvent(new CustomEvent('toast', { detail: { message: e.message, type: 'error' } }));
|
||||
});
|
||||
}
|
||||
}" @execute-regenerate.window="executeRegeneration($event.detail)">
|
||||
<!-- 1. Header Area -->
|
||||
@@ -150,6 +216,10 @@
|
||||
class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all {{ $tab === 'models' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200' }}">
|
||||
{{ __('Models') }}
|
||||
</a>
|
||||
<a href="{{ route('admin.basic-settings.machines.index', ['tab' => 'accounts']) }}"
|
||||
class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all {{ $tab === 'accounts' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200' }}">
|
||||
{{ __('Authorized Accounts Tab') }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 2. Main Content Card -->
|
||||
@@ -167,7 +237,7 @@
|
||||
</svg>
|
||||
</span>
|
||||
<input type="text" name="search" value="{{ request('search') }}"
|
||||
placeholder="{{ $tab === 'machines' ? __('Search machines...') : __('Search models...') }}"
|
||||
placeholder="{{ $tab === 'machines' ? __('Search machines...') : ($tab === 'models' ? __('Search models...') : __('Search accounts...')) }}"
|
||||
class="luxury-input py-2.5 pl-12 pr-6 block w-64">
|
||||
</form>
|
||||
</div>
|
||||
@@ -318,6 +388,82 @@
|
||||
{{ $machines->appends(['tab' => 'machines'])->links('vendor.pagination.luxury') }}
|
||||
</div>
|
||||
|
||||
@elseif($tab === 'accounts')
|
||||
<!-- Accounts Table (Machine Selection Interface) -->
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-separate border-spacing-y-0">
|
||||
<thead>
|
||||
<tr class="bg-slate-50/50 dark:bg-slate-900/10">
|
||||
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
|
||||
{{ __('Account Info') }}</th>
|
||||
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
|
||||
{{ __('Affiliation') }}</th>
|
||||
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">
|
||||
{{ __('Authorized Machines') }}</th>
|
||||
<th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">
|
||||
{{ __('Action') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
|
||||
@forelse($users_list as $user)
|
||||
<tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
|
||||
<td class="px-6 py-6 font-display">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700">
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">{{ $user->name }}</span>
|
||||
<span class="text-xs font-mono font-bold text-slate-500 tracking-widest uppercase">{{ $user->username }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-6">
|
||||
<span class="px-2.5 py-1 rounded-lg text-xs font-bold border border-sky-100 dark:border-sky-900/30 bg-sky-50 dark:bg-sky-900/20 text-sky-600 dark:text-sky-400 tracking-widest uppercase">
|
||||
{{ $user->company->name ?? __('System') }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-6">
|
||||
<div class="flex flex-wrap gap-2 justify-center lg:justify-start max-w-[400px] mx-auto lg:mx-0">
|
||||
@forelse($user->machines as $m)
|
||||
<div class="flex flex-col px-4 py-2.5 rounded-xl bg-slate-50 dark:bg-slate-800/40 border border-slate-100 dark:border-white/5 hover:border-cyan-500/30 transition-all duration-300 shadow-sm">
|
||||
<span class="text-xs font-black text-slate-700 dark:text-slate-200 leading-tight">{{ $m->name }}</span>
|
||||
<span class="text-[10px] font-mono font-bold text-cyan-500 tracking-tighter mt-1">{{ $m->serial_no }}</span>
|
||||
</div>
|
||||
@empty
|
||||
<div class="w-full text-center lg:text-left">
|
||||
<span class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest opacity-40 italic">-- {{ __('None') }} --</span>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-6 text-right">
|
||||
<button @click="openPermissionModal({{ json_encode(['id' => $user->id, 'name' => $user->name]) }})"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500 hover:text-white transition-all duration-300 text-xs font-black uppercase tracking-widest shadow-sm shadow-cyan-500/5 group/auth">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 00-2 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
|
||||
<span>{{ __('Authorize Btn') }}</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="4" class="px-6 py-24 text-center">
|
||||
<div class="flex flex-col items-center gap-3 opacity-20">
|
||||
<svg class="size-16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2m16-10a4 4 0 11-8 0 4 4 0 018 0zM23 21v-2a4 4 0 00-3-3.87m-4-12a4 4 0 010 7.75" /></svg>
|
||||
<p class="text-slate-400 font-extrabold tracking-widest uppercase text-xs">{{ __('No accounts found') }}</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-8 border-t border-slate-100/50 dark:border-slate-800/50 pt-6">
|
||||
{{ $users_list->appends(['tab' => 'accounts'])->links('vendor.pagination.luxury') }}
|
||||
</div>
|
||||
|
||||
@else
|
||||
<!-- Model Table -->
|
||||
<div class="overflow-x-auto">
|
||||
@@ -797,7 +943,6 @@
|
||||
</div>
|
||||
|
||||
<!-- Helper text -->
|
||||
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 text-white/40 text-[10px] font-bold uppercase tracking-[0.3em] pointer-events-none">
|
||||
{{ __('Click anywhere to close') }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1021,6 +1166,117 @@
|
||||
:confirm-text="__('Yes, regenerate')"
|
||||
/>
|
||||
|
||||
|
||||
<!-- 5. Machine Permissions Modal (Migrated) -->
|
||||
<template x-teleport='body'>
|
||||
<div x-show='showPermissionModal' class='fixed inset-0 z-[160] overflow-y-auto' x-cloak>
|
||||
<div class='flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0'>
|
||||
<div x-show='showPermissionModal' @click='showPermissionModal = false'
|
||||
x-transition:enter='ease-out duration-300' x-transition:enter-start='opacity-0'
|
||||
x-transition:enter-end='opacity-100' x-transition:leave='ease-in duration-200'
|
||||
x-transition:leave-start='opacity-100' x-transition:leave-end='opacity-0'
|
||||
class='fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity'></div>
|
||||
|
||||
<span class='hidden sm:inline-block sm:align-middle sm:h-screen'>​</span>
|
||||
|
||||
<div x-show='showPermissionModal'
|
||||
x-transition:enter='ease-out duration-300'
|
||||
x-transition:enter-start='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
|
||||
x-transition:enter-end='opacity-100 translate-y-0 sm:scale-100'
|
||||
x-transition:leave='ease-in duration-200'
|
||||
x-transition:leave-start='opacity-100 translate-y-0 sm:scale-100'
|
||||
x-transition:leave-end='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
|
||||
class='inline-block px-8 py-10 text-left align-bottom transition-all transform luxury-card rounded-3xl dark:bg-slate-900 border-slate-200/50 dark:border-slate-700/50 shadow-2xl sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full overflow-hidden animate-luxury-in'>
|
||||
|
||||
<div class='flex justify-between items-center mb-8'>
|
||||
<div>
|
||||
<h3 class='text-2xl font-black text-slate-800 dark:text-white font-display tracking-tight'>{{ __('Authorized Machines Management') }}</h3>
|
||||
<div class='flex items-center gap-2 mt-1'>
|
||||
<span class='text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]'>{{ __('Account') }}:</span>
|
||||
<span class='text-xs font-bold text-cyan-500 uppercase tracking-widest' x-text='targetUserName'></span>
|
||||
</div>
|
||||
</div>
|
||||
<button @click='showPermissionModal = false' class='text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors bg-slate-50 dark:bg-slate-800 p-2 rounded-xl'>
|
||||
<svg class='size-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 18L18 6M6 6l12 12' /></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class='relative min-h-[400px]'>
|
||||
<div class='mb-6'>
|
||||
<div class='relative group'>
|
||||
<span class='absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10'>
|
||||
<svg class='size-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'>
|
||||
<circle cx='11' cy='11' r='8'></circle>
|
||||
<line x1='21' y1='21' x2='16.65' y2='16.65'></line>
|
||||
</svg>
|
||||
</span>
|
||||
<input type='text' x-model='permissionSearchQuery' placeholder='{{ __("Search machines...") }}'
|
||||
class='luxury-input py-3 pl-12 pr-6 block w-full text-sm' @click.stop>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template x-if='isPermissionsLoading'>
|
||||
<div class='absolute inset-0 flex items-center justify-center bg-white/50 dark:bg-slate-900/50 backdrop-blur-sm z-10 rounded-2xl'>
|
||||
<div class='flex flex-col items-center gap-3'>
|
||||
<div class='w-10 h-10 border-4 border-cyan-500/20 border-t-cyan-500 rounded-full animate-spin'></div>
|
||||
<span class='text-[10px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.2em] animate-pulse'>{{ __('Syncing Permissions...') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-h-[450px] overflow-y-auto pr-2 custom-scrollbar p-1'>
|
||||
<template x-for='machine in allMachines.filter(m => !permissionSearchQuery || m.name.toLowerCase().includes(permissionSearchQuery.toLowerCase()) || m.serial_no.toLowerCase().includes(permissionSearchQuery.toLowerCase()))' :key='machine.id'>
|
||||
<div @click='togglePermission(machine.id)'
|
||||
:class='permissions[machine.id] ? "border-cyan-500 bg-cyan-500/5 dark:bg-cyan-500/10 ring-1 ring-cyan-500/20" : "border-slate-100 dark:border-slate-800 hover:border-slate-300 dark:hover:border-slate-600"'
|
||||
class='p-4 rounded-2xl border-2 cursor-pointer transition-all duration-300 group relative overflow-hidden shadow-sm hover:shadow-md'>
|
||||
<div class='flex flex-col relative z-10'>
|
||||
<div class='flex items-center gap-2'>
|
||||
<div class='size-2 rounded-full' :class='permissions[machine.id] ? "bg-cyan-500" : "bg-slate-300 dark:bg-slate-700"'></div>
|
||||
<span class='text-sm font-extrabold truncate' :class='permissions[machine.id] ? "text-cyan-600 dark:text-cyan-400" : "text-slate-700 dark:text-slate-300"'
|
||||
x-text='machine.name'></span>
|
||||
</div>
|
||||
<span class='text-[10px] font-mono font-bold text-slate-400 mt-2 tracking-widest uppercase'
|
||||
x-text='machine.serial_no'></span>
|
||||
</div>
|
||||
<div class='absolute -right-2 -bottom-2 opacity-[0.03] text-slate-900 dark:text-white pointer-events-none group-hover:scale-110 transition-transform duration-700'>
|
||||
<svg class='size-20' fill='currentColor' viewBox='0 0 24 24'>
|
||||
<path d='M5 2h14c1.1 0 2 .9 2 2v16c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2zm0 2v16h14V4H5zm3 3h8v6H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2z'/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class='absolute top-4 right-4 animate-luxury-in' x-show='permissions[machine.id]'>
|
||||
<div class='size-5 rounded-full bg-cyan-500 flex items-center justify-center shadow-lg shadow-cyan-500/30'>
|
||||
<svg class='size-3 text-white' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 13l4 4L19 7' /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='flex flex-col sm:flex-row justify-between items-center mt-10 pt-8 border-t border-slate-100 dark:border-slate-800 gap-6'>
|
||||
<div class='flex items-center gap-3'>
|
||||
<div class='flex -space-x-2'>
|
||||
<template x-for='i in Math.min(3, Object.values(permissions).filter(v => v).length)' :key='i'>
|
||||
<div class='size-6 rounded-full border-2 border-white dark:border-slate-900 bg-cyan-500 flex items-center justify-center'>
|
||||
<svg class='size-3 text-white' fill='currentColor' viewBox='0 0 24 24'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14.5v-9l6 4.5-6 4.5z'/></svg>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<p class='text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]'>
|
||||
{{ __('Selection') }}: <span class='text-cyan-500 text-xs' x-text='Object.values(permissions).filter(v => v).length'></span> / <span x-text='allMachines?.length || 0'></span> {{ __('Devices') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class='flex gap-4 w-full sm:w-auto'>
|
||||
<button @click='showPermissionModal = false' class='flex-1 sm:flex-none btn-luxury-ghost px-8'>{{ __('Cancel') }}</button>
|
||||
<button @click='savePermissions()' class='flex-1 sm:flex-none btn-luxury-primary px-12' :disabled='isPermissionsLoading'>
|
||||
<span>{{ __('Update Authorization') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
@@ -6,21 +6,21 @@ $baseRoute = str_contains($routeName, 'sub-accounts') ? 'admin.data-config.sub-a
|
||||
|
||||
$tab = request('tab', 'accounts');
|
||||
$roleSelectConfig = [
|
||||
"placeholder" => __('Select Role'),
|
||||
"hasSearch" => true,
|
||||
"searchPlaceholder" => __('Search Role...'),
|
||||
"isHidePlaceholder" => false,
|
||||
"searchClasses" => "block w-[calc(100%-16px)] mx-2 py-2 px-3 text-sm border-slate-200 dark:border-white/10 rounded-lg focus:border-cyan-500 focus:ring-cyan-500 bg-slate-50 dark:bg-slate-900/50 dark:text-slate-200 placeholder:text-slate-400 dark:placeholder:text-slate-500",
|
||||
"searchWrapperClasses" => "sticky top-0 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md p-2 z-10",
|
||||
"toggleClasses" => "hs-select-toggle luxury-select-toggle",
|
||||
"dropdownClasses" => "hs-select-menu w-full bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl border border-slate-200 dark:border-white/10 rounded-xl shadow-[0_20px_50px_rgba(0,0,0,0.3)] mt-2 z-[100] animate-luxury-in",
|
||||
"optionClasses" => "hs-select-option py-2.5 px-3 mb-0.5 text-sm text-slate-800 dark:text-slate-300 cursor-pointer hover:bg-slate-100 dark:hover:bg-cyan-500/10 dark:hover:text-cyan-400 rounded-lg flex items-center justify-between transition-all duration-300",
|
||||
"optionTemplate" => '<div class="flex items-center justify-between w-full"><span data-title></span><span class="hs-select-active-indicator hidden text-cyan-500"><svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span></div>'
|
||||
"placeholder" => __('Select Role'),
|
||||
"hasSearch" => true,
|
||||
"searchPlaceholder" => __('Search Role...'),
|
||||
"isHidePlaceholder" => false,
|
||||
"searchClasses" => "block w-[calc(100%-16px)] mx-2 py-2 px-3 text-sm border-slate-200 dark:border-white/10 rounded-lg focus:border-cyan-500 focus:ring-cyan-500 bg-slate-50 dark:bg-slate-900/50 dark:text-slate-200 placeholder:text-slate-400 dark:placeholder:text-slate-500",
|
||||
"searchWrapperClasses" => "sticky top-0 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md p-2 z-10",
|
||||
"toggleClasses" => "hs-select-toggle luxury-select-toggle",
|
||||
"dropdownClasses" => "hs-select-menu w-full bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl border border-slate-200 dark:border-white/10 rounded-xl shadow-[0_20px_50px_rgba(0,0,0,0.3)] mt-2 z-[100] animate-luxury-in",
|
||||
"optionClasses" => "hs-select-option py-2.5 px-3 mb-0.5 text-sm text-slate-800 dark:text-slate-300 cursor-pointer hover:bg-slate-100 dark:hover:bg-cyan-500/10 dark:hover:text-cyan-400 rounded-lg flex items-center justify-between transition-all duration-300",
|
||||
"optionTemplate" => '<div class="flex items-center justify-between w-full"><span data-title></span><span class="hs-select-active-indicator hidden text-cyan-500"><svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span></div>'
|
||||
];
|
||||
@endphp
|
||||
|
||||
@section('content')
|
||||
<div class="space-y-2 pb-20" x-data="accountManager({
|
||||
<div class="space-y-6 pb-20" x-data="accountManager({
|
||||
roles: @js($roles),
|
||||
errors: @js($errors->any()),
|
||||
oldValues: {
|
||||
@@ -46,36 +46,20 @@ $roleSelectConfig = [
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
@if($tab === 'accounts')
|
||||
<button @click="openCreateModal()" class="btn-luxury-primary">
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
<span>{{ __('Add Account') }}</span>
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs Navigation -->
|
||||
<div
|
||||
class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl w-fit border border-slate-200/50 dark:border-slate-800/50">
|
||||
<a href="{{ route($baseRoute, ['tab' => 'accounts']) }}"
|
||||
class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all {{ $tab === 'accounts' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200' }}">
|
||||
{{ __('Account Management') }}
|
||||
</a>
|
||||
<a href="{{ route($baseRoute, ['tab' => 'permissions']) }}"
|
||||
class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all {{ $tab === 'permissions' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200' }}">
|
||||
{{ __('Authorized Machines') }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Accounts Content (Integrated Card) -->
|
||||
<div class="luxury-card rounded-3xl p-8 animate-luxury-in mt-6">
|
||||
<div class="luxury-card rounded-3xl p-8 animate-luxury-in">
|
||||
<!-- Filters & Search -->
|
||||
<form action="{{ route($baseRoute) }}" method="GET"
|
||||
class="flex flex-col md:flex-row md:items-center gap-4 mb-10">
|
||||
<input type="hidden" name="tab" value="{{ $tab }}">
|
||||
<div class="relative group">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
|
||||
<svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors"
|
||||
@@ -101,7 +85,6 @@ $roleSelectConfig = [
|
||||
</form>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
@if($tab === 'accounts')
|
||||
<table class="w-full text-left border-separate border-spacing-y-0">
|
||||
<thead>
|
||||
<tr class="bg-slate-50/50 dark:bg-slate-900/10">
|
||||
@@ -146,8 +129,7 @@ $roleSelectConfig = [
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span
|
||||
class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">{{
|
||||
$user->name }}</span>
|
||||
class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">{{ $user->name }}</span>
|
||||
<span
|
||||
class="text-xs font-bold text-slate-500 dark:text-slate-400 mt-0.5 tracking-widest uppercase"><span
|
||||
class="font-mono">{{ $user->username }}</span></span>
|
||||
@@ -166,12 +148,10 @@ $roleSelectConfig = [
|
||||
<td class="px-6 py-6">
|
||||
@if($user->company)
|
||||
<span
|
||||
class="text-xs font-bold text-slate-500 dark:text-slate-400 tracking-widest uppercase">{{
|
||||
$user->company->name }}</span>
|
||||
class="text-xs font-bold text-slate-500 dark:text-slate-400 tracking-widest uppercase">{{ $user->company->name }}</span>
|
||||
@else
|
||||
<span
|
||||
class="px-2.5 py-1 rounded-lg text-xs font-bold bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 uppercase tracking-widest">{{
|
||||
__('SYSTEM') }}</span>
|
||||
class="px-2.5 py-1 rounded-lg text-xs font-bold bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 uppercase tracking-widest">{{ __('SYSTEM') }}</span>
|
||||
@endif
|
||||
</td>
|
||||
@endif
|
||||
@@ -224,7 +204,7 @@ $roleSelectConfig = [
|
||||
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
stroke-width="2.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
|
||||
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1-2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
|
||||
</svg>
|
||||
</button>
|
||||
<form action="{{ route($baseRoute . '.destroy', $user->id) }}" method="POST"
|
||||
@@ -243,8 +223,7 @@ $roleSelectConfig = [
|
||||
</form>
|
||||
@else
|
||||
<span
|
||||
class="text-[10px] font-black text-slate-300 dark:text-slate-600 uppercase tracking-[0.15em] px-2">{{
|
||||
__('Protected') }}</span>
|
||||
class="text-[10px] font-black text-slate-300 dark:text-slate-600 uppercase tracking-[0.15em] px-2">{{ __('Protected') }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</td>
|
||||
@@ -257,133 +236,17 @@ $roleSelectConfig = [
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
||||
d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2m16-10a4 4 0 11-8 0 4 4 0 018 0zM23 21v-2a4 4 0 00-3-3.87m-4-12a4 4 0 010 7.75" />
|
||||
</svg>
|
||||
<p class="text-slate-400 font-extrabold tracking-widest uppercase text-xs">{{ __('No
|
||||
accounts found') }}</p>
|
||||
<p class="text-slate-400 font-extrabold tracking-widest uppercase text-xs">{{ __('No accounts found') }}</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
@else
|
||||
<table class="w-full text-left border-separate border-spacing-y-0">
|
||||
<thead>
|
||||
<tr class="bg-slate-50/50 dark:bg-slate-900/10">
|
||||
<th
|
||||
class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
|
||||
{{ __('User Info') }}</th>
|
||||
@if(auth()->user()->isSystemAdmin())
|
||||
<th
|
||||
class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
|
||||
{{ __('Affiliation') }}</th>
|
||||
@endif
|
||||
<th
|
||||
class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
|
||||
{{ __('Authorized Machines') }}</th>
|
||||
<th
|
||||
class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">
|
||||
{{ __('Action') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
|
||||
@foreach ($users as $account)
|
||||
<tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
|
||||
<td class="px-6 py-6">
|
||||
<div class="flex items-center gap-x-4">
|
||||
<div
|
||||
class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 group-hover:bg-cyan-500 group-hover:text-white transition-all overflow-hidden shadow-sm">
|
||||
@if($account->avatar)
|
||||
<img src="{{ Storage::url($account->avatar) }}" class="w-full h-full object-cover">
|
||||
@else
|
||||
<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
stroke-width="2.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span
|
||||
class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">{{
|
||||
$account->name }}</span>
|
||||
<span
|
||||
class="text-xs font-bold text-slate-500 dark:text-slate-400 mt-0.5 tracking-widest uppercase"><span
|
||||
class="font-mono">{{ $account->username }}</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
@if(auth()->user()->isSystemAdmin())
|
||||
<td class="px-6 py-6">
|
||||
@if($account->company)
|
||||
<span
|
||||
class="text-xs font-bold text-slate-500 dark:text-slate-400 tracking-widest uppercase">{{
|
||||
$account->company->name }}</span>
|
||||
@else
|
||||
<span
|
||||
class="px-2.5 py-1 rounded-lg text-xs font-bold bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 uppercase tracking-widest">{{
|
||||
__('SYSTEM') }}</span>
|
||||
@endif
|
||||
</td>
|
||||
@endif
|
||||
<td class="px-6 py-6 min-w-[240px]">
|
||||
<div class="flex flex-wrap gap-1.5 overflow-hidden items-center"
|
||||
id="machines-container-{{ $account->id }}">
|
||||
@if(!$account->company_id)
|
||||
<span
|
||||
class="px-3 py-1 text-[10px] bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 rounded-lg border border-cyan-500/20 uppercase font-black tracking-[0.2em] shadow-sm">
|
||||
{{ __('Full Access') }}
|
||||
</span>
|
||||
@else
|
||||
@php $assigned = $account->machines; @endphp
|
||||
@if($assigned->isNotEmpty())
|
||||
@foreach($assigned->take(3) as $machine)
|
||||
<span
|
||||
class="px-2 py-0.5 text-xs bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 rounded border border-slate-200 dark:border-slate-700 uppercase font-bold tracking-widest shadow-sm">
|
||||
{{ $machine->name }}
|
||||
</span>
|
||||
@endforeach
|
||||
@if($assigned->count() > 3)
|
||||
<span
|
||||
class="px-2 py-0.5 text-xs bg-cyan-50 dark:bg-cyan-500/10 text-cyan-500 dark:text-cyan-400 rounded border border-cyan-100 dark:border-cyan-500/20 uppercase font-bold tracking-widest shadow-sm cursor-help transition-all hover:bg-cyan-100 dark:hover:bg-cyan-500/20"
|
||||
title="{{ $assigned->pluck('name')->implode(', ') }}">
|
||||
+{{ $assigned->count() - 3 }}
|
||||
</span>
|
||||
@endif
|
||||
@else
|
||||
<span class="text-[10px] font-bold text-slate-400 italic">{{ __('No machines assigned')
|
||||
}}</span>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-6 text-right">
|
||||
@if(!$account->company_id)
|
||||
<span
|
||||
class="text-[10px] font-black text-slate-300 dark:text-slate-600 uppercase tracking-[0.15em] px-2">
|
||||
{{ __('System Default') }}
|
||||
</span>
|
||||
@else
|
||||
<button @click="openMachineModal({{ $account->id }}, '{{ $account->name }}')"
|
||||
class="btn-luxury-primary !px-4 !py-2 !text-[11px] !shadow-sm uppercase tracking-widest">
|
||||
<svg class="w-3.5 h-3.5 mr-1.5 inline-block" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
|
||||
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4">
|
||||
</path>
|
||||
</svg>
|
||||
<span class="align-middle">{{ __('Assign') }}</span>
|
||||
</button>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="mt-8 border-t border-slate-100/50 dark:border-slate-800/50 pt-6">
|
||||
{{ $users->appends(['tab' => $tab])->links('vendor.pagination.luxury') }}
|
||||
{{ $users->links('vendor.pagination.luxury') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -456,8 +319,7 @@ $roleSelectConfig = [
|
||||
placeholder="{{ __('john@example.com') }}">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{
|
||||
__('Phone') }}</label>
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Phone') }}</label>
|
||||
<input type="text" name="phone" x-model="currentUser.phone"
|
||||
class="luxury-input @error('phone') border-rose-500 @enderror">
|
||||
</div>
|
||||
@@ -465,12 +327,10 @@ $roleSelectConfig = [
|
||||
|
||||
@if(auth()->user()->isSystemAdmin())
|
||||
<div class="space-y-2 mb-6 relative z-30">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{
|
||||
__('Affiliation') }}</label>
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Affiliation') }}</label>
|
||||
<x-searchable-select id="modal-account-company" name="company_id"
|
||||
placeholder="{{ __('SYSTEM') }}" x-model="currentUser.company_id"
|
||||
@change="currentUser.company_id = $event.target.value; updateRoleSelect()">
|
||||
{{-- 選項由組件根據 placeholder 自動生成 value=' ' 的項目 --}}
|
||||
@foreach($companies as $company)
|
||||
<option value="{{ $company->id }}" data-title="{{ $company->name }}">
|
||||
{{ $company->name }}
|
||||
@@ -486,12 +346,11 @@ $roleSelectConfig = [
|
||||
{{ __('Role') }} <span class="text-rose-500">*</span>
|
||||
</label>
|
||||
<div id="role-select-wrapper" class="relative">
|
||||
<!-- 由 updateRoleSelect() 動態渲染 -->
|
||||
<!-- Dynamic -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{
|
||||
__('Status') }}</label>
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Status') }}</label>
|
||||
<x-searchable-select id="modal-account-status" name="status"
|
||||
x-model="currentUser.status" :hasSearch="false">
|
||||
<option value="1">{{ __('Active') }}</option>
|
||||
@@ -502,8 +361,7 @@ $roleSelectConfig = [
|
||||
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">
|
||||
<span
|
||||
x-text="editing ? '{{ __('New Password (leave blank to keep current)') }}' : '{{ __('Password') }}'"></span>
|
||||
<span x-text="editing ? '{{ __('New Password (leave blank to keep current)') }}' : '{{ __('Password') }}'"></span>
|
||||
<template x-if="!editing">
|
||||
<span class="text-rose-500">*</span>
|
||||
</template>
|
||||
@@ -514,8 +372,7 @@ $roleSelectConfig = [
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-x-4 pt-8">
|
||||
<button type="button" @click="showModal = false" class="btn-luxury-ghost px-8">{{
|
||||
__('Cancel') }}</button>
|
||||
<button type="button" @click="showModal = false" class="btn-luxury-ghost px-8">{{ __('Cancel') }}</button>
|
||||
<button type="submit" class="btn-luxury-primary px-12">
|
||||
<span x-text="editing ? '{{ __('Update') }}' : '{{ __('Create') }}'"></span>
|
||||
</button>
|
||||
@@ -526,97 +383,8 @@ $roleSelectConfig = [
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Machine Assignment Modal -->
|
||||
<template x-teleport="body">
|
||||
<div x-show="showMachineModal"
|
||||
class="fixed inset-0 z-[100] flex items-center justify-center overflow-y-auto px-4 py-8" x-cloak>
|
||||
<div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity" x-show="showMachineModal"
|
||||
x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
|
||||
@click="showMachineModal = false"></div>
|
||||
<div class="luxury-card !bg-white dark:!bg-slate-900 w-full max-w-2xl mx-auto rounded-[2.5rem] shadow-2xl relative overflow-hidden animate-luxury-in border border-slate-100 dark:border-slate-800"
|
||||
@click.stop x-show="showMachineModal" x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95">
|
||||
<div
|
||||
class="px-10 py-8 border-b border-slate-50 dark:border-slate-800/50 flex justify-between items-center relative z-10">
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{
|
||||
__('Assign Machines') }}</h3>
|
||||
<p class="text-[11px] font-black text-cyan-500 uppercase tracking-[0.2em] mt-1"
|
||||
x-text="selectedUserName"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-8 max-h-[60vh] overflow-y-auto custom-scrollbar">
|
||||
<template x-if="loading">
|
||||
<div class="flex flex-col items-center justify-center py-20">
|
||||
<div
|
||||
class="w-12 h-12 border-4 border-cyan-500/20 border-t-cyan-500 rounded-full animate-spin">
|
||||
</div>
|
||||
<p class="mt-4 text-xs font-bold text-slate-400 uppercase tracking-widest">{{ __('Loading
|
||||
machines...') }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="!loading && machines.length === 0">
|
||||
<div class="text-center py-20 text-slate-400 font-bold uppercase tracking-widest">{{ __('No
|
||||
machines available') }}</div>
|
||||
</template>
|
||||
<template x-if="!loading && machines.length > 0">
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between px-2">
|
||||
<label class="flex items-center gap-3 cursor-pointer group">
|
||||
<input type="checkbox" @change="toggleAll" :checked="isAllSelected"
|
||||
class="size-5 rounded-lg border-2 border-slate-300 dark:border-white/20 text-cyan-600 focus:ring-cyan-500 bg-transparent">
|
||||
<span
|
||||
class="text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest group-hover:text-cyan-500 transition-colors">{{
|
||||
__('Select All') }}</span>
|
||||
</label>
|
||||
<span class="text-[10px] font-black text-slate-400 uppercase tracking-widest"
|
||||
x-text="`${assignedIds.length} / ${machines.length} {{ __('Selected') }}`"></span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<template x-for="machine in machines" :key="machine.id">
|
||||
<label
|
||||
class="group relative flex items-center p-4 rounded-2xl bg-slate-50 dark:bg-slate-800/50 border-2 border-transparent hover:border-cyan-500/30 transition-all cursor-pointer has-[:checked]:border-cyan-500 has-[:checked]:bg-cyan-500/[0.03]">
|
||||
<input type="checkbox" :value="machine.id.toString()" x-model="assignedIds"
|
||||
class="size-5 rounded-lg border-2 border-slate-300 dark:border-white/20 text-cyan-600 focus:ring-cyan-500 bg-transparent">
|
||||
<div class="ml-4 flex-1">
|
||||
<div class="text-sm font-black text-slate-700 dark:text-slate-200 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors"
|
||||
x-text="machine.name"></div>
|
||||
<div class="text-[10px] font-mono font-bold text-slate-400 uppercase tracking-widest mt-0.5"
|
||||
x-text="machine.serial_no"></div>
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
class="px-10 py-6 bg-slate-50 dark:bg-slate-900/50 flex justify-end gap-3 border-t border-slate-100 dark:border-slate-800">
|
||||
<button @click="showMachineModal = false" class="btn-luxury-ghost">{{ __('Cancel') }}</button>
|
||||
<button @click="savePermissions" class="btn-luxury-primary px-8" :disabled="saving"
|
||||
:class="saving ? 'opacity-50 cursor-not-allowed' : ''">
|
||||
<template x-if="!saving"><span>{{ __('Save Changes') }}</span></template>
|
||||
<template x-if="saving">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin">
|
||||
</div><span>{{ __('Saving...') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Global Delete Confirm Modal -->
|
||||
<x-delete-confirm-modal
|
||||
:message="__('Are you sure you want to delete this account? This action cannot be undone.')" />
|
||||
|
||||
<!-- Status Change Confirm Modal -->
|
||||
<!-- Modals -->
|
||||
<x-delete-confirm-modal :message="__('Are you sure you want to delete this account? This action cannot be undone.')" />
|
||||
<x-status-confirm-modal :title="__('Confirm Account Deactivation')" :message="__('Are you sure you want to deactivate this account? After deactivating, this account will no longer be able to log in to the system.')" />
|
||||
|
||||
<form x-ref="statusToggleForm" :action="toggleFormAction" method="POST" class="hidden">
|
||||
@@ -631,7 +399,7 @@ $roleSelectConfig = [
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('accountManager', (initData) => ({
|
||||
showModal: initData.errors,
|
||||
editing: initData.oldValues.method === 'PUT' || (initData.oldValues.id && initData.errors), // Added logic for editing when errors exist on an existing user
|
||||
editing: initData.oldValues.method === 'PUT' || (initData.oldValues.id && initData.errors),
|
||||
allRoles: initData.roles,
|
||||
currentUser: {
|
||||
id: initData.oldValues.id || '',
|
||||
@@ -649,90 +417,12 @@ $roleSelectConfig = [
|
||||
isStatusConfirmOpen: false,
|
||||
toggleFormAction: '',
|
||||
statusToggleSource: 'list',
|
||||
|
||||
confirmDelete(action) {
|
||||
this.deleteFormAction = action;
|
||||
this.isDeleteConfirmOpen = true;
|
||||
},
|
||||
tab: initData.tab,
|
||||
showMachineModal: false,
|
||||
selectedUserId: '',
|
||||
selectedUserName: '',
|
||||
machines: [],
|
||||
assignedIds: [],
|
||||
loading: false,
|
||||
saving: false,
|
||||
get isAllSelected() {
|
||||
return this.machines.length > 0 && this.assignedIds.length === this.machines.length;
|
||||
},
|
||||
async openMachineModal(userId, userName) {
|
||||
this.selectedUserId = userId;
|
||||
this.selectedUserName = userName;
|
||||
this.showMachineModal = true;
|
||||
this.loading = true;
|
||||
this.assignedIds = [];
|
||||
|
||||
try {
|
||||
const url = `{{ route('admin.machines.permissions.accounts.get', 'USER_ID') }}`.replace('USER_ID', userId);
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
this.machines = data.machines;
|
||||
this.assignedIds = data.assigned_ids.map(id => id.toString());
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
window.Alpine.store('toast').show('{{ __("Failed to fetch machine data.") }}', 'error');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
toggleAll() {
|
||||
if (this.isAllSelected) {
|
||||
this.assignedIds = [];
|
||||
} else {
|
||||
this.assignedIds = this.machines.map(m => m.id.toString());
|
||||
}
|
||||
},
|
||||
async savePermissions() {
|
||||
this.saving = true;
|
||||
try {
|
||||
const url = `{{ route('admin.machines.permissions.accounts.sync', 'USER_ID') }}`.replace('USER_ID', this.selectedUserId);
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
},
|
||||
body: JSON.stringify({ machine_ids: this.assignedIds })
|
||||
});
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
this.showMachineModal = false;
|
||||
window.Alpine.store('toast').show(data.message, 'success');
|
||||
const container = document.getElementById(`machines-container-${this.selectedUserId}`);
|
||||
if (container) {
|
||||
const assigned = data.assigned_machines;
|
||||
if (assigned.length > 0) {
|
||||
const visible = assigned.slice(0, 3);
|
||||
const extraCount = assigned.length - 3;
|
||||
const allNames = assigned.map(m => m.name).join(', ');
|
||||
let html = visible.map(m => `<span class="px-2 py-0.5 text-xs bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 rounded border border-slate-200 dark:border-slate-700 uppercase font-bold tracking-widest shadow-sm">${m.name}</span>`).join('');
|
||||
if (extraCount > 0) {
|
||||
html += `<span class="px-2 py-0.5 text-xs bg-cyan-50 dark:bg-cyan-500/10 text-cyan-500 dark:text-cyan-400 rounded border border-cyan-100 dark:border-cyan-500/20 uppercase font-bold tracking-widest shadow-sm cursor-help transition-all hover:bg-cyan-100 dark:hover:bg-cyan-500/20" title="${allNames}">+${extraCount}</span>`;
|
||||
}
|
||||
container.innerHTML = html;
|
||||
} else {
|
||||
container.innerHTML = `<span class="text-[10px] font-bold text-slate-400 italic">{{ __('No machines assigned') }}</span>`;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
window.Alpine.store('toast').show(data.error || '{{ __("Failed to save permissions.") }}', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving permissions:', error);
|
||||
window.Alpine.store('toast').show('{{ __("An error occurred while saving.") }}', 'error');
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
submitConfirmedForm() {
|
||||
if (this.statusToggleSource === 'list') {
|
||||
this.$refs.statusToggleForm.submit();
|
||||
@@ -740,35 +430,27 @@ $roleSelectConfig = [
|
||||
this.$refs.accountForm.submit();
|
||||
}
|
||||
},
|
||||
|
||||
get filteredRoles() {
|
||||
const companyId = this.currentUser.company_id;
|
||||
if (!companyId || companyId.toString().trim() === '') {
|
||||
// 系統管理層級：僅顯示全域角色 (company_id 為空)
|
||||
if (!companyId || companyId.toString().trim() === '' || companyId === ' ') {
|
||||
return this.allRoles.filter(r => !r.company_id || r.company_id.toString().trim() === '');
|
||||
} else {
|
||||
let companyRoles = this.allRoles.filter(r => r.company_id == companyId);
|
||||
if (companyRoles.length > 0) {
|
||||
return companyRoles;
|
||||
} else {
|
||||
// 租戶層級 fallback：顯示全域角色但明確排除 super-admin
|
||||
return this.allRoles.filter(r => (!r.company_id || r.company_id.toString().trim() === '') && r.name !== 'super-admin');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
openCreateModal() {
|
||||
this.editing = false;
|
||||
const initialCompanyId = initData.oldValues.company_id;
|
||||
const initialCompanyId = initData.oldValues.company_id || '';
|
||||
let initialRole = '';
|
||||
|
||||
let roles = [];
|
||||
if (!initialCompanyId || initialCompanyId.toString().trim() === '') {
|
||||
roles = this.allRoles.filter(r => !r.company_id || r.company_id.toString().trim() === '');
|
||||
} else {
|
||||
let companyRoles = this.allRoles.filter(r => r.company_id == initialCompanyId);
|
||||
// 這裡也要同步排除 super-admin
|
||||
roles = companyRoles.length > 0 ? companyRoles : this.allRoles.filter(r => (!r.company_id || r.company_id.toString().trim() === '') && r.name !== 'super-admin');
|
||||
}
|
||||
|
||||
const roles = this.filteredRoles;
|
||||
if (roles.length > 0) {
|
||||
initialRole = roles[0].name;
|
||||
}
|
||||
@@ -788,6 +470,7 @@ $roleSelectConfig = [
|
||||
this.updateRoleSelect();
|
||||
});
|
||||
},
|
||||
|
||||
openEditModal(user) {
|
||||
this.editing = true;
|
||||
this.currentUser = {
|
||||
@@ -803,6 +486,7 @@ $roleSelectConfig = [
|
||||
this.updateRoleSelect();
|
||||
});
|
||||
},
|
||||
|
||||
syncSelect(id, value) {
|
||||
this.$nextTick(() => {
|
||||
const el = document.getElementById(id);
|
||||
@@ -817,12 +501,12 @@ $roleSelectConfig = [
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
updateRoleSelect() {
|
||||
this.$nextTick(() => {
|
||||
const wrapper = document.getElementById('role-select-wrapper');
|
||||
if (!wrapper) return;
|
||||
|
||||
// 🛡️ 終極防護：自動過濾配置中的換行符號，防止自動排版工具折行導致 Preline 崩潰
|
||||
const cleanConfig = JSON.parse(JSON.stringify(this.roleSelectConfig), (key, value) => {
|
||||
return typeof value === 'string' ? value.replace(/\r?\n|\r/g, ' ').trim() : value;
|
||||
});
|
||||
@@ -869,7 +553,6 @@ $roleSelectConfig = [
|
||||
}
|
||||
|
||||
wrapper.appendChild(selectEl);
|
||||
|
||||
selectEl.addEventListener('change', (e) => {
|
||||
this.currentUser.role = e.target.value;
|
||||
});
|
||||
@@ -879,7 +562,6 @@ $roleSelectConfig = [
|
||||
|
||||
const waitForHSSelect = (attempts = 0) => {
|
||||
if (currentGen !== this._roleGeneration) return;
|
||||
|
||||
const select = window.HSSelect ? window.HSSelect.getInstance(selectEl) : null;
|
||||
if (select) {
|
||||
select.setValue(this.currentUser.role || '');
|
||||
@@ -890,7 +572,6 @@ $roleSelectConfig = [
|
||||
|
||||
const initPreline = (attempts = 0) => {
|
||||
if (currentGen !== this._roleGeneration) return;
|
||||
|
||||
if (window.HSStaticMethods && window.HSStaticMethods.autoInit) {
|
||||
try {
|
||||
window.HSStaticMethods.autoInit(['select']);
|
||||
@@ -902,10 +583,10 @@ $roleSelectConfig = [
|
||||
setTimeout(() => initPreline(attempts + 1), 50);
|
||||
}
|
||||
};
|
||||
|
||||
initPreline();
|
||||
});
|
||||
},
|
||||
|
||||
init() {
|
||||
this.$watch('currentUser.company_id', (value) => {
|
||||
this.syncSelect('modal-account-company', value);
|
||||
|
||||
Reference in New Issue
Block a user