Merge pull request #12 from CornellCustomDev/table-sorting

Fixed table sorting and pagination; added select user dropdown example

Author: inaydich

app/Livewire/Users/UserExamples.php

@@ -0,0 +1,56 @@
+<?php
+
+namespace App\Livewire\Users;
+
+use Livewire\Component;
+use App\Models\User;
+use Livewire\Attributes\Title;
+
+#[Title("CD Laravel Base - User Examples")]
+
+class UserExamples extends Component
+{
+    public $users;
+    public $userId = null;
+    public $selectedUser = null;
+
+    public function mount()
+    {
+        $this->users = User::select('id', 'name')->get();
+    }
+
+    public function updatedUserId($userId)
+    {
+        if (is_null($userId) || !($user = User::find($userId))) {
+            $this->selectedUser = null;
+        } else {
+            $this->selectedUser = $user;
+        }
+    }
+
+    public function render()
+    {
+        return <<<'HTML'
+            <div>
+                <x-layouts.main-article>
+                    <h1>User Examples</h1>
+                    <p>
+                        Examples to use CDS components with User data.
+                    </p>
+
+                    <flux:separator />
+                    <x-layouts.section class="region padded-small">
+                        <x-cds.select
+                            name="users"
+                            label="Select Users"
+                            :options="$this->users->pluck('name', 'id')->toArray()"
+                            wire:model.live="userId"
+                        />
+                        <flux:separator class="mb-4" />
+                        Selected user: {{ $this->selectedUser?->name ?? 'None' }}
+                    </x-layouts.section>
+                </x-layouts.main-article>
+            </div>
+        HTML;
+    }
+}

app/Livewire/UserTable.php app/Livewire/Users/UserTable.phpapp/Livewire/UserTable.php renamed to app/Livewire/Users/UserTable.php

@@ -1,42 +1,32 @@
 <?php
 
-namespace App\Livewire;
+namespace App\Livewire\Users;
 
 use Livewire\Component;
 use App\Models\User;
 use Livewire\WithPagination;
-use Illuminate\Pagination\LengthAwarePaginator;
 use Livewire\Attributes\Title;
 use Livewire\Attributes\Computed;
 
-
 #[Title("CD Laravel Base - User Table Example")]
 
 
-
 class UserTable extends Component
 {
     use WithPagination;
 
-    // public $users;
     public $sortBy = 'name';
-    public $sortDirection = 'desc';
-
-
-
-    public function mount()
-    {
-        $this->users = User::all();
-    }
-
+    public $sortDirection = 'asc';
 
     public function render()
     {
-        return view('livewire.user-table');
+        // add additional data to the view if needed
+        return view('livewire.users.user-table');
     }
 
     public function sort($column) {
-        if ($this->sortBy === $column) {
+
+       if ($this->sortBy === $column) {
             $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
         } else {
             $this->sortBy = $column;
@@ -47,15 +37,9 @@ public function sort($column) {
     #[Computed]
     public function users()
     {
-        // return User::query()
-        //     ->tap(fn ($query) => $this->sortBy ? $query->orderBy($this->sortBy, $this->sortDirection) : $query)
-        //     ->paginate(5);
         return User::orderBy($this->sortBy, $this->sortDirection)->paginate(5);
+            // simple pagination:
+            // return User::orderBy($this->sortBy, $this->sortDirection)->simplePaginate(5);
     }
 
-    // #[Computed]
-    // public function paginator()
-    // {
-    //     return new LengthAwarePaginator(items: range(1, 50), total: 100, perPage: 5, currentPage: 1);
-    // }
 }

resources/views/components/layouts/main-nav.blade.php

@@ -21,6 +21,9 @@
                     <li>
                         <a href="{{ route('examples/table') }}">Table</a>
                     </li>
+                    <li>
+                        <a href="{{ route('examples/user-examples') }}">User Examples</a>
+                    </li>
                 </ul>
             </li>
         </ul>

…rces/views/livewire/user-table.blade.php …iews/livewire/users/user-table.blade.phpresources/views/livewire/user-table.blade.php renamed to resources/views/livewire/users/user-table.blade.php resources/views/livewire/user-table.blade.php renamed to resources/views/livewire/users/user-table.blade.php

@@ -10,8 +10,7 @@
         <x-layouts.section class="region padded-small">
             <h2>Users Table</h2>
 
-            <flux:table class="cds-table" >
-                   {{-- :paginate="$users" --}}
+            <flux:table class="cds-table" :paginate="$this->users" >
 
                 <flux:table.columns>
                     <flux:table.column sortable :sorted="$sortBy === 'name'" :direction="$sortDirection" wire:click="sort('name')">Name</flux:table.column>

routes/examples.php

@@ -9,5 +9,6 @@
 Route::get('/examples/errors', function () {
     return view('examples/errors');
 })->name('examples/errors');
-Route::get('/examples/table', \App\Livewire\UserTable::class)->name('examples/table');
+Route::get('/examples/table', \App\Livewire\Users\UserTable::class)->name('examples/table');
+Route::get('/examples/user-examples', \App\Livewire\Users\UserExamples::class)->name('examples/user-examples');