From 3049bd01e27f1080b562a15ec1b216031eb18c95 Mon Sep 17 00:00:00 2001
From: erishBRBS <erishberboso10@gmail.com>
Date: Sun, 20 Apr 2025 15:33:19 +0800
Subject: [PATCH] sorting by column added

---
 app/Livewire/Components/Table.php             | 57 ++++++++++--------
 app/Livewire/UserManagement.php               | 20 ++-----
 .../views/livewire/components/table.blade.php | 58 ++++++++++++-------
 .../livewire/navigation/drawer.blade.php      |  2 +-
 4 files changed, 74 insertions(+), 63 deletions(-)

diff --git a/app/Livewire/Components/Table.php b/app/Livewire/Components/Table.php
index ededad4..ed675af 100644
--- a/app/Livewire/Components/Table.php
+++ b/app/Livewire/Components/Table.php
@@ -8,35 +8,29 @@ class Table extends Component
 {
     public $columns = [];
     public $rows = [];
-    public $selected = [];  // Holds the selected row IDs
-    public $selectAll = false;  // To track if 'Select All' is checked
-    public $hasActions = false; 
-    public $isViewPage = false; 
+    public $selected = [];
+    public $selectAll = false;
+    public $hasActions = false;
+    public $isViewPage = false;
+    public $search = '';
+    public $sortField = null;   // Column to sort
+    public $sortDirection = 'asc';  // Default sort direction
 
-    // Add new methods for handling actions
-    public function editRow($rowId)
+    public function mount($columns, $rows)
     {
-        // Logic for editing a row (e.g., redirect to the edit page or open modal)
-        session()->flash('message', 'Edit action for user ID: ' . $rowId);
+        $this->columns = $columns;
+        $this->rows = $rows;
     }
 
-    public function deleteRow($rowId)
+    // Update rows based on search
+    public function updatedSearch()
     {
-        // Logic for deleting a row (e.g., delete from database)
-        session()->flash('message', 'Delete action for user ID: ' . $rowId);
+        $this->selected = [];
     }
 
-    public function viewRow($rowId)
-    {
-        // Logic for viewing a row (e.g., redirect to the view page or open a modal)
-        session()->flash('message', 'View action for user ID: ' . $rowId);
-    }
-
-
-
+    // Select all rows
     public function selectAllRows()
     {
-        // Convert rows to a collection if it is an array, then pluck the 'id'
         if ($this->selectAll) {
             $this->selected = collect($this->rows)->pluck('id')->toArray();
         } else {
@@ -44,6 +38,7 @@ class Table extends Component
         }
     }
 
+    // Select single row
     public function selectRow($rowId)
     {
         if (in_array($rowId, $this->selected)) {
@@ -53,11 +48,25 @@ class Table extends Component
         }
     }
 
+    // Simplified version
+    public function sortBy($field)
+    {
+        if ($this->sortField === $field) {
+            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
+        } else {
+            $this->sortField = $field;
+            $this->sortDirection = 'asc';
+        }
+
+        $this->rows = collect($this->rows)->sortBy(function ($row) {
+            return $row[$this->sortField] ?? null;
+        }, SORT_REGULAR, $this->sortDirection === 'desc')->values()->all(); // Use all() to return plain array again
+    }
+
     public function render()
     {
-        return view('livewire.components.table');
+        return view('livewire.components.table', [
+            'rows' => $this->rows,
+        ]);
     }
 }
-
-
-
diff --git a/app/Livewire/UserManagement.php b/app/Livewire/UserManagement.php
index e07229a..da3760b 100644
--- a/app/Livewire/UserManagement.php
+++ b/app/Livewire/UserManagement.php
@@ -1,40 +1,28 @@
 <?php
 
+// UserManagement.php
 namespace App\Livewire;
 
 use Livewire\Component;
 
 class UserManagement extends Component
 {
-    public $search = '';
     public $users = [];
 
-    // protected $queryString = ['search'];
-
-    // // Reset the current page when search is updated
-    // public function updatingSearch()
-    // {
-    //     $this->search = $this->search;
-    // }
-
     public function mount()
     {
-        $this->loadUsers();
+        $this->loadUsers();  // Load users initially
     }
 
-    
-
-    // Get filtered users based on the search input
     public function loadUsers()
     {
         $this->users = collect(json_decode(file_get_contents(storage_path('app/users.json')), true));
     }
-    
 
     public function render()
     {
         return view('livewire.user-management.user-management', [
-            'users' => $this->users,  // Pass filtered users here
+            'users' => $this->users,  // Pass all users to the table
         ]);
     }
-}
\ No newline at end of file
+}
diff --git a/resources/views/livewire/components/table.blade.php b/resources/views/livewire/components/table.blade.php
index 896531a..3b7a59f 100644
--- a/resources/views/livewire/components/table.blade.php
+++ b/resources/views/livewire/components/table.blade.php
@@ -1,5 +1,13 @@
-<div>
-    <div class="p-4 bg-white rounded-lg shadow-md">
+<div class="mt-10">
+    <div class="p-4 bg-white shadow-md">
+        <!-- Search Input with Debounce -->
+        <div class="mb-4">
+            <input type="text" wire:model.debounce.500ms="search" 
+                class="w-80 p-2 border border-gray-300 rounded-md"
+                placeholder="Search..." 
+                autofocus>
+        </div>
+
         <table class="table-auto w-full">
             <thead class="bg-gray-100">
                 <tr>
