totopia/totopia-backend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

회원 리스트 수정

Browse Source
This commit is contained in:
byung eun park 2019-07-27 20:45:14 +09:00
parent 1cf32b0185
commit 2443d34bb5
15 changed files with 261 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
.vscode/launch.json vendored Normal file
View File

@ -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}"
}
]
}

10
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

2
src/app/app-routing.module.ts
View File

@ -12,4 +12,4 @@ const routes: Routes = [
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
export class AppRoutingModule { }

3
src/app/app.module.ts
View File

@ -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 { }

2
src/app/navigation/navigation.ts
View File

@ -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',

2
src/app/pages/pages-routing.module.ts
View File

@ -12,4 +12,4 @@ const routes: Routes = [
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PagesRoutingModule {}
export class PagesRoutingModule { }

200
src/app/pages/users/user/component/user-list.component.html
View File

@ -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,25 +168,34 @@
</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 -->

30
src/app/pages/users/user/component/user-list.component.ts
View File

@ -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

60
src/app/pages/users/user/component/user-list.service.ts Normal file
View File

@ -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);
});
}
}

12
src/app/pages/users/user/user-routing.module.ts
View File

@ -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 { }

13
src/app/pages/users/user/user.module.ts
View File

@ -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 { }

4
src/app/pages/users/users-routing.module.ts
View File

@ -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 { }

2
tsconfig.json
View File

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

1
tslint.json
View File

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