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" 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>
|
||||||
|
|
@ -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 => {
|
||||||
|
|
|
||||||
|
|
@ -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 -->
|
||||||
|
<div class="top-bg accent"></div>
|
||||||
|
<!-- / TOP BACKGROUND -->
|
||||||
|
|
||||||
<!-- TOP BACKGROUND -->
|
<!-- CENTER -->
|
||||||
<div class="top-bg accent"></div>
|
<div class="center">
|
||||||
<!-- / TOP BACKGROUND -->
|
<!-- HEADER -->
|
||||||
|
<div
|
||||||
<!-- CENTER -->
|
class="header accent"
|
||||||
<div class="center">
|
fxLayout="row"
|
||||||
|
fxLayoutAlign="space-between center"
|
||||||
<!-- HEADER -->
|
>
|
||||||
<div class="header accent" fxLayout="row" fxLayoutAlign="space-between center">
|
<!-- APP TITLE -->
|
||||||
|
<div fxLayout="row" fxLayoutAlign="start center">
|
||||||
<!-- APP TITLE -->
|
<button
|
||||||
<div fxLayout="row" fxLayoutAlign="start center">
|
mat-icon-button
|
||||||
|
class="mr-16"
|
||||||
<button mat-icon-button class="mr-16" [routerLink]="'/apps/e-commerce/orders'">
|
[routerLink]="'/pages/users/management/list'"
|
||||||
<mat-icon>arrow_back</mat-icon>
|
>
|
||||||
</button>
|
<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 -->
|
|
||||||
|
|
||||||
|
<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>
|
</div>
|
||||||
<!-- / HEADER -->
|
</div>
|
||||||
|
<!-- / APP TITLE -->
|
||||||
<!-- 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>
|
</div>
|
||||||
<!-- / CENTER -->
|
<!-- / 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>
|
</div>
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
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 { 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',
|
||||||
|
|
|
||||||
|
|
@ -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 {}
|
||||||
|
|
|
||||||
|
|
@ -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}`, {});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user