193 lines
8.9 KiB
PHP
193 lines
8.9 KiB
PHP
{{--
|
|
Two-panel permission picker — single source of truth.
|
|
ALL items rendered once in Available. Pre-selected ones moved to Assigned by JS on init.
|
|
Multi-select: click = single, Ctrl+click = toggle, Shift+click = range.
|
|
--}}
|
|
@php
|
|
$preSelected = collect($rolePermIds ?? []);
|
|
@endphp
|
|
|
|
<style>
|
|
.dp-panel {
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(72vh - 120px);
|
|
min-height: 400px;
|
|
}
|
|
.dp-panel-head {
|
|
background: #f8fafc;
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
flex-shrink: 0;
|
|
}
|
|
.dp-panel-search {
|
|
padding: 6px 10px;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
flex-shrink: 0;
|
|
}
|
|
.dp-hint-row {
|
|
padding: 2px 10px 4px;
|
|
font-size: 0.6rem;
|
|
color: #b0b9c8;
|
|
border-bottom: 1px solid #f8fafc;
|
|
flex-shrink: 0;
|
|
}
|
|
.dp-panel-body {
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
.dp-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #f8fafc;
|
|
transition: background .1s;
|
|
user-select: none;
|
|
}
|
|
.dp-item:hover { background: #f0f9ff; }
|
|
.dp-item.selected {
|
|
background: #dbeafe;
|
|
outline: 1px solid #93c5fd;
|
|
outline-offset: -1px;
|
|
}
|
|
.dp-item-icon { flex-shrink: 0; width: 18px; text-align: center; }
|
|
.dp-item-name { font-size: 0.78rem; line-height: 1.3; flex: 1; min-width: 0; }
|
|
.dp-item-cat { font-size: 0.6rem; color: #94a3b8; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.dp-item-tab { display: inline-block; font-size: 0.58rem; background: #e2e8f0; color: #475569; padding: 0 4px; border-radius: 3px; font-weight: 600; margin-right: 3px; }
|
|
.dp-item-type-manage { color: #7c3aed; }
|
|
.dp-item-type-view { color: #0369a1; }
|
|
.dp-btn-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 0 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
.dp-btn {
|
|
width: 34px; height: 34px;
|
|
border-radius: 50%;
|
|
border: 1px solid #e2e8f0;
|
|
background: white;
|
|
cursor: pointer;
|
|
display: flex; align-items: center; justify-content: center;
|
|
transition: all .15s;
|
|
font-size: 0.8rem;
|
|
color: #475569;
|
|
flex-shrink: 0;
|
|
}
|
|
.dp-btn:hover { background: #111827; color: white; border-color: #111827; }
|
|
.dp-group-header {
|
|
padding: 4px 10px 2px;
|
|
font-size: 0.6rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
color: #94a3b8;
|
|
background: #f8fafc;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
.dp-empty-hint { padding: 40px 16px; text-align: center; color: #cbd5e1; font-size: 0.78rem; }
|
|
</style>
|
|
|
|
<div class="d-flex align-items-stretch" id="dp-{{ $panelId }}" style="min-width:0;gap:0;">
|
|
|
|
{{-- ── LEFT: Available (ALL items live here initially) ──────── --}}
|
|
<div style="flex:1;min-width:0;">
|
|
<div class="dp-panel">
|
|
<div class="dp-panel-head d-flex justify-content-between align-items-center">
|
|
<span class="fw-semibold small text-dark">{{ __('Available') }}</span>
|
|
<span class="badge text-bg-secondary rounded-pill dp-available-count" style="font-size:0.6rem;">0</span>
|
|
</div>
|
|
<div class="dp-panel-search">
|
|
<input type="text" class="form-control form-control-sm dp-search-available border-0 p-0 bg-transparent"
|
|
placeholder="🔍 {{ __('Filter...') }}" style="font-size:0.78rem;box-shadow:none;">
|
|
</div>
|
|
<div class="dp-hint-row">
|
|
<i class="bi bi-info-circle me-1"></i>Click = select · Ctrl+click = multi · Shift+click = range · Dbl-click = move
|
|
</div>
|
|
<div class="dp-panel-body dp-available-list">
|
|
@foreach ($groupedPermissions as $category => $catPerms)
|
|
@php
|
|
$catItems = collect();
|
|
foreach ($catPerms as $menuName => $menuData) {
|
|
if ($menuData['manage']) $catItems->push(['perm' => $menuData['manage'], 'menu' => $menuName, 'tab' => null, 'type' => 'manage']);
|
|
if ($menuData['view']) $catItems->push(['perm' => $menuData['view'], 'menu' => $menuName, 'tab' => null, 'type' => 'view']);
|
|
foreach ($menuData['tabs'] as $tabSlug => $tabPerms) {
|
|
if ($tabPerms['manage']) $catItems->push(['perm' => $tabPerms['manage'], 'menu' => $menuName, 'tab' => $tabSlug, 'type' => 'manage']);
|
|
if ($tabPerms['view']) $catItems->push(['perm' => $tabPerms['view'], 'menu' => $menuName, 'tab' => $tabSlug, 'type' => 'view']);
|
|
}
|
|
}
|
|
@endphp
|
|
@if($catItems->isNotEmpty())
|
|
<div class="dp-group-header dp-cat-header" data-cat="{{ Str::slug($category) }}">{{ $category }}</div>
|
|
@foreach ($catItems as $entry)
|
|
<div class="dp-item dp-avail-item"
|
|
data-id="{{ $entry['perm']->id }}"
|
|
data-name="{{ strtolower($entry['perm']->name) }}"
|
|
data-cat="{{ Str::slug($category) }}"
|
|
data-preselected="{{ $preSelected->contains($entry['perm']->id) ? '1' : '0' }}">
|
|
<span class="dp-item-icon">
|
|
@if($entry['type'] === 'manage')
|
|
<i class="bi bi-pencil-square dp-item-type-manage" style="font-size:0.7rem;"></i>
|
|
@else
|
|
<i class="bi bi-eye dp-item-type-view" style="font-size:0.7rem;"></i>
|
|
@endif
|
|
</span>
|
|
<span class="dp-item-name">
|
|
@if($entry['tab'])
|
|
<span class="dp-item-tab">{{ $entry['tab'] }}</span>
|
|
@endif
|
|
{{ $entry['perm']->name }}
|
|
<span class="dp-item-cat">{{ $category }}</span>
|
|
</span>
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ── CENTER: Buttons ─────────────────────────────────────── --}}
|
|
<div class="dp-btn-col">
|
|
<button type="button" class="dp-btn dp-btn-add-selected" title="{{ __('Move selected →') }}"><i class="bi bi-chevron-right"></i></button>
|
|
<button type="button" class="dp-btn dp-btn-add-all" title="{{ __('Move all →→') }}"><i class="bi bi-chevron-double-right"></i></button>
|
|
<button type="button" class="dp-btn dp-btn-remove-selected" title="{{ __('← Remove selected') }}"><i class="bi bi-chevron-left"></i></button>
|
|
<button type="button" class="dp-btn dp-btn-remove-all" title="{{ __('←← Remove all') }}"><i class="bi bi-chevron-double-left"></i></button>
|
|
</div>
|
|
|
|
{{-- ── RIGHT: Assigned (empty on load, filled by JS) ──────── --}}
|
|
<div style="flex:1;min-width:0;">
|
|
<div class="dp-panel">
|
|
<div class="dp-panel-head d-flex justify-content-between align-items-center">
|
|
<span class="fw-semibold small text-dark">{{ __('Assigned') }}</span>
|
|
<span class="badge rounded-pill dp-assigned-count text-bg-secondary" style="font-size:0.6rem;">0</span>
|
|
</div>
|
|
<div class="dp-panel-search">
|
|
<input type="text" class="form-control form-control-sm dp-search-assigned border-0 p-0 bg-transparent"
|
|
placeholder="🔍 {{ __('Filter...') }}" style="font-size:0.78rem;box-shadow:none;">
|
|
</div>
|
|
<div class="dp-hint-row">
|
|
<i class="bi bi-info-circle me-1"></i>Dbl-click or select + ◀ to remove
|
|
</div>
|
|
<div class="dp-panel-body dp-assigned-list">
|
|
<div class="dp-empty-hint">
|
|
<i class="bi bi-arrow-left-circle d-block mb-2" style="font-size:1.8rem;opacity:0.2;"></i>
|
|
{{ __('No permissions assigned yet') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|