Expiry Tabs and MyExpiry wip

mooxphp · Aug 3, 2024 · 4c66a13 · 4c66a13
1 parent 8f93ea4
commit 4c66a13
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 38 deletions.
diff --git a/packages/expiry/resources/views/widgets/my-expiry.blade.php b/packages/expiry/resources/views/widgets/my-expiry.blade.php
@@ -1,26 +1,28 @@
-@php
-    $tabs = $this->getTabs();
-    $activeTab = request('activeTab', 'all');
-@endphp
+<div class="grid flex-1 auto-cols-fr gap-y-8">
+    <div class="flex flex-col gap-y-6">
+        <nav class="fi-tabs flex max-w-full gap-x-1 overflow-x-auto mx-auto rounded-xl bg-white p-2 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10" role="tablist">
+            @foreach ($tabs as $tab)
+                <button wire:click="switchTab('{{ $tab->key }}')"
+                        class="fi-tabs-item group flex items-center gap-x-2 rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75 {{ $activeTab === $tab->key ? 'fi-active fi-tabs-item-active bg-gray-50 dark:bg-white/5' : 'hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5' }}"
+                        aria-selected="{{ $activeTab === $tab->key ? 'true' : 'false' }}"
+                        role="tab">
+                    @svg($tab->icon, 'fi-tabs-item-icon h-5 w-5 shrink-0 transition duration-75 ' . ($activeTab === $tab->key ? 'text-primary-600 dark:text-primary-400' : 'text-gray-400 dark:text-gray-500'))
+                    <span class="fi-tabs-item-label transition duration-75 {{ $activeTab === $tab->key ? 'text-primary-600 dark:text-primary-400' : 'text-gray-500 group-hover:text-gray-700 group-focus-visible:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200 dark:group-focus-visible:text-gray-200' }}">
+                        {{ $tab->label }}
+                    </span>
+                    <span class="fi-badge flex items-center justify-center gap-x-1 rounded-md text-xs font-medium ring-1 ring-inset px-1.5 min-w-[theme(spacing.5)] py-0.5 tracking-tight fi-color-custom {{ $activeTab === $tab->key ? 'bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30' : 'bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30' }}">
+                        <span class="grid">
+                            <span class="truncate">
+                                {{ $tab->badge }}
+                            </span>
+                        </span>
+                    </span>
+                </button>
+            @endforeach
+        </nav>
 
-<div>
-    <ul class="nav nav-tabs">
-        @foreach ($tabs as $tabKey => $tab)
-            <li class="nav-item">
-                <a class="nav-link {{ $activeTab === $tabKey ? 'active' : '' }}"
-                   href="?activeTab={{ $tabKey }}">
-                    <i class="{{ $tab->getIcon() }}"></i> {{ $tab->getLabel() }}
-                    <span class="badge">{{ $tab->getBadge() }}</span>
-                </a>
-            </li>
-        @endforeach
-    </ul>
-
-    <div class="tab-content">
-        @foreach ($tabs as $tabKey => $tab)
-            <div class="tab-pane {{ $activeTab === $tabKey ? 'active' : '' }}">
-                {{ $this->table }}
-            </div>
-        @endforeach
+        <div>
+            {{ $this->table }}
+        </div>
     </div>
 </div>
diff --git a/packages/expiry/src/ExpiryServiceProvider.php b/packages/expiry/src/ExpiryServiceProvider.php
@@ -22,6 +22,13 @@ public function configurePackage(Package $package): void
             ->hasCommands(InstallCommand::class);
     }
 
