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

bb

Browse Source
This commit is contained in:
byung eun park 2019-08-27 13:56:47 +09:00
parent 5fa9a68295
commit fd24101f0e
11 changed files with 385 additions and 491 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/app/pages/accounts/component/authentication/authentication.component.html
View File

@ -1,54 +1,74 @@
<div id="login" fxLayout="column"> <div id="login" fxLayout="column">
<div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center"> <div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
<div
<div id="login-form" [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"> id="login-form"
[@animate]="{ value: '*', params: { duration: '300ms', y: '100px' } }"
>
<div class="logo"> <div class="logo">
<img src="assets/images/logos/fuse.svg"> <img src="assets/images/logos/fuse.svg" />
</div> </div>
<div class="title">LOGIN TO YOUR ACCOUNT</div> <div class="title">LOGIN TO YOUR ACCOUNT</div>
<form name="loginForm" [formGroup]="loginForm" (ngSubmit)="onSubmit()" novalidate> <form
name="loginForm"
[formGroup]="loginForm"
(ngSubmit)="onSubmit()"
novalidate
>
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label>username</mat-label> <mat-label>username</mat-label>
<input matInput formControlName="username"> <input matInput formControlName="username" />
<mat-icon matSuffix class="secondary-text">mail</mat-icon> <mat-icon matSuffix class="secondary-text">mail</mat-icon>
<mat-error *ngIf="loginForm.get('username').hasError('required')"> <mat-error *ngIf="loginForm.get('username').hasError('required')">
username is required username is required
</mat-error> </mat-error>
<mat-error *ngIf="!loginForm.get('username').hasError('required') && <mat-error
loginForm.get('username').hasError('username')"> *ngIf="
!loginForm.get('username').hasError('required') &&
loginForm.get('username').hasError('username')
"
>
Please enter a valid username Please enter a valid username
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label>Password</mat-label> <mat-label>Password</mat-label>
<input matInput type="password" formControlName="password"> <input matInput type="password" formControlName="password" />
<mat-icon matSuffix class="secondary-text">vpn_key</mat-icon> <mat-icon matSuffix class="secondary-text">vpn_key</mat-icon>
<mat-error> <mat-error>
Password is required Password is required
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<div class="remember-forgot-password" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center"> <div
class="remember-forgot-password"
fxLayout="row"
fxLayout.xs="column"
fxLayoutAlign="space-between center"
>
<mat-checkbox class="remember-me" aria-label="Remember Me"> <mat-checkbox class="remember-me" aria-label="Remember Me">
Remember Me Remember Me
</mat-checkbox> </mat-checkbox>
<a class="forgot-password" [routerLink]="'/pages/auth/forgot-password'"> <a
class="forgot-password"
[routerLink]="'/pages/auth/forgot-password'"
>
Forgot Password? Forgot Password?
</a> </a>
</div> </div>
<button mat-raised-button color="accent" class="submit-button" aria-label="LOG IN" <button
[disabled]="loginForm.invalid"> mat-raised-button
color="accent"
class="submit-button"
aria-label="LOG IN"
[disabled]="loginForm.invalid"
>
LOGIN LOGIN
</button> </button>
</form> </form>
<!-- <!--
<div class="separator"> <div class="separator">
@ -67,9 +87,6 @@
<span class="text">Don't have an account?</span> <span class="text">Don't have an account?</span>
<a class="link" [routerLink]="'/pages/auth/register'">Create an account</a> <a class="link" [routerLink]="'/pages/auth/register'">Create an account</a>
</div> --> </div> -->
</div> </div>
</div> </div>
</div> </div>

9
src/app/pages/accounts/component/authentication/authentication.component.ts
View File

@ -64,10 +64,11 @@ export class AuthenticationComponent implements OnInit {
} }
onSubmit(): void { onSubmit(): void {
let userName = this.loginForm.get('username').value; this._authService
let password = this.loginForm.get('password').value; .authenticate(
this.loginForm.get('username').value,
this._authService.authenticate(userName, password) this.loginForm.get('password').value
)
.pipe(take(1)) .pipe(take(1))
.subscribe( .subscribe(
res => { res => {

586
src/app/pages/users/user/component/user-detail/user-detail.component.html
View File

@ -1,449 +1,235 @@
<div id="user" class="page-layout carded fullwidth inner-scroll"> <div id="user" class="page-layout carded fullwidth inner-scroll">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg accent"></div> <div class="top-bg accent"></div>
<!-- / TOP BACKGROUND --> <!-- / TOP BACKGROUND -->
<!-- CENTER --> <!-- CENTER -->
<div class="center"> <div class="center">
<!-- HEADER --> <!-- HEADER -->
<div class="header accent" fxLayout="row" fxLayoutAlign="space-between center"> <div
class="header accent"
fxLayout="row"
fxLayoutAlign="space-between center"
>
<!-- APP TITLE --> <!-- APP TITLE -->
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<button
<button mat-icon-button class="mr-16" [routerLink]="'/apps/e-commerce/orders'"> mat-icon-button
class="mr-16"
[routerLink]="'/pages/users/management/list'"
>
<mat-icon>arrow_back</mat-icon> <mat-icon>arrow_back</mat-icon>
</button> </button>
<div fxLayout="column" fxLayoutAlign="start start" <div
[@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}"> fxLayout="column"
<div class="h2"> fxLayoutAlign="start start"
Order {{user.reference}} [@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
</div> >
<div class="h2">User {{ user.username }}</div>
<div class="subtitle secondary-text"> <div class="subtitle secondary-text">
<span>from</span> <span>{{ user.nickname }}</span>
<span>{{user.customer.firstName}} {{user.customer.lastName}}</span>
</div> </div>
</div> </div>
</div> </div>
<!-- / APP TITLE --> <!-- / APP TITLE -->
</div> </div>
<!-- / HEADER --> <!-- / HEADER -->
<!-- CONTENT CARD --> <!-- CONTENT CARD -->
<div class="content-card"> <div class="content-card">
<!-- CONTENT --> <!-- CONTENT -->
<div class="content"> <div class="content">
<mat-tab-group fxLayout="column" fxFlex> <mat-tab-group fxLayout="column" fxFlex>
<mat-tab label="User Details">
<mat-tab label="Order Details"> <div class="tab-content p-24" fusePerfectScrollbar>
<div class="user-details tab-content p-24" fusePerfectScrollbar>
<div class="section pb-48"> <div class="section pb-48">
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center"> <div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="m-0 mr-16 secondary-text">account_circle</mat-icon> <mat-icon class="m-0 mr-16 secondary-text"
<div class="h2 secondary-text">Customer</div> >account_circle</mat-icon
>
<div class="h2 secondary-text">기본정보</div>
</div> </div>
<div class="customer mb-32"> <div
<table class="simple"> class="mb-24"
<thead> fxLayout="column"
<tr> fxLayoutAlign="start"
<th>Name</th> fxLayout.gt-md="row"
<th>Email</th> >
<th>Phone</th> <form
<th>Company</th> name="userForm"
</tr> [formGroup]="userForm"
</thead> fxLayout="column"
<tbody> fxFlex="1 0 auto"
<tr> class="tab-content mb-24"
<td> >
<div fxLayout="row" fxLayoutAlign="start center"> <div
<img class="avatar" [src]="user.customer.avatar"> fxLayout="row"
<span class="name text-truncate">{{user.customer.firstName}} fxLayoutAlign="start center"
{{user.customer.lastName}} fxFlex="1 0 auto"
</span> >
</div> <mat-form-field
</td> appearance="outline"
<td> floatLabel="always"
<span class="email text-truncate">{{user.customer.email}}</span> fxFlex="40"
</td> class="w-40-p"
<td> >
<span class="phone text-truncate">{{user.customer.phone}}</span> <mat-label>아이디 (disabled)</mat-label>
</td> <input
<td> matInput
<span class="company text-truncate">{{user.customer.company}} name="username"
</span> formControlName="username"
</td> />
</tr> <span matPrefix>&nbsp;</span>
</tbody>
</table>
</div>
<mat-accordion class="addresses">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>Shipping Address</mat-panel-title>
</mat-expansion-panel-header>
<div fxFlex fxLayout="column">
<div class="address h4 py-24">{{user.customer.shippingAddress.address}}
</div>
<!-- <agm-map class="w-100-p h-400" [zoom]="15"
[latitude]="user.customer.shippingAddress.lat"
[longitude]="user.customer.shippingAddress.lng">
<agm-marker [latitude]="user.customer.shippingAddress.lat"
[longitude]="user.customer.shippingAddress.lng">
</agm-marker>
</agm-map> -->
</div>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>Invoice Address</mat-panel-title>
</mat-expansion-panel-header>
<div fxFlex fxLayout="column">
<div class="address h4 py-24">{{user.customer.invoiceAddress.address}}
</div>
<!-- <agm-map class="w-100-p h-400" [zoom]="15"
[latitude]="user.customer.invoiceAddress.lat"
[longitude]="user.customer.invoiceAddress.lng">
<agm-marker [latitude]="user.customer.invoiceAddress.lat"
[longitude]="user.customer.invoiceAddress.lng">
</agm-marker>
</agm-map> -->
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
<div class="section pb-48">
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="m-0 mr-16 secondary-text">access_time</mat-icon>
<div class="h2 secondary-text">Order Status</div>
</div>
<table class="simple">
<thead>
<tr>
<th>Status</th>
<th>Updated On</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let status of user.status">
<td>
<span class="status h6 p-4" [ngClass]="status.color">
{{status.name}}
</span>
</td>
<td>
<span>
{{status.date | date}}
</span>
</td>
</tr>
</tbody>
</table>
<!-- <form class="update-status p-24" (ngSubmit)="updateStatus()" [formGroup]="statusForm"
fxLayout="row" fxLayoutAlign="start center">
<mat-form-field appearance="outline" class="mr-16" fxFlex>
<mat-label>Status</mat-label>
<mat-select formControlName="newStatus" required>
<mat-option *ngFor="let status of orderStatuses" [value]="status.id">
{{status.name}}
</mat-option>
</mat-select>
</mat-form-field> </mat-form-field>
</div>
<button mat-raised-button class="mat-accent" [disabled]="statusForm.invalid"> <div
fxLayout="row"
fxLayoutAlign="start center"
fxFlex="1 0 auto"
>
<mat-form-field
appearance="outline"
floatLabel=""
fxFlex="40"
class="w-40-p"
>
<mat-label>패스워드</mat-label>
<input
matInput
placeholder="Password"
name="password"
formControlName="password"
type="password"
/>
<span matPrefix>&nbsp;</span>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="start center"
fxFlex="1 0 auto"
>
<mat-form-field
appearance="outline"
floatLabel=""
fxFlex="40"
class="mr-16"
>
<mat-label>이메일</mat-label>
<input
matInput
placeholder="이메일"
name="email"
formControlName="email"
type="email"
/>
<span matPrefix>&nbsp;</span>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="start center"
fxFlex="1 0 auto"
>
<mat-form-field
appearance="outline"
floatLabel=""
fxFlex="40"
class="mr-16"
>
<mat-label>연락처</mat-label>
<mat-icon matSuffix class="secondary-text"
>phone</mat-icon
>
<input
matInput
placeholder="연락처"
name="phone"
formControlName="phone"
type="tel"
/>
<span matPrefix>&nbsp;</span>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="start center"
fxFlex="1 0 auto"
>
<mat-form-field
appearance="outline"
floatLabel=""
fxFlex="40"
class="mr-16"
>
<mat-label>닉네임</mat-label>
<input
matInput
placeholder="닉네임"
name="nickname"
formControlName="nickname"
type="text"
/>
<span matPrefix>&nbsp;</span>
</mat-form-field>
</div>
<div
fxLayout="row"
class="textarea-wrapper"
fxLayoutAlign="start center"
>
<mat-form-field appearance="outline" fxFlex="40">
<mat-label>Notes</mat-label>
<textarea
name="notes"
formControlName="notes"
matInput
type="text"
max-rows="4"
></textarea>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="start center"
fxFlex="1 0 auto"
>
<button mat-raised-button class="mat-accent">
Update Status Update Status
</button> </button>
</form> -->
</div> </div>
</form>
<div class="section pb-48"> <div
class="mb-24"
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center"> fxLayout="column"
<mat-icon class="m-0 mr-16 secondary-text">attach_money</mat-icon> fxLayoutAlign="start center"
<div class="h2 secondary-text">Payment</div> fxLayout.gt-md="row"
</div> >
<div
<table class="simple"> fxLayout="row"
<thead> fxLayoutAlign="start center"
<tr> fxFlex="1 0 auto"
<th>TransactionID</th> >
<th>Payment Method</th> <button mat-raised-button class="mat-accent">
<th>Amount</th> Update Status
<th>Date</th> </button>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="text-truncate">
{{user.payment.transactionId}}
</span>
</td>
<td>
<span class="text-truncate">
{{user.payment.method}}
</span>
</td>
<td>
<span class="text-truncate">
{{user.payment.amount}}
</span>
</td>
<td>
<span class="text-truncate">
{{user.payment.date | date}}
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="section pb-48">
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="m-0 mr-16 secondary-text">local_shipping</mat-icon>
<div class="h2 secondary-text">Shipping</div>
</div>
<table class="simple">
<thead>
<tr>
<th>Tracking Code</th>
<th>Carrier</th>
<th>Weight</th>
<th>Fee</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let shipping of user.shippingDetails">
<td class="tracking-code">
{{shipping.tracking}}
</td>
<td>
{{shipping.carrier}}
</td>
<td>
{{shipping.weight}}
</td>
<td>
{{shipping.fee}}
</td>
<td>
{{shipping.date}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</mat-tab>
<mat-tab label="Products">
<div class="products tab-content p-24" fusePerfectScrollbar>
<table class="simple">
<thead>
<tr>
<th class="w-80">ID</th>
<th class="w-120">Image</th>
<th>Name</th>
<th class="w-120">Price</th>
<th class="w-80">Quantity</th>
</tr>
</thead>
<tbody>
<tr class="product-row" *ngFor="let product of user.products"
[routerLink]="'/apps/e-commerce/products/'+product.id+'/'+product.handle">
<td>
{{product.id}}
</td>
<td>
<img class="product-image" [src]="product.image">
</td>
<td>
{{product.name}}
</td>
<td>
{{product.price}}
</td>
<td>
{{product.quantity}}
</td>
</tr>
</tbody>
</table>
</div>
</mat-tab>
<mat-tab label="Invoice">
<div class="invoice tab-content p-24" fusePerfectScrollbar>
<div id="invoice" class="compact page-layout blank" fxLayout="row" fusePerfectScrollbar>
<div class="invoice-container">
<!-- INVOICE -->
<div class="card">
<div class="header">
<div class="invoice-date">{{user.date}}</div>
<div fxLayout="row" fxLayoutAlign="space-between stretch">
<div class="client">
<div class="invoice-number" fxLayout="row"
fxLayoutAlign="start center">
<span class="title">INVOICE</span>
<span class="number">{{user.reference}}</span>
</div>
<div class="info">
<div class="title">
{{user.customer.firstName}}
{{user.customer.lastName}}
</div>
<div class="address">
{{user.customer.invoiceAddress.address}}
</div>
<div class="phone">{{user.customer.phone}}</div>
<div class="email">{{user.customer.email}}</div>
</div> </div>
</div> </div>
<div class="issuer accent" fxLayout="row" fxLayoutAlign="start center">
<div class="logo">
<img src="assets/images/logos/fuse.svg">
</div>
<div class="info">
<div class="title">FUSE INC.</div>
<div class="address">2810 Country Club Road Cranford, NJ 07016
</div>
<div class="phone">+66 123 455 87</div>
<div class="email">hello@fuseinc.com</div>
<div class="website">www.fuseinc.com</div>
</div>
</div>
</div>
</div>
<div class="content">
<table class="simple invoice-table">
<thead>
<tr>
<th>PRODUCT</th>
<th class="text-right">PRICE</th>
<th class="text-right">QUANTITY</th>
<th class="text-right">TOTAL</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let product of user.products">
<td>
<div class="title">
{{product.name}}
</div>
</td>
<td class="text-right">
{{product.price | currency:'USD':'symbol'}}
</td>
<td class="text-right">
{{product.quantity}}
</td>
<td class="text-right">
{{product.total | currency:'USD':'symbol'}}
</td>
</tr>
</tbody>
</table>
<table class="simple invoice-table-footer">
<tbody>
<tr class="subtotal">
<td>SUBTOTAL</td>
<td>{{user.subtotal | currency:'USD':'symbol'}}</td>
</tr>
<tr class="tax">
<td>TAX</td>
<td>{{user.tax | currency:'USD':'symbol'}}</td>
</tr>
<tr class="discount">
<td>DISCOUNT</td>
<td>-{{user.discount | currency:'USD':'symbol'}}</td>
</tr>
<tr class="total">
<td>TOTAL</td>
<td>{{user.total | currency:'USD':'symbol'}}</td>
</tr>
</tbody>
</table>
</div>
<div class="footer">
<div class="note">Please pay within 15 days. Thank you for your business.
</div>
<div fxLayout="row" fxLayoutAlign="start start">
<div class="logo">
<img src="assets/images/logos/fuse.svg">
</div>
<div class="small-note">
In condimentum malesuada efficitur. Mauris volutpat placerat auctor.
Ut ac congue dolor. Quisque scelerisque lacus sed feugiat fermentum.
Cras aliquet facilisis pellentesque. Nunc hendrerit quam at leo
commodo, a suscipit tellus dapibus. Etiam at felis volutpat est
mollis lacinia. Mauris placerat sem sit amet velit mollis, in
porttitor ex finibus. Proin eu nibh id libero tincidunt lacinia et
eget eros.
</div>
</div>
</div>
</div>
<!-- / INVOICE -->
</div> </div>
</div> </div>
</div> </div>
</mat-tab> </mat-tab>
<mat-tab label="Products" *ngIf="user.id">
<div class="products tab-content p-24" fusePerfectScrollbar></div>
</mat-tab>
</mat-tab-group> </mat-tab-group>
</div> </div>
<!-- / CONTENT --> <!-- / CONTENT -->
</div> </div>
<!-- / CONTENT CARD --> <!-- / CONTENT CARD -->
</div> </div>
<!-- / CENTER --> <!-- / CENTER -->
</div> </div>

47
src/app/pages/users/user/component/user-detail/user-detail.component.ts
View File

@ -4,6 +4,9 @@ import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { fuseAnimations } from 'src/@fuse/animations'; import { fuseAnimations } from 'src/@fuse/animations';
import { User } from 'src/modules/user/model/user.model';
import { UserService } from 'src/modules/user/service/user.service';
import { ActivatedRoute } from '@angular/router';
@Component({ @Component({
selector: 'app-user-user-detail', selector: 'app-user-user-detail',
@ -13,7 +16,8 @@ import { fuseAnimations } from 'src/@fuse/animations';
animations: fuseAnimations animations: fuseAnimations
}) })
export class UserDetailComponent implements OnInit, OnDestroy { export class UserDetailComponent implements OnInit, OnDestroy {
user: any; user: User;
userForm: FormGroup;
// Private // Private
private _unsubscribeAll: Subject<any>; private _unsubscribeAll: Subject<any>;
@ -24,7 +28,11 @@ export class UserDetailComponent implements OnInit, OnDestroy {
* @param {EcommerceOrderService} userService * @param {EcommerceOrderService} userService
* @param {FormBuilder} _formBuilder * @param {FormBuilder} _formBuilder
*/ */
constructor(private _formBuilder: FormBuilder) { constructor(
private userService: UserService,
private activatedRoute: ActivatedRoute,
private formBuilder: FormBuilder
) {
// Set the defaults // Set the defaults
// Set the private defaults // Set the private defaults
this._unsubscribeAll = new Subject(); this._unsubscribeAll = new Subject();
@ -39,6 +47,11 @@ export class UserDetailComponent implements OnInit, OnDestroy {
*/ */
ngOnInit(): void { ngOnInit(): void {
// Subscribe to update order on changes // Subscribe to update order on changes
this.activatedRoute.data.subscribe(data => {
this.user = data.user;
this.initializeForm();
});
} }
/** /**
@ -50,6 +63,24 @@ export class UserDetailComponent implements OnInit, OnDestroy {
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
} }
// -----------------------------------------------------------------------------------------------------
// @ Private methods
// -----------------------------------------------------------------------------------------------------
initializeForm(): void {
this.userForm = this.formBuilder.group({
username: [
{
value: this.user.username,
disabled: true
}
],
password: '',
email: '',
nickname: '',
phone: ''
});
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Public methods // @ Public methods
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -57,5 +88,15 @@ export class UserDetailComponent implements OnInit, OnDestroy {
/** /**
* Update status * Update status
*/ */
updateStatus(): void {} updateStatus(): void {
// const newStatusId = Number.parseInt(this.statusForm.get('newStatus').value);
// if (!newStatusId) {
// return;
// }
// const newStatus = this.orderStatuses.find(status => {
// return status.id === newStatusId;
// });
// newStatus['date'] = new Date().toString();
// this.order.status.unshift(newStatus);
}
} }

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

@ -38,7 +38,7 @@
fusePerfectScrollbar> fusePerfectScrollbar>
<!-- ID/Nickname Column --> <!-- ID/Nickname Column -->
<ng-container matColumnDef="username"> <ng-container matColumnDef="username">
<mat-header-cell *matHeaderCellDef mat-sort-header>아이디/닉네임</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header>아이디</mat-header-cell>
<mat-cell *matCellDef="let user"> <mat-cell *matCellDef="let user">
<p class="text-truncate">{{ user.username }}</p> <p class="text-truncate">{{ user.username }}</p>
</mat-cell> </mat-cell>
@ -54,16 +54,17 @@
</ng-container> </ng-container>
<!-- Status Column --> <!-- Status Column -->
<!--
<ng-container matColumnDef="status"> <ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header>상태</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header>상태</mat-header-cell>
<mat-cell *matCellDef="let user"> <mat-cell *matCellDef="let user">
<p class="text-truncate"> <p class="text-truncate">
<!-- {{ user.status }} --> {{ user.status }}
정상 정상
</p> </p>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
-->
<!-- Total Price Column --> <!-- Total Price Column -->
<ng-container matColumnDef="totalPrice"> <ng-container matColumnDef="totalPrice">
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>보유금</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>보유금</mat-header-cell>
@ -165,22 +166,22 @@
</ng-container> </ng-container>
<!-- Coupon Status Column --> <!-- Coupon Status Column -->
<ng-container matColumnDef="couponStatus"> <!-- <ng-container matColumnDef="couponStatus">
<mat-header-cell *matHeaderCellDef mat-sort-header>쿠폰현황</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header>쿠폰현황</mat-header-cell>
<mat-cell *matCellDef="let user"> <mat-cell *matCellDef="let user">
<p class="text-truncate"> <p class="text-truncate">
<!-- {{ user.coupon }} --> {{ user.coupon }}
10 10
</p> </p>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
-->
<!-- Register Date Column --> <!-- Register Date Column -->
<ng-container matColumnDef="registerDate"> <ng-container matColumnDef="registerDate">
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>가입날짜</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>가입날짜</mat-header-cell>
<mat-cell *matCellDef="let user" fxHide fxShow.gt-sm> <mat-cell *matCellDef="let user" fxHide fxShow.gt-sm>
<p class="text-truncate"> <p class="text-truncate">
{{ user.createAt }} {{ user.createdAt | date: 'yyyy-mm-dd HH:mm'}}
</p> </p>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
@ -190,7 +191,7 @@
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>최근접속일</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>최근접속일</mat-header-cell>
<mat-cell *matCellDef="let user" fxHide fxShow.gt-sm> <mat-cell *matCellDef="let user" fxHide fxShow.gt-sm>
<p class="text-truncate"> <p class="text-truncate">
{{ user.updateAt }} {{ user.updatedAt | date: 'yyyy-mm-dd HH:mm'}}
</p> </p>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
@ -207,8 +208,8 @@
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row> <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row *matRowDef="let order; columns: displayedColumns" class="order" matRipple <mat-row *matRowDef="let user; columns: displayedColumns" class="user" matRipple
[routerLink]="'/apps/e-commerce/users/' + order.id"> [routerLink]="'/pages/users/management/list/' + user.id">
</mat-row> </mat-row>
</mat-table> </mat-table>

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

@ -37,7 +37,7 @@ export class UserListComponent implements OnInit, OnDestroy, AfterViewInit {
displayedColumns = [ displayedColumns = [
'username', 'username',
'phone', 'phone',
'status', // 'status',
'totalPrice', 'totalPrice',
'point', 'point',
'level', 'level',
@ -47,7 +47,7 @@ export class UserListComponent implements OnInit, OnDestroy, AfterViewInit {
'numberOfBets', 'numberOfBets',
'referrals', 'referrals',
'recommender', 'recommender',
'couponStatus', // 'couponStatus',
'registerDate', 'registerDate',
'recentConnectDate', 'recentConnectDate',
'recentConnectIp' 'recentConnectIp'

31
src/app/pages/users/user/resolver/detail.resolver.ts Normal file
View File

@ -0,0 +1,31 @@
import { Injectable } from '@angular/core';
import {
ActivatedRouteSnapshot,
Resolve,
RouterStateSnapshot
} from '@angular/router';
import { Observable, of } from 'rxjs';
import { User } from 'src/modules/user/model/user.model';
import { UserService } from 'src/modules/user/service/user.service';
@Injectable()
export class DetailResolver implements Resolve<User> {
/**
* Constructor
*/
constructor(private userService: UserService) {}
/**
* Resolver
*/
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<User> | Promise<User> | any {
const id = route.params.id;
if ('0' === id) {
return of({});
}
return this.userService.getUser(route.params.id);
}
}

3
src/app/pages/users/user/resolver/index.ts Normal file
View File

@ -0,0 +1,3 @@
import { DetailResolver } from './detail.resolver';
export const RESOLVERS = [DetailResolver];

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

@ -7,6 +7,7 @@ import { UserConnectComponent } from './component/user-connect/user-connect.comp
import { UserRegistComponent } from './component/user-regist/user-regist.component'; import { UserRegistComponent } from './component/user-regist/user-regist.component';
import { UserFeesComponent } from './component/user-fees/user-fees.component'; import { UserFeesComponent } from './component/user-fees/user-fees.component';
import { UserAttendanceComponent } from './component/user-attendance/user-attendance.component'; import { UserAttendanceComponent } from './component/user-attendance/user-attendance.component';
import { DetailResolver } from './resolver/detail.resolver';
const routes: Routes = [ const routes: Routes = [
@ -15,8 +16,11 @@ const routes: Routes = [
component: UserListComponent, component: UserListComponent,
}, },
{ {
path: 'list/:userId', path: 'list/:id',
component: UserDetailComponent component: UserDetailComponent,
resolve: {
user: DetailResolver
}
}, },
{ {
path: 'connect', path: 'connect',

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

@ -17,7 +17,11 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog'; import { MatDialogModule } from '@angular/material/dialog';
import { MatToolbarModule } from '@angular/material/toolbar'; import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { CalendarModule as AngularCalendarModule, DateAdapter } from 'angular-calendar'; import { MatGridListModule } from '@angular/material/grid-list';
import {
CalendarModule as AngularCalendarModule,
DateAdapter
} from 'angular-calendar';
import { FuseSharedModule } from 'src/@fuse/shared.module'; import { FuseSharedModule } from 'src/@fuse/shared.module';
import { UserRoutingModule } from './user-routing.module'; import { UserRoutingModule } from './user-routing.module';
@ -25,6 +29,7 @@ import { COMPONENTS } from './component';
import { MatStepperModule } from '@angular/material/stepper'; import { MatStepperModule } from '@angular/material/stepper';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns'; import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { RESOLVERS } from './resolver';
@NgModule({ @NgModule({
imports: [ imports: [
@ -33,6 +38,7 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
MatDialogModule, MatDialogModule,
MatChipsModule, MatChipsModule,
MatExpansionModule, MatExpansionModule,
MatGridListModule,
MatFormFieldModule, MatFormFieldModule,
MatIconModule, MatIconModule,
MatInputModule, MatInputModule,
@ -57,6 +63,6 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
UserRoutingModule UserRoutingModule
], ],
declarations: [...COMPONENTS], declarations: [...COMPONENTS],
providers: [...RESOLVERS]
}) })
export class UserModule {} export class UserModule {}

4
src/modules/user/service/user.service.ts
View File

@ -16,4 +16,8 @@ export class UserService {
public getAllUsers(): Observable<Page<User>> { public getAllUsers(): Observable<Page<User>> {
return this.httpClient.get<Page<User>>(`${this.apiBaseUrl}/users`, {}); return this.httpClient.get<Page<User>>(`${this.apiBaseUrl}/users`, {});
} }
public getUser(id: number): Observable<User> {
return this.httpClient.get<User>(`${this.apiBaseUrl}/users/${id}`, {});
}
} }