From d7ea931391e247cee3879a3794c6fa3bc9031251 Mon Sep 17 00:00:00 2001
From: HarjobandeepSingh <harjobandeepsinghbudhal@gmail.com>
Date: Tue, 28 Oct 2025 21:33:34 +0530
Subject: [PATCH] Implement proper path segment routing for user detail dialog

- Restore path segment routing: /admin/users/{userId}
- Add runGuardsAndResolvers to handle component reuse
- Move route parameter handling to ngOnInit for proper timing
- Make fetchUsers return Promise to handle async data loading
- Ensure dialog opens correctly even when component is reused
- Follows original requirement: query params -> path segments
---
 .../admin-users/admin-users.component.ts      | 72 ++++++++++---------
 .../src/app/pages/admin/admin-page.routes.ts  |  6 ++
 2 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/apps/client/src/app/components/admin-users/admin-users.component.ts b/apps/client/src/app/components/admin-users/admin-users.component.ts
index 2c31bd0ed..646c914b8 100644
--- a/apps/client/src/app/components/admin-users/admin-users.component.ts
+++ b/apps/client/src/app/components/admin-users/admin-users.component.ts
@@ -133,13 +133,6 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       ];
     }
 
-    this.route.queryParams
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((params) => {
-        if (params['userId']) {
-          this.openUserDetailDialog(params['userId']);
-        }
-      });
 
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -169,6 +162,23 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
 
   public ngOnInit() {
     this.fetchUsers();
+    
+    // Handle route parameter changes when component is reused
+    this.route.params
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((params) => {
+        if (params['userId']) {
+          // If data is already loaded, open dialog immediately
+          if (this.dataSource.data.length > 0) {
+            this.openUserDetailDialog(params['userId']);
+          } else {
+            // If data is not loaded yet, wait for it to load
+            this.fetchUsers().then(() => {
+              this.openUserDetailDialog(params['userId']);
+            });
+          }
+        }
+      });
   }
 
   public formatDistanceToNow(aDateString: string) {
@@ -245,10 +255,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
   }
 
   public onOpenUserDetailDialog(userId: string) {
-    this.router.navigate([], {
-      relativeTo: this.route,
-      queryParams: { userId }
-    });
+    this.router.navigate(['./', userId], { relativeTo: this.route });
   }
 
   public ngOnDestroy() {
@@ -256,27 +263,30 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
     this.unsubscribeSubject.complete();
   }
 
-  private fetchUsers({ pageIndex }: { pageIndex: number } = { pageIndex: 0 }) {
+  private fetchUsers({ pageIndex }: { pageIndex: number } = { pageIndex: 0 }): Promise<void> {
     this.isLoading = true;
 
     if (pageIndex === 0 && this.paginator) {
       this.paginator.pageIndex = 0;
     }
 
-    this.adminService
-      .fetchUsers({
-        skip: pageIndex * this.pageSize,
-        take: this.pageSize
-      })
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ count, users }) => {
-        this.dataSource = new MatTableDataSource(users);
-        this.totalItems = count;
-
-        this.isLoading = false;
-
-        this.changeDetectorRef.markForCheck();
-      });
+    return new Promise((resolve) => {
+      this.adminService
+        .fetchUsers({
+          skip: pageIndex * this.pageSize,
+          take: this.pageSize
+        })
+        .pipe(takeUntil(this.unsubscribeSubject))
+        .subscribe(({ count, users }) => {
+          this.dataSource = new MatTableDataSource(users);
+          this.totalItems = count;
+
+          this.isLoading = false;
+
+          this.changeDetectorRef.markForCheck();
+          resolve();
+        });
+    });
   }
 
   private openUserDetailDialog(userId: string) {
@@ -285,10 +295,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
     });
 
     if (!userData) {
-      this.router.navigate([], {
-        relativeTo: this.route,
-        queryParams: {}
-      });
+      this.router.navigate(['../'], { relativeTo: this.route });
       return;
     }
 
@@ -308,10 +315,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
         this.fetchUsers();
-        this.router.navigate([], {
-          relativeTo: this.route,
-          queryParams: {}
-        });
+        this.router.navigate(['../'], { relativeTo: this.route });
       });
   }
 }
diff --git a/apps/client/src/app/pages/admin/admin-page.routes.ts b/apps/client/src/app/pages/admin/admin-page.routes.ts
index 956e12c9a..5c059a841 100644
--- a/apps/client/src/app/pages/admin/admin-page.routes.ts
+++ b/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,