feat(users): implement full user management CRUD

API endpoints (app/api/v1/admin/users.py):
- GET /users: Paginated list with search and filters
- POST /users: Create new user
- GET /users/{id}: Get user details with related counts
- PUT /users/{id}: Update user information
- PUT /users/{id}/status: Toggle active status
- DELETE /users/{id}: Delete user (with ownership check)

Pydantic schemas (models/schema/auth.py):
- UserCreate: For creating new users
- UserUpdate: For updating user information
- UserDetailResponse: Extended user details with counts
- UserListResponse: Paginated list response

Frontend:
- Updated users.html with server-side pagination and filters
- New user-create.html/js for user creation form
- New user-detail.html/js for viewing user details
- New user-edit.html/js for editing users

Routes added for user create, detail, and edit pages.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-12-03 21:37:23 +01:00
parent 901471bb76
commit be9c892739
11 changed files with 1987 additions and 274 deletions

View File

@@ -5,25 +5,26 @@ const usersLog = window.LogConfig.loggers.users;
function adminUsers() {
return {
// Inherit base layout functionality
// Inherit base layout functionality
...data(),
// Set page identifier
// Set page identifier
currentPage: 'users',
// State
users: [],
loading: false,
error: null,
filters: {
search: '',
role: '',
is_active: ''
},
stats: {
total: 0,
active: 0,
vendors: 0,
admins: 0
total_users: 0,
active_users: 0,
inactive_users: 0,
admin_users: 0
},
pagination: {
page: 1,
@@ -49,25 +50,95 @@ function adminUsers() {
usersLog.info('=== USERS PAGE INITIALIZATION COMPLETE ===');
},
// Format date helper
formatDate(dateString) {
if (!dateString) return '-';
return Utils.formatDate(dateString);
},
// Computed: Total number of pages
get totalPages() {
return this.pagination.pages;
},
// Computed: Start index for pagination display
get startIndex() {
if (this.pagination.total === 0) return 0;
return (this.pagination.page - 1) * this.pagination.per_page + 1;
},
// Computed: End index for pagination display
get endIndex() {
const end = this.pagination.page * this.pagination.per_page;
return end > this.pagination.total ? this.pagination.total : end;
},
// Computed: Generate page numbers array with ellipsis
get pageNumbers() {
const pages = [];
const totalPages = this.totalPages;
const current = this.pagination.page;
if (totalPages <= 7) {
// Show all pages if 7 or fewer
for (let i = 1; i <= totalPages; i++) {
pages.push(i);
}
} else {
// Always show first page
pages.push(1);
if (current > 3) {
pages.push('...');
}
// Show pages around current page
const start = Math.max(2, current - 1);
const end = Math.min(totalPages - 1, current + 1);
for (let i = start; i <= end; i++) {
pages.push(i);
}
if (current < totalPages - 2) {
pages.push('...');
}
// Always show last page
pages.push(totalPages);
}
return pages;
},
// Load users from API
async loadUsers() {
usersLog.info('Loading users...');
this.loading = true;
this.error = null;
try {
const params = new URLSearchParams({
page: this.pagination.page,
per_page: this.pagination.per_page,
...this.filters
});
const params = new URLSearchParams();
params.append('page', this.pagination.page);
params.append('per_page', this.pagination.per_page);
if (this.filters.search) {
params.append('search', this.filters.search);
}
if (this.filters.role) {
params.append('role', this.filters.role);
}
if (this.filters.is_active) {
params.append('is_active', this.filters.is_active);
}
const url = `/admin/users?${params}`;
window.LogConfig.logApiCall('GET', url, null, 'request');
const startTime = performance.now();
const response = await apiClient.get(url); // ✅ Fixed: lowercase apiClient
const response = await apiClient.get(url);
const duration = performance.now() - startTime;
window.LogConfig.logApiCall('GET', url, response, 'response');
window.LogConfig.logPerformance('Load Users', duration);
@@ -75,10 +146,13 @@ function adminUsers() {
this.users = response.items;
this.pagination.total = response.total;
this.pagination.pages = response.pages;
this.pagination.page = response.page;
this.pagination.per_page = response.per_page;
usersLog.info(`Loaded ${this.users.length} users`);
}
} catch (error) {
window.LogConfig.logError(error, 'Load Users');
this.error = error.message || 'Failed to load users';
Utils.showToast('Failed to load users', 'error');
} finally {
this.loading = false;
@@ -107,11 +181,18 @@ function adminUsers() {
},
// Search with debounce
debouncedSearch: Utils.debounce(function() {
usersLog.info('Search triggered:', this.filters.search);
this.pagination.page = 1;
this.loadUsers();
}, 500),
debouncedSearch() {
// Clear existing timeout
if (this._searchTimeout) {
clearTimeout(this._searchTimeout);
}
// Set new timeout
this._searchTimeout = setTimeout(() => {
usersLog.info('Search triggered:', this.filters.search);
this.pagination.page = 1;
this.loadUsers();
}, 300);
},
// Pagination
nextPage() {
@@ -130,15 +211,23 @@ function adminUsers() {
}
},
goToPage(pageNum) {
if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
this.pagination.page = pageNum;
usersLog.info('Go to page:', this.pagination.page);
this.loadUsers();
}
},
// Actions
viewUser(user) {
usersLog.info('View user:', user.username);
// TODO: Open view modal
window.location.href = `/admin/users/${user.id}`;
},
editUser(user) {
usersLog.info('Edit user:', user.username);
// TODO: Open edit modal
window.location.href = `/admin/users/${user.id}/edit`;
},
async toggleUserStatus(user) {
@@ -196,7 +285,7 @@ function adminUsers() {
openCreateModal() {
usersLog.info('Open create user modal');
// TODO: Open create modal
window.location.href = '/admin/users/create';
}
};
}