Super-frpc/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(Users): fix user do not display in user management page and add user dialog box

Browse Source 
- Change user property names to match API response (UserID, Username, Type, CreatedAt)
- Remove lastActive field from display
- Add error handling for user list loading
- Improve UI styling with better padding and background
- Add null checks for Username display
This commit is contained in:
NanamiAdmin
2026-03-10 14:53:42 +08:00
parent ffaa78be94
commit dd1f82920b
1 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/views/Users.vue
View File

@@ -7,14 +7,14 @@
</button> </button>
</div> </div>
<div class="users-list"> <div class="users-list">
<div v-for="user in users" :key="user.userID" class="user-item"> <div v-for="user in users" :key="user.UserID" class="user-item">
<div class="user-info"> <div class="user-info">
<div class="user-avatar">{{ user.username.charAt(0).toUpperCase() }}</div> <div class="avatar">{{ user.Username ? user.Username.charAt(0).toUpperCase() : '' }}</div>
<div class="user-details"> <div class="user-details">
<div class="user-name">{{ user.username }}</div> <div class="user-name">{{ user.Username || 'N/A' }}</div>
<div class="user-type"> <div class="user-type">
<span :class="['type-badge', user.type]"> <span :class="['type-badge', user.Type]">
{{ getTypeLabel(user.type) }} {{ getTypeLabel(user.Type) }}
</span> </span>
</div> </div>
</div> </div>
@@ -22,18 +22,14 @@
<div class="user-meta"> <div class="user-meta">
<div class="meta-item"> <div class="meta-item">
<span class="meta-label">Created At:</span> <span class="meta-label">Created At:</span>
<span class="meta-value">{{ formatDate(user.createdAt) }}</span> <span class="meta-value">{{ formatDate(user.CreatedAt) }}</span>
</div>
<div class="meta-item">
<span class="meta-label">Last Active:</span>
<span class="meta-value">{{ formatDate(user.lastActive) }}</span>
</div> </div>
</div> </div>
<div class="user-actions"> <div class="user-actions">
<button class="action-btn edit-btn" @click="editUser(user)"> <button class="action-btn edit-btn" @click="editUser(user)">
Edit Edit
</button> </button>
<button class="action-btn delete-btn" @click="deleteUser(user.userID)"> <button class="action-btn delete-btn" @click="deleteUser(user.UserID)">
Delete Delete
</button> </button>
</div> </div>
@@ -106,8 +102,9 @@ export default {
const loadUsers = async () => { const loadUsers = async () => {
try { try {
const result = await userApi.listUsers(); const result = await userApi.listUsers();
users.value = result.data; users.value = result.success ? (result.data || []) : [];
} catch (error) { } catch (error) {
console.error('Failed to load users:', error);
showNotification('Failed to load user list', 'error'); showNotification('Failed to load user list', 'error');
} }
}; };
@@ -148,11 +145,11 @@ export default {
}; };
const editUser = (user) => { const editUser = (user) => {
editingUserId.value = user.userID; editingUserId.value = user.UserID;
formData.value = { formData.value = {
username: user.username, username: user.Username,
passwd: '', passwd: '',
type: user.type type: user.Type
}; };
showEditModal.value = true; showEditModal.value = true;
}; };
@@ -223,6 +220,9 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20px; gap: 20px;
padding: 12px;
border-radius: 8px;
background-color: #f9f9f9;
} }
.user-info { .user-info {
@@ -243,6 +243,12 @@ export default {
font-weight: 600; font-weight: 600;
color: var(--text-color); color: var(--text-color);
transition: color 0.3s; transition: color 0.3s;
word-break: break-all;
}
.user-type {
color: var(--text-color);
font-size: 14px;
} }
.user-meta { .user-meta {