user-management page for frontend fix
This commit is contained in:
parent
6227d7f0eb
commit
f1514e7613
|
|
@ -5,7 +5,7 @@
|
||||||
<!-- Required meta tags -->
|
<!-- Required meta tags -->
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
|
||||||
<title>CMS-Laravel
|
<title>CMS-Laravel
|
||||||
</title>
|
</title>
|
||||||
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
|
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
|
||||||
|
|
|
||||||
|
|
@ -3,13 +3,743 @@
|
||||||
@section('page_title', 'User Management')
|
@section('page_title', 'User Management')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="card" style="min-height: 500px;">
|
<div class="card border-0 shadow-sm" style="min-height: 500px;">
|
||||||
<div class="card-header">
|
<div class="card-header border-0 bg-transparent">
|
||||||
<i class="fa-solid fa-users" style="color:gray;"> User Management</i>
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
|
<h5 class="mb-0 fw-bold text-dark">User Management</h5>
|
||||||
|
<a href="#" class="btn btn-primary btn-sm px-3">
|
||||||
|
<i class="fa-solid fa-plus me-1"></i> Add User
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p>This is the User Management page content.
|
<!-- Search and Filters -->
|
||||||
</p>
|
<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>
|
</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">
|
||||||
|
<!-- Delete Selected Button -->
|
||||||
|
<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>
|
||||||
|
<!-- Pagination -->
|
||||||
|
<nav aria-label="Page navigation">
|
||||||
|
<ul class="pagination pagination-sm" id="pagination">
|
||||||
|
<!-- Pagination links will be generated dynamically -->
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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>
|
||||||
|
|
||||||
|
<!-- Custom CSS for Styling -->
|
||||||
|
<style>
|
||||||
|
/* Font Styling */
|
||||||
|
.card,
|
||||||
|
.table,
|
||||||
|
.btn,
|
||||||
|
.form-control,
|
||||||
|
.input-group-text,
|
||||||
|
.modal-content {
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header h5,
|
||||||
|
.modal-title {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table th {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: #007bff;
|
||||||
|
border-color: #007bff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: #0056b3;
|
||||||
|
border-color: #0056b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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),
|
||||||
|
/* User Role */
|
||||||
|
.table th:nth-child(5) {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table td:nth-child(6),
|
||||||
|
/* Email */
|
||||||
|
.table th:nth-child(6) {
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table td:nth-child(7),
|
||||||
|
/* Status */
|
||||||
|
.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 Container to Prevent Scrollbar */
|
||||||
|
.table-container {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal Styling */
|
||||||
|
.modal-content {
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
border-bottom: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
border-top: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control,
|
||||||
|
.form-select {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pagination Styling */
|
||||||
|
.pagination-sm .page-link {
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.table {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-sm .page-link {
|
||||||
|
padding: 0.2rem 0.4rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table td:nth-child(6) {
|
||||||
|
/* Email */
|
||||||
|
max-width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control,
|
||||||
|
.form-select {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!-- JavaScript for Interactivity -->
|
||||||
|
<script>
|
||||||
|
// Sample data (replace with dynamic data from backend in real implementation)
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Pagination settings
|
||||||
|
const rowsPerPage = 5;
|
||||||
|
let currentPage = 1;
|
||||||
|
let filteredRows = [...allRows];
|
||||||
|
let originalRows = [...allRows].map(row => ({
|
||||||
|
...row
|
||||||
|
})); // Deep copy for original data
|
||||||
|
|
||||||
|
// Function to render table rows for the current page
|
||||||
|
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 btn-outline-primary me-1 edit-btn" 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" title="View">
|
||||||
|
<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);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reattach event listeners
|
||||||
|
attachStatusListeners();
|
||||||
|
attachCheckboxListeners();
|
||||||
|
attachEditListeners();
|
||||||
|
updateDeleteButtonState();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to render pagination
|
||||||
|
function renderPagination() {
|
||||||
|
const pagination = document.getElementById('pagination');
|
||||||
|
pagination.innerHTML = '';
|
||||||
|
|
||||||
|
const pageCount = Math.ceil(filteredRows.length / rowsPerPage);
|
||||||
|
|
||||||
|
// Previous button
|
||||||
|
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);
|
||||||
|
|
||||||
|
// Page numbers
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Next button
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search Functionality
|
||||||
|
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; // Reset to first page
|
||||||
|
renderTable();
|
||||||
|
renderPagination();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Sorting Functionality
|
||||||
|
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];
|
||||||
|
|
||||||
|
// Toggle sort direction
|
||||||
|
sortDirection[column] = !sortDirection[column] ? 'asc' : sortDirection[column] === 'asc' ?
|
||||||
|
'desc' : 'asc';
|
||||||
|
|
||||||
|
// Update sort icons
|
||||||
|
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');
|
||||||
|
|
||||||
|
// Sort filtered rows
|
||||||
|
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; // Reset to first page
|
||||||
|
renderTable();
|
||||||
|
renderPagination();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Clear Filters and Reset Sorting
|
||||||
|
document.getElementById('clearFilters').addEventListener('click', function() {
|
||||||
|
// Clear search input
|
||||||
|
document.getElementById('searchInput').value = '';
|
||||||
|
|
||||||
|
// Reset sort icons
|
||||||
|
document.querySelectorAll('.sortable i').forEach(icon => {
|
||||||
|
icon.classList.remove('fa-sort-up', 'fa-sort-down');
|
||||||
|
icon.classList.add('fa-sort');
|
||||||
|
});
|
||||||
|
sortDirection = {};
|
||||||
|
|
||||||
|
// Reset filtered rows to original
|
||||||
|
filteredRows = [...allRows];
|
||||||
|
currentPage = 1;
|
||||||
|
renderTable();
|
||||||
|
renderPagination();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Select All Checkbox Functionality
|
||||||
|
document.getElementById('selectAll').addEventListener('change', function() {
|
||||||
|
const checkboxes = document.querySelectorAll('.rowCheckbox');
|
||||||
|
checkboxes.forEach(checkbox => {
|
||||||
|
checkbox.checked = this.checked;
|
||||||
|
});
|
||||||
|
updateDeleteButtonState();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Checkbox Listeners for Batch Delete
|
||||||
|
function attachCheckboxListeners() {
|
||||||
|
const checkboxes = document.querySelectorAll('.rowCheckbox');
|
||||||
|
checkboxes.forEach(checkbox => {
|
||||||
|
checkbox.addEventListener('change', updateDeleteButtonState);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update Delete Button State
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete Selected (UI Only)
|
||||||
|
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'));
|
||||||
|
|
||||||
|
// Simulate deletion by removing from allRows and filteredRows
|
||||||
|
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()));
|
||||||
|
|
||||||
|
// Reset to first page if necessary
|
||||||
|
const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
|
||||||
|
if (currentPage > maxPage) {
|
||||||
|
currentPage = maxPage || 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderTable();
|
||||||
|
renderPagination();
|
||||||
|
|
||||||
|
// Reset select all checkbox
|
||||||
|
document.getElementById('selectAll').checked = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Status Dropdown Functionality
|
||||||
|
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');
|
||||||
|
|
||||||
|
// Update the button text
|
||||||
|
if (statusText) {
|
||||||
|
statusText.textContent = newStatus;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update the data in allRows, filteredRows, and originalRows
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simulate an API call to update the status
|
||||||
|
updateUserStatus(userId, newStatus);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Edit Button Functionality
|
||||||
|
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);
|
||||||
|
|
||||||
|
// Populate modal fields with user data
|
||||||
|
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;
|
||||||
|
|
||||||
|
// Show the modal
|
||||||
|
const modal = new bootstrap.Modal(document.getElementById('editUserModal'));
|
||||||
|
modal.show();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update Button in Modal (Static for now)
|
||||||
|
document.getElementById('updateUserBtn').addEventListener('click', function() {
|
||||||
|
// For static purposes, just close the modal
|
||||||
|
const modal = bootstrap.Modal.getInstance(document.getElementById('editUserModal'));
|
||||||
|
modal.hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Simulated API call to update status
|
||||||
|
function updateUserStatus(userId, status) {
|
||||||
|
console.log(`Updating user ${userId} status to ${status}`);
|
||||||
|
// Replace with actual AJAX call to your backend, e.g.:
|
||||||
|
/*
|
||||||
|
fetch(`/user/update-status/${userId}`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ status: status })
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.success) {
|
||||||
|
console.log('Status updated successfully');
|
||||||
|
} else {
|
||||||
|
console.error('Failed to update status');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => console.error('Error:', error));
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete Confirmation
|
||||||
|
function confirmDelete(id) {
|
||||||
|
if (confirm('Are you sure you want to delete this user?')) {
|
||||||
|
// Simulate deletion by removing from allRows and filteredRows
|
||||||
|
allRows = allRows.filter(row => row.id != id);
|
||||||
|
filteredRows = filteredRows.filter(row => row.id != id);
|
||||||
|
originalRows = originalRows.filter(row => row.id != id);
|
||||||
|
|
||||||
|
// Reset to first page if necessary
|
||||||
|
const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
|
||||||
|
if (currentPage > maxPage) {
|
||||||
|
currentPage = maxPage || 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderTable();
|
||||||
|
renderPagination();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initial render
|
||||||
|
renderTable();
|
||||||
|
renderPagination();
|
||||||
|
</script>
|
||||||
@endsection
|
@endsection
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue