Skip to content

E
El-Captain Sports Management
Commit e3750618 authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

Redesign branch switcher: bold dropdown with pin/lock feature 

- Prominent button with colored border (amber pulse when unpinned, green when pinned)
- Dropdown with branch list, selected indicator, and pin status
- Pin icon shows when branch is locked
- Selecting a branch auto-pins it (persists across logout/login)
- Unpin button available to release the lock
- Visual hint text explains pin behavior
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent eea6ad2e
Show whitespace changes
Inline Side-by-side
Showing with 118 additions and 11 deletions
app/Livewire/BranchSwitcher.php
View file @ e3750618
...@@ -8,14 +8,17 @@ ...@@ -8,14 +8,17 @@
class BranchSwitcher extends Component class BranchSwitcher extends Component
{ {
public string $selectedBranch = 'all'; public string $selectedBranch = 'all';
public bool $isPinned = false;
public function mount(): void public function mount(): void
{ {
$user = auth()->user();
$this->isPinned = $user->preferred_branch_id !== null;
if (session()->has('active_branch_id')) { if (session()->has('active_branch_id')) {
$value = session('active_branch_id'); $value = session('active_branch_id');
$this->selectedBranch = $value === null ? 'all' : (string) $value; $this->selectedBranch = $value === null ? 'all' : (string) $value;
} else { } else {
$user = auth()->user();
$branchId = $user->preferred_branch_id ?? $user->branch_id; $branchId = $user->preferred_branch_id ?? $user->branch_id;
if (!$branchId) { if (!$branchId) {
$first = Branch::where('is_active', true)->first(); $first = Branch::where('is_active', true)->first();
...@@ -31,16 +34,32 @@ public function updatedSelectedBranch($value): void ...@@ -31,16 +34,32 @@ public function updatedSelectedBranch($value): void
if ($value === 'all') { if ($value === 'all') {
session(['active_branch_id' => null]); session(['active_branch_id' => null]);
auth()->user()->update(['preferred_branch_id' => null]); auth()->user()->update(['preferred_branch_id' => null]);
$this->isPinned = false;
} else { } else {
$branchId = (int) $value; $branchId = (int) $value;
session(['active_branch_id' => $branchId]); session(['active_branch_id' => $branchId]);
auth()->user()->update(['preferred_branch_id' => $branchId]); auth()->user()->update(['preferred_branch_id' => $branchId]);
$this->isPinned = true;
} }
$this->dispatch('branch-switched'); $this->dispatch('branch-switched');
$this->redirect(request()->header('Referer', '/'), navigate: true); $this->redirect(request()->header('Referer', '/'), navigate: true);
} }
public function unpin(): void
{
auth()->user()->update(['preferred_branch_id' => null]);
$this->isPinned = false;
}
public function pin(): void
{
if ($this->selectedBranch !== 'all') {
auth()->user()->update(['preferred_branch_id' => (int) $this->selectedBranch]);
$this->isPinned = true;
}
}
public function render() public function render()
{ {
return view('livewire.branch-switcher', [ return view('livewire.branch-switcher', [
......
resources/views/livewire/branch-switcher.blade.php
View file @ e3750618
<div class="relative"> <div class="relative" x-data="{ open: false }" @click.away="open = false">
<select wire:model.live="selectedBranch" {{-- Trigger Button --}}
class="appearance-none bg-gray-50 border border-gray-200 rounded-lg px-3 py-1.5 pe-8 text-sm font-medium text-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 cursor-pointer"> <button @click="open = !open" type="button"
<option value="all">{{ __('كل الفروع') }}</option> class="inline-flex items-center gap-2 px-3 py-2 rounded-lg border-2 transition-all text-sm font-bold
{{ $isPinned
? 'bg-emerald-50 border-emerald-400 text-emerald-800 shadow-sm shadow-emerald-100'
: 'bg-amber-50 border-amber-400 text-amber-800 shadow-sm shadow-amber-100 animate-pulse hover:animate-none' }}">
{{-- Branch icon --}}
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
{{-- Branch name --}}
<span class="max-w-[120px] truncate">
@if($selectedBranch === 'all')
{{ __('كل الفروع') }}
@else
{{ $branches->firstWhere('id', (int) $selectedBranch)?->name_ar ?? __('كل الفروع') }}
@endif
</span>
{{-- Pin indicator --}}
@if($isPinned)
<svg class="w-3.5 h-3.5 text-emerald-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 3.636a1 1 0 011.414 0l.354.353 4.95-2.474a1 1 0 011.11.208l2.829 2.828a1 1 0 01.207 1.111l-2.474 4.95.354.353a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L8.636 11.464l-4.243 4.243a1 1 0 01-1.414-1.414l4.243-4.243-2.828-2.829a1 1 0 010-1.414L5.808 4.393a1 1 0 01-.758-.757z" clip-rule="evenodd"/></svg>
@endif
{{-- Dropdown arrow --}}
<svg class="w-3 h-3 opacity-60 transition-transform" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/></svg>
</button>
{{-- Dropdown --}}
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-1"
class="absolute top-full mt-2 end-0 w-64 bg-white rounded-xl shadow-xl border border-gray-200 z-50 overflow-hidden" x-cloak>
{{-- Header --}}
<div class="px-4 py-3 bg-gray-50 border-b border-gray-200">
<p class="text-xs font-bold text-gray-500 uppercase tracking-wider">{{ __('اختر الفرع') }}</p>
@if($isPinned)
<p class="text-[11px] text-emerald-600 mt-0.5 flex items-center gap-1">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
{{ __('مثبّت — يبقى حتى بعد تسجيل الخروج') }}
</p>
@else
<p class="text-[11px] text-amber-600 mt-0.5">{{ __('اختر فرع وسيتم تثبيته تلقائياً') }}</p>
@endif
</div>
{{-- Branch list --}}
<div class="py-1">
{{-- All branches option --}}
<button wire:click="$set('selectedBranch', 'all')" @click="open = false"
class="w-full flex items-center gap-3 px-4 py-2.5 text-start text-sm hover:bg-gray-50 transition
{{ $selectedBranch === 'all' ? 'bg-blue-50 text-blue-700 font-bold' : 'text-gray-700' }}">
<span class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0
{{ $selectedBranch === 'all' ? 'bg-blue-100' : 'bg-gray-100' }}">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
</span>
<span>{{ __('كل الفروع') }}</span>
@if($selectedBranch === 'all')
<svg class="w-4 h-4 ms-auto text-blue-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
@endif
</button>
<div class="border-t border-gray-100 my-1"></div>
{{-- Individual branches --}}
@foreach($branches as $branch) @foreach($branches as $branch)
<option value="{{ $branch->id }}">{{ $branch->name_ar }}</option> <button wire:click="$set('selectedBranch', '{{ $branch->id }}')" @click="open = false"
class="w-full flex items-center gap-3 px-4 py-2.5 text-start text-sm hover:bg-gray-50 transition
{{ $selectedBranch == $branch->id ? 'bg-emerald-50 text-emerald-700 font-bold' : 'text-gray-700' }}">
<span class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0
{{ $selectedBranch == $branch->id ? 'bg-emerald-100' : 'bg-gray-100' }}">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
</span>
<span>{{ $branch->name_ar }}</span>
@if($selectedBranch == $branch->id)
<svg class="w-4 h-4 ms-auto text-emerald-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
@endif
</button>
@endforeach @endforeach
</select> </div>
<div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-2.5">
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg> {{-- Pin/Unpin action --}}
@if($selectedBranch !== 'all')
<div class="px-3 py-2.5 border-t border-gray-200 bg-gray-50">
@if($isPinned)
<button wire:click="unpin" @click="open = false"
class="w-full flex items-center justify-center gap-2 px-3 py-2 text-xs font-medium text-gray-600 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 transition">
<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" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"/></svg>
{{ __('إلغاء التثبيت') }}
</button>
@else
<button wire:click="pin" @click="open = false"
class="w-full flex items-center justify-center gap-2 px-3 py-2 text-xs font-medium text-white bg-emerald-600 rounded-lg hover:bg-emerald-700 transition">
<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" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
{{ __('تثبيت هذا الفرع') }}
</button>
@endif
</div>
@endif
</div> </div>
</div> </div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment