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

View File

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

View File

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

View File

@ -1,449 +1,235 @@
<div id="user" class="page-layout carded fullwidth inner-scroll">
<!-- 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">
<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'">
<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">
Order {{user.reference}}
</div>
<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>from</span>
<span>{{user.customer.firstName}} {{user.customer.lastName}}</span>
<span>{{ user.nickname }}</span>
</div>
</div>
</div>
<!-- / APP TITLE -->
</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>
<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">Customer</div>
<mat-icon class="m-0 mr-16 secondary-text"
>account_circle</mat-icon
>
<div class="h2 secondary-text">기본정보</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>
<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>&nbsp;</span>
</mat-form-field>
<button mat-raised-button class="mat-accent" [disabled]="statusForm.invalid">
</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>&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
</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>
</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 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 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>

View File

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

View File

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

View File

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

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

View File

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

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

View File

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

View File

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