armiejean
/
cms-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

card member page fixed

This commit is contained in:
armiejean 2025-05-20 16:40:43 +08:00
parent a0cbe8a239
commit 57167e64d7
7 changed files with 41 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/Http/Controllers/CardMemberController.php
View File

@ -54,7 +54,8 @@ class CardMemberController extends Controller
'lastName' => $member['lastname'] ?? '', 'lastName' => $member['lastname'] ?? '',
'birthday' => $member['birthdate'] ?? '', 'birthday' => $member['birthdate'] ?? '',
'cardType' => $member['card_type'] ?? '', 'cardType' => $member['card_type'] ?? '',
'status' => $member['is_validated'] ? 'Active' : 'Inactive', 'status' => $member['status'] ? 'Active' : 'Inactive',
'is_locked' => $member['is_locked'] ?? 0, // Add is_locked field
]; ];
}, $json['data']); }, $json['data']);
@ -130,7 +131,8 @@ class CardMemberController extends Controller
'lastName' => $member['lastname'] ?? '', 'lastName' => $member['lastname'] ?? '',
'birthday' => $member['birthdate'] ?? '', 'birthday' => $member['birthdate'] ?? '',
'cardType' => $member['card_type'] ?? '', 'cardType' => $member['card_type'] ?? '',
'status' => $member['is_validated'] ? 'Active' : 'Inactive', 'status' => $member['status'] ? 'Active' : 'Inactive',
'is_locked' => $member['is_locked'] ?? 0, // Add is_locked field
]; ];
}, $json['data']); }, $json['data']);
@ -187,7 +189,8 @@ class CardMemberController extends Controller
'lastName' => $json['data']['lastname'] ?? '', 'lastName' => $json['data']['lastname'] ?? '',
'birthday' => $json['data']['birthdate'] ?? '', 'birthday' => $json['data']['birthdate'] ?? '',
'cardType' => $json['data']['card_type'] ?? '', 'cardType' => $json['data']['card_type'] ?? '',
'status' => $json['data']['is_validated'] ? 'Active' : 'Inactive', 'status' => $json['data']['status'] ? 'Active' : 'Inactive',
'is_locked' => $json['data']['is_locked'] ?? 0, // Add is_locked field
]; ];
// Determine the view based on the referring route // Determine the view based on the referring route

41
resources/views/components/card-member-component.blade.php
View File

