unioil-cms-fe/resources/views/livewire/components/table.blade.php

180 lines
6.9 KiB
PHP

<div class="mt-10">
<div class="p-4 bg-white shadow-md">
<div class="flex justify-between items-center mb-4">
@if ($hasSearch ?? true)
<!-- Search bar -->
<input
type="text"
wire:model="search"
placeholder="Search..."
class="border rounded px-3 py-2"
/>
@else
<!-- Start Date and End Date filters -->
<div class="flex gap-2">
<input
type="date"
wire:model="startDate"
class="border rounded px-3 py-2"
/>
<input
type="date"
wire:model="endDate"
class="border rounded px-3 py-2"
/>
</div>
@endif
@if ($hasAddButton ?? true)
<!-- Add button -->
<a href="{{ $addRoute }}" class="bg-orange-600 text-white px-4 py-2 rounded">
+ Add
</a>
@else
<!-- Export button -->
<button
wire:click="export"
class="bg-orange-600 text-white px-4 py-2 rounded flex items-center gap-2"
>
Export CSV
</button>
@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>
@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">&#8593;</span>
@else
<span class="ml-2">&#8595;</span>
@endif
@else
<span class="ml-2">&#8597;</span>
@endif
</th>
@endforeach
<!-- Actions Column (if enabled) -->
@if ($hasActions)
<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 border-b">
<!-- 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
<!-- 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>
@endforelse
</tbody>
</table>
<!-- Delete Button -->
@if($hasDelete)
<button wire:click="deleteSelected"
class="mt-4 px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 cursor-pointer"
@if (empty($selected)) disabled @endif>
Delete
</button>
@endif
<!-- 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">&times;</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>