erishberboso
/
unioil-cms-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modal for actions added

This commit is contained in:
erishBRBS 2025-04-22 10:56:02 +08:00
parent 53a8acfa9d
commit 121c57d3ee
2 changed files with 121 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/Livewire/Components/Table.php
View File

@ -19,6 +19,31 @@ class Table extends Component
public $sortField = null; // Column to sort public $sortField = null; // Column to sort
public $sortDirection = 'asc'; // Default sort direction public $sortDirection = 'asc'; // Default sort direction
// Inside App\Livewire\Components\Table
public $showModal = false;
public $modalMode = 'view'; // or 'edit'
public $modalData = [];
public function viewRow($id)
{
$this->modalData = collect($this->rows)->firstWhere('id', $id) ?? [];
$this->modalMode = 'view';
$this->showModal = true;
}
public function editRow($id)
{
$this->modalData = collect($this->rows)->firstWhere('id', $id) ?? [];
$this->modalMode = 'edit';
$this->showModal = true;
}
public function closeModal()
{
$this->showModal = false;
$this->modalData = [];
}
public function mount($columns, $rows, $addRoute = null) public function mount($columns, $rows, $addRoute = null)
{ {
@ -53,7 +78,7 @@ class Table extends Component
} }
} }
// Simplified version // Sorting
public function sortBy($field) public function sortBy($field)
{ {
if ($this->sortField === $field) { if ($this->sortField === $field) {

148
resources/views/livewire/components/table.blade.php
View File

@ -7,83 +7,119 @@
placeholder="Search..." placeholder="Search..."
autofocus> autofocus>
@if ($hasAddButton && $addRoute) @if ($hasAddButton && $addRoute)
<a href="{{ $addRoute }}" wire:navigate <a href="{{ $addRoute }}" wire:navigate
class="ml-4 px-4 py-2 bg-orange-500 text-white rounded-md hover:bg-orange-600"> class="ml-4 px-4 py-2 bg-orange-500 text-white rounded-md hover:bg-orange-600">
+ Add + Add
</a> </a>
@endif @endif
</div> </div>
<table class="table-auto w-full"> <table class="table-auto w-full">
<thead class="bg-gray-100"> <thead class="bg-gray-100">
<tr> <tr>
@if ($hasCheckbox) @if ($hasCheckbox)
<th class="px-4 py-2 text-left"> <th class="px-4 py-2 text-left">
<input type="checkbox" wire:model="selectAll" wire:change="selectAllRows" class="cursor-pointer"> <input type="checkbox" wire:model="selectAll" wire:change="selectAllRows" class="cursor-pointer">
</th> </th>
@endif @endif
@foreach ($columns as $column) @foreach ($columns as $column)
<th class="px-4 py-2 text-left cursor-pointer" wire:click="sortBy('{{ $column['field'] }}')"> <th class="px-4 py-2 text-left cursor-pointer" wire:click="sortBy('{{ $column['field'] }}')">
{{ $column['label'] }} {{ $column['label'] }}
@if ($sortField === $column['field']) @if ($sortField === $column['field'])
@if ($sortDirection === 'asc') @if ($sortDirection === 'asc')
<span class="ml-2">&#8593;</span> <span class="ml-2">&#8593;</span>
@else @else
<span class="ml-2">&#8595;</span> <span class="ml-2">&#8595;</span>
@endif @endif
@else @else
<span class="ml-2">&#8597;</span> <span class="ml-2">&#8597;</span>
@endif @endif
</th> </th>
@endforeach @endforeach
@if ($hasActions) @if ($hasActions)
<th class="px-4 py-2 text-left">Actions</th> <th class="px-4 py-2 text-left">Actions</th>
@endif @endif
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@forelse ($rows as $row) @forelse ($rows as $row)
<tr class="hover:bg-gray-50"> <tr class="hover:bg-gray-50">
@if ($hasCheckbox) @if ($hasCheckbox)
<td class="px-4 py-2"> <td class="px-4 py-2">
<input type="checkbox" wire:click="selectRow('{{ $row['id'] }}')" <input type="checkbox" wire:click="selectRow('{{ $row['id'] }}')"
@if(in_array($row['id'], $selected)) checked @endif class="cursor-pointer"> @if(in_array($row['id'], $selected)) checked @endif class="cursor-pointer">
</td> </td>
@endif @endif
@foreach ($columns as $column) @foreach ($columns as $column)
<td class="px-4 py-2"> <td class="px-4 py-2">
{{ $row[$column['field']] ?? '' }} {{ $row[$column['field']] ?? '' }}
</td> </td>
@endforeach @endforeach
@if ($hasActions) @if ($hasActions)
<td class="px-4 py-2 gap-2 flex"> <td class="px-4 py-2 gap-2 flex">
@if($isViewPage) @if($isViewPage)
<button wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700"> <button wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-eye"></i> <i class="fas fa-eye"></i>
</button> </button>
@else @else
<button wire:click="editRow({{ $row['id'] }})" class="text-blue-500 hover:text-blue-700"> <button wire:click="editRow({{ $row['id'] }})" class="text-blue-500 hover:text-blue-700">
<i class="fas fa-edit"></i> <i class="fas fa-edit"></i>
</button> </button>
<button wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700"> <button wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-eye"></i> <i class="fas fa-eye"></i>
</button> </button>
<button wire:click="deleteRow({{ $row['id'] }})" class="text-red-500 hover:text-red-700"> <button wire:click="deleteRow({{ $row['id'] }})" class="text-red-500 hover:text-red-700">
<i class="fas fa-trash-alt"></i> <i class="fas fa-trash-alt"></i>
</button> </button>
@endif
</td>
@endif @endif
</tr> </td>
@endif
@if ($showModal)
<div class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50">
<div class="bg-white p-6 rounded-lg shadow-lg w-1/2">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold">
{{ $modalMode === 'view' ? 'View Details' : 'Edit Details' }}
</h2>
<button wire:click="closeModal" class="text-gray-600 hover:text-gray-800">&times;</button>
</div>
<div class="space-y-4">
@foreach ($columns as $column)
<div>
<label class="block text-sm font-medium text-gray-700">
{{ $column['label'] }}
</label>
@if ($modalMode === 'edit')
<input type="text" wire:model.defer="modalData.{{ $column['field'] }}"
class="mt-1 p-2 border border-gray-300 rounded w-full">
@else
<div class="mt-1 p-2 bg-gray-100 rounded">
{{ $modalData[$column['field']] ?? '' }}
</div>
@endif
</div>
@endforeach
</div>
@if ($modalMode === 'edit')
<div class="mt-6 flex justify-end">
<button wire:click="saveRow" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
Save
</button>
</div>
@endif
</div>
</div>
@endif
</tr>
@empty @empty
<tr> <tr>
<td colspan="{{ count($columns) + 1 }}" class="text-center p-4">No data available</td> <td colspan="{{ count($columns) + 1 }}" class="text-center p-4">No data available</td>
</tr> </tr>
@endforelse @endforelse
</tbody> </tbody>
</table> </table>