added component for table content
This commit is contained in:
parent
3ee7695dc9
commit
84c590fd80
|
|
@ -0,0 +1,786 @@
|
|||
@props([
|
||||
'pageTitle' => 'Table',
|
||||
'data' => [],
|
||||
'columns' => [],
|
||||
'actions' => [],
|
||||
'showAddButton' => false,
|
||||
'addButtonUrl' => '#',
|
||||
'showCheckboxes' => false,
|
||||
'showBatchDelete' => false,
|
||||
'showEditModal' => false,
|
||||
'showViewModal' => false
|
||||
])
|
||||
|
||||
|
||||
<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">
|
||||
</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>
|
||||
@if ($showCheckboxes)
|
||||
<th class="text-center" style="width: 40px;">
|
||||
<input type="checkbox" id="selectAll">
|
||||
</th>
|
||||
@endif
|
||||
@foreach ($columns as $index => $column)
|
||||
<th class="{{ $column['sortable'] ? 'sortable' : '' }}" data-column="{{ $index + 1 }}">
|
||||
{{ $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>
|
||||
|
||||
<!-- Batch Delete and Pagination -->
|
||||
<div class="d-flex justify-content-between align-items-center mt-4">
|
||||
@if ($showBatchDelete)
|
||||
<div>
|
||||
<button class="btn btn-danger btn-sm" id="deleteSelected" disabled>
|
||||
<i class="fa-solid fa-trash-can me-1"></i> Delete Selected
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
<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 modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="editModalLabel">Edit {{ $pageTitle }}</h5>
|
||||
<button type="button" class="modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="editForm">
|
||||
@foreach ($columns as $column)
|
||||
<div class="mb-3">
|
||||
<label for="edit{{ ucfirst($column['key']) }}" class="form-label">{{ $column['name'] }}</label>
|
||||
@if ($column['key'] === 'status')
|
||||
<select class="form-select" id="edit{{ ucfirst($column['key']) }}">
|
||||
<option value="Active">Active</option>
|
||||
<option value="Inactive">Inactive</option>
|
||||
</select>
|
||||
@else
|
||||
<input type="{{ $column['key'] === 'email' ? 'email' : 'text' }}"
|
||||
class="form-control"
|
||||
id="edit{{ ucfirst($column['key']) }}"
|
||||
{{ $column['key'] === 'username' || $column['key'] === 'memberId' ? 'readonly' : '' }}>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" id="updateBtn">Update</button>
|
||||
</div>
|
||||
</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 modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="viewModalLabel">View {{ $pageTitle }} Details</h5>
|
||||
<button type="button" class="modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="view-details">
|
||||
@foreach ($columns as $column)
|
||||
<p><strong>{{ $column['name'] }}:</strong> <span id="view{{ ucfirst($column['key']) }}"></span></p>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- CSS (same as your original, included for completeness) -->
|
||||
<style>
|
||||
/* Your original CSS styles here */
|
||||
.card,
|
||||
.table,
|
||||
.btn,
|
||||
.form-control,
|
||||
.input-group-text,
|
||||
.modal-content {
|
||||
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
/* Font Styling */
|
||||
.card,
|
||||
.table,
|
||||
.btn,
|
||||
.form-control,
|
||||
.input-group-text,
|
||||
.modal-content {
|
||||
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.card-header h5,
|
||||
.modal-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #E74610;
|
||||
border-color: #E74610;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #E74610;
|
||||
border-color: #E74610;
|
||||
}
|
||||
|
||||
.sortable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sortable:hover {
|
||||
background-color: #f1f3f5;
|
||||
}
|
||||
|
||||
.table {
|
||||
font-size: 0.85rem;
|
||||
width: 100%;
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 0.5rem;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.table th:first-child,
|
||||
.table td:first-child {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table th:last-child,
|
||||
.table td:last-child {
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table td:nth-child(5),
|
||||
.table th:nth-child(5) {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.table td:nth-child(6),
|
||||
.table th:nth-child(6) {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.table td:nth-child(7),
|
||||
.table th:nth-child(7) {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.status-btn {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
|
||||
.dropdown-menu-sm {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.table thead .sortable i {
|
||||
font-size: 0.7rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
font-size: 0.9rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
color: #6c757d;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-close-btn:hover {
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
.view-user-details p {
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.view-user-details strong {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
font-weight: 500;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
.view-user-details span {
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.pagination-sm .page-link {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
border-color: #E74610;
|
||||
color: #E74610;
|
||||
}
|
||||
|
||||
.pagination-sm .page-item.active .page-link {
|
||||
background-color: #E74610;
|
||||
border-color: #E74610;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pagination-sm .page-link:hover {
|
||||
background-color: #E74610;
|
||||
border-color: #E74610;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pagination-sm .page-item.disabled .page-link {
|
||||
border-color: #dee2e6;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
border-color: #E74610;
|
||||
color: #E74610;
|
||||
}
|
||||
|
||||
.edit-btn:hover {
|
||||
background-color: #E74610;
|
||||
border-color: #E74610;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.table {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 0.3rem;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.input-group-sm>.form-control {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.status-btn {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.table thead .sortable i {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.pagination-sm .page-link {
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.table td:nth-child(6) {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.view-user-details p {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.view-user-details strong {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script>
|
||||
const tableConfig = {
|
||||
data: @json($data),
|
||||
columns: @json($columns),
|
||||
actions: @json($actions),
|
||||
showCheckboxes: {{ json_encode($showCheckboxes) }},
|
||||
showBatchDelete: {{ json_encode($showBatchDelete) }},
|
||||
showEditModal: {{ json_encode($showEditModal) }},
|
||||
showViewModal: {{ json_encode($showViewModal) }}
|
||||
};
|
||||
|
||||
const rowsPerPage = 5;
|
||||
let currentPage = 1;
|
||||
let filteredRows = [...tableConfig.data];
|
||||
let originalRows = [...tableConfig.data].map(row => ({ ...row }));
|
||||
let sortDirection = {};
|
||||
|
||||
function renderTable() {
|
||||
const tableBody = document.getElementById('tableBody');
|
||||
tableBody.innerHTML = '';
|
||||
|
||||
const start = (currentPage - 1) * rowsPerPage;
|
||||
const end = start + rowsPerPage;
|
||||
const paginatedRows = filteredRows.slice(start, end);
|
||||
|
||||
paginatedRows.forEach(row => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.setAttribute('data-id', row.id);
|
||||
let rowHtml = '';
|
||||
|
||||
if (tableConfig.showCheckboxes) {
|
||||
rowHtml += `<td class="text-center"><input type="checkbox" class="rowCheckbox"></td>`;
|
||||
}
|
||||
|
||||
tableConfig.columns.forEach(col => {
|
||||
if (col.key === 'status') {
|
||||
rowHtml += `
|
||||
<td>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-sm btn-outline-secondary status-btn" type="button" id="statusDropdown${row.id}" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<span class="status-text">${row[col.key]}</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-sm" aria-labelledby="statusDropdown${row.id}">
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center gap-2 status-option" href="#" data-status="Active">
|
||||
<i class="fa-solid fa-check text-success" style="font-size: 14px;"></i>
|
||||
<span>Active</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center gap-2 status-option" href="#" data-status="Inactive">
|
||||
<i class="fa-solid fa-xmark text-danger" style="font-size: 14px;"></i>
|
||||
<span>Inactive</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>`;
|
||||
} else {
|
||||
rowHtml += `<td>${row[col.key]}</td>`;
|
||||
}
|
||||
});
|
||||
|
||||
if (tableConfig.actions.length > 0) {
|
||||
rowHtml += `<td class="text-center">`;
|
||||
tableConfig.actions.forEach(action => {
|
||||
if (action === 'edit' && tableConfig.showEditModal) {
|
||||
rowHtml += `
|
||||
<a href="#" class="btn btn-sm edit-btn me-1" title="Edit" data-id="${row.id}">
|
||||
<i class="fa-solid fa-pen-to-square"></i>
|
||||
</a>`;
|
||||
} else if (action === 'view' && tableConfig.showViewModal) {
|
||||
rowHtml += `
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-1 view-btn" title="View" data-id="${row.id}">
|
||||
<i class="fa-solid fa-eye"></i>
|
||||
</a>`;
|
||||
} else if (action === 'delete') {
|
||||
rowHtml += `
|
||||
<button class="btn btn-sm btn-outline-danger delete-btn" title="Delete" data-id="${row.id}">
|
||||
<i class="fa-solid fa-trash-can"></i>
|
||||
</button>`;
|
||||
}
|
||||
});
|
||||
rowHtml += `</td>`;
|
||||
}
|
||||
|
||||
tr.innerHTML = rowHtml;
|
||||
tableBody.appendChild(tr);
|
||||
});
|
||||
|
||||
attachEventListeners();
|
||||
updateDeleteButtonState();
|
||||
}
|
||||
|
||||
function renderPagination() {
|
||||
const pagination = document.getElementById('pagination');
|
||||
pagination.innerHTML = '';
|
||||
|
||||
const pageCount = Math.ceil(filteredRows.length / rowsPerPage);
|
||||
|
||||
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--;
|
||||
renderTable();
|
||||
renderPagination();
|
||||
}
|
||||
});
|
||||
pagination.appendChild(prevLi);
|
||||
|
||||
for (let i = 1; i <= pageCount; 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;
|
||||
renderTable();
|
||||
renderPagination();
|
||||
});
|
||||
pagination.appendChild(li);
|
||||
}
|
||||
|
||||
const nextLi = document.createElement('li');
|
||||
nextLi.className = `page-item ${currentPage === pageCount ? '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 < pageCount) {
|
||||
currentPage++;
|
||||
renderTable();
|
||||
renderPagination();
|
||||
}
|
||||
});
|
||||
pagination.appendChild(nextLi);
|
||||
}
|
||||
|
||||
function attachEventListeners() {
|
||||
// Search
|
||||
document.getElementById('searchInput').addEventListener('input', function() {
|
||||
const searchTerm = this.value.toLowerCase();
|
||||
filteredRows = tableConfig.data.filter(row => {
|
||||
return Object.values(row).some(value =>
|
||||
value.toString().toLowerCase().includes(searchTerm)
|
||||
);
|
||||
});
|
||||
currentPage = 1;
|
||||
renderTable();
|
||||
renderPagination();
|
||||
});
|
||||
|
||||
// Sort
|
||||
document.querySelectorAll('.sortable').forEach(header => {
|
||||
header.addEventListener('click', function() {
|
||||
const columnIndex = parseInt(this.getAttribute('data-column')) - 1;
|
||||
const key = tableConfig.columns[columnIndex].key;
|
||||
|
||||
sortDirection[columnIndex] = !sortDirection[columnIndex] ? 'asc' : sortDirection[columnIndex] === 'asc' ? 'desc' : 'asc';
|
||||
|
||||
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');
|
||||
icon.classList.remove('fa-sort');
|
||||
icon.classList.add(sortDirection[columnIndex] === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
|
||||
|
||||
filteredRows.sort((a, b) => {
|
||||
const aValue = a[key].toString().toLowerCase();
|
||||
const bValue = b[key].toString().toLowerCase();
|
||||
return sortDirection[columnIndex] === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
|
||||
});
|
||||
|
||||
currentPage = 1;
|
||||
renderTable();
|
||||
renderPagination();
|
||||
});
|
||||
});
|
||||
|
||||
// Clear Filters
|
||||
document.getElementById('clearFilters').addEventListener('click', function() {
|
||||
document.getElementById('searchInput').value = '';
|
||||
document.querySelectorAll('.sortable i').forEach(icon => {
|
||||
icon.classList.remove('fa-sort-up', 'fa-sort-down');
|
||||
icon.classList.add('fa-sort');
|
||||
});
|
||||
sortDirection = {};
|
||||
filteredRows = [...tableConfig.data];
|
||||
currentPage = 1;
|
||||
renderTable();
|
||||
renderPagination();
|
||||
});
|
||||
|
||||
// Checkboxes
|
||||
if (tableConfig.showCheckboxes) {
|
||||
const selectAll = document.getElementById('selectAll');
|
||||
if (selectAll) {
|
||||
selectAll.addEventListener('change', function() {
|
||||
const checkboxes = document.querySelectorAll('.rowCheckbox');
|
||||
checkboxes.forEach(checkbox => {
|
||||
checkbox.checked = this.checked;
|
||||
});
|
||||
updateDeleteButtonState();
|
||||
});
|
||||
}
|
||||
|
||||
document.querySelectorAll('.rowCheckbox').forEach(checkbox => {
|
||||
checkbox.addEventListener('change', updateDeleteButtonState);
|
||||
});
|
||||
}
|
||||
|
||||
// Batch Delete
|
||||
if (tableConfig.showBatchDelete) {
|
||||
const deleteSelected = document.getElementById('deleteSelected');
|
||||
if (deleteSelected) {
|
||||
deleteSelected.addEventListener('click', function() {
|
||||
if (confirm('Are you sure you want to delete the selected items?')) {
|
||||
const checkboxes = document.querySelectorAll('.rowCheckbox');
|
||||
const selectedIds = Array.from(checkboxes)
|
||||
.filter(cb => cb.checked)
|
||||
.map(cb => cb.closest('tr').getAttribute('data-id'));
|
||||
|
||||
filteredRows = filteredRows.filter(row => !selectedIds.includes(row.id.toString()));
|
||||
tableConfig.data = tableConfig.data.filter(row => !selectedIds.includes(row.id.toString()));
|
||||
originalRows = originalRows.filter(row => !selectedIds.includes(row.id.toString()));
|
||||
|
||||
const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
|
||||
if (currentPage > maxPage) {
|
||||
currentPage = maxPage || 1;
|
||||
}
|
||||
|
||||
renderTable();
|
||||
renderPagination();
|
||||
document.getElementById('selectAll').checked = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Status
|
||||
document.querySelectorAll('.status-option').forEach(option => {
|
||||
option.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const newStatus = this.getAttribute('data-status');
|
||||
const row = this.closest('tr');
|
||||
const userId = row.getAttribute('data-id');
|
||||
const statusText = row.querySelector('.status-text');
|
||||
|
||||
if (statusText) {
|
||||
statusText.textContent = newStatus;
|
||||
}
|
||||
|
||||
const rowData = filteredRows.find(r => r.id == userId);
|
||||
if (rowData) {
|
||||
rowData.status = newStatus;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Edit
|
||||
if (tableConfig.showEditModal) {
|
||||
document.querySelectorAll('.edit-btn').forEach(button => {
|
||||
button.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const userId = this.getAttribute('data-id');
|
||||
const user = filteredRows.find(row => row.id == userId);
|
||||
|
||||
tableConfig.columns.forEach(col => {
|
||||
const input = document.getElementById(`edit${col.key.charAt(0).toUpperCase() + col.key.slice(1)}`);
|
||||
if (input) {
|
||||
input.value = user[col.key];
|
||||
}
|
||||
});
|
||||
|
||||
const modal = new bootstrap.Modal(document.getElementById('editModal'));
|
||||
modal.show();
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('updateBtn')?.addEventListener('click', function() {
|
||||
const userId = document.querySelector('.edit-btn[data-id]')?.getAttribute('data-id');
|
||||
const user = filteredRows.find(row => row.id == userId);
|
||||
if (user) {
|
||||
tableConfig.columns.forEach(col => {
|
||||
const input = document.getElementById(`edit${col.key.charAt(0).toUpperCase() + col.key.slice(1)}`);
|
||||
if (input && !input.readOnly) {
|
||||
user[col.key] = input.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
|
||||
modal.hide();
|
||||
renderTable();
|
||||
});
|
||||
}
|
||||
|
||||
// View
|
||||
if (tableConfig.showViewModal) {
|
||||
document.querySelectorAll('.view-btn').forEach(button => {
|
||||
button.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const userId = this.getAttribute('data-id');
|
||||
const user = filteredRows.find(row => row.id == userId);
|
||||
|
||||
tableConfig.columns.forEach(col => {
|
||||
const span = document.getElementById(`view${col.key.charAt(0).toUpperCase() + col.key.slice(1)}`);
|
||||
if (span) {
|
||||
span.textContent = user[col.key];
|
||||
}
|
||||
});
|
||||
|
||||
const modal = new bootstrap.Modal(document.getElementById('viewModal'));
|
||||
modal.show();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Delete
|
||||
document.querySelectorAll('.delete-btn').forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const userId = this.getAttribute('data-id');
|
||||
if (confirm('Are you sure you want to delete this item?')) {
|
||||
filteredRows = filteredRows.filter(row => row.id != userId);
|
||||
tableConfig.data = tableConfig.data.filter(row => row.id != userId);
|
||||
originalRows = originalRows.filter(row => row.id != userId);
|
||||
|
||||
const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
|
||||
if (currentPage > maxPage) {
|
||||
currentPage = maxPage || 1;
|
||||
}
|
||||
|
||||
renderTable();
|
||||
renderPagination();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function updateDeleteButtonState() {
|
||||
if (tableConfig.showBatchDelete) {
|
||||
const checkboxes = document.querySelectorAll('.rowCheckbox');
|
||||
const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
|
||||
const deleteButton = document.getElementById('deleteSelected');
|
||||
if (deleteButton) {
|
||||
deleteButton.disabled = checkedCount < 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
renderTable();
|
||||
renderPagination();
|
||||
</script>
|
||||
|
|
@ -1,14 +1,37 @@
|
|||
@extends('layouts.app')
|
||||
|
||||
@section('page_title', 'Member Management')
|
||||
@section('page_title', 'Card Member')
|
||||
|
||||
@section('content')
|
||||
<div class="card" style="min-height: 500px;">
|
||||
<div class="card-header">
|
||||
<i class="fa-solid fa-users-gear" style="color:gray;"> Card Member</i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>This is the Card Member page content.</p>
|
||||
</div>
|
||||
</div>
|
||||
@php
|
||||
$members = [
|
||||
['id' => 1, 'cardNumber' => '1234-5678-9012-3456', 'firstName' => 'John', 'lastName' => 'Doe', 'birthday' => '1990-05-15', 'cardType' => 'Gold', 'status' => 'Active'],
|
||||
['id' => 2, 'cardNumber' => '9876-5432-1098-7654', 'firstName' => 'Jane', 'lastName' => 'Smith', 'birthday' => '1985-11-22', 'cardType' => 'Silver', 'status' => 'Inactive'],
|
||||
['id' => 3, 'cardNumber' => '4567-8901-2345-6789', 'firstName' => 'Alice', 'lastName' => 'Johnson', 'birthday' => '1992-03-10', 'cardType' => 'Platinum', 'status' => 'Active'],
|
||||
['id' => 4, 'cardNumber' => '3210-9876-5432-1098', 'firstName' => 'Bob', 'lastName' => 'Brown', 'birthday' => '1988-07-30', 'cardType' => 'Gold', 'status' => 'Active'],
|
||||
['id' => 1, 'cardNumber' => '1234-5678-9012-3456', 'firstName' => 'John', 'lastName' => 'Doe', 'birthday' => '1990-05-15', 'cardType' => 'Gold', 'status' => 'Active'],
|
||||
['id' => 2, 'cardNumber' => '9876-5432-1098-7654', 'firstName' => 'Jane', 'lastName' => 'Smith', 'birthday' => '1985-11-22', 'cardType' => 'Silver', 'status' => 'Inactive'],
|
||||
['id' => 3, 'cardNumber' => '4567-8901-2345-6789', 'firstName' => 'Alice', 'lastName' => 'Johnson', 'birthday' => '1992-03-10', 'cardType' => 'Platinum', 'status' => 'Active'],
|
||||
['id' => 4, 'cardNumber' => '3210-9876-5432-1098', 'firstName' => 'Bob', 'lastName' => 'Brown', 'birthday' => '1988-07-30', 'cardType' => 'Gold', 'status' => 'Active']
|
||||
];
|
||||
@endphp
|
||||
|
||||
@include('components.table-component', [
|
||||
'pageTitle' => 'Card Member',
|
||||
'data' => $members,
|
||||
'columns' => [
|
||||
['name' => 'Card Number', 'key' => 'cardNumber', 'sortable' => true],
|
||||
['name' => 'First Name', 'key' => 'firstName', 'sortable' => true],
|
||||
['name' => 'Last Name', 'key' => 'lastName', 'sortable' => true],
|
||||
['name' => 'Birthday', 'key' => 'birthday', 'sortable' => true],
|
||||
['name' => 'Card Type', 'key' => 'cardType', 'sortable' => true],
|
||||
['name' => 'Status', 'key' => 'status', 'sortable' => true]
|
||||
],
|
||||
'actions' => ['view'],
|
||||
'showAddButton' => false,
|
||||
'showCheckboxes' => false,
|
||||
'showBatchDelete' => false,
|
||||
'showEditModal' => false,
|
||||
'showViewModal' => true
|
||||
])
|
||||
@endsection
|
||||
|
|
@ -3,810 +3,35 @@
|
|||
@section('page_title', 'User Management')
|
||||
|
||||
@section('content')
|
||||
|
||||
<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">User Management</h5>
|
||||
<a href="{{ url('add-user') }}" class="btn btn-primary btn-sm px-3">
|
||||
<i class="fa-solid fa-plus me-1"></i> Add User
|
||||
</a>
|
||||
</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 users..." id="searchInput">
|
||||
</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>
|
||||
|
||||
<!-- User Table -->
|
||||
<div class="table-container">
|
||||
<table class="table table-hover align-middle">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th class="text-center" style="width: 40px;">
|
||||
<input type="checkbox" id="selectAll">
|
||||
</th>
|
||||
<th class="sortable" data-column="1">Username <i class="fa-solid fa-sort"></i></th>
|
||||
<th class="sortable" data-column="2">First Name <i class="fa-solid fa-sort"></i></th>
|
||||
<th class="sortable" data-column="3">Last Name <i class="fa-solid fa-sort"></i></th>
|
||||
<th class="sortable" data-column="4">User Role <i class="fa-solid fa-sort"></i></th>
|
||||
<th class="sortable" data-column="5">Email <i class="fa-solid fa-sort"></i></th>
|
||||
<th class="sortable" data-column="6">Status <i class="fa-solid fa-sort"></i></th>
|
||||
<th class="text-center" style="width: 120px;">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="userTableBody">
|
||||
<!-- Rows will be populated dynamically via JavaScript -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Delete Selected Button and Pagination -->
|
||||
<div class="d-flex justify-content-between align-items-center mt-4">
|
||||
<div>
|
||||
<button class="btn btn-danger btn-sm" id="deleteSelected" disabled>
|
||||
<i class="fa-solid fa-trash-can me-1"></i> Delete Selected
|
||||
</button>
|
||||
</div>
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination pagination-sm" id="pagination">
|
||||
<!-- Pagination links will be generated dynamically -->
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Edit User Modal -->
|
||||
<div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="editUserModalLabel">Edit User</h5>
|
||||
<button type="button" class="modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="editUserForm">
|
||||
<div class="mb-3">
|
||||
<label for="editUsername" class="form-label">Username</label>
|
||||
<input type="text" class="form-control" id="editUsername" readonly>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="editFirstName" class="form-label">First Name</label>
|
||||
<input type="text" class="form-control" id="editFirstName">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="editLastName" class="form-label">Last Name</label>
|
||||
<input type="text" class="form-control" id="editLastName">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="editUserRole" class="form-label">User Role</label>
|
||||
<input type="text" class="form-control" id="editUserRole">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="editEmail" class="form-label">Email</label>
|
||||
<input type="email" class="form-control" id="editEmail">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="editStatus" class="form-label">Status</label>
|
||||
<select class="form-select" id="editStatus">
|
||||
<option value="Active">Active</option>
|
||||
<option value="Inactive">Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" id="updateUserBtn">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- View User Modal -->
|
||||
<div class="modal fade" id="viewUserModal" tabindex="-1" aria-labelledby="viewUserModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="viewUserModalLabel">View User Details</h5>
|
||||
<button type="button" class="modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="view-user-details">
|
||||
<p><strong>ID:</strong> <span id="viewId"></span></p>
|
||||
<p><strong>Username:</strong> <span id="viewUsername"></span></p>
|
||||
<p><strong>First Name:</strong> <span id="viewFirstName"></span></p>
|
||||
<p><strong>Last Name:</strong> <span id="viewLastName"></span></p>
|
||||
<p><strong>User Role:</strong> <span id="viewUserRole"></span></p>
|
||||
<p><strong>Email:</strong> <span id="viewEmail"></span></p>
|
||||
<p><strong>Status:</strong> <span id="viewStatus"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom CSS for Styling -->
|
||||
<style>
|
||||
/* Font Styling */
|
||||
.card,
|
||||
.table,
|
||||
.btn,
|
||||
.form-control,
|
||||
.input-group-text,
|
||||
.modal-content {
|
||||
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.card-header h5,
|
||||
.modal-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #E74610;
|
||||
border-color: #E74610;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #E74610;
|
||||
border-color: #E74610;
|
||||
}
|
||||
|
||||
.sortable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sortable:hover {
|
||||
background-color: #f1f3f5;
|
||||
}
|
||||
|
||||
.table {
|
||||
font-size: 0.85rem;
|
||||
width: 100%;
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 0.5rem;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.table th:first-child,
|
||||
.table td:first-child {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table th:last-child,
|
||||
.table td:last-child {
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table td:nth-child(5),
|
||||
.table th:nth-child(5) {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.table td:nth-child(6),
|
||||
.table th:nth-child(6) {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.table td:nth-child(7),
|
||||
.table th:nth-child(7) {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.status-btn {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
|
||||
.dropdown-menu-sm {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.table thead .sortable i {
|
||||
font-size: 0.7rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
font-size: 0.9rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
color: #6c757d;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-close-btn:hover {
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
.view-user-details p {
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.view-user-details strong {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
font-weight: 500;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
.view-user-details span {
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.pagination-sm .page-link {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
border-color: #E74610;
|
||||
color: #E74610;
|
||||
}
|
||||
|
||||
.pagination-sm .page-item.active .page-link {
|
||||
background-color: #E74610;
|
||||
border-color: #E74610;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pagination-sm .page-link:hover {
|
||||
background-color: #E74610;
|
||||
border-color: #E74610;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pagination-sm .page-item.disabled .page-link {
|
||||
border-color: #dee2e6;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
border-color: #E74610;
|
||||
color: #E74610;
|
||||
}
|
||||
|
||||
.edit-btn:hover {
|
||||
background-color: #E74610;
|
||||
border-color: #E74610;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.table {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 0.3rem;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.input-group-sm>.form-control {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.status-btn {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.table thead .sortable i {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.pagination-sm .page-link {
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.table td:nth-child(6) {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.view-user-details p {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.view-user-details strong {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- JavaScript for Interactivity -->
|
||||
<script>
|
||||
// Sample data
|
||||
const allRows = [{
|
||||
id: 1,
|
||||
username: 'superadmin',
|
||||
firstName: 'Maryse',
|
||||
lastName: 'Howe',
|
||||
role: 'Admin',
|
||||
email: 'maryse.howe@qqq.com',
|
||||
status: 'Active'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
username: 'superadmin1',
|
||||
firstName: 'Joseph',
|
||||
lastName: 'Sazon',
|
||||
role: 'Admin',
|
||||
email: 'mis.specialist@unioil.com',
|
||||
status: 'Active'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
username: 'graxia',
|
||||
firstName: 'Graxia',
|
||||
lastName: 'Montino',
|
||||
role: 'Admin',
|
||||
email: 'business.analyst@unioil.com',
|
||||
status: 'Active'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
username: 'cinerosimo',
|
||||
firstName: 'Cine',
|
||||
lastName: 'Rosimo',
|
||||
role: 'Admin',
|
||||
email: 'frosimo1@yopmail.com',
|
||||
status: 'Active'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
username: 'graxia',
|
||||
firstName: 'Graxia',
|
||||
lastName: 'Montino',
|
||||
role: 'Admin',
|
||||
email: 'business.analyst@unioil.com',
|
||||
status: 'Active'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
username: 'graxia',
|
||||
firstName: 'Graxia',
|
||||
lastName: 'Montino',
|
||||
role: 'Admin',
|
||||
email: 'business.analyst@unioil.com',
|
||||
status: 'Active'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
username: 'graxia',
|
||||
firstName: 'Graxia',
|
||||
lastName: 'Montino',
|
||||
role: 'Admin',
|
||||
email: 'business.analyst@unioil.com',
|
||||
status: 'Active'
|
||||
}
|
||||
@php
|
||||
$users = [
|
||||
['id' => 1, 'username' => 'superadmin', 'firstName' => 'Maryse', 'lastName' => 'Howe', 'role' => 'Admin', 'email' => 'maryse.howe@qqq.com', 'status' => 'Inctive'],
|
||||
['id' => 2, 'username' => 'superadmin1', 'firstName' => 'Joseph', 'lastName' => 'Sazon', 'role' => 'Admin', 'email' => 'mis.specialist@unioil.com', 'status' => 'Active'],
|
||||
['id' => 3, 'username' => 'graxia', 'firstName' => 'Graxia', 'lastName' => 'Montino', 'role' => 'Admin', 'email' => 'business.analyst@unioil.com', 'status' => 'Inctive'],
|
||||
['id' => 4, 'username' => 'cinerosimo', 'firstName' => 'Cine', 'lastName' => 'Rosimo', 'role' => 'Admin', 'email' => 'frosimo1@yopmail.com', 'status' => 'Active'],
|
||||
['id' => 5, 'username' => 'graxia5', 'firstName' => 'Graxia', 'lastName' => 'Montino', 'role' => 'Admin', 'email' => 'business.analyst@unioil.com', 'status' => 'Inctive'],
|
||||
['id' => 6, 'username' => 'graxia6', 'firstName' => 'Graxia', 'lastName' => 'Montino', 'role' => 'Admin', 'email' => 'business.analyst@unioil.com', 'status' => 'Inctive'],
|
||||
['id' => 7, 'username' => 'graxia7', 'firstName' => 'Graxia', 'lastName' => 'Montino', 'role' => 'Admin', 'email' => 'business.analyst@unioil.com', 'status' => 'Active']
|
||||
];
|
||||
@endphp
|
||||
|
||||
const rowsPerPage = 5;
|
||||
let currentPage = 1;
|
||||
let filteredRows = [...allRows];
|
||||
let originalRows = [...allRows].map(row => ({ ...row }));
|
||||
|
||||
function renderTable() {
|
||||
const tableBody = document.getElementById('userTableBody');
|
||||
tableBody.innerHTML = '';
|
||||
|
||||
const start = (currentPage - 1) * rowsPerPage;
|
||||
const end = start + rowsPerPage;
|
||||
const paginatedRows = filteredRows.slice(start, end);
|
||||
|
||||
paginatedRows.forEach(row => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.setAttribute('data-id', row.id);
|
||||
tr.innerHTML = `
|
||||
<td class="text-center"><input type="checkbox" class="rowCheckbox"></td>
|
||||
<td>${row.username}</td>
|
||||
<td>${row.firstName}</td>
|
||||
<td>${row.lastName}</td>
|
||||
<td>${row.role}</td>
|
||||
<td>${row.email}</td>
|
||||
<td>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-sm btn-outline-secondary status-btn" type="button" id="statusDropdown${row.id}" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<span class="status-text">${row.status}</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-sm" aria-labelledby="statusDropdown${row.id}">
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center gap-2 status-option" href="#" data-status="Active">
|
||||
<i class="fa-solid fa-check text-success" style="font-size: 14px;"></i>
|
||||
<span>Active</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center gap-2 status-option" href="#" data-status="Inactive">
|
||||
<i class="fa-solid fa-xmark text-danger" style="font-size: 14px;"></i>
|
||||
<span>Inactive</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<a href="#" class="btn btn-sm edit-btn me-1" title="Edit" data-id="${row.id}">
|
||||
<i class="fa-solid fa-pen-to-square"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary me-1 view-btn" title="View" data-id="${row.id}">
|
||||
<i class="fa-solid fa-eye"></i>
|
||||
</a>
|
||||
<button class="btn btn-sm btn-outline-danger" onclick="confirmDelete(${row.id})" title="Delete">
|
||||
<i class="fa-solid fa-trash-can"></i>
|
||||
</button>
|
||||
</td>
|
||||
`;
|
||||
tableBody.appendChild(tr);
|
||||
});
|
||||
|
||||
attachStatusListeners();
|
||||
attachCheckboxListeners();
|
||||
attachEditListeners();
|
||||
attachViewListeners();
|
||||
updateDeleteButtonState();
|
||||
}
|
||||
|
||||
function renderPagination() {
|
||||
const pagination = document.getElementById('pagination');
|
||||
pagination.innerHTML = '';
|
||||
|
||||
const pageCount = Math.ceil(filteredRows.length / rowsPerPage);
|
||||
|
||||
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--;
|
||||
renderTable();
|
||||
renderPagination();
|
||||
}
|
||||
});
|
||||
pagination.appendChild(prevLi);
|
||||
|
||||
for (let i = 1; i <= pageCount; 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;
|
||||
renderTable();
|
||||
renderPagination();
|
||||
});
|
||||
pagination.appendChild(li);
|
||||
}
|
||||
|
||||
const nextLi = document.createElement('li');
|
||||
nextLi.className = `page-item ${currentPage === pageCount ? '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 < pageCount) {
|
||||
currentPage++;
|
||||
renderTable();
|
||||
renderPagination();
|
||||
}
|
||||
});
|
||||
pagination.appendChild(nextLi);
|
||||
}
|
||||
|
||||
document.getElementById('searchInput').addEventListener('input', function() {
|
||||
const searchTerm = this.value.toLowerCase();
|
||||
filteredRows = allRows.filter(row => {
|
||||
return Object.values(row).some(value =>
|
||||
value.toString().toLowerCase().includes(searchTerm)
|
||||
);
|
||||
});
|
||||
currentPage = 1;
|
||||
renderTable();
|
||||
renderPagination();
|
||||
});
|
||||
|
||||
let sortDirection = {};
|
||||
document.querySelectorAll('.sortable').forEach(header => {
|
||||
header.addEventListener('click', function() {
|
||||
const column = parseInt(this.getAttribute('data-column'));
|
||||
const columnMap = {
|
||||
1: 'username',
|
||||
2: 'firstName',
|
||||
3: 'lastName',
|
||||
4: 'role',
|
||||
5: 'email',
|
||||
6: 'status'
|
||||
};
|
||||
const key = columnMap[column];
|
||||
|
||||
sortDirection[column] = !sortDirection[column] ? 'asc' : sortDirection[column] === 'asc' ? 'desc' : 'asc';
|
||||
|
||||
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');
|
||||
icon.classList.remove('fa-sort');
|
||||
icon.classList.add(sortDirection[column] === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
|
||||
|
||||
filteredRows.sort((a, b) => {
|
||||
const aValue = a[key].toLowerCase();
|
||||
const bValue = b[key].toLowerCase();
|
||||
if (sortDirection[column] === 'asc') {
|
||||
return aValue.localeCompare(bValue);
|
||||
} else {
|
||||
return bValue.localeCompare(aValue);
|
||||
}
|
||||
});
|
||||
|
||||
currentPage = 1;
|
||||
renderTable();
|
||||
renderPagination();
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('clearFilters').addEventListener('click', function() {
|
||||
document.getElementById('searchInput').value = '';
|
||||
document.querySelectorAll('.sortable i').forEach(icon => {
|
||||
icon.classList.remove('fa-sort-up', 'fa-sort-down');
|
||||
icon.classList.add('fa-sort');
|
||||
});
|
||||
sortDirection = {};
|
||||
filteredRows = [...allRows];
|
||||
currentPage = 1;
|
||||
renderTable();
|
||||
renderPagination();
|
||||
});
|
||||
|
||||
document.getElementById('selectAll').addEventListener('change', function() {
|
||||
const checkboxes = document.querySelectorAll('.rowCheckbox');
|
||||
checkboxes.forEach(checkbox => {
|
||||
checkbox.checked = this.checked;
|
||||
});
|
||||
updateDeleteButtonState();
|
||||
});
|
||||
|
||||
function attachCheckboxListeners() {
|
||||
const checkboxes = document.querySelectorAll('.rowCheckbox');
|
||||
checkboxes.forEach(checkbox => {
|
||||
checkbox.addEventListener('change', updateDeleteButtonState);
|
||||
});
|
||||
}
|
||||
|
||||
function updateDeleteButtonState() {
|
||||
const checkboxes = document.querySelectorAll('.rowCheckbox');
|
||||
const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
|
||||
const deleteButton = document.getElementById('deleteSelected');
|
||||
deleteButton.disabled = checkedCount < 2;
|
||||
}
|
||||
|
||||
document.getElementById('deleteSelected').addEventListener('click', function() {
|
||||
if (confirm('Are you sure you want to delete the selected users?')) {
|
||||
const checkboxes = document.querySelectorAll('.rowCheckbox');
|
||||
const selectedIds = Array.from(checkboxes)
|
||||
.filter(cb => cb.checked)
|
||||
.map(cb => cb.closest('tr').getAttribute('data-id'));
|
||||
|
||||
allRows = allRows.filter(row => !selectedIds.includes(row.id.toString()));
|
||||
filteredRows = filteredRows.filter(row => !selectedIds.includes(row.id.toString()));
|
||||
originalRows = originalRows.filter(row => !selectedIds.includes(row.id.toString()));
|
||||
|
||||
const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
|
||||
if (currentPage > maxPage) {
|
||||
currentPage = maxPage || 1;
|
||||
}
|
||||
|
||||
renderTable();
|
||||
renderPagination();
|
||||
document.getElementById('selectAll').checked = false;
|
||||
}
|
||||
});
|
||||
|
||||
function attachStatusListeners() {
|
||||
const options = document.querySelectorAll('.status-option');
|
||||
options.forEach(option => {
|
||||
option.removeEventListener('click', handleStatusChange);
|
||||
option.addEventListener('click', handleStatusChange);
|
||||
});
|
||||
}
|
||||
|
||||
function handleStatusChange(e) {
|
||||
e.preventDefault();
|
||||
const newStatus = this.getAttribute('data-status');
|
||||
const row = this.closest('tr');
|
||||
const userId = row.getAttribute('data-id');
|
||||
const statusText = row.querySelector('.status-text');
|
||||
|
||||
if (statusText) {
|
||||
statusText.textContent = newStatus;
|
||||
}
|
||||
|
||||
const rowData = allRows.find(r => r.id == userId);
|
||||
if (rowData) {
|
||||
rowData.status = newStatus;
|
||||
}
|
||||
const filteredRowData = filteredRows.find(r => r.id == userId);
|
||||
if (filteredRowData) {
|
||||
filteredRowData.status = newStatus;
|
||||
}
|
||||
const originalRowData = originalRows.find(r => r.id == userId);
|
||||
if (originalRowData) {
|
||||
originalRowData.status = newStatus;
|
||||
}
|
||||
|
||||
updateUserStatus(userId, newStatus);
|
||||
}
|
||||
|
||||
function attachEditListeners() {
|
||||
const editButtons = document.querySelectorAll('.edit-btn');
|
||||
editButtons.forEach(button => {
|
||||
button.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const userId = this.getAttribute('data-id');
|
||||
const user = allRows.find(row => row.id == userId);
|
||||
|
||||
document.getElementById('editUsername').value = user.username;
|
||||
document.getElementById('editFirstName').value = user.firstName;
|
||||
document.getElementById('editLastName').value = user.lastName;
|
||||
document.getElementById('editUserRole').value = user.role;
|
||||
document.getElementById('editEmail').value = user.email;
|
||||
document.getElementById('editStatus').value = user.status;
|
||||
|
||||
const modal = new bootstrap.Modal(document.getElementById('editUserModal'));
|
||||
modal.show();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function attachViewListeners() {
|
||||
const viewButtons = document.querySelectorAll('.view-btn');
|
||||
viewButtons.forEach(button => {
|
||||
button.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const userId = this.getAttribute('data-id');
|
||||
const user = allRows.find(row => row.id == userId);
|
||||
|
||||
document.getElementById('viewId').textContent = user.id;
|
||||
document.getElementById('viewUsername').textContent = user.username;
|
||||
document.getElementById('viewFirstName').textContent = user.firstName;
|
||||
document.getElementById('viewLastName').textContent = user.lastName;
|
||||
document.getElementById('viewUserRole').textContent = user.role;
|
||||
document.getElementById('viewEmail').textContent = user.email;
|
||||
document.getElementById('viewStatus').textContent = user.status;
|
||||
|
||||
const modal = new bootstrap.Modal(document.getElementById('viewUserModal'));
|
||||
modal.show();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('updateUserBtn').addEventListener('click', function() {
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('editUserModal'));
|
||||
modal.hide();
|
||||
});
|
||||
|
||||
function updateUserStatus(userId, status) {
|
||||
console.log(`Updating user ${userId} status to ${status}`);
|
||||
}
|
||||
|
||||
function confirmDelete(id) {
|
||||
if (confirm('Are you sure you want to delete this user?')) {
|
||||
allRows = allRows.filter(row => row.id != id);
|
||||
filteredRows = filteredRows.filter(row => row.id != id);
|
||||
originalRows = originalRows.filter(row => row.id != id);
|
||||
|
||||
const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
|
||||
if (currentPage > maxPage) {
|
||||
currentPage = maxPage || 1;
|
||||
}
|
||||
|
||||
renderTable();
|
||||
renderPagination();
|
||||
}
|
||||
}
|
||||
|
||||
renderTable();
|
||||
renderPagination();
|
||||
</script>
|
||||
@include('components.table-component', [
|
||||
'pageTitle' => 'User Management',
|
||||
'data' => $users,
|
||||
'columns' => [
|
||||
['name' => 'Username', 'key' => 'username', 'sortable' => true],
|
||||
['name' => 'First Name', 'key' => 'firstName', 'sortable' => true],
|
||||
['name' => 'Last Name', 'key' => 'lastName', 'sortable' => true],
|
||||
['name' => 'User Role', 'key' => 'role', 'sortable' => true],
|
||||
['name' => 'Email', 'key' => 'email', 'sortable' => true],
|
||||
['name' => 'Status', 'key' => 'status', 'sortable' => true]
|
||||
],
|
||||
'actions' => ['edit', 'view', 'delete'],
|
||||
'showAddButton' => true,
|
||||
'addButtonUrl' => '/add-user',
|
||||
'showCheckboxes' => true,
|
||||
'showBatchDelete' => true,
|
||||
'showEditModal' => true,
|
||||
'showViewModal' => true
|
||||
])
|
||||
@endsection
|
||||
|
|
@ -84,6 +84,6 @@ Route::get('/my-profile', function () {
|
|||
return view('pages.my-profile');
|
||||
})->name('my-profile');
|
||||
|
||||
Route::get('add-user', function () {
|
||||
Route::get('/add-user', function () {
|
||||
return view('pages.user-management.add-user');
|
||||
})->name('add-user');
|
||||
Loading…
Reference in New Issue