user view ing...

src/app/mock-api/common/navigation/data.ts

@@ -46,6 +46,13 @@ export const defaultNavigation: FuseNavigationItem[] = [
         icon: 'heroicons_outline:academic-cap',
         link: '/member/user',
       },
+      {
+        id: 'member.user_view',
+        title: 'User-view',
+        type: 'basic',
+        icon: 'heroicons_outline:academic-cap',
+        link: '/member/user/view',
+      },
     ],
   },
 ];

src/app/modules/admin/member/user/components/index.ts

@@ -0,0 +1,4 @@
+import { ListComponent } from './list.component';
+import { ViewComponent } from './view.component';
+
+export const COMPONENTS = [ListComponent, ViewComponent];

src/app/modules/admin/member/user/components/view.component.html

@@ -0,0 +1,36 @@
+<p>view compoent</p>
+<div
+  class="sm:absolute sm:inset-0 flex flex-col flex-auto min-w-0 sm:overflow-hidden bg-card dark:bg-transparent"
+>
+  <!-- Header -->
+  <div
+    class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b"
+  >
+    <!-- Loader -->
+    <!-- <div class="absolute inset-x-0 bottom-0" *ngIf="isLoading">
+      <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar> -->
+    <!-- </div> -->
+    <!-- Title -->
+    <div class="text-4xl font-extrabold tracking-tight">User View</div>
+    <!-- Actions -->
+    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"></div>
+  </div>
+
+  <!-- Main -->
+  <div class="flex flex-auto overflow-hidden">
+    <!-- Products list -->
+    <div
+      class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
+    >
+      <ng-container *ngIf="true"> ddddd</ng-container>
+
+      <ng-template #noUser>
+        <div
+          class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+        >
+          There are no user!
+        </div>
+      </ng-template>
+    </div>
+  </div>
+</div>

src/app/modules/admin/member/user/components/view.component.ts

@@ -0,0 +1,190 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  Validators,
+} from '@angular/forms';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import {
+  debounceTime,
+  map,
+  merge,
+  Observable,
+  Subject,
+  switchMap,
+  takeUntil,
+} from 'rxjs';
+import { fuseAnimations } from '@fuse/animations';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
+
+import { User } from '../models/user';
+import { UserPagination } from '../models/user-pagination';
+import { UserService } from '../services/user.service';
+
+@Component({
+  selector: 'user-view',
+  templateUrl: './view.component.html',
+  styles: [
+    /* language=SCSS */
+    `
+      .inventory-grid {
+        grid-template-columns: 48px auto 40px;
+
+        @screen sm {
+          grid-template-columns: 48px auto 112px 72px;
+        }
+
+        @screen md {
+          grid-template-columns: 48px 112px auto 112px 72px;
+        }
+
+        @screen lg {
+          grid-template-columns: 48px 112px auto 112px 96px 96px 72px;
+        }
+      }
+    `,
+  ],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: fuseAnimations,
+})
+export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild(MatPaginator) private _paginator!: MatPaginator;
+  @ViewChild(MatSort) private _sort!: MatSort;
+
+  users$!: Observable<User[] | undefined>;
+
+  isLoading = false;
+  searchInputControl = new FormControl();
+  selectedUser?: User;
+  pagination?: UserPagination;
+
+  private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+  /**
+   * Constructor
+   */
+  constructor(
+    private _changeDetectorRef: ChangeDetectorRef,
+    private _fuseConfirmationService: FuseConfirmationService,
+    private _formBuilder: FormBuilder,
+    private _userService: UserService
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
+  ngOnInit(): void {
+    // Get the pagination
+    this._userService.pagination$
+      .pipe(takeUntil(this._unsubscribeAll))
+      .subscribe((pagination: UserPagination | undefined) => {
+        // Update the pagination
+        this.pagination = pagination;
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+      });
+
+    // Get the products
+    this.users$ = this._userService.users$;
+  }
+
+  /**
+   * After view init
+   */
+  ngAfterViewInit(): void {
+    if (this._sort && this._paginator) {
+      // Set the initial sort
+      this._sort.sort({
+        id: 'name',
+        start: 'asc',
+        disableClear: true,
+      });
+
+      // Mark for check
+      this._changeDetectorRef.markForCheck();
+
+      // If the user changes the sort order...
+      this._sort.sortChange
+        .pipe(takeUntil(this._unsubscribeAll))
+        .subscribe(() => {
+          // Reset back to the first page
+          this._paginator.pageIndex = 0;
+        });
+
+      // Get products if sort or page changes
+      merge(this._sort.sortChange, this._paginator.page)
+        .pipe(
+          switchMap(() => {
+            this.isLoading = true;
+            return this._userService.getUsers(
+              this._paginator.pageIndex,
+              this._paginator.pageSize,
+              this._sort.active,
+              this._sort.direction
+            );
+          }),
+          map(() => {
+            this.isLoading = false;
+          })
+        )
+        .subscribe();
+    }
+  }
+
+  /**
+   * On destroy
+   */
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this._unsubscribeAll.next(null);
+    this._unsubscribeAll.complete();
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Private methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Create product
+   */
+  __createProduct(): void {}
+
+  /**
+   * Toggle product details
+   *
+   * @param productId
+   */
+  __toggleDetails(productId: string): void {}
+
+  /**
+   * Track by function for ngFor loops
+   *
+   * @param index
+   * @param item
+   */
+  __trackByFn(index: number, item: any): any {
+    return item.id || index;
+  }
+}

src/app/modules/admin/member/user/user.module.ts

@@ -13,11 +13,13 @@ import { MatSortModule } from '@angular/material/sort';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { SharedModule } from 'app/shared/shared.module';
-import { ListComponent } from 'app/modules/admin/member/user/components/list.component';
+
+import { COMPONENTS } from './components';
+
 import { userRoutes } from 'app/modules/admin/member/user/user.routing';
 
 @NgModule({
-  declarations: [ListComponent],
+  declarations: [COMPONENTS],
   imports: [
     TranslocoModule,
     SharedModule,

src/app/modules/admin/member/user/user.routing.ts

@@ -1,6 +1,7 @@
 import { Route } from '@angular/router';
 
 import { ListComponent } from 'app/modules/admin/member/user/components/list.component';
+import { ViewComponent } from 'app/modules/admin/member/user/components/view.component';
 
 import { UsersResolver } from './resolvers/user.resolver';
 
@@ -12,4 +13,8 @@ export const userRoutes: Route[] = [
       users: UsersResolver,
     },
   },
+  {
+    path: 'view',
+    component: ViewComponent,
+  },
 ];

src/assets/i18n/en.json

@@ -1,5 +1,10 @@
 {
   "welcome-back": "Welcome back",
+  "Dashboards": "Dashboards",
+  "Member": "Member",
+  "User": "User",
+  "User-view": "User View",
   "Project": "Project",
+  "Partner": "Partner",
   "Analytics": "Analytics"
 }

src/assets/i18n/ko.json

@@ -3,6 +3,7 @@
   "Dashboards": "대쉬보드",
   "Member": "회원",
   "User": "사용자",
+  "User-view": "사용자 상세보기",
   "Project": "프로젝트",
   "Partner": "파트너",
   "Analytics": "Analytics"