+    public function boot()
+    {
+        parent::boot();
+
+        $this->loadViewsFrom(__DIR__.'/../resources/views', 'expiry');
+    }
+
     public function packageRegistered()
     {
         $this->loadRoutesFrom(__DIR__.'/../routes/api.php');

diff --git a/packages/expiry/src/Resources/ExpiryResource/Pages/ListExpiries.php b/packages/expiry/src/Resources/ExpiryResource/Pages/ListExpiries.php
@@ -47,10 +47,17 @@ public function getTabs(): array
         $tabs = [];
 
         foreach ($tabsConfig as $key => $tabConfig) {
-            $tabs[$key] = Tab::make($tabConfig['label'])
-                ->modifyQueryUsing(fn ($query) => $query->where($tabConfig['field'], $tabConfig['value']))
-                ->badge(Expiry::query()->where($tabConfig['field'], $tabConfig['value'])->count())
-                ->icon($tabConfig['icon']);
+            if ($key === 'all') {
+                $tabs[$key] = Tab::make($tabConfig['label'])
+                    ->modifyQueryUsing(fn ($query) => $query) // No where clause, include all records
+                    ->badge(Expiry::query()->count())
+                    ->icon($tabConfig['icon']);
+            } else {
+                $tabs[$key] = Tab::make($tabConfig['label'])
+                    ->modifyQueryUsing(fn ($query) => $query->where($tabConfig['field'], $tabConfig['value']))
+                    ->badge(Expiry::query()->where($tabConfig['field'], $tabConfig['value'])->count())
+                    ->icon($tabConfig['icon']);
+            }
         }
 
         return $tabs;

diff --git a/packages/expiry/src/Widgets/MyExpiry.php b/packages/expiry/src/Widgets/MyExpiry.php
@@ -2,37 +2,49 @@
 
 namespace Moox\Expiry\Widgets;
 
-use Filament\Resources\Components\Tab;
 use Filament\Tables;
 use Filament\Tables\Actions\DeleteBulkAction;
 use Filament\Tables\Actions\ViewAction;
 use Filament\Tables\Filters\SelectFilter;
 use Filament\Tables\Table;
 use Filament\Widgets\TableWidget as BaseWidget;
+use Illuminate\Contracts\View\View;
 use Illuminate\Support\Facades\Config;
+use Livewire\WithPagination;
 use Moox\Expiry\Models\Expiry;
 
 class MyExpiry extends BaseWidget
 {
+    use WithPagination;
+
+    public $activeTab = 'all';
+
+    protected static string $view = 'expiry::widgets.my-expiry';
+
     protected int|string|array $columnSpan = [
         'sm' => 3,
         'md' => 6,
         'xl' => 12,
     ];
 
-    protected function getTableQuery(): \Illuminate\Database\Eloquent\Builder
+    public function mount()
+    {
+        $this->activeTab = request('activeTab', 'all');
+    }
+
+    public function switchTab($tab)
     {
-        return Expiry::query()->where('notified_to', auth()->id())->where('done_at', null);
+        $this->activeTab = $tab;
+        $this->resetPage();
     }
 
     public function table(Table $table): Table
     {
-        $activeTab = request('activeTab', 'all');
         $tabsConfig = Config::get('expiry.tabs', []);
-        $query = $this->getTableQuery();
+        $query = Expiry::query()->where('notified_to', auth()->id())->where('done_at', null);
 
-        if (isset($tabsConfig[$activeTab]) && $tabsConfig[$activeTab]['value'] !== '') {
-            $tabConfig = $tabsConfig[$activeTab];
+        if (isset($tabsConfig[$this->activeTab]) && $tabsConfig[$this->activeTab]['value'] !== '') {
+            $tabConfig = $tabsConfig[$this->activeTab];
             $query = $query->where($tabConfig['field'], $tabConfig['value']);
         }
 
@@ -90,12 +102,32 @@ public function getTabs(): array
         $tabs = [];
 
         foreach ($tabsConfig as $key => $tabConfig) {
-            $tabs[$key] = Tab::make($tabConfig['label'])
-                ->modifyQueryUsing(fn ($query) => $query->where($tabConfig['field'], $tabConfig['value']))
-                ->badge(Expiry::query()->where($tabConfig['field'], $tabConfig['value'])->count())
-                ->icon($tabConfig['icon']);
+            $query = Expiry::query()->where('notified_to', auth()->id())->where('done_at', null);
+            if ($tabConfig['value'] !== '') {
+                $query = $query->where($tabConfig['field'], $tabConfig['value']);
+            }
+            $badgeCount = $query->count();
+            $tabs[$key] = (object) [
+                'label' => $tabConfig['label'],
+                'icon' => $tabConfig['icon'],
+                'badge' => $badgeCount,
+                'key' => $key,
+            ];
         }
 
         return $tabs;
     }
+
+    public function render(): View
+    {
+        return view('expiry::widgets.my-expiry', [
+            'tabs' => $this->getTabs(),
+            'activeTab' => $this->activeTab,
+        ]);
+    }
+
+    public function resetPage($pageName = null): void
+    {
+        $this->setPage(1, $pageName);
+    }
 }