회원 리스트 수정

2019-07-27 20:45:14 +09:00 · 2019-07-27 20:45:14 +09:00 · 2443d34bb5
commit 2443d34bb5
parent 1cf32b0185
15 changed files with 261 additions and 102 deletions
--- a/.vscode/launch.json
+++ b/.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}"
+    }
+  ]
+}
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
@ -71,4 +72,4 @@
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
-}
+}
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@ -12,4 +12,4 @@ const routes: Routes = [
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
 })
-export class AppRoutingModule {}
+export class AppRoutingModule { }
--- a/src/app/app.module.ts
+++ b/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,
@ -51,4 +52,4 @@ import { LayoutModule } from './layout/layout.module';
  providers: [],
  bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule { }
--- a/src/app/navigation/navigation.ts
+++ b/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',
--- a/src/app/pages/pages-routing.module.ts
+++ b/src/app/pages/pages-routing.module.ts
@ -12,4 +12,4 @@ const routes: Routes = [
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
 })
-export class PagesRoutingModule {}
+export class PagesRoutingModule { }
--- a/src/app/pages/users/user/component/user-list.component.html
+++ b/src/app/pages/users/user/component/user-list.component.html
@ -6,30 +6,14 @@
  <!-- CENTER -->
  <div class="center">
    <!-- HEADER -->
-    <div
-      class="header accent"
-      fxLayout="column"
-      fxLayoutAlign="center center"
-      fxLayout.gt-xs="row"
-      fxLayoutAlign.gt-xs="space-between center"
-    >
+    <div class="header accent" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
+      fxLayoutAlign.gt-xs="space-between center">
      <!-- APP TITLE -->
-      <div
-        class="logo mb-24 mb-sm-0"
-        fxLayout="row"
-        fxLayoutAlign="start center"
-      >
-        <mat-icon
-          class="logo-icon s-32 mr-16"
-          [@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
-        >
+      <div class="logo mb-24 mb-sm-0" 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
-          class="logo-text h1"
-          [@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
-          >Users</span
-        >
+        <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
-        class="users-table"
-        #table
-        matSort
-        [@animateStagger]="{ value: '50' }"
-        fusePerfectScrollbar
-      >
-        <!-- ID Column -->
+      <mat-table class="users-table" #table matSort [@animateStagger]="{ value: '50' }" fusePerfectScrollbar>
+        <!-- ID/Nickname Column -->
        <ng-container matColumnDef="id">
-          <mat-header-cell *matHeaderCellDef mat-sort-header
-            >ID</mat-header-cell
-          >
+          <mat-header-cell *matHeaderCellDef mat-sort-header>아이디/닉네임</mat-header-cell>
          <mat-cell *matCellDef="let order">
            <p class="text-truncate">{{ order.id }}</p>
          </mat-cell>
        </ng-container>

-        <!-- Reference Column -->
-        <ng-container matColumnDef="reference">
-          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
-            >Reference</mat-header-cell
-          >
+        <!-- Phone Column -->
+        <ng-container matColumnDef="phone">
+          <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.reference }}</p>
          </mat-cell>
        </ng-container>

-        <!-- Name Column -->
-        <ng-container matColumnDef="customer">
-          <mat-header-cell *matHeaderCellDef mat-sort-header
-            >Customer</mat-header-cell
-          >
+        <!-- Status Column -->
+        <ng-container matColumnDef="status">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>상태</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">
-          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md
-            >Total</mat-header-cell
-          >
+        <ng-container matColumnDef="totalPrice">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>보유금</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 -->
-        <ng-container matColumnDef="payment">
-          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
-            >Payment</mat-header-cell
-          >
+        <!-- Point Column -->
+        <ng-container matColumnDef="point">
+          <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.payment.method }}
@ -110,26 +78,89 @@
          </mat-cell>
        </ng-container>

-        <!-- Status Column -->
-        <ng-container matColumnDef="status">
-          <mat-header-cell *matHeaderCellDef mat-sort-header
-            >Status</mat-header-cell
-          >
+        <!-- Level Column -->
+        <ng-container matColumnDef="level">
+          <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"
-            >
+            <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
              {{ order.status[0].name }}
            </p>
          </mat-cell>
        </ng-container>

-        <!-- Date Column -->
-        <ng-container matColumnDef="date">
-          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
-            >Date</mat-header-cell
-          >
+        <!-- Charge Money Column -->
+        <ng-container matColumnDef="chargeMoney">
+          <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>
+
+        <!-- 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,28 +168,37 @@
          </mat-cell>
        </ng-container>

-        <mat-header-row
-          *matHeaderRowDef="displayedColumns; sticky: true"
-        ></mat-header-row>
+        <!-- Recent Connect Date Column -->
+        <ng-container matColumnDef="recentConnectDate">
+          <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
-          *matRowDef="let order; columns: displayedColumns"
-          class="order"
-          matRipple
-          [routerLink]="'/apps/e-commerce/users/' + order.id"
-        >
+        <!-- Recent Connect IP Column -->
+        <ng-container matColumnDef="recentConnectIp">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>최근접속IP</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>
+
+        <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
-        #paginator
-        [pageIndex]="0"
-        [pageSize]="10"
-        [pageSizeOptions]="[5, 10, 25, 100]"
-      >
+      <mat-paginator #paginator [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
      </mat-paginator>
    </div>
    <!-- / CONTENT CARD -->
  </div>
  <!-- / CENTER -->
-</div>
+</div>
--- a/src/app/pages/users/user/component/user-list.component.ts
+++ b/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',
-    'customer',
-    'total',
-    'payment',
+    'phone',
    '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
--- a/src/app/pages/users/user/component/user-list.service.ts
+++ b/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);
+    });
+  }
+}
--- a/src/app/pages/users/user/user-routing.module.ts
+++ b/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
  }
 ];

@ -14,4 +20,4 @@ const routes: Routes = [
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
 })
-export class UserRoutingModule {}
+export class UserRoutingModule { }
--- a/src/app/pages/users/user/user.module.ts
+++ b/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 {}
+export class UserModule { }
--- a/src/app/pages/users/users-routing.module.ts
+++ b/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'
  }
 ];
@ -12,4 +12,4 @@ const routes: Routes = [
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
 })
-export class UsersRoutingModule {}
+export class UsersRoutingModule { }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -21,6 +21,6 @@
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
+    "strictInjectionParameters": true,
  }
-}
+}
--- a/tslint.json
+++ b/tslint.json
@ -6,6 +6,7 @@
    "deprecation": {
      "severity": "warning"
    },
+    "completed-docs": false,
    "component-class-suffix": true,
    "contextual-lifecycle": true,
    "directive-class-suffix": true,