feat: implement admin update user and bulk activate#70
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughThis update introduces a comprehensive administrative settings feature, including new API modules, Pinia store, and detailed Vue components for system configuration. User management is enhanced with active/inactive user separation, bulk activation, and improved deletion flows. The UI gains a global toast notification system, new localization strings, and refined layouts for both admin and user settings. Changes
Sequence Diagram(s)sequenceDiagram
participant Admin as Admin User
participant UI as AdminSettingsView.vue
participant Store as useAdminSettingsStore
participant API as adminSettingsApi
participant Backend as Backend API
Admin->>UI: Open Admin Settings
UI->>Store: fetchSettings()
Store->>API: getSettings()
API->>Backend: GET /admin/settings
Backend-->>API: Settings data
API-->>Store: Settings data
Store-->>UI: Settings data
Admin->>UI: Edit settings and click Save
UI->>Store: updateSettings(updates)
Store->>API: updateSettings(updates)
API->>Backend: PUT /admin/settings
Backend-->>API: Updated settings
API-->>Store: Updated settings
Store-->>UI: Updated settings
Store->>UI: Show toast (success/error)
sequenceDiagram
participant Admin as Admin User
participant UI as UserListView.vue
participant Users as useUsers composable
participant API as users API
Admin->>UI: Activate multiple users
UI->>Users: activateMultiple(userIds)
Users->>API: bulkActivateUsers(userIds)
API->>Backend: PATCH /user/bulk-activate
Backend-->>API: Updated users
API-->>Users: Updated users
Users-->>UI: Updated users
UI->>UI: Show toast (success/error)
Possibly related PRs
Suggested labels
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (7)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🔭 Outside diff range comments (1)
src/features/roles/api.ts (1)
8-8: Remove unused import to fix pipeline failure.The
Userimport is not used in the code and is causing a TypeScript error.- User,
🧹 Nitpick comments (11)
src/components/ToastContainer.vue (1)
1-78: LGTM! Well-implemented toast notification system.The component provides a clean, accessible toast notification system with:
- Proper Vue 3 composition API usage
- Type-based styling with dark mode support
- Smooth animations with transition groups
- Good separation of concerns
Consider adding ARIA attributes for better accessibility:
<div v-for="toast in toasts" :key="toast.id" :class="getClasses(toast.type)" + role="alert" + :aria-live="toast.type === 'error' ? 'assertive' : 'polite'" >src/features/admin/types/settings.ts (1)
35-79: Consider adding runtime validation for numeric constraints.The sub-interfaces provide good separation of concerns, but consider adding validation constraints for numeric values like
passwordMinLength,maxLoginAttempts,sessionTimeout, etc. These should have reasonable bounds to prevent invalid configurations.For example, you might want to add JSDoc comments or consider using branded types:
export interface SecuritySettings { registrationEnabled: boolean; requireEmailVerification: boolean; defaultUserRole: string; + /** Session timeout in minutes (min: 5, max: 1440) */ sessionTimeout: number; + /** Maximum login attempts before lockout (min: 1, max: 10) */ maxLoginAttempts: number; + /** Minimum password length (min: 6, max: 128) */ passwordMinLength: number; // ... rest of properties }src/features/admin/store/settings.ts (2)
24-37: Consider more specific error handling for different failure scenarios.The
updateSettingsaction is well-structured, but consider handling different types of errors more specifically (e.g., validation errors vs network errors) to provide more targeted user feedback.} catch (error) { console.error('Failed to update admin settings:', error); - toast.error('Failed to update settings'); + if (error.response?.status === 400) { + toast.error('Invalid settings provided'); + } else if (error.response?.status === 403) { + toast.error('Insufficient permissions to update settings'); + } else { + toast.error('Failed to update settings'); + } return false; }
61-73: Consider handling partial backup failures.The
triggerBackupaction should handle cases where the backup might be partially successful or provide more detailed error information to help with troubleshooting.} catch (error) { console.error('Failed to trigger backup:', error); - toast.error('Failed to trigger backup'); + if (error.response?.status === 507) { + toast.error('Insufficient storage space for backup'); + } else { + toast.error('Failed to trigger backup'); + } return { success: false, backupId: '' }; }src/features/users/components/InactiveUsersSection.vue (1)
48-67: Consider adding user feedback for selection actions.The selection toggle functions work correctly, but consider providing user feedback when selections change, especially for bulk operations.
const activateSelected = () => { emit('activateSelected', selectedUsersList.value); selectedUsers.value.clear(); + // Could add a toast notification here for user feedback };src/features/admin/api/settings.ts (3)
17-26: Consider adding password validation and security concerns.The
testSmtpConnectionmethod handles SMTP configuration testing but should consider security implications when passing credentials.Consider adding validation or sanitization:
async testSmtpConnection(config: { host: string; port: number; secure: boolean; user: string; pass: string; }): Promise<{ success: boolean; message: string }> { + // Validate required fields + if (!config.host || !config.user || !config.pass) { + throw new Error('Host, user, and password are required'); + } const response = await api.post('/admin/settings/test-smtp', config); return response.data; },
28-31: Consider adding error handling for backup operations.The
triggerBackupmethod should handle potential backup failures gracefully.Consider adding more specific error handling:
async triggerBackup(): Promise<{ success: boolean; backupId: string }> { + try { const response = await api.post('/admin/settings/backup/trigger'); return response.data; + } catch (error) { + throw new Error(`Backup trigger failed: ${error.message}`); + } },
45-51: Consider adding validation for backup ID.The
restoreBackupmethod should validate the backup ID parameter to prevent potential security issues.Consider adding backup ID validation:
async restoreBackup(backupId: string): Promise<{ success: boolean }> { + if (!backupId || typeof backupId !== 'string') { + throw new Error('Valid backup ID is required'); + } const response = await api.post( `/admin/settings/backup/restore/${backupId}`, ); return response.data; },src/features/admin/views/AdminSettingsView.vue (2)
116-130: Implement the actual API calls for settings management.Both
saveSettingsandtestSmtpConnectionmethods are currently stubbed and only show toast notifications. They should integrate with the admin settings API module mentioned in the PR summary.Would you like me to implement these methods using the
adminSettingsApimodule fromsrc/features/admin/api/settings.tsand theuseAdminSettingsStore?
468-479: Improve file types input parsing to handle edge cases.The current implementation could produce empty strings in the array if users enter multiple commas or spaces.
-<input - :value="system.allowedFileTypes.join(', ')" - @input=" - system.allowedFileTypes = ( - $event.target as HTMLInputElement - ).value - .split(',') - .map((s) => s.trim()) - " +<input + :value="system.allowedFileTypes.join(', ')" + @input="handleFileTypesInput"Add this method to the script section:
const handleFileTypesInput = (event: Event) => { const input = (event.target as HTMLInputElement).value; system.value.allowedFileTypes = input .split(',') .map(s => s.trim().toLowerCase()) .filter(s => s.length > 0); };src/features/users/views/UserListView.vue (1)
132-133: Translate the French comment to English for consistency.Code comments should be in English for better international collaboration.
- // Ne pas réinitialiser selectedUser ici car il peut être utilisé par d'autres modals + // Don't reset selectedUser here as it may be used by other modals isActionsModalOpen.value = false;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (33)
package.json(1 hunks)src/App.vue(1 hunks)src/components/ToastContainer.vue(1 hunks)src/features/admin/api/settings.ts(1 hunks)src/features/admin/store/settings.ts(1 hunks)src/features/admin/types/settings.ts(1 hunks)src/features/admin/views/AdminSettingsView.vue(1 hunks)src/features/admin/views/AdminView.vue(2 hunks)src/features/auth/components/AuthInput.vue(4 hunks)src/features/auth/components/LoginForm.vue(3 hunks)src/features/roles/api.ts(4 hunks)src/features/roles/store.ts(1 hunks)src/features/roles/types.ts(1 hunks)src/features/roles/views/RolesAdminView.vue(3 hunks)src/features/rooms/views/RoomDetails.vue(3 hunks)src/features/settings/views/SettingsView.vue(2 hunks)src/features/users/api.ts(4 hunks)src/features/users/components/InactiveUsersSection.vue(1 hunks)src/features/users/components/PaginationControls.vue(3 hunks)src/features/users/components/UserActionsModal.vue(2 hunks)src/features/users/components/UserCard.vue(1 hunks)src/features/users/components/UserDeleteModal.vue(1 hunks)src/features/users/components/UserEditRoleModal.vue(7 hunks)src/features/users/components/UserTable.vue(1 hunks)src/features/users/composables/useUsers.ts(3 hunks)src/features/users/types.ts(1 hunks)src/features/users/views/UserListView.vue(8 hunks)src/layouts/views/DefaultLayout.vue(2 hunks)src/locales/en.json(4 hunks)src/locales/fr.json(5 hunks)src/router/index.ts(1 hunks)src/shared/components/SettingsLayout.vue(1 hunks)src/shared/composables/useToast.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (5)
src/features/users/api.ts (1)
src/features/users/types.ts (1)
UserResponseDto(3-15)
src/features/roles/api.ts (2)
src/features/users/types.ts (1)
UserWithPresenceDto(17-19)src/i18n.ts (1)
i18n(5-10)
src/features/users/composables/useUsers.ts (2)
src/i18n.ts (1)
i18n(5-10)src/features/users/api.ts (2)
toggleUserStatus(146-158)bulkActivateUsers(167-179)
src/features/admin/store/settings.ts (2)
src/features/admin/types/settings.ts (1)
AdminSettings(1-33)src/features/admin/api/settings.ts (4)
adminSettingsApi(4-51)updateSettings(10-15)testSmtpConnection(17-26)triggerBackup(28-31)
src/features/admin/api/settings.ts (1)
src/features/admin/types/settings.ts (1)
AdminSettings(1-33)
🪛 GitHub Check: build
src/features/users/components/UserCard.vue
[failure] 6-6:
Property 'active' does not exist on type 'User'. Did you mean 'isActive'?
src/features/rooms/views/RoomDetails.vue
[failure] 42-42:
Property 'viewportInitialized' does not exist on type 'VueFlowStore'.
🪛 GitHub Actions: Build Frontend
src/features/roles/api.ts
[error] 8-8: TypeScript error TS6196: 'User' is declared but never used.
🔇 Additional comments (91)
src/features/auth/components/AuthInput.vue (9)
13-13: LGTM! Template ref correctly added for DOM access.The template ref enables programmatic focus control from parent components.
57-57: LGTM! Import statement properly updated.The
refimport is correctly added to support the new template ref functionality.
81-81: LGTM! Template ref properly typed and declared.The
inputRefis correctly typed asHTMLInputElementwith proper optional chaining support.
95-101: LGTM! Focus method and exposure implemented correctly.The implementation follows Vue 3 best practices:
- Uses optional chaining for safe DOM access
- Properly exposes the method via
defineExpose- Simple and focused functionality
This enhancement enables parent components to programmatically focus the input field, improving keyboard navigation and user experience.
13-13: LGTM: Template ref properly added.The template ref is correctly added to the input element, enabling DOM access for programmatic focus.
57-57: LGTM: Import statement updated correctly.The
refimport is properly added to support the template ref functionality.
81-82: LGTM: Template ref correctly declared.The template ref is properly typed as
HTMLInputElementand initialized correctly.
95-97: LGTM: Focus method implementation is correct.The focus method uses optional chaining to safely call focus on the input element, handling cases where the ref might be undefined.
99-101: LGTM: Method properly exposed for parent components.The
defineExposecorrectly exposes the focus method, allowing parent components to programmatically focus the input field.src/features/auth/components/LoginForm.vue (6)
82-82: LGTM! nextTick import correctly added for DOM synchronization.The
nextTickimport is properly added to ensure DOM updates are flushed before focusing.
111-111: LGTM! Ref type correctly updated for component instance.The type change from
HTMLInputElement | nulltoInstanceType<typeof AuthInput> | nullis correct since the ref now points to the Vue component instance rather than the DOM element directly.
140-143: LGTM! Focus method properly coordinated with DOM updates.The implementation correctly:
- Makes the function async to support
nextTick()- Awaits DOM updates before attempting to focus
- Calls the exposed
focus()method on the AuthInput componentThis ensures reliable focus transitions and improves the user experience during keyboard navigation.
82-82: LGTM: Import statement updated correctly.The
nextTickimport is properly added to support asynchronous DOM updates before focusing.
111-111: LGTM: Ref type correctly updated.The
passwordInputref type is properly changed fromHTMLInputElementtoInstanceType<typeof AuthInput>to reference the component instance instead of the DOM element.
140-143: LGTM: Async focus handling implemented correctly.The
switchToPasswordfunction is properly made async and usesnextTick()to ensure DOM updates are flushed before calling the exposedfocus()method. This prevents potential focus issues due to timing.src/features/rooms/views/RoomDetails.vue (2)
2-2: Good addition of reactive utilities.Adding
nextTickandwatchimports supports the improved reactive approach to viewport initialization.
162-175: Excellent approach to replace setTimeout with reactive logic.The new implementation using
nextTickandwatchis much more robust than the previous arbitrary 100ms timeout. However, this depends on theviewportInitializedproperty being available in the API.The logic correctly:
- Waits for the next DOM update cycle
- Checks initialization state before setting up watchers
- Properly cleans up watchers to prevent memory leaks
This change will need to be updated once the correct Vue Flow API is confirmed.
src/shared/components/SettingsLayout.vue (3)
1-39: Well-structured reusable component with solid TypeScript integration.The component design is excellent with proper TypeScript interfaces, reactive state management, and clean separation of concerns. The exposed methods and reactive refs provide good API flexibility.
41-113: Excellent responsive design with accessibility considerations.The template implementation demonstrates good practices:
- Responsive grid layout that adapts to different screen sizes
- Proper semantic HTML with navigation elements
- Dark mode support throughout
- Smooth transitions for better UX
- Flexible slot system for customization
115-130: Clean transition animations enhance user experience.The fade-slide transition provides smooth visual feedback during section changes without being distracting.
package.json (1)
5-5: Appropriate version bump for new features.The version increment from 0.9.0 to 0.9.1 is appropriate for the admin settings and user management enhancements being introduced.
src/App.vue (2)
3-3: Clean integration of toast notification system.The ToastContainer component is properly integrated into the main application template, providing global toast notifications across the app.
8-8: Proper import statement follows established patterns.The import statement is consistent with the existing codebase structure.
src/features/users/components/UserTable.vue (1)
48-53: Excellent styling improvements for better visual consistency.The addition of color classes and the "@" prefix for usernames enhances readability and provides better visual hierarchy in both light and dark modes.
src/router/index.ts (1)
139-143: LGTM! Admin settings route properly configured.The new admin settings route follows the established pattern with correct authentication guards (
requiresAuth: true,requiresAdmin: true) and proper component loading. The route structure integrates well with the existing admin navigation.src/layouts/views/DefaultLayout.vue (2)
15-15: LGTM! Clean import addition.The Cog icon import is correctly added for the new admin settings navigation link.
71-75: LGTM! Admin settings navigation properly integrated.The new admin settings link follows the established pattern with correct path, localization key, and icon. The structure is consistent with existing admin navigation entries.
src/features/users/types.ts (2)
10-11: LGTM! Consistent property updates with roles types.The renaming from
activetoisActiveand addition ofisVerifiedare consistent with the changes insrc/features/roles/types.ts. The more descriptive property names improve code clarity.
17-19: LGTM! Well-designed interface for user presence.The new
UserWithPresenceDtointerface provides a clean separation between basic user data and presence information. This design allows for optional presence data without cluttering the base user interface.src/features/users/components/PaginationControls.vue (1)
22-22: LGTM! Well-structured dark mode styling improvements.The CSS updates enhance the pagination controls with consistent dark mode support, proper hover effects, and improved visual styling. The changes maintain the existing functionality while significantly improving the user experience across light and dark themes.
Also applies to: 27-27, 45-45, 54-54
src/features/roles/views/RolesAdminView.vue (2)
478-482: Verify the activeUsersCount logic.The computed property now counts users based on
isOnlinerather thanisActive. Ensure this aligns with the intended definition of "active users" in the context of role management.
347-354: Clarify the user status logic in RolesAdminView.vueThe badge styling and displayed text are using two different fields, which may not reflect the intended status:
• Line 347: Badge “active” styling uses
user.isActive
• Line 349: Gray fallback styling uses!user.isOnline
• Line 353: Text showst('roles.active')whenuser.isOnline, elset('roles.inactive')Please confirm whether this component should surface:
- Account activation (
isActive) – in which case both the CSS classes and the label should be driven byisActive; or- Online presence (
isOnline) – in which case both should useisOnline(and you may need new translation keys likeroles.online/roles.offline); or- Both concepts separately, with distinct UI elements for activation vs. presence.
Once the intended behavior is clear, update the conditions and labels to consistently use the correct field(s).
src/features/users/components/UserActionsModal.vue (2)
99-118: Excellent UX improvement for admin user protection.The toggle status button properly:
- Disables actions for admin users with visual feedback
- Uses
role.isAdmincheck which is more reliable than hardcoded role IDs- Provides clear explanatory text when disabled
- Updates to use
isActiveproperty consistently
128-148: Good implementation of admin user deletion protection.The delete button follows the same pattern as the toggle button:
- Proper admin role detection
- Clear visual feedback for disabled state
- Explanatory text for user understanding
- Consistent styling approach
src/features/admin/views/AdminView.vue (2)
4-9: LGTM! Well-integrated settings navigation.The new Settings navigation link is properly integrated with:
- Correct icon import from lucide-vue-next
- Proper i18n key reference
- Consistent structure with existing navigation items
Also applies to: 22-26
33-65: Excellent layout and styling improvements.The enhanced admin view provides:
- Better visual hierarchy with titles and subtitles
- Improved navigation styling with hover effects
- Consistent dark mode support
- Proper spacing and typography
- Clean structure with wrapper div for router-view
src/features/roles/api.ts (5)
12-12: Good type safety improvement!Adding the
UserWithPresenceDtoimport improves type safety for thegetUsersByRolefunction return type.
131-149: Excellent type safety and API response handling improvement!The explicit return type
Promise<UserWithPresenceDto[]>and extracting.datafrom the API response aligns with the updated type system. The fallback return of empty array ensures robust error handling.
165-165: Good API endpoint unification!Using the unified
/role/user/update-account/${userId}endpoint improves consistency across role management functions.
171-176: Excellent documentation addition!The JSDoc comment clearly describes the function's purpose, parameters, and return value, improving code maintainability.
191-191: Good payload structure and endpoint consistency!The
{ roleIds }payload structure aligns with the function's purpose of updating multiple roles, and the unified endpoint maintains API consistency.src/features/users/composables/useUsers.ts (5)
14-16: Good API import additions!The new imports for
toggleUserStatusandbulkActivateUserssupport the enhanced user management functionality.
90-100: Excellent status toggle implementation!The
toggleStatusfunction follows the established pattern with proper token validation, API call, and local state synchronization. The error handling is consistent with other functions in the composable.
102-114: Well-implemented bulk activation function!The
activateMultiplefunction correctly handles bulk operations by iterating through updated users and synchronizing local state. The token validation and error handling are consistent.
116-121: Useful computed properties for user filtering!The
activeUsersandinactiveUserscomputed properties provide convenient access to filtered user data, supporting the UI's separation of active and inactive users.
137-142: Good composable API expansion!The new functions and computed properties are properly exposed in the return object, maintaining a clean and consistent API.
src/features/users/components/UserDeleteModal.vue (4)
139-153: Well-defined TypeScript interfaces!The
Propsinterface anddefineEmitsprovide excellent type safety with clear data structure for the confirmation event.
1-120: Excellent modal implementation with great UX!The modal uses Headless UI components for proper accessibility, includes smooth transitions, warning indicators, and a user-friendly layout. The amber warning box and textarea for optional deletion reason enhance the user experience.
157-170: Good component logic and state management!The
closefunction properly resets the form state, andhandleConfirmsends well-structured data including the hardcoded reason "admin_action" and optional details.
96-111: Proper loading state handling!The confirm button correctly shows a loading spinner and is disabled during the deletion process, providing good user feedback.
src/features/users/components/UserEditRoleModal.vue (8)
8-8: Good API import addition!The
updateUserRolesimport from the roles API supports the separated role management functionality.
15-15: Useful initial tab control!The optional
initialTabprop provides flexibility for opening the modal to a specific tab, enhancing user experience.
35-35: Smart separation of role management!The separate
roleIdsref enables independent role management from the main form, improving the component's modularity.
42-51: Excellent tab-specific form validation!The conditional validation based on the active tab ensures that only relevant fields are validated, providing a better user experience.
53-60: Good initial tab handling!The watcher properly sets the active tab when the modal opens with an
initialTabprop, providing consistent behavior.
92-106: Excellent submit handler branching!The submit handler correctly branches based on the active tab, handling user info updates and role updates separately. The payload filtering for user info (
roleIds: _, username: __) is smart and prevents unnecessary data submission.
202-203: Good read-only username implementation!Disabling the username input prevents conflicts and clearly indicates that usernames cannot be changed, with appropriate styling for the disabled state.
115-126: Consistent role selection logic!The
toggleRoleandisRoleSelectedfunctions correctly use theroleIdsref, maintaining consistency with the separated role management approach.src/shared/composables/useToast.ts (6)
3-8: Well-defined Toast interface!The interface clearly defines the toast structure with proper typing, including the union type for toast types and optional duration.
10-10: Appropriate reactive state management!Using a reactive ref for the toasts array provides proper reactivity for UI components consuming the toast data.
13-27: Excellent toast creation and auto-removal logic!The
showToastfunction has sensible defaults, uses timestamp-based IDs for uniqueness, and implements auto-removal with conditional timeout handling. Theduration > 0check allows for persistent toasts when needed.
29-34: Clean toast removal implementation!The
removeToastfunction efficiently finds and removes toasts by ID with proper array manipulation.
36-50: Useful convenience functions!The type-specific functions (
showSuccess,showError, etc.) provide a better developer experience by reducing boilerplate code.
52-61: Complete and well-structured API!The return object provides access to all necessary functions and state, creating a comprehensive toast notification system.
src/features/admin/types/settings.ts (1)
1-33: Well-structured comprehensive admin settings interface.The
AdminSettingsinterface provides a comprehensive foundation for admin configuration with logical grouping of related settings. The optional email properties are appropriately marked.src/features/admin/store/settings.ts (2)
12-22: Excellent error handling and loading state management.The
fetchSettingsaction properly manages loading state and provides user feedback through toast notifications. The error handling is comprehensive.
39-59: Good SMTP testing implementation with proper user feedback.The
testSmtpConnectionaction handles both success and failure cases well, providing appropriate user feedback through toast notifications.src/features/users/api.ts (4)
87-95: Excellent JSDoc documentation with clear parameter descriptions.The JSDoc comments provide comprehensive documentation including endpoint details, parameter descriptions, and return value information. This greatly improves API usability.
112-127: Well-designed soft delete with optional metadata.The updated
deleteUserfunction properly supports optional deletion metadata (reason/details) while maintaining backward compatibility. The JSDoc clearly indicates this is a soft delete operation.
160-179: Excellent bulk activation implementation with proper typing.The
bulkActivateUsersfunction follows good API design patterns with proper TypeScript typing and clear documentation. The bulk operation will improve user management efficiency.
25-32: Endpoint naming is consistent with existing user routesThe API uniformly uses singular
/userpaths (e.g., listing, current-user, password reset). The newPOST /user/admin/createfollows this same pattern. No changes required.• src/features/users/api.ts:
– GET/user
– GET/user/me
– PATCH/user/me/reset-password
– PATCH/user/me/update-account
– DELETE/user/me/delete-account
– POST/user/admin/createsrc/locales/en.json (3)
869-894: Comprehensive user management localization with clear messaging.The new user management strings provide excellent coverage for inactive user handling, bulk operations, and user lifecycle management. The messaging is clear and user-friendly.
1352-1435: Well-structured admin settings localization with logical grouping.The new admin settings section is excellently organized with logical grouping by functionality (security, system, email, backup, logging). The descriptions are clear and help users understand each setting's purpose.
1524-1526: Verify backend entity type definitionsPlease confirm that the new entity types introduced in your locale file align with the backend’s event history schema and naming conventions:
• Ensure the backend defines and accepts exactly “server-priority” and “group_server” as valid entity types in its event definitions or enums.
• Confirm the event history system (API and DB) properly records and surfaces events for these entity types.
• Verify that any frontend code invoking these keys (e.g. calls to your i18nt('server-priority')ort('group_server')) corresponds to real backend responses.src/features/users/components/InactiveUsersSection.vue (4)
1-28: Excellent TypeScript setup with proper composition API patterns.The component uses Vue 3 Composition API correctly with proper TypeScript typing for props and emits. The event definitions are well-structured.
30-46: Well-implemented reactive selection state with computed properties.The selection logic using
Setfor selected users and computed properties forallSelectedandsomeSelectedis efficient and provides good user experience for bulk operations.
104-134: Excellent accessibility implementation with proper ARIA attributes.The checkbox implementation with indeterminate state and proper labeling provides good accessibility. The bulk action button appears contextually when users are selected.
223-236: Smooth CSS transitions with proper overflow handling.The expand/collapse transition is well-implemented with proper max-height and opacity changes. The overflow handling prevents layout issues during transitions.
src/features/admin/api/settings.ts (3)
1-8: LGTM! Clean API structure with proper typing.The
getSettingsmethod follows standard RESTful patterns with appropriate return type and async/await usage.
10-15: Good use of partial typing for updates.The
updateSettingsmethod correctly usesPartial<AdminSettings>for flexible updates, allowing clients to send only the fields they want to modify.
33-43: Well-structured backup listing with proper typing.The
getBackupsmethod provides a comprehensive backup structure with proper TypeScript typing for the response.src/locales/fr.json (5)
869-894: Excellent comprehensive user management translations.The new user management translations provide thorough coverage for inactive users, bulk activation, and user deletion workflows. The translations are consistent and professional.
1327-1330: Good addition of time unit translations.The new time unit translations (hour, hours, days) provide proper support for various UI elements throughout the application.
1348-1431: Comprehensive admin settings localization.The new admin namespace provides extensive translations for all administrative settings including security, system, email, backup, and logging configurations. The structure is well-organized and consistent.
1520-1522: Proper extension of history entities.The addition of new entity types "server-priority" and "group_server" properly extends the administration history tracking capabilities.
1653-1657: Good group management enhancements.The new group-related translations support enhanced group editing functionality and provide proper messaging for empty states.
src/features/admin/views/AdminSettingsView.vue (1)
133-862: Well-structured admin settings interface!The component provides a comprehensive and user-friendly administrative settings interface with:
- Clear section organization
- Proper accessibility labels
- Consistent dark mode support
- Smooth transitions between sections
Great implementation of the settings UI.
src/features/settings/views/SettingsView.vue (2)
125-595: Excellent refactoring to use the centralized SettingsLayout component!The refactoring successfully:
- Reduces code duplication by using the shared layout component
- Maintains all existing functionality
- Improves UI consistency across sections
- Properly uses Vue's scoped slot pattern
This is a clean implementation that aligns well with the broader administrative settings feature.
117-121: Don’t removeinitializeSection– it’s required for default section selection
- The
SettingsLayoutcomponent only exposesinitializeSectionand does not call it internally on mount.- Without invoking
initializeSection(settingSections),activeSectionremains''and no section would be selected or rendered by default.- Keep the
onMountedcall to ensure the first section is activated when the view loads.Likely an incorrect or invalid review comment.
src/features/users/views/UserListView.vue (2)
183-197: Good error handling implementation!The enhanced error handling in
handleToggleUserStatusproperly:
- Shows success messages for both activation and deactivation
- Extracts meaningful error messages from API responses
- Falls back to a generic error message when needed
This provides better user feedback.
263-311: Excellent implementation of active/inactive user separation!The UI enhancements successfully:
- Clearly separate active and inactive users
- Provide bulk activation capabilities
- Display user counts with visual badges
- Maintain consistent styling with the design system
The component structure properly delegates functionality to specialized components while maintaining clean separation of concerns.
| const activeView = ref<'cards' | 'flow'>('cards'); | ||
|
|
||
| const { fitView } = useVueFlow(); | ||
| const { fitView, viewportInitialized } = useVueFlow(); |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Critical: viewportInitialized property doesn't exist on VueFlowStore.
The static analysis indicates that viewportInitialized is not available on the VueFlowStore type, which will cause a runtime error.
Please verify the correct API for Vue Flow viewport initialization:
🏁 Script executed:
#!/bin/bash
# Check the Vue Flow documentation and API for viewport initialization
rg -A 10 -B 5 "viewportInitialized\|viewport.*initialized" --type ts --type vueLength of output: 109
🌐 Web query:
What is the correct API for detecting Vue Flow viewport initialization in @vue-flow/core?
💡 Result:
To detect the initialization of the viewport in Vue Flow using @vue-flow/core, you can utilize the onPaneReady event. This event is emitted when the Vue Flow pane is ready, providing access to the Vue Flow instance, which allows you to perform actions like fitting the view to the nodes.
Using the onPaneReady Event:
You can listen to the paneReady event on the VueFlow component to access the instance and perform actions upon initialization.
<template>
<VueFlow @paneReady="onPaneReady" />
</template>
<script setup>
import { VueFlow } from '@vue-flow/core';
function onPaneReady(instance) {
// Perform actions with the instance
instance.fitView();
}
</script>In this example, the onPaneReady method is called when the pane is ready, and the fitView method is invoked to adjust the viewport to fit all nodes. (vueflow.dev)
Using the useVueFlow Composable:
Alternatively, you can use the useVueFlow composable to access the Vue Flow instance and its methods.
<script setup>
import { useVueFlow } from '@vue-flow/core';
const { onPaneReady } = useVueFlow();
onPaneReady((instance) => {
// Perform actions with the instance
instance.fitView();
});
</script>Here, the onPaneReady function from useVueFlow is used to access the instance and call the fitView method upon initialization. (vueflow.dev)
By utilizing the onPaneReady event or the useVueFlow composable, you can effectively detect the initialization of the viewport and perform necessary actions in your Vue Flow application.
Citations:
- 1: https://vueflow.dev/guide/utils/instance.html?utm_source=openai
- 2: https://vueflow.dev/guide/utils/instance.html?utm_source=openai
Critical: Replace nonexistent viewportInitialized with onPaneReady for viewport setup
The useVueFlow composable does not expose a viewportInitialized property. To trigger viewport actions once the pane is ready, use its onPaneReady callback instead:
- File:
src/features/rooms/views/RoomDetails.vue, around line 42 - Update your code as follows:
- const { fitView, viewportInitialized } = useVueFlow();
+ const { fitView, onPaneReady } = useVueFlow();
- if (viewportInitialized.value) {
- fitView();
- }
+ onPaneReady((instance) => {
+ instance.fitView();
+ });This ensures fitView() is called when the Vue Flow pane is initialized.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { fitView, viewportInitialized } = useVueFlow(); | |
| // Before (around line 42) | |
| - const { fitView, viewportInitialized } = useVueFlow(); | |
| - | |
| - if (viewportInitialized.value) { | |
| - fitView(); | |
| - } | |
| // After | |
| const { fitView, onPaneReady } = useVueFlow(); | |
| onPaneReady((instance) => { | |
| instance.fitView(); | |
| }); |
🧰 Tools
🪛 GitHub Check: build
[failure] 42-42:
Property 'viewportInitialized' does not exist on type 'VueFlowStore'.
🤖 Prompt for AI Agents
In src/features/rooms/views/RoomDetails.vue at line 42, replace the nonexistent
`viewportInitialized` property from `useVueFlow` with the `onPaneReady`
callback. Remove `viewportInitialized` from the destructuring and instead use
`onPaneReady` to register a callback that calls `fitView()` when the pane is
ready, ensuring proper viewport setup.
| try { | ||
| const userResponse = await getUsersByRole(role.id); | ||
| const userData = userResponse?.data || []; | ||
| const userData = userResponse || []; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify API response structure change is consistent.
The change from userResponse.data to userResponse suggests the API now returns data directly. Ensure this aligns with the actual API implementation in getUsersByRole function.
🏁 Script executed:
#!/bin/bash
# Description: Verify getUsersByRole API response structure is consistent with this change
# Search for getUsersByRole function implementation
ast-grep --pattern 'getUsersByRole($_) {
$$$
}'
# Search for other usages of getUsersByRole to ensure consistency
rg -A 5 "getUsersByRole"Length of output: 4877
🏁 Script executed:
#!/bin/bash
set -e
echo "=> getUsersByRole implementation in api.ts"
rg -n "export const getUsersByRole" -A 15 src/features/roles/api.ts || true
echo
echo "=> Test mocks for getUsersByRole in store.test.ts"
rg -n "mockedGetUsersByRole" -A 5 src/features/roles/store.test.ts || trueLength of output: 4070
Tests must mock getUsersByRole to return raw data, not an AxiosResponse.
The getUsersByRole API helper now returns response.data (an array of UserWithPresenceDto[]), so in store.ts using userResponse directly is correct. However, in your tests you’re still mocking it with createMockAxiosResponse(...), which returns an object with a .data property—causing userResponse to be that object instead of the array.
Please update all mockedGetUsersByRole.mockResolvedValue calls in src/features/roles/store.test.ts to resolve with the raw array:
• File: src/features/roles/store.test.ts
– Replace every
ts mockedGetUsersByRole.mockResolvedValue(createMockAxiosResponse(mockUsers));
with
ts mockedGetUsersByRole.mockResolvedValue(mockUsers);
• Likewise, for other tests that use createMockAxiosResponse([]) for getUsersByRole, change to mockResolvedValue([]).
This will align your mocks with the actual return type and fix the failing assertions on userCount and rolesWithUsers.
🤖 Prompt for AI Agents
In src/features/roles/store.test.ts, update all instances where
mockedGetUsersByRole.mockResolvedValue is called with
createMockAxiosResponse(mockUsers) or createMockAxiosResponse([]). Replace these
calls to directly resolve with the raw array mockUsers or an empty array []
respectively, instead of an AxiosResponse object. This change aligns the mocks
with the actual return type of getUsersByRole, which returns response.data (an
array), ensuring the tests correctly simulate the API behavior and fix assertion
failures.
| isActive: boolean; | ||
| isOnline?: boolean; | ||
| isVerified: boolean; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify property renaming consistency across the codebase.
The renaming from active to isActive and addition of isOnline and isVerified properties improve the interface clarity. However, ensure all references to the old active property are updated throughout the codebase.
🏁 Script executed:
#!/bin/bash
# Description: Verify all references to the old 'active' property are updated
# Search for any remaining references to '.active' property on user objects
rg -n "\.active\b" --type ts --type vue
# Search for 'active:' property definitions that might have been missed
rg -n "active\s*:" --type ts --type vueLength of output: 139
🏁 Script executed:
#!/bin/bash
# Re-verify all references to the old 'active' property without relying on rg's built-in file types
# Search for any remaining '.active' usages in .ts, .tsx, and .vue files
rg -n "\.active\b" -g "*.{ts,tsx,vue}"
# Search for 'active:' property definitions in .ts, .tsx, and .vue files
rg -n "active\s*:" -g "*.{ts,tsx,vue}"Length of output: 3896
Update remaining user.active references to user.isActive.
The search uncovered several places where the old active property is still used on User objects. Please update these to isActive to match the renamed interface:
- src/features/users/components/UserTable.vue:45
Change:pulse="user.active"→:pulse="user.isActive" - src/features/users/components/UserCard.vue:6
Change:pulse="user.active"→:pulse="user.isActive" - src/features/history/components/HistoryEventDetail.vue:492
Changev-if="event.user.active"→v-if="event.user.isActive" - src/features/roles/store.test.ts:55, 63
In test fixtures, replaceactive: truewithisActive: true
🤖 Prompt for AI Agents
In src/features/users/components/UserTable.vue line 45,
src/features/users/components/UserCard.vue line 6,
src/features/history/components/HistoryEventDetail.vue line 492, and
src/features/roles/store.test.ts lines 55 and 63, update all references to the
old user property `active` to the new property name `isActive`. Specifically,
replace `user.active` with `user.isActive` in the Vue components and change
`active: true` to `isActive: true` in the test fixtures to ensure consistency
with the updated interface.
| import { defineStore } from 'pinia'; | ||
| import { ref } from 'vue'; | ||
| import { adminSettingsApi } from '../api/settings'; | ||
| import type { AdminSettings } from '../types/settings'; | ||
| import { useToast } from 'vue-toast-notification'; | ||
|
|
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify toast import - potential inconsistency.
The import uses vue-toast-notification but the AI summary mentions a custom useToast composable. Ensure this is the correct import or if it should be using the custom composable mentioned in the summary.
🏁 Script executed:
#!/bin/bash
# Check if there's a custom useToast composable in the shared directory
fd -t f "useToast" --exec cat {}Length of output: 2395
#!/bin/bash
# List all files named useToast* to determine their paths
echo "Found useToast files:"
fd -t f useToast*🏁 Script executed:
#!/usr/bin/env bash
# Check if vue-toast-notification is declared in package.json
echo "Checking for vue-toast-notification in package.json:"
grep -n '"vue-toast-notification"' package.json || echo "Not found"
echo
# List all custom useToast files in the repo
echo "Custom useToast files found:"
fd -t f useToast
echo
# Show where useToast is imported within src
echo "Imports of useToast in source files:"
rg -n "import .*useToast" srcLength of output: 3902
Switch to the app’s custom useToast composable for consistency
The admin settings store should use our shared/event‐based useToast (as in other stores) rather than importing directly from the library:
• File: src/features/admin/store/settings.ts
– Change:
diff - import { useToast } from 'vue-toast-notification'; + import { useToast } from '@/composables/useToast';
This aligns with other stores (e.g. dashboard/store.ts) and ensures all toasts flow through our ToastContainer.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { defineStore } from 'pinia'; | |
| import { ref } from 'vue'; | |
| import { adminSettingsApi } from '../api/settings'; | |
| import type { AdminSettings } from '../types/settings'; | |
| import { useToast } from 'vue-toast-notification'; | |
| import { defineStore } from 'pinia'; | |
| import { ref } from 'vue'; | |
| import { adminSettingsApi } from '../api/settings'; | |
| import type { AdminSettings } from '../types/settings'; | |
| - import { useToast } from 'vue-toast-notification'; | |
| + import { useToast } from '@/composables/useToast'; |
🤖 Prompt for AI Agents
In src/features/admin/store/settings.ts lines 1 to 6, replace the direct import
of useToast from 'vue-toast-notification' with an import of the app's custom
useToast composable used elsewhere in the app (e.g., from a shared or common
composables directory). This ensures toast notifications are consistent and flow
through the app's centralized ToastContainer as in other stores like
dashboard/store.ts.
| <script setup lang="ts"> | ||
| import { ref } from 'vue'; | ||
| import ToggleSwitch from '@/shared/components/ToggleSwitch.vue'; | ||
| import { useToast } from 'vue-toast-notification'; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Use the project's custom toast composable for consistency.
The import should use the project's custom useToast composable instead of the external library to maintain consistency with other components like UserListView.vue.
-import { useToast } from 'vue-toast-notification';
+import { useToast } from '@/composables/useToast';🏁 Script executed:
#!/bin/bash
# Description: Verify the correct import path for useToast composable
# Find the actual useToast composable location
fd -t f "useToast" --exclude node_modules | grep -E "\.(ts|js)$"
# Check how other components import useToast
rg "import.*useToast.*from" --type vue -A 1Length of output: 201
🏁 Script executed:
#!/bin/bash
# Check how useToast is imported across Vue components
rg "import.*useToast.*from" -g '*.vue'Length of output: 3109
🏁 Script executed:
#!/bin/bash
# Inspect the contents of both useToast composable implementations
echo "=== src/composables/useToast.ts ==="
sed -n '1,20p' src/composables/useToast.ts 2>/dev/null || echo "File not found"
echo ""
echo "=== src/shared/composables/useToast.ts ==="
sed -n '1,20p' src/shared/composables/useToast.ts 2>/dev/null || echo "File not found"Length of output: 1184
Use the shared useToast composable for consistency.
The project provides two custom implementations (src/composables/useToast.ts and src/shared/composables/useToast.ts), but most components that render toasts (e.g. ToastContainer.vue) consume the shared version. Update your import accordingly:
-import { useToast } from 'vue-toast-notification';
+import { useToast } from '@/shared/composables/useToast';- File:
src/features/admin/views/AdminSettingsView.vue - Line: 4
This ensures your component’s toasts hook into the centralized toast container.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { useToast } from 'vue-toast-notification'; | |
| import { useToast } from '@/shared/composables/useToast'; |
🤖 Prompt for AI Agents
In src/features/admin/views/AdminSettingsView.vue at line 4, the import
statement currently uses 'vue-toast-notification' directly. Replace this import
with the shared useToast composable from 'src/shared/composables/useToast.ts' to
ensure toast notifications are consistent and integrated with the centralized
toast container used across the project.
| console.log('handleDeleteUser called with user:', user); | ||
| selectedUser.value = user; | ||
| console.log('selectedUser.value after assignment:', selectedUser.value); | ||
| isDeleteModalOpen.value = true; |
There was a problem hiding this comment.
Remove debug console.log statements.
Debug logging should be removed before merging to production.
const handleDeleteUser = async (user: User) => {
- console.log('handleDeleteUser called with user:', user);
selectedUser.value = user;
- console.log('selectedUser.value after assignment:', selectedUser.value);
isDeleteModalOpen.value = true;
closeActionsModal();
};
const handleConfirmDelete = async (data: {
userId: string;
reason?: string;
details?: string;
}) => {
- console.log('handleConfirmDelete called with data:', data);
try {Also applies to: 92-92
🤖 Prompt for AI Agents
In src/features/users/views/UserListView.vue around lines 80 to 83 and line 92,
remove all console.log statements used for debugging. These debug logs should be
deleted to clean up the code before merging to production.
jabibamman
force-pushed
the
feat/user-admin
branch
from
2f49201 to
1dea401
Compare
1 participant
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
Documentation
Chores