admin/3dtours
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chỉnh sửa giao diện quản lí của admin giai đoạn 1

Browse Source
This commit is contained in:
locphamtran
2026-06-09 12:47:24 +07:00
parent 0eaaf074ba
commit cdd5f30ae1
4 changed files with 138 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/routes/apiRoutes.js
+47 -11
View File
@@ -952,8 +952,38 @@ router.get('/admin/users', protect, async (req, res) => {
return res.status(403).json({ message: 'Bạn không có quyền truy cập quản trị' });
}
try {
const users = await User.find({}).sort({ createdAt: -1 });
res.json(users);
const page = parseInt(req.query.page) || 1;
const limit = parseInt(req.query.limit) || 10;
const skip = (page - 1) * limit;
const totalUsers = await User.countDocuments();
// Sử dụng Aggregation để sắp xếp Role ưu tiên và Phân trang
const users = await User.aggregate([
{
$addFields: {
roleOrder: {
$switch: {
branches: [
{ case: { $eq: ["$role", "admin"] }, then: 0 },
{ case: { $eq: ["$role", "Chủ sở hữu"] }, then: 1 }
],
default: 2
}
}
}
},
{ $sort: { roleOrder: 1, createdAt: -1 } },
{ $skip: skip },
{ $limit: limit }
]);
res.json({
users,
totalPages: Math.ceil(totalUsers / limit),
currentPage: page,
totalUsers
});
} catch (error) {
res.status(500).json({ message: error.message });
}
@@ -970,14 +1000,20 @@ router.put('/admin/users/:id', protect, async (req, res) => {
const user = await User.findById(req.params.id);
if (!user) return res.status(404).json({ message: 'Người dùng không tồn tại' });
// Cập nhật thông tin cơ bản
if (fullName) user.fullName = fullName;
if (email) user.email = email;
if (role) user.role = role;
if (user.role === 'admin') {
// Theo yêu cầu: Admin tối cao chỉ được sửa Họ tên và Email
if (fullName) user.fullName = fullName;
if (email) user.email = email;
// Bỏ qua role và password để bảo vệ tài khoản root
} else {
// User bình thường được sửa tất cả
if (fullName) user.fullName = fullName;
if (email) user.email = email;
if (role) user.role = role;
// Nếu có nhập mật khẩu mới thì cập nhật (Middleware pre-save sẽ tự hash)
if (password && password.trim() !== '') {
user.password = password;
if (password && password.trim() !== '') {
user.password = password;
}
}
await user.save();
@@ -997,8 +1033,8 @@ router.delete('/admin/users/:id', protect, async (req, res) => {
const user = await User.findById(req.params.id);
if (!user) return res.status(404).json({ message: 'Người dùng không tồn tại' });
if (user.role === 'admin' && user._id.toString() === req.user._id.toString()) {
return res.status(400).json({ message: 'Bạn không thể tự xóa chính mình' });
if (user.role === 'admin') {
return res.status(400).json({ message: 'Không thể xóa tài khoản Admin tối cao' });
}
// Lưu ý: Trong thực tế bạn có thể muốn xóa cả các Scene của user này
frontend/css/style.css
+64
View File
@@ -992,6 +992,7 @@ html, body {
padding: 12px;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
vertical-align: middle;
}
.admin-table th {
@@ -999,6 +1000,32 @@ html, body {
font-weight: 600;
text-transform: uppercase;
font-size: 12px;
white-space: nowrap;
}
/* Thiết lập độ rộng tối thiểu để tránh co rúm nội dung */
.admin-table th:nth-child(1) { min-width: 160px; } /* Họ tên */
.admin-table th:nth-child(2) { min-width: 120px; } /* Username */
.admin-table th:nth-child(3) { min-width: 200px; } /* Email */
.admin-table th:nth-child(4) { min-width: 130px; } /* Quyền hạn */
.admin-table th:nth-child(5) { min-width: 140px; } /* Reset Password */
.admin-table th:nth-child(6) { min-width: 140px; } /* Thao tác */
.admin-table td input, .admin-table td select {
background: #2a2a2a !important;
border: 1px solid #444 !important;
color: #fff !important;
padding: 8px !important;
border-radius: 4px;
width: 100%;
font-size: 13px;
}
/* Fix lỗi dropdown trắng trên nền trắng */
.admin-table select option {
background-color: #1e1e1e;
color: #ffffff;
padding: 10px;
}
.admin-table input, .admin-table select {
@@ -1010,6 +1037,43 @@ html, body {
width: 100%;
}
/* Pagination Styles */
.pagination-container {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin-top: 25px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pagination-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
transition: all 0.2s;
}
.pagination-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.2);
border-color: #007bff;
}
.pagination-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.pagination-info {
color: #888;
font-size: 13px;
}
/* --- Privacy Settings Enhancements --- */
.privacy-settings-btn {
background: rgba(255, 255, 255, 0.1);
frontend/index.html
+3 -2
View File
@@ -84,7 +84,7 @@
<button class="tab-btn active" onclick="openDashboardTab('profile')">Hồ sơ</button>
<button class="tab-btn" onclick="openDashboardTab('my-scenes')">Quản lí scene</button>
<button class="tab-btn" onclick="openDashboardTab('media-library')">Quản lí ảnh và media</button>
<button class="tab-btn admin-only" id="admin-tab-users" onclick="openDashboardTab('user-management')">Quản lí users</button>
<button class="tab-btn admin-only" id="admin-tab-users" onclick="openDashboardTab('user-management')">Quản lí người dùng</button>
<button class="tab-btn admin-only" id="admin-tab-system" onclick="openDashboardTab('system-settings')">Cài đặt hệ thống</button>
<!-- Dòng 9: Đăng xuất -->
<button class="tab-btn logout-item" onclick="showLogoutConfirm()">Đăng xuất</button>
@@ -119,8 +119,9 @@
</div>
</div>
<div id="tab-user-management" class="dashboard-tab-pane admin-only">
<h3>Quản lý người dùng</h3>
<h3>Quản lí người dùng</h3>
<div id="admin-users-list" class="dashboard-list"></div>
<div id="admin-users-pagination" class="pagination-container"></div>
</div>
<div id="tab-system-settings" class="dashboard-tab-pane admin-only">
<h3>Cài đặt hệ thống</h3>
frontend/js/main_map.js
+23 -8
View File
@@ -89,7 +89,7 @@ function applySystemSettings() {
tabProfile: "Hồ sơ",
tabScenes: "Quản lí scene",
tabMedia: "Quản lí ảnh và media",
tabUsers: "Quản lí users",
tabUsers: "Quản lí người dùng",
tabSystem: "Cài đặt hệ thống"
},
en: {
@@ -1467,19 +1467,23 @@ async function loadMyScenes() {
/**
* Tải danh sách người dùng dành cho Admin tối cao
*/
async function loadAdminUsers() {
async function loadAdminUsers(page = 1) {
const token = localStorage.getItem('jwt');
const container = document.getElementById('admin-users-list');
const paginationContainer = document.getElementById('admin-users-pagination');
if (!container) return;
container.innerHTML = '<p>Đang tải danh sách người dùng...</p>';
if (paginationContainer) paginationContainer.innerHTML = '';
try {
const res = await fetch(`${API_BASE_URL}/admin/users`, {
const res = await fetch(`${API_BASE_URL}/admin/users?page=${page}&limit=10`, {
headers: { 'Authorization': `Bearer ${token}` }
});
const users = await res.json();
if (!res.ok) throw new Error(users.message);
const data = await res.json();
if (!res.ok) throw new Error(data.message);
const { users, totalPages, currentPage, totalUsers } = data;
let html = `
<table class="admin-table">
@@ -1497,23 +1501,25 @@ async function loadAdminUsers() {
`;
users.forEach(user => {
const isRootAdmin = user.role === 'admin';
html += `
<tr>
<td><input type="text" id="adm-fn-${user._id}" value="${user.fullName || ''}"></td>
<td><strong>${user.username}</strong></td>
<td><input type="email" id="adm-em-${user._id}" value="${user.email || ''}"></td>
<td>
<select id="adm-role-${user._id}">
<select id="adm-role-${user._id}" ${isRootAdmin ? 'disabled' : ''}>
<option value="user" ${user.role === 'user' ? 'selected' : ''}>User</option>
<option value="editor" ${user.role === 'editor' ? 'selected' : ''}>Editor</option>
<option value="moderator" ${user.role === 'moderator' ? 'selected' : ''}>Moderator</option>
<option value="admin" ${user.role === 'admin' ? 'selected' : ''}>Admin</option>
</select>
</td>
<td><input type="password" id="adm-pw-${user._id}" placeholder="Mật khẩu mới"></td>
<td><input type="password" id="adm-pw-${user._id}" placeholder="${isRootAdmin ? 'N/A' : 'Mật khẩu mới'}" ${isRootAdmin ? 'disabled' : ''}></td>
<td>
<button class="edit-btn-small" onclick="updateUserByAdmin('${user._id}')">Lưu</button>
<button class="delete-btn-small" onclick="deleteUserByAdmin('${user._id}')">Xóa</button>
${isRootAdmin ? '' : `<button class="delete-btn-small" onclick="deleteUserByAdmin('${user._id}')">Xóa</button>`}
</td>
</tr>
`;
@@ -1521,6 +1527,15 @@ async function loadAdminUsers() {
html += '</tbody></table>';
container.innerHTML = html;
// Render Pagination UI
if (paginationContainer && totalPages > 1) {
paginationContainer.innerHTML = `
<button class="pagination-btn" ${currentPage === 1 ? 'disabled' : ''} onclick="loadAdminUsers(${currentPage - 1})">Trang trước</button>
<span class="pagination-info">Trang ${currentPage} / ${totalPages} (${totalUsers} người dùng)</span>
<button class="pagination-btn" ${currentPage === totalPages ? 'disabled' : ''} onclick="loadAdminUsers(${currentPage + 1})">Trang sau</button>
`;
}
} catch (e) {
container.innerHTML = `<p style="color:red">Lỗi: ${e.message}</p>`;
}