Task/improve user detail dialog routing in Admin Control panel (#6104)

* Improve user detail dialog routing in Admin Control panel

* Update changelog

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the routing of the user detail dialog in the users section of the admin control panel
 - Lifted the asset profile identifier editing restriction for `MANUAL` data sources in the asset profile details dialog of the admin control panel
 - Improved the language localization for German (`de`)
 - Upgraded `angular` from version `20.2.4` to `20.3.9`

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

@@ -18,6 +18,7 @@ import {
   User
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { internalRoutes } from '@ghostfolio/common/routes/routes';
 import { NotificationService } from '@ghostfolio/ui/notifications';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { GfValueComponent } from '@ghostfolio/ui/value';
@@ -39,7 +40,7 @@ import {
   PageEvent
 } from '@angular/material/paginator';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
 import {
   differenceInSeconds,
@@ -69,7 +70,8 @@ import { takeUntil } from 'rxjs/operators';
     MatMenuModule,
     MatPaginatorModule,
     MatTableModule,
-    NgxSkeletonLoaderModule
+    NgxSkeletonLoaderModule,
+    RouterModule
   ],
   selector: 'gf-admin-users',
   styleUrls: ['./admin-users.scss'],
@@ -88,6 +90,8 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
   public info: InfoItem;
   public isLoading = false;
   public pageSize = DEFAULT_PAGE_SIZE;
+  public routerLinkAdminControlUsers =
+    internalRoutes.adminControl.subRoutes.users.routerLink;
   public totalItems = 0;
   public user: User;
 
@@ -136,11 +140,13 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       ];
     }
 
-    this.route.queryParams
+    this.route.paramMap
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((params) => {
-        if (params['userDetailDialog'] && params['userId']) {
-          this.openUserDetailDialog(params['userId']);
+        const userId = params.get('userId');
+
+        if (userId) {
+          this.openUserDetailDialog(userId);
         }
       });
 
@@ -248,9 +254,9 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
   }
 
   public onOpenUserDetailDialog(userId: string) {
-    this.router.navigate([], {
-      queryParams: { userId, userDetailDialog: true }
-    });
+    this.router.navigate(
+      internalRoutes.adminControl.subRoutes.users.routerLink.concat(userId)
+    );
   }
 
   public ngOnDestroy() {
@@ -301,7 +307,9 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       .afterClosed()
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.router.navigate(['.'], { relativeTo: this.route });
+        this.router.navigate(
+          internalRoutes.adminControl.subRoutes.users.routerLink
+        );
       });
   }
 }

apps/client/src/app/components/admin-users/admin-users.html

@@ -215,9 +215,9 @@
                 <ion-icon name="ellipsis-horizontal" />
               </button>
               <mat-menu #userMenu="matMenu" xPosition="before">
-                <button
+                <a
                   mat-menu-item
-                  (click)="onOpenUserDetailDialog(element.id)"
+                  [routerLink]="routerLinkAdminControlUsers.concat(element.id)"
                 >
                   <span class="align-items-center d-flex">
                     <ion-icon class="mr-2" name="person-outline" />
@@ -225,7 +225,7 @@
                       ><ng-container i18n>View Details</ng-container>...</span
                     >
                   </span>
-                </button>
+                </a>
                 @if (hasPermissionToImpersonateAllUsers) {
                   <button mat-menu-item (click)="onImpersonateUser(element.id)">
                     <span class="align-items-center d-flex">

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

@@ -38,6 +38,11 @@ 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,