From 817dac463c8c3105b40799a3272cde8488af4d90 Mon Sep 17 00:00:00 2001
From: erishBRBS <erishberboso10@gmail.com>
Date: Sun, 20 Apr 2025 14:16:44 +0800
Subject: [PATCH] table component added

---
 app/Livewire/Components/Table.php             |  86 ++++++------
 app/Livewire/Notification.php                 |  27 +++-
 app/Livewire/UserManagement.php               |  28 ++--
 resources/views/layouts/dashboard.blade.php   |   2 +-
 .../views/livewire/components/table.blade.php | 128 ++++++------------
 .../notification/notification.blade.php       |  13 +-
 .../user-management/user-management.blade.php |  18 +--
 7 files changed, 138 insertions(+), 164 deletions(-)

diff --git a/app/Livewire/Components/Table.php b/app/Livewire/Components/Table.php
index 1675169..ededad4 100644
--- a/app/Livewire/Components/Table.php
+++ b/app/Livewire/Components/Table.php
@@ -8,62 +8,56 @@ class Table extends Component
 {
     public $columns = [];
     public $rows = [];
-    public $search = '';
-    public $sortField = '';
-    public $sortDirection = 'asc';
-    public $currentPage = 1;
-    public $perPage = 10;
-    public $checkboxes = false;
-    public $showActions = false;
-    public $actions = [];
-    public $addButtonLabel = '';
-    public $searchable = false;  // Add this property
+    public $selected = [];  // Holds the selected row IDs
+    public $selectAll = false;  // To track if 'Select All' is checked
+    public $hasActions = false; 
+    public $isViewPage = false; 
 
-    // Sort the table by the given field
-    public function sortBy($field)
+    // Add new methods for handling actions
+    public function editRow($rowId)
     {
-        if ($this->sortField === $field) {
-            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
+        // Logic for editing a row (e.g., redirect to the edit page or open modal)
+        session()->flash('message', 'Edit action for user ID: ' . $rowId);
+    }
+
+    public function deleteRow($rowId)
+    {
+        // Logic for deleting a row (e.g., delete from database)
+        session()->flash('message', 'Delete action for user ID: ' . $rowId);
+    }
+
+    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);
+    }
+
+
+
+    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 {
-            $this->sortField = $field;
-            $this->sortDirection = 'asc';
+            $this->selected = [];
         }
     }
 
-    // Calculate total pages for pagination
-    public function calculateTotalPages()
+    public function selectRow($rowId)
     {
-        return ceil(count($this->rows) / $this->perPage);
-    }
-
-    // Get the paginated rows for the current page
-    public function getPaginatedRowsProperty()
-    {
-        $sorted = collect($this->rows);
-        
-        if ($this->sortField) {
-            $sorted = $this->sortDirection === 'asc'
-                ? $sorted->sortBy($this->sortField)
-                : $sorted->sortByDesc($this->sortField);
+        if (in_array($rowId, $this->selected)) {
+            $this->selected = array_diff($this->selected, [$rowId]);
+        } else {
+            $this->selected[] = $rowId;
         }
-    
-        return $sorted
-            ->slice(($this->currentPage - 1) * $this->perPage, $this->perPage)
-            ->values();
-    }
-    
-
-    // Set the current page for pagination
-    public function setPage($page)
-    {
-        $this->currentPage = max(1, min($this->calculateTotalPages(), $page));
     }
 
     public function render()
     {
-        return view('livewire.components.table', [
-            'paginatedRows' => $this->paginatedRows, // 👈 explicitly pass computed property
-        ]);
+        return view('livewire.components.table');
     }
-    
-}
\ No newline at end of file
+}
+
+
+
diff --git a/app/Livewire/Notification.php b/app/Livewire/Notification.php
index 0211a4f..63b0f6f 100644
--- a/app/Livewire/Notification.php
+++ b/app/Livewire/Notification.php
@@ -5,8 +5,33 @@ namespace App\Livewire;
 use Livewire\Component;
 class Notification extends Component
 {
+    public $search = '';
+    public $notifs = [];
+
+    // protected $queryString = ['search'];
+
+    // // Reset the current page when search is updated
+    // public function updatingSearch()
+    // {
+    //     $this->search = $this->search;
+    // }
+
+    public function mount()
+    {
+        $this->loadNotifications();
+    }
+
+    // Get filtered users based on the search input
+    public function loadNotifications()
+    {
+        $this->notifs = collect(json_decode(file_get_contents(storage_path('app/notifs.json')), true));
+    }
+    
+
     public function render()
     {
-        return view('livewire.notification.notification');
+        return view('livewire.notification.notification', [
+            'notification' => $this->notifs,  // Pass filtered notifs here
+        ]);
     }
 }
