Fix user detail dialog routing using query parameters

- Changed from path parameters to query parameters for consistency
- Updated navigation to use queryParams instead of path segments
- Follows same pattern as other admin components in codebase
- Fixes dialog opening issue with component reuse

CHANGELOG.md

@@ -7,17 +7,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
-### Added
-
-- Added a close holding button to the holding detail dialog
-- Extended the user detail dialog in the users section of the admin control panel
-
-### Changed
-
-- Refactored the generation of the holdings table in the _Copy AI prompt to clipboard for analysis_ action on the analysis page (experimental)
-- Refactored the generation of the holdings table in the _Copy portfolio data to clipboard for AI prompt_ action on the analysis page (experimental)
-- Improved the language localization for German (`de`)
-
 ### Fixed
 
 - Ensured the locale is available in the settings dialog to customize the rule thresholds of the _X-ray_ page

apps/client/src/app/components/admin-users/admin-users.component.ts

@@ -133,7 +133,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       ];
     }
 
-    this.route.params
+    this.route.queryParams
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((params) => {
         if (params['userId']) {
@@ -245,7 +245,10 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
   }
 
   public onOpenUserDetailDialog(userId: string) {
-    this.router.navigate(['./', userId], { relativeTo: this.route });
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { userId }
+    });
   }
 
   public ngOnDestroy() {
@@ -276,27 +279,26 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       });
   }
 
-  private openUserDetailDialog(aUserId: string) {
+  private openUserDetailDialog(userId: string) {
     const userData = this.dataSource.data.find(({ id }) => {
-      return id === aUserId;
+      return id === userId;
     });
 
     if (!userData) {
-      this.router.navigate(['../'], { relativeTo: this.route });
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: {}
+      });
       return;
     }
 
-    const dialogRef = this.dialog.open<
+    const dialogRef = this.dialog.open(GfUserDetailDialogComponent, {
-      GfUserDetailDialogComponent,
-      UserDetailDialogParams
-    >(GfUserDetailDialogComponent, {
       autoFocus: false,
       data: {
         userData,
         deviceType: this.deviceType,
-        hasPermissionForSubscription: this.hasPermissionForSubscription,
         locale: this.user?.settings?.locale
-      },
+      } as UserDetailDialogParams,
       height: this.deviceType === 'mobile' ? '98vh' : '60vh',
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'
     });
@@ -306,7 +308,10 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
         this.fetchUsers();
-        this.router.navigate(['../'], { relativeTo: this.route });
+        this.router.navigate([], {
+          relativeTo: this.route,
+          queryParams: {}
+        });
       });
   }
 }

apps/client/src/app/pages/admin/admin-page.routes.ts

@@ -38,11 +38,6 @@ export const routes: Routes = [
         path: internalRoutes.adminControl.subRoutes.users.path,
         component: GfAdminUsersComponent,
         title: internalRoutes.adminControl.subRoutes.users.title
-      },
-      {
-        path: `${internalRoutes.adminControl.subRoutes.users.path}/:userId`,
-        component: GfAdminUsersComponent,
-        title: internalRoutes.adminControl.subRoutes.users.title
       }
     ],
     component: AdminPageComponent,