439 lines
17 KiB
PHP
439 lines
17 KiB
PHP
@props([
|
|
'pageTitle' => '',
|
|
'data' => [],
|
|
'columns' => [],
|
|
'actions' => [],
|
|
'showAddButton' => false,
|
|
'addButtonUrl' => '#',
|
|
'showCheckboxes' => false,
|
|
'showBatchDelete' => false,
|
|
'showEditModal' => false,
|
|
'showViewModal' => false,
|
|
'currentPage' => 1,
|
|
'lastPage' => 1,
|
|
'total' => 0,
|
|
'search' => null,
|
|
])
|
|
|
|
<div class="card-header border-0 bg-transparent">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0 fw-bold text-dark">{{ $pageTitle }}</h5>
|
|
@if ($showAddButton)
|
|
<a href="{{ $addButtonUrl }}" class="btn btn-primary btn-sm px-3">
|
|
<i class="fa-solid fa-plus me-1"></i> Add {{ $pageTitle }}
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Search and Filters -->
|
|
<div class="row mb-3 align-items-center">
|
|
<div class="col-12 col-md-6 mb-2 mb-md-0">
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-text bg-light border-end-0">
|
|
<i class="fa-solid fa-magnifying-glass text-muted"></i>
|
|
</span>
|
|
<input type="text" class="form-control border-start-0" placeholder="Search..." id="searchInput" value="{{ $search }}" data-search-param="_search">
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 d-flex justify-content-end">
|
|
<button class="btn btn-outline-secondary btn-sm" id="clearFilters">
|
|
<i class="fa-solid fa-filter-circle-xmark me-1"></i> Clear Filters
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="table-container">
|
|
<table class="table table-hover align-middle">
|
|
<thead class="table-light">
|
|
<tr>
|
|
@foreach ($columns as $index => $column)
|
|
<th class="{{ $column['sortable'] ? 'sortable' : '' }}" data-column="{{ $index }}">
|
|
{{ $column['name'] }}
|
|
@if ($column['sortable'])
|
|
<i class="fa-solid fa-sort"></i>
|
|
@endif
|
|
</th>
|
|
@endforeach
|
|
@if (!empty($actions))
|
|
<th class="text-center" style="width: 120px;">Action</th>
|
|
@endif
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tableBody"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="d-flex justify-content-end align-items-center mt-4">
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination pagination-sm" id="pagination"></ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Modal -->
|
|
@if ($showEditModal)
|
|
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="editModalLabel">Edit {{ $pageTitle }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form id="editForm" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
<div class="modal-body">
|
|
<input type="hidden" name="id" id="editId">
|
|
@foreach ($columns as $column)
|
|
@if (!in_array($column['key'], ['date_created', 'created_by', 'modified_by', 'date_modified']))
|
|
<div class="mb-3">
|
|
<label for="edit_{{ $column['key'] }}" class="form-label">{{ $column['name'] }}</label>
|
|
<input type="text" class="form-control" id="edit_{{ $column['key'] }}" name="{{ $column['key'] }}" required>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="submit" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- View Modal -->
|
|
@if ($showViewModal)
|
|
<div class="modal fade" id="viewModal" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="viewModalLabel">View {{ $pageTitle }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body" id="viewModalBody"></div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<style>
|
|
.card, .table, .btn, .form-control, .input-group-text {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
}
|
|
.table-container {
|
|
overflow-x: auto;
|
|
}
|
|
.table th, .table td {
|
|
white-space: nowrap;
|
|
}
|
|
.sortable {
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
.sortable:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
.sortable i {
|
|
margin-left: 5px;
|
|
color: #6c757d;
|
|
}
|
|
.clickable-row:hover {
|
|
background-color: #f1f1f1;
|
|
cursor: pointer;
|
|
}
|
|
.view-btn { border-color: #0d6efd; color: #0d6efd; }
|
|
.view-btn:hover { background-color: #0d6efd; color: #fff; }
|
|
.edit-btn { border-color: #ffc107; color: #ffc107; }
|
|
.edit-btn:hover { background-color: #ffc107; color: #fff; }
|
|
.delete-btn { border-color: #dc3545; color: #dc3545; }
|
|
.delete-btn:hover { background-color: #dc3545; color: #fff; }
|
|
</style>
|
|
|
|
<script>
|
|
const tableConfig = {
|
|
data: @json($data),
|
|
columns: @json($columns),
|
|
actions: @json($actions),
|
|
showEditModal: {{ json_encode($showEditModal) }},
|
|
showViewModal: {{ json_encode($showViewModal) }},
|
|
pageTitle: @json($pageTitle),
|
|
csrfToken: '{{ csrf_token() }}',
|
|
currentPage: {{ $currentPage }},
|
|
lastPage: {{ $lastPage }},
|
|
total: {{ $total }},
|
|
search: @json($search),
|
|
};
|
|
|
|
console.log('Table Config:', {
|
|
data: tableConfig.data,
|
|
total: tableConfig.total,
|
|
currentPage: tableConfig.currentPage,
|
|
lastPage: tableConfig.lastPage,
|
|
search: tableConfig.search
|
|
});
|
|
|
|
const rowsPerPage = 5;
|
|
let currentPage = tableConfig.currentPage;
|
|
let filteredRows = [...tableConfig.data];
|
|
let sortDirection = {};
|
|
|
|
function renderTable() {
|
|
const tableBody = document.getElementById('tableBody');
|
|
if (!tableBody) {
|
|
console.error('Table body element not found');
|
|
return;
|
|
}
|
|
tableBody.innerHTML = '';
|
|
|
|
const startIndex = (currentPage - 1) * rowsPerPage;
|
|
const endIndex = startIndex + rowsPerPage;
|
|
const paginatedRows = filteredRows.slice(startIndex, endIndex);
|
|
|
|
console.log('Rendering table:', {
|
|
filteredRowsCount: filteredRows.length,
|
|
paginatedRows: paginatedRows,
|
|
paginatedRowsCount: paginatedRows.length,
|
|
startIndex: startIndex,
|
|
endIndex: endIndex
|
|
});
|
|
|
|
if (paginatedRows.length === 0) {
|
|
tableBody.innerHTML = '<tr><td colspan="' + (tableConfig.columns.length + (tableConfig.actions.length > 0 ? 1 : 0)) + '" class="text-center">No stations found</td></tr>';
|
|
} else {
|
|
paginatedRows.forEach(row => {
|
|
if (!row.id || !row.station_code || !row.station_name) {
|
|
console.warn('Invalid row data:', row);
|
|
return;
|
|
}
|
|
const tr = document.createElement('tr');
|
|
tr.setAttribute('data-id', row.id);
|
|
tr.classList.add('clickable-row');
|
|
let rowHtml = '';
|
|
|
|
tableConfig.columns.forEach(col => {
|
|
let value = row[col.key] || 'N/A';
|
|
rowHtml += `<td>${value}</td>`;
|
|
});
|
|
|
|
if (tableConfig.actions.length > 0) {
|
|
rowHtml += `<td class="text-center">`;
|
|
tableConfig.actions.forEach(action => {
|
|
const routeBase = 'stations';
|
|
if (action === 'view') {
|
|
rowHtml += `<a href="/${routeBase}/${row.id}" class="btn btn-sm view-btn me-1" title="View"><i class="fa-solid fa-eye"></i></a>`;
|
|
} else if (action === 'edit') {
|
|
rowHtml += `<button class="btn btn-sm edit-btn me-1" title="Edit" onclick="openEditModal('${row.id}')"><i class="fa-solid fa-pen"></i></button>`;
|
|
} else if (action === 'delete') {
|
|
rowHtml += `<a href="/${routeBase}/${row.id}" class="btn btn-sm delete-btn" title="Delete" onclick="event.preventDefault(); if(confirm('Are you sure you want to delete this station?')) { document.getElementById('delete-form-${row.id}').submit(); }"><i class="fa-solid fa-trash"></i></a>
|
|
<form id="delete-form-${row.id}" action="/${routeBase}/${row.id}" method="POST" style="display: none;">
|
|
@csrf
|
|
@method('DELETE')
|
|
</form>`;
|
|
}
|
|
});
|
|
rowHtml += `</td>`;
|
|
}
|
|
|
|
tr.innerHTML = rowHtml;
|
|
tableBody.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
updateNoDataMessage();
|
|
attachEventListeners();
|
|
}
|
|
|
|
function renderPagination() {
|
|
const pagination = document.getElementById('pagination');
|
|
if (!pagination) {
|
|
console.error('Pagination element not found');
|
|
return;
|
|
}
|
|
pagination.innerHTML = '';
|
|
|
|
const totalPages = Math.max(tableConfig.lastPage, 1);
|
|
console.log('Rendering pagination:', { totalPages, currentPage });
|
|
|
|
const prevLi = document.createElement('li');
|
|
prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
|
|
prevLi.innerHTML = `<a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>`;
|
|
prevLi.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
if (currentPage > 1) {
|
|
currentPage--;
|
|
updateUrl(currentPage, document.getElementById('searchInput')?.value || '');
|
|
}
|
|
});
|
|
pagination.appendChild(prevLi);
|
|
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
const li = document.createElement('li');
|
|
li.className = `page-item ${currentPage === i ? 'active' : ''}`;
|
|
li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
|
|
li.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
currentPage = i;
|
|
updateUrl(currentPage, document.getElementById('searchInput')?.value || '');
|
|
});
|
|
pagination.appendChild(li);
|
|
}
|
|
|
|
const nextLi = document.createElement('li');
|
|
nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
|
|
nextLi.innerHTML = `<a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a>`;
|
|
nextLi.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
if (currentPage < totalPages) {
|
|
currentPage++;
|
|
updateUrl(currentPage, document.getElementById('searchInput')?.value || '');
|
|
}
|
|
});
|
|
pagination.appendChild(nextLi);
|
|
}
|
|
|
|
function updateUrl(page, search = '') {
|
|
console.log('Updating URL:', { page, search });
|
|
const url = new URL(window.location);
|
|
url.searchParams.set('page', page);
|
|
if (search) {
|
|
url.searchParams.set('_search', search);
|
|
} else {
|
|
url.searchParams.delete('_search');
|
|
}
|
|
Object.keys(sortDirection).forEach(colIndex => {
|
|
const key = tableConfig.columns[colIndex].key;
|
|
url.searchParams.set('sort', `${key}|${sortDirection[colIndex]}`);
|
|
});
|
|
window.location.href = url.toString();
|
|
}
|
|
|
|
function updateNoDataMessage() {
|
|
const noDataMessage = document.getElementById('no-data-message');
|
|
if (noDataMessage) {
|
|
noDataMessage.style.display = filteredRows.length === 0 ? 'block' : 'none';
|
|
console.log('No data message:', { display: noDataMessage.style.display, filteredRowsCount: filteredRows.length });
|
|
}
|
|
}
|
|
|
|
function openEditModal(id) {
|
|
const row = tableConfig.data.find(row => row.id === id);
|
|
if (!row) {
|
|
console.error('Row not found for edit:', id);
|
|
return;
|
|
}
|
|
|
|
const editForm = document.getElementById('editForm');
|
|
if (editForm) {
|
|
editForm.action = `/stations/${id}`;
|
|
document.getElementById('editId').value = id;
|
|
tableConfig.columns.forEach(col => {
|
|
const input = document.getElementById(`edit_${col.key}`);
|
|
if (input) {
|
|
input.value = row[col.key] || '';
|
|
}
|
|
});
|
|
const modal = new bootstrap.Modal(document.getElementById('editModal'));
|
|
modal.show();
|
|
}
|
|
}
|
|
|
|
function openViewModal(id) {
|
|
const row = tableConfig.data.find(row => row.id === id);
|
|
if (!row) {
|
|
console.error('Row not found for view:', id);
|
|
return;
|
|
}
|
|
|
|
const modalBody = document.getElementById('viewModalBody');
|
|
if (modalBody) {
|
|
let html = '';
|
|
tableConfig.columns.forEach(col => {
|
|
let value = row[col.key] || 'N/A';
|
|
html += `<p><strong>${col.name}:</strong> ${value}</p>`;
|
|
});
|
|
modalBody.innerHTML = html;
|
|
const modal = new bootstrap.Modal(document.getElementById('viewModal'));
|
|
modal.show();
|
|
}
|
|
}
|
|
|
|
function attachEventListeners() {
|
|
const searchInput = document.getElementById('searchInput');
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', function() {
|
|
console.log('Search input:', this.value);
|
|
updateUrl(1, this.value);
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll('.sortable').forEach(header => {
|
|
header.addEventListener('click', function() {
|
|
const columnIndex = parseInt(this.getAttribute('data-column'));
|
|
const key = tableConfig.columns[columnIndex].key;
|
|
|
|
sortDirection[columnIndex] = !sortDirection[columnIndex] ? 'asc' : sortDirection[columnIndex] === 'asc' ? 'desc' : 'asc';
|
|
console.log('Sorting:', { key, direction: sortDirection[columnIndex] });
|
|
|
|
document.querySelectorAll('.sortable i').forEach(icon => {
|
|
icon.classList.remove('fa-sort-up', 'fa-sort-down');
|
|
icon.classList.add('fa-sort');
|
|
});
|
|
const icon = this.querySelector('i');
|
|
if (icon) {
|
|
icon.classList.remove('fa-sort');
|
|
icon.classList.add(sortDirection[columnIndex] === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
|
|
}
|
|
|
|
updateUrl(1, document.getElementById('searchInput')?.value || '');
|
|
});
|
|
});
|
|
|
|
const clearFilters = document.getElementById('clearFilters');
|
|
if (clearFilters) {
|
|
clearFilters.addEventListener('click', function() {
|
|
console.log('Clearing filters');
|
|
if (searchInput) searchInput.value = '';
|
|
sortDirection = {};
|
|
document.querySelectorAll('.sortable i').forEach(icon => {
|
|
icon.classList.remove('fa-sort-up', 'fa-sort-down');
|
|
icon.classList.add('fa-sort');
|
|
});
|
|
updateUrl(1, '');
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll('.clickable-row').forEach(row => {
|
|
row.addEventListener('click', function(e) {
|
|
if (e.target.closest('.edit-btn, .view-btn, .delete-btn')) {
|
|
return;
|
|
}
|
|
const id = this.getAttribute('data-id');
|
|
console.log('Row clicked:', id);
|
|
if (tableConfig.showViewModal) {
|
|
openViewModal(id);
|
|
} else {
|
|
window.location.href = `/stations/${id}`;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
try {
|
|
renderTable();
|
|
renderPagination();
|
|
} catch (error) {
|
|
console.error('Error rendering table:', error);
|
|
}
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> |