Chỉnh sửa giao diện quản lí của admin giai đoạn 1
This commit is contained in:
@@ -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);
|
||||
|
||||
+3
-2
@@ -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>
|
||||
|
||||
+23
-8
@@ -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>`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user