From ab3688c606cc09aa302be39278c5f832bd0ff9d5 Mon Sep 17 00:00:00 2001 From: armiejean Date: Wed, 16 Apr 2025 00:35:03 +0800 Subject: [PATCH] fixing table component --- .../views/components/layouts/app.blade.php | 4 +- .../components/table-component.blade.php | 595 +++++++++--------- .../member management/card-member.blade.php | 4 - .../locked-accounts.blade.php | 39 +- 4 files changed, 319 insertions(+), 323 deletions(-) diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php index f8f363f..84c926f 100644 --- a/resources/views/components/layouts/app.blade.php +++ b/resources/views/components/layouts/app.blade.php @@ -25,4 +25,6 @@ @stack('scripts') - \ No newline at end of file + + + diff --git a/resources/views/components/table-component.blade.php b/resources/views/components/table-component.blade.php index 084d33b..5e86b3b 100644 --- a/resources/views/components/table-component.blade.php +++ b/resources/views/components/table-component.blade.php @@ -11,7 +11,7 @@ 'showViewModal' => false ]) - +
{{ $pageTitle }}
@@ -81,7 +81,7 @@
- +
@if ($showEditModal) @@ -142,6 +142,9 @@
+ @if ($pageTitle === 'Locked Account') + + @endif
@@ -149,9 +152,8 @@ @endif - + @@ -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 @@ `; } else { - rowHtml += `${row[col.key]}`; + rowHtml += `${row[col.key] || ''}`; } }); @@ -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 searchTerm = this.value.toLowerCase(); - filteredRows = tableConfig.data.filter(row => { - return Object.values(row).some(value => - value.toString().toLowerCase().includes(searchTerm) - ); + 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 && value.toString().toLowerCase().includes(searchTerm) + ); + }); + currentPage = 1; + renderTable(); + renderPagination(); }); - currentPage = 1; - renderTable(); - renderPagination(); - }); + } // Sort document.querySelectorAll('.sortable').forEach(header => { @@ -596,12 +544,14 @@ 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'); + 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,18 +562,21 @@ }); // 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'); + 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'); + }); + sortDirection = {}; + filteredRows = [...tableConfig.data]; + currentPage = 1; + renderTable(); + renderPagination(); }); - sortDirection = {}; - filteredRows = [...tableConfig.data]; - currentPage = 1; - renderTable(); - renderPagination(); - }); + } // Checkboxes if (tableConfig.showCheckboxes) { @@ -665,7 +618,7 @@ renderTable(); renderPagination(); - document.getElementById('selectAll').checked = false; + if (selectAll) selectAll.checked = false; } }); } @@ -699,33 +652,38 @@ 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]; - } - }); + 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] || ''; + } + }); - const modal = new bootstrap.Modal(document.getElementById('editModal')); - modal.show(); + 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(); - }); + 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) { + 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 @@ -733,20 +691,41 @@ 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); - 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]; - } - }); + 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] || ''; + } + }); - const modal = new bootstrap.Modal(document.getElementById('viewModal')); - modal.show(); + 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 diff --git a/resources/views/pages/member management/card-member.blade.php b/resources/views/pages/member management/card-member.blade.php index e6dc6f0..3801146 100644 --- a/resources/views/pages/member management/card-member.blade.php +++ b/resources/views/pages/member management/card-member.blade.php @@ -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'], diff --git a/resources/views/pages/member management/locked-accounts.blade.php b/resources/views/pages/member management/locked-accounts.blade.php index 943bbc8..2fce484 100644 --- a/resources/views/pages/member management/locked-accounts.blade.php +++ b/resources/views/pages/member management/locked-accounts.blade.php @@ -1,14 +1,33 @@ @extends('layouts.app') -@section('page_title', 'Member Management') +@section('page_title', 'Locked Account') @section('content') -
-
- Locked Accounts -
-
-

This is the Locked Accounts page content.

-
-
-@endsection + @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 \ No newline at end of file