337 lines
10 KiB
JavaScript
337 lines
10 KiB
JavaScript
// 全局變數
|
|
let currentPage = 1;
|
|
let totalPages = 1;
|
|
let limit = 10;
|
|
let minAge = null;
|
|
let maxAge = null;
|
|
let editMode = false;
|
|
let users = [];
|
|
|
|
// API 基礎 URL
|
|
const API_BASE_URL = '/v1/users';
|
|
|
|
// DOM 元素
|
|
const usersList = document.getElementById('users-list');
|
|
const userForm = document.getElementById('user-form');
|
|
const formTitle = document.getElementById('form-title');
|
|
const userIdInput = document.getElementById('user-id');
|
|
const nameInput = document.getElementById('name');
|
|
const emailInput = document.getElementById('email');
|
|
const ageInput = document.getElementById('age');
|
|
const saveBtn = document.getElementById('save-btn');
|
|
const cancelBtn = document.getElementById('cancel-btn');
|
|
const minAgeInput = document.getElementById('min-age');
|
|
const maxAgeInput = document.getElementById('max-age');
|
|
const filterBtn = document.getElementById('filter-btn');
|
|
const resetFilterBtn = document.getElementById('reset-filter-btn');
|
|
const prevPageBtn = document.getElementById('prev-page');
|
|
const nextPageBtn = document.getElementById('next-page');
|
|
const currentPageSpan = document.getElementById('current-page');
|
|
const totalPagesSpan = document.getElementById('total-pages');
|
|
const pageLimitSelect = document.getElementById('page-limit');
|
|
const messageDiv = document.getElementById('message');
|
|
const importForm = document.getElementById('import-form');
|
|
const importFileInput = document.getElementById('import-file');
|
|
|
|
// 頁面載入時獲取用戶列表
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
fetchUsers();
|
|
setupEventListeners();
|
|
});
|
|
|
|
// 設置事件監聽器
|
|
function setupEventListeners() {
|
|
// 表單提交事件
|
|
userForm.addEventListener('submit', handleFormSubmit);
|
|
|
|
// 取消按鈕事件
|
|
cancelBtn.addEventListener('click', resetForm);
|
|
|
|
// 過濾按鈕事件
|
|
filterBtn.addEventListener('click', () => {
|
|
minAge = minAgeInput.value ? parseInt(minAgeInput.value) : null;
|
|
maxAge = maxAgeInput.value ? parseInt(maxAgeInput.value) : null;
|
|
currentPage = 1;
|
|
fetchUsers();
|
|
});
|
|
|
|
// 重置過濾按鈕事件
|
|
resetFilterBtn.addEventListener('click', () => {
|
|
minAgeInput.value = '';
|
|
maxAgeInput.value = '';
|
|
minAge = null;
|
|
maxAge = null;
|
|
currentPage = 1;
|
|
fetchUsers();
|
|
});
|
|
|
|
// 分頁按鈕事件
|
|
prevPageBtn.addEventListener('click', () => {
|
|
if (currentPage > 1) {
|
|
currentPage--;
|
|
fetchUsers();
|
|
}
|
|
});
|
|
|
|
nextPageBtn.addEventListener('click', () => {
|
|
if (currentPage < totalPages) {
|
|
currentPage++;
|
|
fetchUsers();
|
|
}
|
|
});
|
|
|
|
// 每頁顯示數量變更事件
|
|
pageLimitSelect.addEventListener('change', () => {
|
|
limit = parseInt(pageLimitSelect.value);
|
|
currentPage = 1;
|
|
fetchUsers();
|
|
});
|
|
|
|
// 檔案匯入表單提交事件
|
|
importForm.addEventListener('submit', handleImportSubmit);
|
|
}
|
|
|
|
// 獲取用戶列表
|
|
async function fetchUsers() {
|
|
try {
|
|
// 構建 URL 查詢參數
|
|
const params = new URLSearchParams();
|
|
params.append('page', currentPage);
|
|
params.append('limit', limit);
|
|
|
|
if (minAge !== null) params.append('min_age', minAge);
|
|
if (maxAge !== null) params.append('max_age', maxAge);
|
|
|
|
const response = await fetch(`${API_BASE_URL}?${params.toString()}`);
|
|
const result = await response.json();
|
|
|
|
if (result.status === 'success') {
|
|
users = result.data.users;
|
|
renderUsers(users);
|
|
|
|
// 更新分頁信息
|
|
const meta = result.data.meta;
|
|
totalPages = meta.total_pages;
|
|
currentPageSpan.textContent = meta.page;
|
|
totalPagesSpan.textContent = totalPages;
|
|
|
|
// 更新分頁按鈕狀態
|
|
prevPageBtn.disabled = meta.page <= 1;
|
|
nextPageBtn.disabled = meta.page >= totalPages;
|
|
} else {
|
|
showMessage(result.message, 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('獲取用戶列表失敗:', error);
|
|
showMessage('獲取用戶列表失敗', 'error');
|
|
}
|
|
}
|
|
|
|
// 渲染用戶列表
|
|
function renderUsers(users) {
|
|
usersList.innerHTML = '';
|
|
|
|
if (users.length === 0) {
|
|
const emptyRow = document.createElement('tr');
|
|
emptyRow.innerHTML = `<td colspan="5" style="text-align: center;">沒有找到用戶</td>`;
|
|
usersList.appendChild(emptyRow);
|
|
return;
|
|
}
|
|
|
|
users.forEach(user => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td>${user.id}</td>
|
|
<td>${user.name}</td>
|
|
<td>${user.email}</td>
|
|
<td>${user.age}</td>
|
|
<td>
|
|
<button class="action-btn edit-btn" data-id="${user.id}">編輯</button>
|
|
<button class="action-btn delete-btn" data-id="${user.id}">刪除</button>
|
|
</td>
|
|
`;
|
|
usersList.appendChild(row);
|
|
});
|
|
|
|
// 添加編輯和刪除按鈕的事件監聽器
|
|
document.querySelectorAll('.edit-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => editUser(parseInt(btn.dataset.id)));
|
|
});
|
|
|
|
document.querySelectorAll('.delete-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => deleteUser(parseInt(btn.dataset.id)));
|
|
});
|
|
}
|
|
|
|
// 處理表單提交
|
|
async function handleFormSubmit(event) {
|
|
event.preventDefault();
|
|
|
|
// 如果不是編輯模式，重定向到新增用戶頁面
|
|
if (!editMode) {
|
|
window.location.href = 'add_user.html';
|
|
return;
|
|
}
|
|
|
|
const userData = {
|
|
name: nameInput.value.trim(),
|
|
email: emailInput.value.trim(),
|
|
age: parseInt(ageInput.value)
|
|
};
|
|
|
|
try {
|
|
// 更新用戶
|
|
const userId = parseInt(userIdInput.value);
|
|
const url = `${API_BASE_URL}/${userId}`;
|
|
const method = 'PATCH';
|
|
|
|
const response = await fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(userData)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.status === 'success') {
|
|
showMessage(editMode ? '用戶更新成功' : '用戶創建成功', 'success');
|
|
resetForm();
|
|
fetchUsers();
|
|
} else {
|
|
showMessage(result.message, 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('保存用戶失敗:', error);
|
|
showMessage('保存用戶失敗', 'error');
|
|
}
|
|
}
|
|
|
|
// 編輯用戶
|
|
async function editUser(userId) {
|
|
try {
|
|
const response = await fetch(`${API_BASE_URL}/${userId}`);
|
|
const result = await response.json();
|
|
|
|
if (result.status === 'success') {
|
|
const user = result.data.user;
|
|
|
|
// 填充表單
|
|
userIdInput.value = user.id;
|
|
nameInput.value = user.name;
|
|
emailInput.value = user.email;
|
|
ageInput.value = user.age;
|
|
|
|
// 切換到編輯模式
|
|
editMode = true;
|
|
|
|
// 顯示編輯表單
|
|
const editFormContainer = document.getElementById('edit-form-container');
|
|
editFormContainer.style.display = 'block';
|
|
|
|
// 滾動到表單
|
|
editFormContainer.scrollIntoView({ behavior: 'smooth' });
|
|
} else {
|
|
showMessage(result.message, 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('獲取用戶詳情失敗:', error);
|
|
showMessage('獲取用戶詳情失敗', 'error');
|
|
}
|
|
}
|
|
|
|
// 刪除用戶
|
|
async function deleteUser(userId) {
|
|
if (!confirm(`確定要刪除 ID 為 ${userId} 的用戶嗎？`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE_URL}/${userId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (response.status === 204) {
|
|
showMessage('用戶刪除成功', 'success');
|
|
fetchUsers();
|
|
} else {
|
|
const result = await response.json();
|
|
showMessage(result.message, 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('刪除用戶失敗:', error);
|
|
showMessage('刪除用戶失敗', 'error');
|
|
}
|
|
}
|
|
|
|
// 重置表單
|
|
function resetForm() {
|
|
userForm.reset();
|
|
userIdInput.value = '';
|
|
editMode = false;
|
|
|
|
// 隱藏編輯表單
|
|
const editFormContainer = document.getElementById('edit-form-container');
|
|
editFormContainer.style.display = 'none';
|
|
}
|
|
|
|
// 顯示訊息
|
|
function showMessage(message, type) {
|
|
messageDiv.textContent = message;
|
|
messageDiv.className = `message ${type}`;
|
|
|
|
// 5 秒後自動隱藏訊息
|
|
setTimeout(() => {
|
|
messageDiv.className = 'message';
|
|
}, 5000);
|
|
}
|
|
|
|
// 處理檔案匯入
|
|
async function handleImportSubmit(event) {
|
|
event.preventDefault();
|
|
|
|
if (!importFileInput.files || importFileInput.files.length === 0) {
|
|
showMessage('請選擇檔案', true);
|
|
return;
|
|
}
|
|
|
|
const file = importFileInput.files[0];
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
try {
|
|
showMessage('正在匯入資料，請稍候...');
|
|
|
|
const response = await fetch(`${API_BASE_URL}/import`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.status === 'success') {
|
|
// 顯示匯入結果
|
|
const successCount = result.data.success_count;
|
|
const errorCount = result.data.error_count;
|
|
let message = `匯入成功: ${successCount} 筆資料`;
|
|
|
|
if (errorCount > 0) {
|
|
message += `, 失敗: ${errorCount} 筆資料`;
|
|
}
|
|
|
|
showMessage(message);
|
|
|
|
// 重新載入用戶列表
|
|
fetchUsers();
|
|
|
|
// 重置表單
|
|
importForm.reset();
|
|
} else {
|
|
showMessage(`匯入失敗: ${result.message}`, true);
|
|
}
|
|
} catch (error) {
|
|
console.error('匯入錯誤:', error);
|
|
showMessage('匯入過程中發生錯誤，請稍後再試', true);
|
|
}
|
|
} |