회원 리스트 수정

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:4200",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

package-lock.json

@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@agm/core": {
+      "version": "1.0.0-beta.5",
+      "resolved": "https://registry.npmjs.org/@agm/core/-/core-1.0.0-beta.5.tgz",
+      "integrity": "sha512-LVENJqtBZEWpX+uJkGI0zgg+Xkm2KkktQm4ojZozArbeNvQkVL6pqVc04Mme6vvOzwJpD1cET5w4byC8Xaq1QQ=="
+    },
     "@angular-devkit/architect": {
       "version": "0.801.2",
       "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.801.2.tgz",
@@ -1753,6 +1758,11 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angular-in-memory-web-api": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/angular-in-memory-web-api/-/angular-in-memory-web-api-0.8.0.tgz",
+      "integrity": "sha512-2n0YtCLFxZo4JePHvH6q8b7JmBmhZq44Ic8VaBPRSXE4vAmlKXHU+kI2quNa612EAETDRkZcvLOU8K8CkhIZgQ=="
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",

package.json

@@ -33,6 +33,7 @@
     "@ngrx/store": "^8.1.0",
     "@ngx-translate/core": "^11.0.1",
     "@swimlane/ngx-datatable": "^15.0.2",
+    "angular-in-memory-web-api": "0.8.0",
     "d3": "^5.9.7",
     "hammerjs": "^2.0.8",
     "lodash": "^4.17.15",

src/app/app.module.ts

@@ -21,6 +21,7 @@ import { appFuseConfig } from './app.fuse';
 
 import { LayoutModule } from './layout/layout.module';
 
+import { from } from 'rxjs';
 @NgModule({
   imports: [
     BrowserModule,

src/app/navigation/navigation.ts

@@ -21,7 +21,7 @@ export const navigation: FuseNavigation[] = [
         translate: 'NAV.USER.TITLE',
         type: 'item',
         icon: 'email',
-        url: '/pages/users/users',
+        url: '/pages/users/user-list',
         badge: {
           title: '25',
           translate: 'NAV.USER.BADGE',

src/app/pages/users/user/component/user-list.component.html

@@ -6,30 +6,14 @@
   <!-- CENTER -->
   <div class="center">
     <!-- HEADER -->
-    <div
+    <div class="header accent" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
-      class="header accent"
+      fxLayoutAlign.gt-xs="space-between center">
-      fxLayout="column"
-      fxLayoutAlign="center center"
-      fxLayout.gt-xs="row"
-      fxLayoutAlign.gt-xs="space-between center"
-    >
       <!-- APP TITLE -->
-      <div
+      <div class="logo mb-24 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
-        class="logo mb-24 mb-sm-0"
+        <mat-icon class="logo-icon s-32 mr-16" [@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }">
-        fxLayout="row"
-        fxLayoutAlign="start center"
-      >
-        <mat-icon
-          class="logo-icon s-32 mr-16"
-          [@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
-        >
           shopping_basket
         </mat-icon>
-        <span
+        <span class="logo-text h1" [@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }">Users</span>
-          class="logo-text h1"
-          [@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
-          >Users</span
-        >
       </div>
       <!-- / APP TITLE -->
 
@@ -46,38 +30,26 @@
 
     <!-- CONTENT CARD -->
     <div class="content-card">
-      <mat-table
+      <mat-table class="users-table" #table matSort [@animateStagger]="{ value: '50' }" fusePerfectScrollbar>
-        class="users-table"
+        <!-- ID/Nickname Column -->
-        #table
-        matSort
-        [@animateStagger]="{ value: '50' }"
-        fusePerfectScrollbar
-      >
-        <!-- ID Column -->
         <ng-container matColumnDef="id">
-          <mat-header-cell *matHeaderCellDef mat-sort-header
+          <mat-header-cell *matHeaderCellDef mat-sort-header>아이디/닉네임</mat-header-cell>
-            >ID</mat-header-cell
-          >
           <mat-cell *matCellDef="let order">
             <p class="text-truncate">{{ order.id }}</p>
           </mat-cell>
         </ng-container>
 
-        <!-- Reference Column -->
+        <!-- Phone Column -->
-        <ng-container matColumnDef="reference">
+        <ng-container matColumnDef="phone">
-          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>연락처</mat-header-cell>
-            >Reference</mat-header-cell
-          >
           <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
             <p class="text-truncate">{{ order.reference }}</p>
           </mat-cell>
         </ng-container>
 
-        <!-- Name Column -->
+        <!-- Status Column -->
-        <ng-container matColumnDef="customer">
+        <ng-container matColumnDef="status">
-          <mat-header-cell *matHeaderCellDef mat-sort-header
+          <mat-header-cell *matHeaderCellDef mat-sort-header>상태</mat-header-cell>
-            >Customer</mat-header-cell
-          >
           <mat-cell *matCellDef="let order">
             <p class="text-truncate">
               {{ order.customer.firstName }}
@@ -87,10 +59,8 @@
         </ng-container>
 
         <!-- Total Price Column -->
-        <ng-container matColumnDef="total">
+        <ng-container matColumnDef="totalPrice">
-          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>보유금</mat-header-cell>
-            >Total</mat-header-cell
-          >
           <mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
             <p class="total-price text-truncate">
               {{ order.total | currency: 'USD':'symbol' }}
@@ -98,11 +68,9 @@
           </mat-cell>
         </ng-container>
 
-        <!-- Payment Column -->
+        <!-- Point Column -->
-        <ng-container matColumnDef="payment">
+        <ng-container matColumnDef="point">
-          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>포인트</mat-header-cell>
-            >Payment</mat-header-cell
-          >
           <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
             <p class="text-truncate">
               {{ order.payment.method }}
@@ -110,26 +78,89 @@
           </mat-cell>
         </ng-container>
 
-        <!-- Status Column -->
+        <!-- Level Column -->
-        <ng-container matColumnDef="status">
+        <ng-container matColumnDef="level">
-          <mat-header-cell *matHeaderCellDef mat-sort-header
+          <mat-header-cell *matHeaderCellDef mat-sort-header>레벨</mat-header-cell>
-            >Status</mat-header-cell
-          >
           <mat-cell *matCellDef="let order">
-            <p
+            <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
-              class="status text-truncate h6 p-4"
-              [ngClass]="order.status[0].color"
-            >
               {{ order.status[0].name }}
             </p>
           </mat-cell>
         </ng-container>
 
-        <!-- Date Column -->
+        <!-- Charge Money Column -->
-        <ng-container matColumnDef="date">
+        <ng-container matColumnDef="chargeMoney">
-          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
+          <mat-header-cell *matHeaderCellDef mat-sort-header>충전금</mat-header-cell>
-            >Date</mat-header-cell
+          <mat-cell *matCellDef="let order">
-          >
+            <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
+              {{ order.status[0].name }}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Exchange Money Column -->
+        <ng-container matColumnDef="exchangeMoney">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>환전금</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
+              {{ order.status[0].name }}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Revenue Money Column -->
+        <ng-container matColumnDef="revenueMoney">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>수익금</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
+              {{ order.status[0].name }}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Number of Bets Column -->
+        <ng-container matColumnDef="numberOfBets">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>배팅건</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
+              {{ order.status[0].name }}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Referrals Column -->
+        <ng-container matColumnDef="referrals">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>추천수</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
+              {{ order.status[0].name }}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Recommender Column -->
+        <ng-container matColumnDef="recommender">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>추천인</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
+              {{ order.status[0].name }}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Coupon Status Column -->
+        <ng-container matColumnDef="couponStatus">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>쿠폰현황</mat-header-cell>
+          <mat-cell *matCellDef="let order">
+            <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
+              {{ order.status[0].name }}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Register Date Column -->
+        <ng-container matColumnDef="registerDate">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>가입날짜</mat-header-cell>
           <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
             <p class="text-truncate">
               {{ order.date }}
@@ -137,25 +168,34 @@
           </mat-cell>
         </ng-container>
 
-        <mat-header-row
+        <!-- Recent Connect Date Column -->
-          *matHeaderRowDef="displayedColumns; sticky: true"
+        <ng-container matColumnDef="recentConnectDate">
-        ></mat-header-row>
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>최근접속일</mat-header-cell>
+          <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
+            <p class="text-truncate">
+              {{ order.date }}
+            </p>
+          </mat-cell>
+        </ng-container>
 
-        <mat-row
+        <!-- Recent Connect IP Column -->
-          *matRowDef="let order; columns: displayedColumns"
+        <ng-container matColumnDef="recentConnectIp">
-          class="order"
+          <mat-header-cell *matHeaderCellDef mat-sort-header>최근접속IP</mat-header-cell>
-          matRipple
+          <mat-cell *matCellDef="let order">
-          [routerLink]="'/apps/e-commerce/users/' + order.id"
+            <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
-        >
+              {{ order.status[0].name }}
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+
+        <mat-row *matRowDef="let order; columns: displayedColumns" class="order" matRipple
+          [routerLink]="'/apps/e-commerce/users/' + order.id">
         </mat-row>
       </mat-table>
 
-      <mat-paginator
+      <mat-paginator #paginator [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
-        #paginator
-        [pageIndex]="0"
-        [pageSize]="10"
-        [pageSizeOptions]="[5, 10, 25, 100]"
-      >
       </mat-paginator>
     </div>
     <!-- / CONTENT CARD -->

src/app/pages/users/user/component/user-list.component.ts

@@ -16,6 +16,7 @@ import { fuseAnimations } from 'src/@fuse/animations';
 import { FuseUtils } from 'src/@fuse/utils';
 
 import { takeUntil } from 'rxjs/internal/operators';
+import { UserListService } from './user-list.service';
 
 @Component({
   selector: 'app-user-user-list',
@@ -25,14 +26,24 @@ import { takeUntil } from 'rxjs/internal/operators';
   encapsulation: ViewEncapsulation.None
 })
 export class UserListComponent implements OnInit, OnDestroy {
+
   displayedColumns = [
     'id',
-    'reference',
+    'phone',
-    'customer',
-    'total',
-    'payment',
     'status',
-    'date'
+    'totalPrice',
+    'point',
+    'level',
+    'chargeMoney',
+    'exchangeMoney',
+    'revenueMoney',
+    'numberOfBets',
+    'referrals',
+    'recommender',
+    'couponStatus',
+    'registerDate',
+    'recentConnectDate',
+    'recentConnectIp'
   ];
 
   @ViewChild(MatPaginator, { static: true })
@@ -50,7 +61,10 @@ export class UserListComponent implements OnInit, OnDestroy {
   /**
    * Constructor
    */
-  constructor() {
+  constructor(
+    private _userListService: UserListService
+  ) {
+
     // Set the private defaults
     this._unsubscribeAll = new Subject();
   }
@@ -62,7 +76,9 @@ export class UserListComponent implements OnInit, OnDestroy {
   /**
    * On init
    */
-  ngOnInit(): void {}
+  ngOnInit(): void {
+
+  }
 
   /**
    * On destroy

src/app/pages/users/user/component/user-list.service.ts

@@ -0,0 +1,60 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable()
+export class UserListService implements Resolve<any> {
+
+  userList: any[];
+  onUserListChanged: BehaviorSubject<any>;
+
+  /**
+   * Constructor
+   *
+   * @param {HttpClient} _httpClient
+   */
+  constructor(
+    private _httpClient: HttpClient
+  ) {
+    // Set the defaults
+    this.onUserListChanged = new BehaviorSubject({});
+  }
+
+  /**
+   * Resolver
+   *
+   * @param {ActivatedRouteSnapshot} route
+   * @param {RouterStateSnapshot} state
+   * @returns {Observable<any> | Promise<any> | any}
+   */
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
+    return new Promise((resolve, reject) => {
+
+      Promise.all([
+        this.getUserList()
+      ]).then(
+        () => {
+          resolve();
+        },
+        reject
+      );
+    });
+  }
+
+  /**
+   * Get user list
+   *
+   * @returns {Promise<any>}
+   */
+  getUserList(): Promise<any> {
+    return new Promise((resolve, reject) => {
+      this._httpClient.get('api/users-list')
+        .subscribe((response: any) => {
+          this.userList = response;
+          this.onUserListChanged.next(this.userList);
+          resolve(response);
+        }, reject);
+    });
+  }
+}

src/app/pages/users/user/user-routing.module.ts

@@ -1,12 +1,18 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
+import { UserDetailComponent } from './component/user-detail.component';
 import { UserListComponent } from './component/user-list.component';
-
+import { UserListService } from './component/user-list.service';
 const routes: Routes = [
+
   {
     path: '',
-    component: UserListComponent
+    component: UserListComponent,
+  },
+  {
+    path: 'user-list/:userId',
+    component: UserDetailComponent
   }
 ];
 

src/app/pages/users/user/user.module.ts

@@ -13,10 +13,12 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
+import { AgmCoreModule } from '@agm/core';
 
 import { FuseSharedModule } from 'src/@fuse/shared.module';
 import { UserRoutingModule } from './user-routing.module';
 import { COMPONENTS } from './component';
+import { UserListService } from './component/user-list.service';
 
 @NgModule({
   imports: [
@@ -34,10 +36,17 @@ import { COMPONENTS } from './component';
     MatTableModule,
     MatTabsModule,
 
+    AgmCoreModule.forRoot({
+      apiKey: 'AIzaSyD81ecsCj4yYpcXSLFcYU97PvRsE_X8Bx8'
+    }),
+
     FuseSharedModule,
 
     UserRoutingModule
   ],
-  declarations: [...COMPONENTS]
+  declarations: [...COMPONENTS],
+  providers: [
+    UserListService
+  ]
 })
 export class UserModule { }

src/app/pages/users/users-routing.module.ts

@@ -3,7 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 
 const routes: Routes = [
   {
-    path: 'users',
+    path: 'user-list',
     loadChildren: './user/user.module#UserModule'
   }
 ];

tsconfig.json

@@ -21,6 +21,6 @@
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
+    "strictInjectionParameters": true,
   }
 }

tslint.json

@@ -6,6 +6,7 @@
     "deprecation": {
       "severity": "warning"
     },
+    "completed-docs": false,
     "component-class-suffix": true,
     "contextual-lifecycle": true,
     "directive-class-suffix": true,