update breadcrumb and create account module

src/app/domains/superAdmin/users/views/accounts/index.ts

@@ -0,0 +1 @@
+export * from './list.component';

src/app/domains/superAdmin/users/views/accounts/list.component.html

@@ -0,0 +1 @@
+<superAdmin-user-account-list [userId]="userId()" />

src/app/domains/superAdmin/users/views/accounts/list.component.ts

@@ -0,0 +1,15 @@
+// import { CatalogRoleTagComponent } from '@/shared/catalog/roles';
+import { Component, inject, signal } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { UsersComponent } from '../../components/accounts/list.component';
+
+@Component({
+  selector: 'superAdmin-user-accounts',
+  templateUrl: './list.component.html',
+  imports: [UsersComponent],
+})
+export class UserAccountsComponent {
+  private readonly route = inject(ActivatedRoute);
+
+  userId = signal<string>(this.route.snapshot.params['userId']);
+}

src/app/domains/superAdmin/users/views/index.ts

@@ -1,2 +1,3 @@
+export * from './accounts';
 export * from './list.component';
 export * from './single.component';

src/app/domains/superAdmin/users/views/list.component.html

@@ -9,10 +9,15 @@
   [loading]="loading()"
   [showDetails]="true"
   [showAdd]="true"
+  [showEdit]="true"
   (onAdd)="openAddForm()"
->
-  <!-- <ng-template #role let-data>
-    <catalog-role-tag [role]="data.role" />
-  </ng-template> -->
-</app-page-data-list>
-<user-form [(visible)]="visibleForm" (onSubmit)="refresh()" />
+  (onEdit)="onEditClick($event)"
+  (onDetails)="toSinglePage($event)"
+/>
+<superAdmin-user-form
+  [(visible)]="visibleForm"
+  [editMode]="editMode()"
+  [initialValues]="selectedItemForEdit() || undefined"
+  [userId]="selectedItemForEdit()?.id || ''"
+  (onSubmit)="refresh()"
+/>

src/app/domains/superAdmin/users/views/list.component.ts

@@ -2,17 +2,20 @@
 import { AbstractList } from '@/shared/abstractClasses/abstract-list';
 import { PageDataListComponent } from '@/shared/components/pageDataList/page-data-list.component';
 import { Component, inject } from '@angular/core';
-import { UserFormComponent } from '../components/form.component';
+import { Router } from '@angular/router';
+import { UserAccountFormComponent } from '../components/form.component';
+import { usersNamedRoutes } from '../constants';
 import { IUserResponse } from '../models';
 import { UsersService } from '../services/main.service';
 
 @Component({
-  selector: 'app-users',
+  selector: 'superAdmin-users',
   templateUrl: './list.component.html',
-  imports: [PageDataListComponent, UserFormComponent],
+  imports: [PageDataListComponent, UserAccountFormComponent],
 })
 export class UsersComponent extends AbstractList<IUserResponse> {
   private readonly service = inject(UsersService);
+  private readonly router = inject(Router);
 
   override setColumns(): void {
     this.columns = [
@@ -31,4 +34,8 @@ export class UsersComponent extends AbstractList<IUserResponse> {
   override getDataRequest() {
     return this.service.getAll();
   }
+
+  toSinglePage(item: IUserResponse) {
+    this.router.navigateByUrl(usersNamedRoutes.user.meta.pagePath!(item.id));
+  }
 }

src/app/domains/superAdmin/users/views/single.component.html

@@ -1 +1,20 @@
-<div class=""></div>
+<div class="flex flex-col gap-6">
+  <app-card-data cardTitle="اطلاعات کاربر" [editable]="true" [(editMode)]="editMode">
+    <div class="flex flex-col gap-4">
+      <div class="grid grid-cols-3 gap-4 items-center">
+        <app-key-value label="نام" [value]="user()?.fullname" />
+        <app-key-value label="شماره تماس" [value]="user()?.mobile_number" />
+      </div>
+    </div>
+  </app-card-data>
+
+  <superAdmin-user-account-list [userId]="userId()" />
+
+  <superAdmin-user-form
+    [(visible)]="editMode"
+    [editMode]="true"
+    [userId]="userId()"
+    [initialValues]="user() || undefined"
+    (onSubmit)="getData()"
+  />
+</div>

src/app/domains/superAdmin/users/views/single.component.ts

@@ -1,9 +1,54 @@
-import { Component } from '@angular/core';
+import { BreadcrumbService } from '@/core/services';
+import { AppCardComponent, KeyValueComponent } from '@/shared/components';
+import { Component, computed, effect, inject, signal } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { UsersComponent } from '../components/accounts/list.component';
+import { UserAccountFormComponent } from '../components/form.component';
+import { usersNamedRoutes } from '../constants';
+import { UserStore } from '../store/user.store';
 
 @Component({
-  selector: 'app-user',
+  selector: 'superAdmin-user',
   templateUrl: './single.component.html',
+  imports: [AppCardComponent, KeyValueComponent, UserAccountFormComponent, UsersComponent],
 })
 export class UserComponent {
-  constructor() {}
+  private readonly store = inject(UserStore);
+  private readonly route = inject(ActivatedRoute);
+  private readonly breadcrumbService = inject(BreadcrumbService);
+
+  readonly userId = signal<string>(this.route.snapshot.paramMap.get('userId')!);
+  editMode = signal<boolean>(false);
+
+  readonly loading = computed(() => this.store.loading());
+  readonly user = computed(() => this.store.entity());
+
+  constructor() {
+    effect(() => {
+      if (this.user()?.id) {
+        this.setBreadcrumb();
+      }
+    });
+  }
+
+  async getData() {
+    await this.store.getData(this.userId());
+    this.setBreadcrumb();
+  }
+
+  ngOnInit() {
+    this.getData();
+  }
+
+  setBreadcrumb() {
+    this.breadcrumbService.setItems([
+      {
+        ...usersNamedRoutes.users.meta,
+        routerLink: usersNamedRoutes.users.meta.pagePath!(),
+      },
+      {
+        title: this.user()?.fullname,
+      },
+    ]);
+  }
 }