@@ -9,12 +17,25 @@
                     </th>
 
                     @foreach ($columns as $column)
-                        <th class="px-4 py-2 text-left cursor-pointer">
+                        <th class="px-4 py-2 text-left cursor-pointer" wire:click="sortBy('{{ $column['field'] }}')">
                             {{ $column['label'] }}
+                            <!-- Sorting Icons -->
+                            @if ($sortField === $column['field'])
+                                @if ($sortDirection === 'asc')
+                                    <!-- Ascending Triangle (Up) -->
+                                    <span class="ml-2">&#8593;</span> <!-- Up Triangle -->
+                                @else
+                                    <!-- Descending Triangle (Down) -->
+                                    <span class="ml-2">	&#8595;</span> <!-- Down Triangle -->
+                                @endif
+                            @else
+                                <!-- Default to Ascending Triangle (Up) -->
+                                <span class="ml-2">&#8597;</span> <!-- Up Triangle by default -->
+                            @endif
                         </th>
                     @endforeach
 
-                    @if ($hasActions) <!-- Show the Actions column only if hasActions is true -->
+                    @if ($hasActions)
                         <th class="px-4 py-2 text-left">Actions</th>
                     @endif
                 </tr>
@@ -34,28 +55,21 @@
                             </td>
                         @endforeach
 
-                        @if ($hasActions) <!-- Show action icons only if hasActions is true -->
-                            <td class="px-4 py-2 text-center">
-                                @if($isViewPage) <!-- Check if it's the "View" page -->
-                                    <!-- Only Show View Button for View Page -->
-                                    <button wire:click="view({{ $row['id'] }})" class="text-green-500 hover:text-green-700">
-                                        <i class="fas fa-eye"></i> <!-- Font Awesome View Icon -->
+                        @if ($hasActions)
+                            <td class="px-4 py-2 gap-2 flex">
+                                @if($isViewPage)
+                                    <button wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700">
+                                        <i class="fas fa-eye"></i>
                                     </button>
                                 @else
-                                    <!-- Show Edit, View, and Delete Icons for Non-View Pages -->
-                                    <!-- Edit Icon -->
-                                    <button wire:click="edit({{ $row['id'] }})" class="text-blue-500 hover:text-blue-700">
-                                        <i class="fas fa-edit"></i> <!-- Font Awesome Edit Icon -->
+                                    <button wire:click="editRow({{ $row['id'] }})" class="text-blue-500 hover:text-blue-700">
+                                        <i class="fas fa-edit"></i>
                                     </button>
-
-                                    <!-- View Icon (only shown when it's NOT the View page) -->
-                                    <button wire:click="view({{ $row['id'] }})" class="text-green-500 hover:text-green-700">
-                                        <i class="fas fa-eye"></i> <!-- Font Awesome View Icon -->
+                                    <button wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700">
+                                        <i class="fas fa-eye"></i>
                                     </button>
-
-                                    <!-- Delete Icon -->
-                                    <button wire:click="delete({{ $row['id'] }})" class="text-red-500 hover:text-red-700">
-                                        <i class="fas fa-trash-alt"></i> <!-- Font Awesome Delete Icon -->
+                                    <button wire:click="deleteRow({{ $row['id'] }})" class="text-red-500 hover:text-red-700">
+                                        <i class="fas fa-trash-alt"></i>
                                     </button>
                                 @endif
                             </td>
diff --git a/resources/views/livewire/navigation/drawer.blade.php b/resources/views/livewire/navigation/drawer.blade.php
index 5ceed88..c4ca3dc 100644
--- a/resources/views/livewire/navigation/drawer.blade.php
+++ b/resources/views/livewire/navigation/drawer.blade.php
@@ -1,4 +1,4 @@
-<div class="w-80 bg-slate-50 text-black flex-shrink-0">
+<div class="w-80 bg-white text-black flex-shrink-0 shadow-md">
     <div class="text-center mb-5">
         <img src="{{ asset('assets/unioil(orange).png') }}" alt="Unioil Logo" class="mx-auto w-20 mt-5">
     </div>