fixing table component
This commit is contained in:
parent
84c590fd80
commit
ab3688c606
|
|
@ -26,3 +26,5 @@
|
|||
@stack('scripts')
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
'showViewModal' => false
|
||||
])
|
||||
|
||||
|
||||
<div class="card">
|
||||
<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>
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Edit Modal -->
|
||||
@if ($showEditModal)
|
||||
|
|
@ -142,6 +142,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
@if ($pageTitle === 'Locked Account')
|
||||
<button type="button" class="btn btn-success" id="activateAccountBtn">Activate Account</button>
|
||||
@endif
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -149,9 +152,8 @@
|
|||
</div>
|
||||
@endif
|
||||
|
||||
<!-- CSS (same as your original, included for completeness) -->
|
||||
<!-- CSS (unchanged from your original) -->
|
||||
<style>
|
||||
/* Your original CSS styles here */
|
||||
.card,
|
||||
.table,
|
||||
.btn,
|
||||
|
|
@ -162,65 +164,43 @@
|
|||
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;
|
||||
|
|
@ -229,76 +209,61 @@
|
|||
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;
|
||||
|
|
@ -309,120 +274,96 @@
|
|||
top: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-close-btn:hover {
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
.view-user-details p {
|
||||
.view-details p {
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.view-user-details strong {
|
||||
.view-details strong {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
font-weight: 500;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
.view-user-details span {
|
||||
.view-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 {
|
||||
.view-details p {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.view-user-details strong {
|
||||
.view-details strong {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
|
@ -437,7 +378,8 @@
|
|||
showCheckboxes: {{ json_encode($showCheckboxes) }},
|
||||
showBatchDelete: {{ json_encode($showBatchDelete) }},
|
||||
showEditModal: {{ json_encode($showEditModal) }},
|
||||
showViewModal: {{ json_encode($showViewModal) }}
|
||||
showViewModal: {{ json_encode($showViewModal) }},
|
||||
pageTitle: @json($pageTitle)
|
||||
};
|
||||
|
||||
const rowsPerPage = 5;
|
||||
|
|
@ -445,9 +387,11 @@
|
|||
let filteredRows = [...tableConfig.data];
|
||||
let originalRows = [...tableConfig.data].map(row => ({ ...row }));
|
||||
let sortDirection = {};
|
||||
let currentRowId = null; // Track the row being viewed
|
||||
|
||||
function renderTable() {
|
||||
const tableBody = document.getElementById('tableBody');
|
||||
if (!tableBody) return;
|
||||
tableBody.innerHTML = '';
|
||||
|
||||
const start = (currentPage - 1) * rowsPerPage;
|
||||
|
|
@ -488,7 +432,7 @@
|
|||
</div>
|
||||
</td>`;
|
||||
} else {
|
||||
rowHtml += `<td>${row[col.key]}</td>`;
|
||||
rowHtml += `<td>${row[col.key] || ''}</td>`;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -525,6 +469,7 @@
|
|||
|
||||
function renderPagination() {
|
||||
const pagination = document.getElementById('pagination');
|
||||
if (!pagination) return;
|
||||
pagination.innerHTML = '';
|
||||
|
||||
const pageCount = Math.ceil(filteredRows.length / rowsPerPage);
|
||||
|
|
@ -571,17 +516,20 @@
|
|||
|
||||
function attachEventListeners() {
|
||||
// Search
|
||||
document.getElementById('searchInput').addEventListener('input', function() {
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
if (searchInput) {
|
||||
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)
|
||||
value && value.toString().toLowerCase().includes(searchTerm)
|
||||
);
|
||||
});
|
||||
currentPage = 1;
|
||||
renderTable();
|
||||
renderPagination();
|
||||
});
|
||||
}
|
||||
|
||||
// Sort
|
||||
document.querySelectorAll('.sortable').forEach(header => {
|
||||
|
|
@ -596,12 +544,14 @@
|
|||
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');
|
||||
}
|
||||
|
||||
filteredRows.sort((a, b) => {
|
||||
const aValue = a[key].toString().toLowerCase();
|
||||
const bValue = b[key].toString().toLowerCase();
|
||||
const aValue = (a[key] || '').toString().toLowerCase();
|
||||
const bValue = (b[key] || '').toString().toLowerCase();
|
||||
return sortDirection[columnIndex] === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
|
||||
});
|
||||
|
||||
|
|
@ -612,8 +562,10 @@
|
|||
});
|
||||
|
||||
// Clear Filters
|
||||
document.getElementById('clearFilters').addEventListener('click', function() {
|
||||
document.getElementById('searchInput').value = '';
|
||||
const clearFilters = document.getElementById('clearFilters');
|
||||
if (clearFilters) {
|
||||
clearFilters.addEventListener('click', function() {
|
||||
if (searchInput) searchInput.value = '';
|
||||
document.querySelectorAll('.sortable i').forEach(icon => {
|
||||
icon.classList.remove('fa-sort-up', 'fa-sort-down');
|
||||
icon.classList.add('fa-sort');
|
||||
|
|
@ -624,6 +576,7 @@
|
|||
renderTable();
|
||||
renderPagination();
|
||||
});
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
if (tableConfig.showCheckboxes) {
|
||||
|
|
@ -665,7 +618,7 @@
|
|||
|
||||
renderTable();
|
||||
renderPagination();
|
||||
document.getElementById('selectAll').checked = false;
|
||||
if (selectAll) selectAll.checked = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -699,19 +652,23 @@
|
|||
const userId = this.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.value = user[col.key];
|
||||
input.value = user[col.key] || '';
|
||||
}
|
||||
});
|
||||
|
||||
const modal = new bootstrap.Modal(document.getElementById('editModal'));
|
||||
modal.show();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('updateBtn')?.addEventListener('click', function() {
|
||||
const updateBtn = document.getElementById('updateBtn');
|
||||
if (updateBtn) {
|
||||
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) {
|
||||
|
|
@ -727,26 +684,48 @@
|
|||
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);
|
||||
currentRowId = this.getAttribute('data-id');
|
||||
const user = filteredRows.find(row => row.id == currentRowId);
|
||||
|
||||
if (user) {
|
||||
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];
|
||||
span.textContent = user[col.key] || '';
|
||||
}
|
||||
});
|
||||
|
||||
const modal = new bootstrap.Modal(document.getElementById('viewModal'));
|
||||
modal.show();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Activate Account for Locked Account page
|
||||
if (tableConfig.pageTitle === 'Locked Account') {
|
||||
const activateAccountBtn = document.getElementById('activateAccountBtn');
|
||||
if (activateAccountBtn) {
|
||||
activateAccountBtn.addEventListener('click', function() {
|
||||
if (currentRowId) {
|
||||
const user = filteredRows.find(row => row.id == currentRowId);
|
||||
if (user) {
|
||||
user.status = 'Active';
|
||||
}
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('viewModal'));
|
||||
modal.hide();
|
||||
renderTable();
|
||||
currentRowId = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Delete
|
||||
|
|
|
|||
|
|
@ -5,10 +5,6 @@
|
|||
@section('content')
|
||||
@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'],
|
||||
|
|
|
|||
|
|
@ -1,14 +1,33 @@
|
|||
@extends('layouts.app')
|
||||
|
||||
@section('page_title', 'Member Management')
|
||||
@section('page_title', 'Locked Account')
|
||||
|
||||
@section('content')
|
||||
<div class="card" style="min-height: 500px;">
|
||||
<div class="card-header">
|
||||
<i class="fa-solid fa-users-gear" style="color:gray;"> Locked Accounts</i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>This is the Locked Accounts 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' => 'Inactive'],
|
||||
['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' => 'Inactive'],
|
||||
['id' => 4, 'cardNumber' => '3210-9876-5432-1098', 'firstName' => 'Bob', 'lastName' => 'Brown', 'birthday' => '1988-07-30', 'cardType' => 'Gold', 'status' => 'Inactive']
|
||||
];
|
||||
@endphp
|
||||
|
||||
@include('components.table-component', [
|
||||
'pageTitle' => 'Locked Account',
|
||||
'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
|
||||
Loading…
Reference in New Issue