diff --git a/app/Livewire/UserManagement.php b/app/Livewire/UserManagement.php
index b2e7728..e07229a 100644
--- a/app/Livewire/UserManagement.php
+++ b/app/Livewire/UserManagement.php
@@ -9,35 +9,27 @@ class UserManagement extends Component
     public $search = '';
     public $users = [];
 
-    protected $queryString = ['search'];
+    // protected $queryString = ['search'];
 
-    // Reset the current page when search is updated
-    public function updatingSearch()
-    {
-        $this->search = $this->search;
-    }
+    // // Reset the current page when search is updated
+    // public function updatingSearch()
+    // {
+    //     $this->search = $this->search;
+    // }
 
     public function mount()
     {
         $this->loadUsers();
     }
 
+    
+
     // Get filtered users based on the search input
     public function loadUsers()
     {
-        $users = collect(json_decode(file_get_contents(storage_path('app/users.json')), true));
-    
-        if ($this->search) {
-            $this->users = $users->filter(function ($user) {
-                return str_contains(strtolower($user['username']), strtolower($this->search)) ||
-                       str_contains(strtolower($user['first_name']), strtolower($this->search)) ||
-                       str_contains(strtolower($user['last_name']), strtolower($this->search)) ||
-                       str_contains(strtolower($user['email']), strtolower($this->search));
-            });
-        } else {
-            $this->users = $users;
-        }
+        $this->users = collect(json_decode(file_get_contents(storage_path('app/users.json')), true));
     }
