task(client): improve user detail dialog routing in Admin Control panel

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Upgraded `angular` from version `20.2.4` to `20.3.9`
 - Upgraded `Nx` from version `21.5.1` to `22.0.4`
 - Upgraded `shx` from version `0.3.4` to `0.4.0`
+- Improved user detail dialog routing in the admin control panel
 
 ### Fixed
 

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

@@ -136,10 +136,11 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       ];
     }
 
-    this.route.queryParams
+    this.route.params
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((params) => {
-        if (params['userDetailDialog'] && params['userId']) {
+        if (params['userId']) {
+          // If data is already loaded, open dialog immediately
           this.openUserDetailDialog(params['userId']);
         }
       });
@@ -248,9 +249,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
   }
 
   public onOpenUserDetailDialog(userId: string) {
-    this.router.navigate([], {
-      queryParams: { userId, userDetailDialog: true }
-    });
+    this.router.navigate(['./', userId], { relativeTo: this.route });
   }
 
   public ngOnDestroy() {
@@ -301,7 +300,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       .afterClosed()
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.router.navigate(['.'], { relativeTo: this.route });
+        this.router.navigate(['../'], { relativeTo: this.route });
       });
   }
 }

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

@@ -38,6 +38,12 @@ 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,
+        runGuardsAndResolvers: 'paramsOrQueryParamsChange'
       }
     ],
     component: AdminPageComponent,