card member functionality works

This commit is contained in:
armiejean 2025-05-16 11:18:15 +08:00
parent af7cc5c42f
commit 2ed97e9578
5 changed files with 587 additions and 30 deletions

View File

@ -0,0 +1,92 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Session;
class CardMemberController extends Controller
{
protected $apiBaseUrl = 'http://192.168.100.6:8081/api';
public function index(Request $request)
{
try {
$user = Session::get('user');
$accessToken = $user['access_token'] ?? null;
if (!$accessToken) {
Log::info('No access token found, redirecting to login from card-member');
return redirect()->route('login')->with('error', 'Please log in to view card members.');
}
$page = $request->input('page', 1);
$pageSize = 5; // Fixed at 5 per page as per sample
$search = $request->input('_search', null);
$response = Http::withHeaders([
'Accept' => 'application/json',
'Authorization' => 'Bearer ' . $accessToken,
])->get("{$this->apiBaseUrl}/cms/member", [
'page' => $page,
'page_size' => $pageSize,
'_search' => $search,
]);
if ($response->status() === 401 || $response->status() === 403) {
Log::warning('Unauthorized or Forbidden API response: ', $response->json());
return redirect()->route('login')->with('error', 'Your session has expired. Please log in again.');
}
$json = $response->json();
Log::info("Card Member API Response (Page {$page}): ", $json);
if ($response->successful() && isset($json['data']) && is_array($json['data'])) {
$members = array_map(function ($member) {
Log::info('Processing card member record: ', $member);
return [
'id' => $member['lcard_uuid'] ?? null,
'cardNumber' => $member['card_number'] ?? '',
'firstName' => $member['firstname'] ?? '',
'lastName' => $member['lastname'] ?? '',
'birthday' => $member['birthdate'] ?? '',
'cardType' => $member['card_type'] ?? '',
'status' => $member['is_validated'] ? 'Active' : 'Inactive',
];
}, $json['data']);
$total = $json['meta']['total'] ?? count($members);
$lastPage = $json['meta']['last_page'] ?? ceil($total / $pageSize);
return view('pages.member management.card-member', [
'members' => $members,
'currentPage' => $page,
'lastPage' => $lastPage,
'total' => $total,
'search' => $search,
]);
} else {
Log::warning('No card member data found or invalid API response: ', $json);
return view('pages.member management.card-member', [
'members' => [],
'currentPage' => 1,
'lastPage' => 1,
'total' => 0,
'search' => $search,
]);
}
} catch (\Exception $e) {
Log::error('Error fetching card member data: ' . $e->getMessage());
return view('pages.member management.card-member', [
'members' => [],
'currentPage' => 1,
'lastPage' => 1,
'total' => 0,
'search' => $search,
]);
}
}
}

View File

