bb
This commit is contained in:
byung eun park
parent
5fa9a68295
commit
fd24101f0e
|
|
@ -1,54 +1,74 @@
|
|||
<div id="login" fxLayout="column">
|
||||
|
||||
<div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
|
||||
|
||||
<div id="login-form" [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
|
||||
|
||||
<div
|
||||
id="login-form"
|
||||
[@animate]="{ value: '*', params: { duration: '300ms', y: '100px' } }"
|
||||
>
|
||||
<div class="logo">
|
||||
<img src="assets/images/logos/fuse.svg">
|
||||
<img src="assets/images/logos/fuse.svg" />
|
||||
</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-label>username</mat-label>
|
||||
<input matInput formControlName="username">
|
||||
<input matInput formControlName="username" />
|
||||
<mat-icon matSuffix class="secondary-text">mail</mat-icon>
|
||||
<mat-error *ngIf="loginForm.get('username').hasError('required')">
|
||||
username is required
|
||||
</mat-error>
|
||||
<mat-error *ngIf="!loginForm.get('username').hasError('required') &&
|
||||
loginForm.get('username').hasError('username')">
|
||||
<mat-error
|
||||
*ngIf="
|
||||
!loginForm.get('username').hasError('required') &&
|
||||
loginForm.get('username').hasError('username')
|
||||
"
|
||||
>
|
||||
Please enter a valid username
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<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-error>
|
||||
Password is required
|
||||
</mat-error>
|
||||
</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">
|
||||
Remember Me
|
||||
</mat-checkbox>
|
||||
|
||||
<a class="forgot-password" [routerLink]="'/pages/auth/forgot-password'">
|
||||
<a
|
||||
class="forgot-password"
|
||||
[routerLink]="'/pages/auth/forgot-password'"
|
||||
>
|
||||
Forgot Password?
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button mat-raised-button color="accent" class="submit-button" aria-label="LOG IN"
|
||||
[disabled]="loginForm.invalid">
|
||||
<button
|
||||
mat-raised-button
|
||||
color="accent"
|
||||
class="submit-button"
|
||||
aria-label="LOG IN"
|
||||
[disabled]="loginForm.invalid"
|
||||
>
|
||||
LOGIN
|
||||
</button>
|
||||
|
||||
</form>
|
||||
<!--
|
||||
<div class="separator">
|
||||
|
|
@ -67,9 +87,6 @@
|
|||
<span class="text">Don't have an account?</span>
|
||||
<a class="link" [routerLink]="'/pages/auth/register'">Create an account</a>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -64,10 +64,11 @@ export class AuthenticationComponent implements OnInit {
|
|||
}
|
||||
|
||||
onSubmit(): void {
|
||||
let userName = this.loginForm.get('username').value;
|
||||
let password = this.loginForm.get('password').value;
|
||||
|
||||
this._authService.authenticate(userName, password)
|
||||
this._authService
|
||||
.authenticate(
|
||||
this.loginForm.get('username').value,
|
||||
this.loginForm.get('password').value
|
||||
)
|
||||
.pipe(take(1))
|
||||
.subscribe(
|
||||
res => {
|
||||
|
|
|
|||
|
|
@ -1,449 +1,235 @@
|
|||
<div id="user" class="page-layout carded fullwidth inner-scroll">
|
||||
<!-- TOP BACKGROUND -->
|
||||
<div class="top-bg accent"></div>
|
||||
<!-- / TOP BACKGROUND -->
|
||||
|
||||
<!-- TOP BACKGROUND -->
|
||||
<div class="top-bg accent"></div>
|
||||
<!-- / TOP BACKGROUND -->
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header accent" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
|
||||
<!-- APP TITLE -->
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<button mat-icon-button class="mr-16" [routerLink]="'/apps/e-commerce/orders'">
|
||||
<mat-icon>arrow_back</mat-icon>
|
||||
</button>
|
||||
|
||||
<div fxLayout="column" fxLayoutAlign="start start"
|
||||
[@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
|
||||
<div class="h2">
|
||||
Order {{user.reference}}
|
||||
</div>
|
||||
<div class="subtitle secondary-text">
|
||||
<span>from</span>
|
||||
<span>{{user.customer.firstName}} {{user.customer.lastName}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / APP TITLE -->
|
||||
<!-- CENTER -->
|
||||
<div class="center">
|
||||
<!-- HEADER -->
|
||||
<div
|
||||
class="header accent"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center"
|
||||
>
|
||||
<!-- APP TITLE -->
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<button
|
||||
mat-icon-button
|
||||
class="mr-16"
|
||||
[routerLink]="'/pages/users/management/list'"
|
||||
>
|
||||
<mat-icon>arrow_back</mat-icon>
|
||||
</button>
|
||||
|
||||
<div
|
||||
fxLayout="column"
|
||||
fxLayoutAlign="start start"
|
||||
[@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
|
||||
>
|
||||
<div class="h2">User {{ user.username }}</div>
|
||||
<div class="subtitle secondary-text">
|
||||
<span>{{ user.nickname }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT CARD -->
|
||||
<div class="content-card">
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content">
|
||||
|
||||
<mat-tab-group fxLayout="column" fxFlex>
|
||||
|
||||
<mat-tab label="Order Details">
|
||||
|
||||
<div class="user-details tab-content p-24" fusePerfectScrollbar>
|
||||
|
||||
<div class="section pb-48">
|
||||
|
||||
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="m-0 mr-16 secondary-text">account_circle</mat-icon>
|
||||
<div class="h2 secondary-text">Customer</div>
|
||||
</div>
|
||||
|
||||
<div class="customer mb-32">
|
||||
<table class="simple">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Phone</th>
|
||||
<th>Company</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<img class="avatar" [src]="user.customer.avatar">
|
||||
<span class="name text-truncate">{{user.customer.firstName}}
|
||||
{{user.customer.lastName}}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="email text-truncate">{{user.customer.email}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="phone text-truncate">{{user.customer.phone}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="company text-truncate">{{user.customer.company}}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</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>
|
||||
|
||||
<button mat-raised-button class="mat-accent" [disabled]="statusForm.invalid">
|
||||
Update Status
|
||||
</button>
|
||||
</form> -->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section pb-48">
|
||||
|
||||
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="m-0 mr-16 secondary-text">attach_money</mat-icon>
|
||||
<div class="h2 secondary-text">Payment</div>
|
||||
</div>
|
||||
|
||||
<table class="simple">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>TransactionID</th>
|
||||
<th>Payment Method</th>
|
||||
<th>Amount</th>
|
||||
<th>Date</th>
|
||||
</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 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>
|
||||
</mat-tab>
|
||||
|
||||
</mat-tab-group>
|
||||
|
||||
</div>
|
||||
<!-- / CONTENT -->
|
||||
|
||||
</div>
|
||||
<!-- / CONTENT CARD -->
|
||||
|
||||
</div>
|
||||
<!-- / APP TITLE -->
|
||||
</div>
|
||||
<!-- / CENTER -->
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT CARD -->
|
||||
<div class="content-card">
|
||||
<!-- CONTENT -->
|
||||
<div class="content">
|
||||
<mat-tab-group fxLayout="column" fxFlex>
|
||||
<mat-tab label="User Details">
|
||||
<div class="tab-content p-24" fusePerfectScrollbar>
|
||||
<div class="section pb-48">
|
||||
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="m-0 mr-16 secondary-text"
|
||||
>account_circle</mat-icon
|
||||
>
|
||||
<div class="h2 secondary-text">기본정보</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-24"
|
||||
fxLayout="column"
|
||||
fxLayoutAlign="start"
|
||||
fxLayout.gt-md="row"
|
||||
>
|
||||
<form
|
||||
name="userForm"
|
||||
[formGroup]="userForm"
|
||||
fxLayout="column"
|
||||
fxFlex="1 0 auto"
|
||||
class="tab-content mb-24"
|
||||
>
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="start center"
|
||||
fxFlex="1 0 auto"
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
floatLabel="always"
|
||||
fxFlex="40"
|
||||
class="w-40-p"
|
||||
>
|
||||
<mat-label>아이디 (disabled)</mat-label>
|
||||
<input
|
||||
matInput
|
||||
name="username"
|
||||
formControlName="username"
|
||||
/>
|
||||
<span matPrefix> </span>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<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> </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> </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> </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> </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
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
class="mb-24"
|
||||
fxLayout="column"
|
||||
fxLayoutAlign="start center"
|
||||
fxLayout.gt-md="row"
|
||||
>
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="start center"
|
||||
fxFlex="1 0 auto"
|
||||
>
|
||||
<button mat-raised-button class="mat-accent">
|
||||
Update Status
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="Products" *ngIf="user.id">
|
||||
<div class="products tab-content p-24" fusePerfectScrollbar></div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
<!-- / CONTENT -->
|
||||
</div>
|
||||
<!-- / CONTENT CARD -->
|
||||
</div>
|
||||
<!-- / CENTER -->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@ import { Subject } from 'rxjs';
|
|||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
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({
|
||||
selector: 'app-user-user-detail',
|
||||
|
|
@ -13,7 +16,8 @@ import { fuseAnimations } from 'src/@fuse/animations';
|
|||
animations: fuseAnimations
|
||||
})
|
||||
export class UserDetailComponent implements OnInit, OnDestroy {
|
||||
user: any;
|
||||
user: User;
|
||||
userForm: FormGroup;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
|
@ -24,7 +28,11 @@ export class UserDetailComponent implements OnInit, OnDestroy {
|
|||
* @param {EcommerceOrderService} userService
|
||||
* @param {FormBuilder} _formBuilder
|
||||
*/
|
||||
constructor(private _formBuilder: FormBuilder) {
|
||||
constructor(
|
||||
private userService: UserService,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private formBuilder: FormBuilder
|
||||
) {
|
||||
// Set the defaults
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
|
|
@ -39,6 +47,11 @@ export class UserDetailComponent implements OnInit, OnDestroy {
|
|||
*/
|
||||
ngOnInit(): void {
|
||||
// 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();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
initializeForm(): void {
|
||||
this.userForm = this.formBuilder.group({
|
||||
username: [
|
||||
{
|
||||
value: this.user.username,
|
||||
disabled: true
|
||||
}
|
||||
],
|
||||
password: '',
|
||||
email: '',
|
||||
nickname: '',
|
||||
phone: ''
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
@ -57,5 +88,15 @@ export class UserDetailComponent implements OnInit, OnDestroy {
|
|||
/**
|
||||
* 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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
fusePerfectScrollbar>
|
||||
<!-- ID/Nickname Column -->
|
||||
<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">
|
||||
<p class="text-truncate">{{ user.username }}</p>
|
||||
</mat-cell>
|
||||
|
|
@ -54,16 +54,17 @@
|
|||
</ng-container>
|
||||
|
||||
<!-- Status Column -->
|
||||
<!--
|
||||
<ng-container matColumnDef="status">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>상태</mat-header-cell>
|
||||
<mat-cell *matCellDef="let user">
|
||||
<p class="text-truncate">
|
||||
<!-- {{ user.status }} -->
|
||||
{{ user.status }}
|
||||
정상
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
-->
|
||||
<!-- Total Price Column -->
|
||||
<ng-container matColumnDef="totalPrice">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>보유금</mat-header-cell>
|
||||
|
|
@ -165,22 +166,22 @@
|
|||
</ng-container>
|
||||
|
||||
<!-- Coupon Status Column -->
|
||||
<ng-container matColumnDef="couponStatus">
|
||||
<!-- <ng-container matColumnDef="couponStatus">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>쿠폰현황</mat-header-cell>
|
||||
<mat-cell *matCellDef="let user">
|
||||
<p class="text-truncate">
|
||||
<!-- {{ user.coupon }} -->
|
||||
10
|
||||
</p>
|
||||
</mat-cell>
|
||||
{{ user.coupon }}
|
||||
10
|
||||
</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 user" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">
|
||||
{{ user.createAt }}
|
||||
{{ user.createdAt | date: 'yyyy-mm-dd HH:mm'}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
|
@ -190,7 +191,7 @@
|
|||
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>최근접속일</mat-header-cell>
|
||||
<mat-cell *matCellDef="let user" fxHide fxShow.gt-sm>
|
||||
<p class="text-truncate">
|
||||
{{ user.updateAt }}
|
||||
{{ user.updatedAt | date: 'yyyy-mm-dd HH:mm'}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
|
@ -207,8 +208,8 @@
|
|||
|
||||
<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 *matRowDef="let user; columns: displayedColumns" class="user" matRipple
|
||||
[routerLink]="'/pages/users/management/list/' + user.id">
|
||||
</mat-row>
|
||||
</mat-table>
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export class UserListComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
displayedColumns = [
|
||||
'username',
|
||||
'phone',
|
||||
'status',
|
||||
// 'status',
|
||||
'totalPrice',
|
||||
'point',
|
||||
'level',
|
||||
|
|
@ -47,7 +47,7 @@ export class UserListComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
'numberOfBets',
|
||||
'referrals',
|
||||
'recommender',
|
||||
'couponStatus',
|
||||
// 'couponStatus',
|
||||
'registerDate',
|
||||
'recentConnectDate',
|
||||
'recentConnectIp'
|
||||
|
|
|
|||
31
src/app/pages/users/user/resolver/detail.resolver.ts
Normal file
31
src/app/pages/users/user/resolver/detail.resolver.ts
Normal 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
3
src/app/pages/users/user/resolver/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import { DetailResolver } from './detail.resolver';
|
||||
|
||||
export const RESOLVERS = [DetailResolver];
|
||||
|
|
@ -7,6 +7,7 @@ import { UserConnectComponent } from './component/user-connect/user-connect.comp
|
|||
import { UserRegistComponent } from './component/user-regist/user-regist.component';
|
||||
import { UserFeesComponent } from './component/user-fees/user-fees.component';
|
||||
import { UserAttendanceComponent } from './component/user-attendance/user-attendance.component';
|
||||
import { DetailResolver } from './resolver/detail.resolver';
|
||||
|
||||
const routes: Routes = [
|
||||
|
||||
|
|
@ -15,8 +16,11 @@ const routes: Routes = [
|
|||
component: UserListComponent,
|
||||
},
|
||||
{
|
||||
path: 'list/:userId',
|
||||
component: UserDetailComponent
|
||||
path: 'list/:id',
|
||||
component: UserDetailComponent,
|
||||
resolve: {
|
||||
user: DetailResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'connect',
|
||||
|
|
|
|||
|
|
@ -17,7 +17,11 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
|
|||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
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 { UserRoutingModule } from './user-routing.module';
|
||||
|
|
@ -25,6 +29,7 @@ import { COMPONENTS } from './component';
|
|||
import { MatStepperModule } from '@angular/material/stepper';
|
||||
|
||||
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
|
||||
import { RESOLVERS } from './resolver';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -33,6 +38,7 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
|
|||
MatDialogModule,
|
||||
MatChipsModule,
|
||||
MatExpansionModule,
|
||||
MatGridListModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
|
|
@ -57,6 +63,6 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
|
|||
UserRoutingModule
|
||||
],
|
||||
declarations: [...COMPONENTS],
|
||||
|
||||
providers: [...RESOLVERS]
|
||||
})
|
||||
export class UserModule { }
|
||||
export class UserModule {}
|
||||
|
|
|
|||
|
|
@ -16,4 +16,8 @@ export class UserService {
|
|||
public getAllUsers(): Observable<Page<User>> {
|
||||
return this.httpClient.get<Page<User>>(`${this.apiBaseUrl}/users`, {});
|
||||
}
|
||||
|
||||
public getUser(id: number): Observable<User> {
|
||||
return this.httpClient.get<User>(`${this.apiBaseUrl}/users/${id}`, {});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user