@ -12,6 +12,7 @@
'currentPage' => 1, 'currentPage' => 1,
'lastPage' => 1, 'lastPage' => 1,
'total' => 0, 'total' => 0,
'viewRoute' => '', // New prop for the view route
]) ])
<div class="card-header border-0 bg-transparent"> <div class="card-header border-0 bg-transparent">
@ -219,10 +220,11 @@
currentPage: {{ $currentPage }}, currentPage: {{ $currentPage }},
lastPage: {{ $lastPage }}, lastPage: {{ $lastPage }},
total: {{ $total }}, total: {{ $total }},
viewRoute: @json($viewRoute),
}; };
const rowsPerPage = 5; // Fixed at 5 per page const rowsPerPage = 5;
let currentPage = tableConfig.currentPage; // Initialize with server-side page let currentPage = tableConfig.currentPage;
let filteredRows = [...tableConfig.data]; let filteredRows = [...tableConfig.data];
let originalRows = [...tableConfig.data].map(row => ({ ...row })); let originalRows = [...tableConfig.data].map(row => ({ ...row }));
let sortDirection = {}; let sortDirection = {};
@ -232,12 +234,11 @@
if (!tableBody) return; if (!tableBody) return;
tableBody.innerHTML = ''; tableBody.innerHTML = '';
// Use the data passed from the server (already paginated to 5) const paginatedRows = filteredRows;
const paginatedRows = filteredRows; // No client-side slicing needed
paginatedRows.forEach(row => { paginatedRows.forEach(row => {
const tr = document.createElement('tr'); const tr = document.createElement('tr');
tr.setAttribute('data-id', row.id); // Use lcard_uuid as id tr.setAttribute('data-id', row.id);
tr.classList.add('clickable-row'); tr.classList.add('clickable-row');
let rowHtml = ''; let rowHtml = '';
@ -249,6 +250,8 @@
let value = row[col.key] || ''; let value = row[col.key] || '';
if (col.key === 'birthday') { if (col.key === 'birthday') {
value = value ? new Date(value).toLocaleDateString() : 'N/A'; value = value ? new Date(value).toLocaleDateString() : 'N/A';
} else if (col.key === 'is_locked') {
value = value == 1 ? 'Locked' : 'Unlocked'; // Display Locked/Unlocked
} }
rowHtml += `<td>${value}</td>`; rowHtml += `<td>${value}</td>`;
}); });
@ -257,9 +260,8 @@
rowHtml += `<td class="text-center">`; rowHtml += `<td class="text-center">`;
tableConfig.actions.forEach(action => { tableConfig.actions.forEach(action => {
if (action === 'view') { if (action === 'view') {
const route = tableConfig.pageTitle === 'Locked Account' ? 'locked-account.show' : 'card-member.show';
rowHtml += ` rowHtml += `
<a href="{{ route('') }}/${route}/${row.id}" class="btn btn-sm view-btn me-1" title="View"> <a href="${tableConfig.viewRoute.replace(':id', row.id)}" class="btn btn-sm view-btn me-1" title="View">
<i class="fa-solid fa-eye"></i> <i class="fa-solid fa-eye"></i>
</a>`; </a>`;
} }
@ -280,7 +282,7 @@
if (!pagination) return; if (!pagination) return;
pagination.innerHTML = ''; pagination.innerHTML = '';
const routeName = tableConfig.pageTitle === 'Locked Account' ? 'locked-account.index' : 'card-member.index'; const routeName = tableConfig.pageTitle === 'Locked Account' ? '{{ route("locked-account") }}' : '{{ route("card-member") }}';
const prevLi = document.createElement('li'); const prevLi = document.createElement('li');
prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`; prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
@ -288,7 +290,7 @@
prevLi.addEventListener('click', (e) => { prevLi.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
if (currentPage > 1) { if (currentPage > 1) {
window.location.href = `{{ route('') }}/${routeName}?page=${currentPage - 1}&_search=${tableConfig.search || ''}`; window.location.href = `${routeName}?page=${currentPage - 1}&_search=${tableConfig.search || ''}`;
} }
}); });
pagination.appendChild(prevLi); pagination.appendChild(prevLi);
@ -299,7 +301,7 @@
li.innerHTML = `<a class="page-link" href="#">${i}</a>`; li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
li.addEventListener('click', (e) => { li.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
window.location.href = `{{ route('') }}/${routeName}?page=${i}&_search=${tableConfig.search || ''}`; window.location.href = `${routeName}?page=${i}&_search=${tableConfig.search || ''}`;
}); });
pagination.appendChild(li); pagination.appendChild(li);
} }
@ -310,7 +312,7 @@
nextLi.addEventListener('click', (e) => { nextLi.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
if (currentPage < tableConfig.lastPage) { if (currentPage < tableConfig.lastPage) {
window.location.href = `{{ route('') }}/${routeName}?page=${currentPage + 1}&_search=${tableConfig.search || ''}`; window.location.href = `${routeName}?page=${currentPage + 1}&_search=${tableConfig.search || ''}`;
} }
}); });
pagination.appendChild(nextLi); pagination.appendChild(nextLi);
@ -324,7 +326,6 @@
} }
function attachEventListeners() { function attachEventListeners() {
// Search
const searchInput = document.getElementById('searchInput'); const searchInput = document.getElementById('searchInput');
if (searchInput) { if (searchInput) {
searchInput.addEventListener('input', function() { searchInput.addEventListener('input', function() {
@ -334,10 +335,9 @@
value && value.toString().toLowerCase().includes(searchTerm) value && value.toString().toLowerCase().includes(searchTerm)
); );
}); });
currentPage = 1; // Reset to first page on search currentPage = 1;
renderTable(); renderTable();
renderPagination(); renderPagination();
// Update URL with search parameter
const url = new URL(window.location); const url = new URL(window.location);
if (searchTerm) { if (searchTerm) {
url.searchParams.set('_search', searchTerm); url.searchParams.set('_search', searchTerm);
@ -348,7 +348,6 @@
}); });
} }
// Sort
document.querySelectorAll('.sortable').forEach(header => { document.querySelectorAll('.sortable').forEach(header => {
header.addEventListener('click', function() { header.addEventListener('click', function() {
const columnIndex = parseInt(this.getAttribute('data-column')) - (tableConfig.showCheckboxes ? 1 : 0); const columnIndex = parseInt(this.getAttribute('data-column')) - (tableConfig.showCheckboxes ? 1 : 0);
@ -373,17 +372,20 @@
aValue = new Date(a[key] || '1970-01-01').getTime(); aValue = new Date(a[key] || '1970-01-01').getTime();
bValue = new Date(b[key] || '1970-01-01').getTime(); bValue = new Date(b[key] || '1970-01-01').getTime();
return sortDirection[columnIndex] === 'asc' ? aValue - bValue : bValue - aValue; return sortDirection[columnIndex] === 'asc' ? aValue - bValue : bValue - aValue;
} else if (key === 'is_locked') {
aValue = a[key] == 1 ? 'Locked' : 'Unlocked';
bValue = b[key] == 1 ? 'Locked' : 'Unlocked';
return sortDirection[columnIndex] === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
} }
return sortDirection[columnIndex] === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue); return sortDirection[columnIndex] === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
}); });
currentPage = 1; // Reset to first page on sort currentPage = 1;
renderTable(); renderTable();
renderPagination(); renderPagination();
}); });
}); });
// Clear Filters
const clearFilters = document.getElementById('clearFilters'); const clearFilters = document.getElementById('clearFilters');
if (clearFilters) { if (clearFilters) {
clearFilters.addEventListener('click', function() { clearFilters.addEventListener('click', function() {
@ -397,22 +399,19 @@
currentPage = 1; currentPage = 1;
renderTable(); renderTable();
renderPagination(); renderPagination();
// Clear search parameter from URL
const url = new URL(window.location); const url = new URL(window.location);
url.searchParams.delete('_search'); url.searchParams.delete('_search');
window.history.pushState({}, '', url); window.history.pushState({}, '', url);
}); });
} }
// Row click to view
document.querySelectorAll('.clickable-row').forEach(row => { document.querySelectorAll('.clickable-row').forEach(row => {
row.addEventListener('click', function(e) { row.addEventListener('click', function(e) {
if (e.target.closest('.rowCheckbox, .edit-btn, .view-btn, .delete-btn')) { if (e.target.closest('.rowCheckbox, .edit-btn, .view-btn, .delete-btn')) {
return; return;
} }
const memberId = this.getAttribute('data-id'); const memberId = this.getAttribute('data-id');
const route = tableConfig.pageTitle === 'Locked Account' ? 'locked-account.show' : 'card-member.show'; window.location.href = tableConfig.viewRoute.replace(':id', memberId);
window.location.href = `{{ route('') }}/${route}/${memberId}`;
}); });
}); });
} }

3
resources/views/pages/card-member-view.blade.php
View File

@ -26,6 +26,9 @@
<div class="mb-3"> <div class="mb-3">
<strong>Status:</strong> {{ $member['status'] }} <strong>Status:</strong> {{ $member['status'] }}
</div> </div>
<div class="mb-3">
<strong>Lock Status:</strong> {{ $member['is_locked'] == 1 ? 'Locked' : 'Unlocked' }}
</div>
<a href="{{ route('card-member') }}" class="btn btn-secondary">Back</a> <a href="{{ route('card-member') }}" class="btn btn-secondary">Back</a>
</div> </div>
</div> </div>

3
resources/views/pages/locked-account-view.blade.php
View File

@ -32,6 +32,9 @@
<div class="mb-3"> <div class="mb-3">
<strong>Status:</strong> {{ $member['status'] }} <strong>Status:</strong> {{ $member['status'] }}
</div> </div>
<div class="mb-3">
<strong>Lock Status:</strong> {{ $member['is_locked'] == 1 ? 'Locked' : 'Unlocked' }}
</div>
<div class="d-flex gap-2"> <div class="d-flex gap-2">
<a href="{{ route('locked-account') }}" class="btn btn-secondary">Back</a> <a href="{{ route('locked-account') }}" class="btn btn-secondary">Back</a>
<form action="{{ route('locked-account.activate', $member['id']) }}" method="POST"> <form action="{{ route('locked-account.activate', $member['id']) }}" method="POST">

6
resources/views/pages/member management/card-member.blade.php
View File

@ -16,7 +16,7 @@
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div> </div>
@endif @endif
@include('components.table-component', [ @include('components.card-member-component', [
'pageTitle' => 'Card Member', 'pageTitle' => 'Card Member',
'data' => $members, 'data' => $members,
'columns' => [ 'columns' => [
@ -25,7 +25,8 @@
['name' => 'Last Name', 'key' => 'lastName', 'sortable' => true], ['name' => 'Last Name', 'key' => 'lastName', 'sortable' => true],
['name' => 'Birthday', 'key' => 'birthday', 'sortable' => true], ['name' => 'Birthday', 'key' => 'birthday', 'sortable' => true],
['name' => 'Card Type', 'key' => 'cardType', 'sortable' => true], ['name' => 'Card Type', 'key' => 'cardType', 'sortable' => true],
['name' => 'Status', 'key' => 'status', 'sortable' => true] ['name' => 'Status', 'key' => 'status', 'sortable' => true],
['name' => 'Lock Status', 'key' => 'is_locked', 'sortable' => true], // New column
], ],
'actions' => ['view'], 'actions' => ['view'],
'showAddButton' => false, 'showAddButton' => false,
@ -36,6 +37,7 @@
'currentPage' => $currentPage ?? 1, 'currentPage' => $currentPage ?? 1,
'lastPage' => $lastPage ?? 1, 'lastPage' => $lastPage ?? 1,
'total' => $total ?? 0, 'total' => $total ?? 0,
'viewRoute' => route('card-member.show', ':id'),
]) ])
<div id="no-data-message" style="display: {{ empty($members) ? 'block' : 'none' }}; text-align: center; margin-top: 20px;"> <div id="no-data-message" style="display: {{ empty($members) ? 'block' : 'none' }}; text-align: center; margin-top: 20px;">
<p>No card members found.</p> <p>No card members found.</p>

6
resources/views/pages/member management/locked-accounts.blade.php
View File

@ -16,7 +16,7 @@
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div> </div>
@endif @endif
@include('components.table-component', [ @include('components.card-member-component', [
'pageTitle' => 'Locked Account', 'pageTitle' => 'Locked Account',
'data' => $members ?? [], 'data' => $members ?? [],
'columns' => [ 'columns' => [
@ -25,7 +25,8 @@
['name' => 'Last Name', 'key' => 'lastName', 'sortable' => true], ['name' => 'Last Name', 'key' => 'lastName', 'sortable' => true],
['name' => 'Birthday', 'key' => 'birthday', 'sortable' => true], ['name' => 'Birthday', 'key' => 'birthday', 'sortable' => true],
['name' => 'Card Type', 'key' => 'cardType', 'sortable' => true], ['name' => 'Card Type', 'key' => 'cardType', 'sortable' => true],
['name' => 'Status', 'key' => 'status', 'sortable' => true] ['name' => 'Status', 'key' => 'status', 'sortable' => true],
['name' => 'Lock Status', 'key' => 'is_locked', 'sortable' => true], // New column
], ],
'actions' => ['view'], 'actions' => ['view'],
'showAddButton' => false, 'showAddButton' => false,
@ -36,6 +37,7 @@
'currentPage' => $currentPage ?? 1, 'currentPage' => $currentPage ?? 1,
'lastPage' => $lastPage ?? 1, 'lastPage' => $lastPage ?? 1,
'total' => $total ?? 0, 'total' => $total ?? 0,
'viewRoute' => route('locked-account.show', ':id'),
]) ])
<div id="no-data-message" style="display: {{ empty($members ?? []) ? 'block' : 'none' }}; text-align: center; margin-top: 20px;"> <div id="no-data-message" style="display: {{ empty($members ?? []) ? 'block' : 'none' }}; text-align: center; margin-top: 20px;">
<p>No locked accounts found.</p> <p>No locked accounts found.</p>

3
routes/web.php
View File

@ -162,11 +162,10 @@ Route::post('/notification', [NotificationController::class, 'store'])->name('no
//Member Management //Member Management
Route::get('/card-member', [CardMemberController::class, 'index'])->name('card-member'); Route::get('/card-member', [CardMemberController::class, 'index'])->name('card-member');
Route::get('/locked-account', [CardMemberController::class, 'lockedAccounts'])->name('locked-account');
Route::get('/card-member/{uuid}', [CardMemberController::class, 'show'])->name('card-member.show'); Route::get('/card-member/{uuid}', [CardMemberController::class, 'show'])->name('card-member.show');
Route::get('/locked-account', [CardMemberController::class, 'lockedAccounts'])->name('locked-account');
Route::get('/locked-account/{uuid}', [CardMemberController::class, 'show'])->name('locked-account.show'); Route::get('/locked-account/{uuid}', [CardMemberController::class, 'show'])->name('locked-account.show');
Route::post('/locked-account/activate/{uuid}', [CardMemberController::class, 'activate'])->name('locked-account.activate'); Route::post('/locked-account/activate/{uuid}', [CardMemberController::class, 'activate'])->name('locked-account.activate');
//Promotion //Promotion
Route::get('/promotions', [PromotionController::class, 'index'])->name('promotions'); Route::get('/promotions', [PromotionController::class, 'index'])->name('promotions');
Route::get('/promotions/create', [PromotionController::class, 'create'])->name('promotions.create'); Route::get('/promotions/create', [PromotionController::class, 'create'])->name('promotions.create');