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 $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)
{
@ -53,7 +78,7 @@ class Table extends Component
}
}
// Simplified version
// Sorting
public function sortBy($field)
{
if ($this->sortField === $field) {

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

@ -79,6 +79,42 @@
@endif
</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
<tr>