+    
 
     public function render()
     {
diff --git a/resources/views/layouts/dashboard.blade.php b/resources/views/layouts/dashboard.blade.php
index fba2f71..db9c229 100644
--- a/resources/views/layouts/dashboard.blade.php
+++ b/resources/views/layouts/dashboard.blade.php
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <link rel="icon" href="{{ asset('assets/favicon_unioil.ico') }}" type="image/x-icon">
-
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
     <title>Unioil</title>
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @livewireStyles <!-- Add Livewire Styles -->
diff --git a/resources/views/livewire/components/table.blade.php b/resources/views/livewire/components/table.blade.php
index c0aee1d..896531a 100644
--- a/resources/views/livewire/components/table.blade.php
+++ b/resources/views/livewire/components/table.blade.php
@@ -1,112 +1,72 @@
 <div>
-    <div class="p-4 bg-white rounded shadow">
-        <div class="flex justify-between items-center mb-4">
-            @if ($searchable)
-                <input
-                    type="text"
-                    placeholder="Search"
-                    class="border p-2 rounded w-1/3"
-                    wire:model.debounce.300ms="search"
-                >
-            @endif
-            @if ($addButtonLabel)
-                <button class="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600">
-                    {{ $addButtonLabel }}
-                </button>
-            @endif
-        </div>
-
-        <table class="min-w-full text-sm text-left border border-gray-200">
+    <div class="p-4 bg-white rounded-lg shadow-md">
+        <table class="table-auto w-full">
             <thead class="bg-gray-100">
                 <tr>
-                    @if ($checkboxes)
-                        <th class="p-2"><input type="checkbox" /></th>
-                    @endif
+                    <!-- Select All Checkbox -->
+                    <th class="px-4 py-2 text-left">
+                        <input type="checkbox" wire:model="selectAll" wire:change="selectAllRows" class="cursor-pointer">
+                    </th>
 
-                    @foreach ($columns as $col)
-                        <th
-                            class="p-2 cursor-pointer select-none"
-                            wire:click="sortBy('{{ $col['field'] }}')"
-                        >
-                            <div class="flex items-center space-x-1">
-                                <span>{{ $col['label'] }}</span>
-
-                                {{-- Sort Icons --}}
-                                @if ($sortField === $col['field'])
-                                    @if ($sortDirection === 'asc')
-                                        {{-- Ascending Icon --}}
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-orange-500" fill="currentColor" viewBox="0 0 20 20">
-                                            <path fill-rule="evenodd" d="M10 3l4 6H6l4-6z" clip-rule="evenodd" />
-                                        </svg>
-                                    @else
-                                        {{-- Descending Icon --}}
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-orange-500" fill="currentColor" viewBox="0 0 20 20">
-                                            <path fill-rule="evenodd" d="M10 17l-4-6h8l-4 6z" clip-rule="evenodd" />
-                                        </svg>
-                                    @endif
-                                @else
-                                    {{-- Neutral Sort Icon --}}
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                                        <path fill-rule="evenodd" d="M6 7h8l-4-4-4 4zm0 6h8l-4 4-4-4z" clip-rule="evenodd" />
-                                    </svg>
-                                @endif
-                            </div>
+                    @foreach ($columns as $column)
+                        <th class="px-4 py-2 text-left cursor-pointer">
+                            {{ $column['label'] }}
                         </th>
                     @endforeach
 
-                    {{-- Status Column --}}
-
-                    {{-- Actions Column --}}            
-
-
-                    @if ($showActions)
-                        <th class="p-2">Action</th>
+                    @if ($hasActions) <!-- Show the Actions column only if hasActions is true -->
+                        <th class="px-4 py-2 text-left">Actions</th>
                     @endif
                 </tr>
             </thead>
             <tbody>
-                @forelse ($paginatedRows as $row)
+                @forelse ($rows as $row)
                     <tr class="hover:bg-gray-50">
-                        @if ($checkboxes)
-                            <td class="p-2"><input type="checkbox" /></td>
-                        @endif
+                        <!-- Row Checkbox -->
+                        <td class="px-4 py-2">
+                            <input type="checkbox" wire:click="selectRow('{{ $row['id'] }}')" 
+                                   @if(in_array($row['id'], $selected)) checked @endif class="cursor-pointer">
+                        </td>
 
-                        @foreach ($columns as $col)
-                            <td class="p-2 {{ $col['field'] === 'status' ? 'text-blue-500' : '' }}">
-                                {{ $row[$col['field']] ?? '-' }}
+                        @foreach ($columns as $column)
+                            <td class="px-4 py-2">
+                                {{ $row[$column['field']] ?? '' }}
                             </td>
                         @endforeach
 
-                        @if ($showActions)
-                            <td class="p-2 flex space-x-2 text-orange-500">
-                                @foreach ($actions as $action)
-                                    <button wire:click="{{ $action['method'] }}({{ $row['id'] ?? 'null' }})">
-                                        {{ $action['icon'] }}
+                        @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 -->
                                     </button>
-                                @endforeach
+                                @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>
+
+                                    <!-- 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>
+
+                                    <!-- 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>
+                                @endif
                             </td>
                         @endif
                     </tr>
                 @empty
                     <tr>
-                        <td class="p-2 text-center" colspan="{{ count($columns) + ($checkboxes ? 1 : 0) + ($showActions ? 1 : 0) }}">
-                            No data found.
-                        </td>
+                        <td colspan="{{ count($columns) + 1 }}" class="text-center p-4">No data available</td>
                     </tr>
                 @endforelse
             </tbody>
         </table>
-
-        {{-- Pagination Controls --}}
-        <div class="mt-4 flex justify-center space-x-2">
-            @for ($page = 1; $page <= $this->calculateTotalPages(); $page++)
-                <button
-                    wire:click="setPage({{ $page }})"
-                    class="px-3 py-1 border rounded {{ $currentPage === $page ? 'bg-orange-500 text-white' : 'bg-white text-gray-700' }}"
-                >
-                    {{ $page }}
-                </button>
-            @endfor
-        </div>
     </div>
 </div>
diff --git a/resources/views/livewire/notification/notification.blade.php b/resources/views/livewire/notification/notification.blade.php
index 8f06873..7205b3a 100644
--- a/resources/views/livewire/notification/notification.blade.php
+++ b/resources/views/livewire/notification/notification.blade.php
@@ -1,6 +1,17 @@
 <div>
 {{-- Top Nav --}}
 @include('livewire.notification.top-nav.notification')
-<h1>This is notification page</h1>
+<livewire:components.table 
+:columns="[
+        ['label' => 'Subject', 'field' => 'subject'],
+        ['label' => 'Content', 'field' => 'content'],
+        ['label' => 'Is Scheduled', 'field' => 'is_scheduled'],
+        ['label' => 'Schedule', 'field' => 'schedule'],
+        ['label' => 'Expiration', 'field' => 'expiration'],
+    ]"
+    :rows="$notifs" 
+    :hasActions="false"
+    />
+    
 </div>
 
diff --git a/resources/views/livewire/user-management/user-management.blade.php b/resources/views/livewire/user-management/user-management.blade.php
index eba18cb..16cdc74 100644
--- a/resources/views/livewire/user-management/user-management.blade.php
+++ b/resources/views/livewire/user-management/user-management.blade.php
@@ -5,20 +5,12 @@
         ['label' => 'Username', 'field' => 'username'],
         ['label' => 'First Name', 'field' => 'first_name'],
         ['label' => 'Last Name', 'field' => 'last_name'],
-        ['label' => 'Role', 'field' => 'role'],
         ['label' => 'Email', 'field' => 'email'],
+        ['label' => 'Role', 'field' => 'role'],
         ['label' => 'Status', 'field' => 'status'],
     ]"
-    :rows="$users"
-    :searchable="true"
-        :search="$search"
-    :checkboxes="true"
-    :showActions="true"
-    :actions="[
-        ['method' => 'editUser', 'icon' => '✏️'],
-        ['method' => 'deleteUser', 'icon' => '🗑️'],
-        ['method' => 'scheduleUser', 'icon' => '⏱️'],
-    ]"
-    addButtonLabel="Add User"
-/>
+    :rows="$users" 
+    :hasActions="true"
+    :isViewPage="false"
+    />
 </div>