@ -0,0 +1,419 @@
@props([
'pageTitle' => '',
'data' => [],
'columns' => [],
'actions' => [],
'showAddButton' => false,
'addButtonUrl' => '#',
'showCheckboxes' => false,
'showBatchDelete' => false,
'showEditModal' => false,
'showViewModal' => false,
'currentPage' => 1,
'lastPage' => 1,
'total' => 0,
])
<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" data-search-param="_search">
</div>
</div>
<div class="col-12 col-md-6 d-flex justify-content-end">
<button class="btn btn-outline-secondary btn-sm" id="clearFilters">
<i class="fa-solid fa-filter-circle-xmark me-1"></i> Clear Filters
</button>
</div>
</div>
<!-- Table -->
<div class="table-container">
<table class="table table-hover align-middle">
<thead class="table-light">
<tr>
@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>
<style>
.card,
.table,
.btn,
.form-control,
.input-group-text {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1.5;
}
.card-header h5 {
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;
}
.view-btn {
border-color: #6c757d;
color: #6c757d;
}
.view-btn:hover {
background-color: #6c757d;
border-color: #6c757d;
color: #fff;
}
.table-hover tbody tr:hover {
cursor: pointer;
background-color: #f8f9fa;
}
@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;
}
.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;
}
}
</style>
<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) }},
pageTitle: @json($pageTitle),
csrfToken: '{{ csrf_token() }}',
currentPage: {{ $currentPage }},
lastPage: {{ $lastPage }},
total: {{ $total }},
};
const rowsPerPage = 5; // Fixed at 5 per page
let currentPage = tableConfig.currentPage; // Initialize with server-side page
let filteredRows = [...tableConfig.data];
let originalRows = [...tableConfig.data].map(row => ({ ...row }));
let sortDirection = {};
function renderTable() {
const tableBody = document.getElementById('tableBody');
if (!tableBody) return;
tableBody.innerHTML = '';
// Use the data passed from the server (already paginated to 5)
const paginatedRows = filteredRows; // No client-side slicing needed
paginatedRows.forEach(row => {
const tr = document.createElement('tr');
tr.setAttribute('data-id', row.id); // Use lcard_uuid as id
tr.classList.add('clickable-row');
let rowHtml = '';
if (tableConfig.showCheckboxes) {
rowHtml += `<td class="text-center"><input type="checkbox" class="rowCheckbox"></td>`;
}
tableConfig.columns.forEach(col => {
let value = row[col.key] || '';
if (col.key === 'birthday') {
value = value ? new Date(value).toLocaleDateString() : 'N/A';
}
rowHtml += `<td>${value}</td>`;
});
if (tableConfig.actions.length > 0) {
rowHtml += `<td class="text-center">`;
tableConfig.actions.forEach(action => {
if (action === 'view') {
rowHtml += `
<a href="{{ route('card-member.show', '') }}/${row.id}" class="btn btn-sm view-btn me-1" title="View">
<i class="fa-solid fa-eye"></i>
</a>`;
}
});
rowHtml += `</td>`;
}
tr.innerHTML = rowHtml;
tableBody.appendChild(tr);
});
attachEventListeners();
updateNoDataMessage();
}
function renderPagination() {
const pagination = document.getElementById('pagination');
if (!pagination) return;
pagination.innerHTML = '';
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) {
window.location.href = `{{ route('card-member.index') }}?page=${currentPage - 1}&_search=${tableConfig.search || ''}`;
}
});
pagination.appendChild(prevLi);
for (let i = 1; i <= tableConfig.lastPage; 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();
window.location.href = `{{ route('card-member.index') }}?page=${i}&_search=${tableConfig.search || ''}`;
});
pagination.appendChild(li);
}
const nextLi = document.createElement('li');
nextLi.className = `page-item ${currentPage === tableConfig.lastPage ? '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 < tableConfig.lastPage) {
window.location.href = `{{ route('card-member.index') }}?page=${currentPage + 1}&_search=${tableConfig.search || ''}`;
}
});
pagination.appendChild(nextLi);
}
function updateNoDataMessage() {
const noDataMessage = document.getElementById('no-data-message');
if (noDataMessage) {
noDataMessage.style.display = filteredRows.length === 0 ? 'block' : 'none';
}
}
function attachEventListeners() {
// Search
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; // Reset to first page on search
renderTable();
renderPagination();
// Update URL with search parameter
const url = new URL(window.location);
if (searchTerm) {
url.searchParams.set('_search', searchTerm);
} else {
url.searchParams.delete('_search');
}
window.history.pushState({}, '', url);
});
}
// Sort
document.querySelectorAll('.sortable').forEach(header => {
header.addEventListener('click', function() {
const columnIndex = parseInt(this.getAttribute('data-column')) - (tableConfig.showCheckboxes ? 1 : 0);
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');
if (icon) {
icon.classList.remove('fa-sort');
icon.classList.add(sortDirection[columnIndex] === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
}
filteredRows.sort((a, b) => {
let aValue = (a[key] || '').toString().toLowerCase();
let bValue = (b[key] || '').toString().toLowerCase();
if (key === 'birthday') {
aValue = new Date(a[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.localeCompare(bValue) : bValue.localeCompare(aValue);
});
currentPage = 1; // Reset to first page on sort
renderTable();
renderPagination();
});
});
// Clear Filters
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();
// Clear search parameter from URL
const url = new URL(window.location);
url.searchParams.delete('_search');
window.history.pushState({}, '', url);
});
}
// Row click to view
document.querySelectorAll('.clickable-row').forEach(row => {
row.addEventListener('click', function(e) {
if (e.target.closest('.rowCheckbox, .edit-btn, .view-btn, .delete-btn')) {
return;
}
const memberId = this.getAttribute('data-id');
window.location.href = `{{ route('card-member.show', '') }}/${memberId}`;
});
});
}
renderTable();
renderPagination();
</script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

View File

@ -0,0 +1,32 @@
@extends('layouts.app')
@section('page_title', 'View Card Member')
@section('content')
<div class="card">
<div class="card-header">
<h5 class="mb-0 fw-bold text-dark">View Card Member</h5>
</div>
<div class="card-body">
<div class="mb-3">
<strong>Card Number:</strong> {{ $member['cardNumber'] }}
</div>
<div class="mb-3">
<strong>First Name:</strong> {{ $member['firstName'] }}
</div>
<div class="mb-3">
<strong>Last Name:</strong> {{ $member['lastName'] }}
</div>
<div class="mb-3">
<strong>Birthday:</strong> {{ $member['birthday'] ? date('F d, Y', strtotime($member['birthday'])) : 'N/A' }}
</div>
<div class="mb-3">
<strong>Card Type:</strong> {{ $member['cardType'] }}
</div>
<div class="mb-3">
<strong>Status:</strong> {{ $member['status'] }}
</div>
<a href="{{ route('card-member.index') }}" class="btn btn-secondary">Back</a>
</div>
</div>
@endsection

View File

@ -3,31 +3,42 @@
@section('page_title', 'Card Member')
@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']
];
@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
])
<div id="card-member-table">
@if (session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
{{ session('success') }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
@if (session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
{{ session('error') }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
@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,
'currentPage' => $currentPage ?? 1,
'lastPage' => $lastPage ?? 1,
'total' => $total ?? 0,
])
<div id="no-data-message" style="display: {{ empty($members) ? 'block' : 'none' }}; text-align: center; margin-top: 20px;">
<p>No card members found.</p>
</div>
</div>
@endsection

View File

@ -7,8 +7,7 @@ use App\Http\Controllers\UserManagementController;
use App\Http\Controllers\PhotoSliderController;
use App\Http\Controllers\TopUpController;
use App\Http\Controllers\NotificationController;
use App\Http\Controllers\CardMemberController;
Route::get('/', function () {
return redirect()->route('login');
@ -182,4 +181,8 @@ Route::delete('/photo-slider/batch', [PhotoSliderController::class, 'batchDelete
//Notification
Route::get('/notification', [NotificationController::class, 'index'])->name('notification');
Route::get('/notification/create', [NotificationController::class, 'create'])->name('notification.create');
Route::post('/notification', [NotificationController::class, 'store'])->name('notification.store');
Route::post('/notification', [NotificationController::class, 'store'])->name('notification.store');
//Card Member
Route::get('/card-member', [CardMemberController::class, 'index'])->name('card-member');
Route::get('/card-member/{uuid}', [CardMemberController::class, 'show'])->name('card-member.show');