modal refactor
This commit is contained in:
erishBRBS
parent
121c57d3ee
commit
92351c0bc1
|
|
@ -6,45 +6,28 @@ use Livewire\Component;
|
|||
|
||||
class Table extends Component
|
||||
{
|
||||
public $columns = [];
|
||||
public $rows = [];
|
||||
public $selected = [];
|
||||
public $addRoute = null;
|
||||
public $hasAddButton = true;
|
||||
public $selectAll = false;
|
||||
public $hasCheckbox = true;
|
||||
public $hasActions = false;
|
||||
public $isViewPage = false;
|
||||
public $search = '';
|
||||
public $sortField = null; // Column to sort
|
||||
public $sortDirection = 'asc'; // Default sort direction
|
||||
// Table Configuration
|
||||
public $columns = []; // Columns to display
|
||||
public $rows = []; // Data rows for the table
|
||||
public $selected = []; // Selected row IDs
|
||||
public $addRoute = null; // Route for adding new rows (optional)
|
||||
public $hasAddButton = true; // Whether the 'Add' button is shown
|
||||
public $selectAll = false; // Whether 'Select All' is active
|
||||
public $hasCheckbox = true; // Whether checkboxes are shown for row selection
|
||||
public $hasActions = false; // Whether action buttons (like Edit/Delete) are shown
|
||||
public $isViewPage = false; // Whether the table is for a view page
|
||||
public $search = ''; // Search query for filtering rows
|
||||
public $sortField = null; // Column to sort by
|
||||
public $sortDirection = 'asc'; // Sorting direction (asc or desc)
|
||||
|
||||
// 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 = [];
|
||||
}
|
||||
// Modal Configuration
|
||||
public $showModal = false; // Whether the modal is visible
|
||||
public $modalMode = 'view'; // Modal mode: 'view' or 'edit'
|
||||
public $modalData = []; // Data for the modal
|
||||
|
||||
/**
|
||||
* Initialize the table with given columns and rows
|
||||
*/
|
||||
public function mount($columns, $rows, $addRoute = null)
|
||||
{
|
||||
$this->columns = $columns;
|
||||
|
|
@ -52,13 +35,46 @@ public function closeModal()
|
|||
$this->addRoute = $addRoute;
|
||||
}
|
||||
|
||||
// Update rows based on search
|
||||
/**
|
||||
* View a row's details in the modal
|
||||
*/
|
||||
public function viewRow($id)
|
||||
{
|
||||
$this->modalData = collect($this->rows)->firstWhere('id', $id) ?? [];
|
||||
$this->modalMode = 'view';
|
||||
$this->showModal = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Edit a row's details in the modal
|
||||
*/
|
||||
public function editRow($id)
|
||||
{
|
||||
$this->modalData = collect($this->rows)->firstWhere('id', $id) ?? [];
|
||||
$this->modalMode = 'edit';
|
||||
$this->showModal = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the modal
|
||||
*/
|
||||
public function closeModal()
|
||||
{
|
||||
$this->showModal = false;
|
||||
$this->modalData = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the selected rows based on search input
|
||||
*/
|
||||
public function updatedSearch()
|
||||
{
|
||||
$this->selected = [];
|
||||
}
|
||||
|
||||
// Select all rows
|
||||
/**
|
||||
* Select or deselect all rows
|
||||
*/
|
||||
public function selectAllRows()
|
||||
{
|
||||
if ($this->selectAll) {
|
||||
|
|
@ -68,7 +84,9 @@ public function closeModal()
|
|||
}
|
||||
}
|
||||
|
||||
// Select single row
|
||||
/**
|
||||
* Select or deselect a single row
|
||||
*/
|
||||
public function selectRow($rowId)
|
||||
{
|
||||
if (in_array($rowId, $this->selected)) {
|
||||
|
|
@ -78,7 +96,9 @@ public function closeModal()
|
|||
}
|
||||
}
|
||||
|
||||
// Sorting
|
||||
/**
|
||||
* Sort rows by a specific field
|
||||
*/
|
||||
public function sortBy($field)
|
||||
{
|
||||
if ($this->sortField === $field) {
|
||||
|
|
@ -93,6 +113,9 @@ public function closeModal()
|
|||
}, SORT_REGULAR, $this->sortDirection === 'desc')->values()->all(); // Use all() to return plain array again
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the table view
|
||||
*/
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.components.table', [
|
||||
|
|
|
|||
|
|
@ -1,127 +1,146 @@
|
|||
<div class="mt-10">
|
||||
<div class="p-4 bg-white shadow-md">
|
||||
|
||||
<!-- Top Bar with Search & Add Button -->
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<input type="text" wire:model.debounce.500ms="search"
|
||||
<!-- Search Input -->
|
||||
<input type="text" wire:model.debounce.500ms="search"
|
||||
class="w-80 p-2 border border-gray-300 rounded-md"
|
||||
placeholder="Search..."
|
||||
placeholder="Search..."
|
||||
autofocus>
|
||||
|
||||
<!-- Add Button (if enabled and route exists) -->
|
||||
@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">
|
||||
+ Add
|
||||
</a>
|
||||
+ Add
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Table Header -->
|
||||
<table class="table-auto w-full">
|
||||
<thead class="bg-gray-100">
|
||||
<tr>
|
||||
<!-- Checkbox for selecting rows (if enabled) -->
|
||||
@if ($hasCheckbox)
|
||||
<th class="px-4 py-2 text-left">
|
||||
<input type="checkbox" wire:model="selectAll" wire:change="selectAllRows" class="cursor-pointer">
|
||||
</th>
|
||||
<th class="px-4 py-2 text-left">
|
||||
<input type="checkbox" wire:model="selectAll" wire:change="selectAllRows" class="cursor-pointer">
|
||||
</th>
|
||||
@endif
|
||||
|
||||
<!-- Dynamic Columns (sortable) -->
|
||||
@foreach ($columns as $column)
|
||||
<th class="px-4 py-2 text-left cursor-pointer" wire:click="sortBy('{{ $column['field'] }}')">
|
||||
{{ $column['label'] }}
|
||||
@if ($sortField === $column['field'])
|
||||
@if ($sortDirection === 'asc')
|
||||
<span class="ml-2">↑</span>
|
||||
@else
|
||||
<span class="ml-2">↓</span>
|
||||
@endif
|
||||
@else
|
||||
<span class="ml-2">↕</span>
|
||||
@endif
|
||||
</th>
|
||||
<th class="px-4 py-2 text-left cursor-pointer" wire:click="sortBy('{{ $column['field'] }}')">
|
||||
{{ $column['label'] }}
|
||||
@if ($sortField === $column['field'])
|
||||
@if ($sortDirection === 'asc')
|
||||
<span class="ml-2">↑</span>
|
||||
@else
|
||||
<span class="ml-2">↓</span>
|
||||
@endif
|
||||
@else
|
||||
<span class="ml-2">↕</span>
|
||||
@endif
|
||||
</th>
|
||||
@endforeach
|
||||
|
||||
<!-- Actions Column (if enabled) -->
|
||||
@if ($hasActions)
|
||||
<th class="px-4 py-2 text-left">Actions</th>
|
||||
<th class="px-4 py-2 text-left">Actions</th>
|
||||
@endif
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<!-- Table Body -->
|
||||
<tbody>
|
||||
@forelse ($rows as $row)
|
||||
<tr class="hover:bg-gray-50">
|
||||
@if ($hasCheckbox)
|
||||
<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>
|
||||
@endif
|
||||
|
||||
@foreach ($columns as $column)
|
||||
<td class="px-4 py-2">
|
||||
{{ $row[$column['field']] ?? '' }}
|
||||
</td>
|
||||
@endforeach
|
||||
|
||||
@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
|
||||
<button wire:click="editRow({{ $row['id'] }})" class="text-blue-500 hover:text-blue-700">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
<button wire:click="deleteRow({{ $row['id'] }})" class="text-red-500 hover:text-red-700">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<!-- Checkbox for row selection (if enabled) -->
|
||||
@if ($hasCheckbox)
|
||||
<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>
|
||||
@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">×</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>
|
||||
|
||||
<!-- Display Data for each column -->
|
||||
@foreach ($columns as $column)
|
||||
<td class="px-4 py-2">
|
||||
{{ $row[$column['field']] ?? '' }}
|
||||
</td>
|
||||
@endforeach
|
||||
|
||||
<!-- Action Buttons (if enabled) -->
|
||||
@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
|
||||
<button wire:click="editRow({{ $row['id'] }})" class="text-blue-500 hover:text-blue-700">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
<button wire:click="deleteRow({{ $row['id'] }})" class="text-red-500 hover:text-red-700">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
@endif
|
||||
</td>
|
||||
@endif
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="{{ count($columns) + 1 }}" class="text-center p-4">No data available</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="{{ count($columns) + 1 }}" class="text-center p-4">No data available</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Modal for Viewing / Editing Row -->
|
||||
@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">
|
||||
<!-- Modal Header -->
|
||||
<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">×</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Body -->
|
||||
<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>
|
||||
|
||||
<!-- Modal Footer with Save Button (if in edit mode) -->
|
||||
@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
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue