users is modified
This commit is contained in:
parent
9e8ea6c188
commit
dc48f3cf2e
|
|
@ -1,8 +1,12 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { Routes, RouterModule } from '@angular/router';
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
const routes: Routes = [];
|
{
|
||||||
|
path: 'pages',
|
||||||
|
loadChildren: './pages/pages.module#PagesModule'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [RouterModule.forRoot(routes)],
|
imports: [RouterModule.forRoot(routes)],
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@ export const locale = {
|
||||||
DASHBOARD: 'Dashboard',
|
DASHBOARD: 'Dashboard',
|
||||||
USERS: 'Users',
|
USERS: 'Users',
|
||||||
APPLICATIONS: 'Application',
|
APPLICATIONS: 'Application',
|
||||||
SAMPLE: {
|
USER: {
|
||||||
TITLE: 'Sample',
|
TITLE: 'User',
|
||||||
BADGE: '15'
|
BADGE: '15'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@ export const locale = {
|
||||||
DASHBOARD: '대시보드',
|
DASHBOARD: '대시보드',
|
||||||
USERS: '사용자 관리',
|
USERS: '사용자 관리',
|
||||||
APPLICATIONS: '어플리케이션',
|
APPLICATIONS: '어플리케이션',
|
||||||
SAMPLE: {
|
USER: {
|
||||||
TITLE: '샘플',
|
TITLE: '사용자',
|
||||||
BADGE: '15'
|
BADGE: '15'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,15 +16,15 @@ export const navigation: FuseNavigation[] = [
|
||||||
type: 'collapsable',
|
type: 'collapsable',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
id: 'sample',
|
id: 'user',
|
||||||
title: 'Sample',
|
title: 'User',
|
||||||
translate: 'NAV.SAMPLE.TITLE',
|
translate: 'NAV.USER.TITLE',
|
||||||
type: 'item',
|
type: 'item',
|
||||||
icon: 'email',
|
icon: 'email',
|
||||||
url: '/sample',
|
url: '/pages/users/users',
|
||||||
badge: {
|
badge: {
|
||||||
title: '25',
|
title: '25',
|
||||||
translate: 'NAV.SAMPLE.BADGE',
|
translate: 'NAV.USER.BADGE',
|
||||||
bg: '#F44336',
|
bg: '#F44336',
|
||||||
fg: '#FFFFFF'
|
fg: '#FFFFFF'
|
||||||
}
|
}
|
||||||
|
|
|
||||||
15
src/app/pages/pages-routing.module.ts
Normal file
15
src/app/pages/pages-routing.module.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{
|
||||||
|
path: 'users',
|
||||||
|
loadChildren: './users/users.module#UsersModule'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [RouterModule.forChild(routes)],
|
||||||
|
exports: [RouterModule]
|
||||||
|
})
|
||||||
|
export class PagesRoutingModule {}
|
||||||
9
src/app/pages/pages.module.ts
Normal file
9
src/app/pages/pages.module.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
|
||||||
|
import { FuseSharedModule } from 'src/@fuse/shared.module';
|
||||||
|
import { PagesRoutingModule } from './pages-routing.module';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [FuseSharedModule, PagesRoutingModule]
|
||||||
|
})
|
||||||
|
export class PagesModule {}
|
||||||
4
src/app/pages/users/user/component/index.ts
Normal file
4
src/app/pages/users/user/component/index.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
import { UserDetailComponent } from './user-detail.component';
|
||||||
|
import { UserListComponent } from './user-list.component';
|
||||||
|
|
||||||
|
export const COMPONENTS = [UserDetailComponent, UserListComponent];
|
||||||
449
src/app/pages/users/user/component/user-detail.component.html
Normal file
449
src/app/pages/users/user/component/user-detail.component.html
Normal file
|
|
@ -0,0 +1,449 @@
|
||||||
|
<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">
|
||||||
|
|
||||||
|
<!-- 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 -->
|
||||||
|
|
||||||
|
</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>
|
||||||
|
<!-- / CENTER -->
|
||||||
|
</div>
|
||||||
397
src/app/pages/users/user/component/user-detail.component.scss
Normal file
397
src/app/pages/users/user/component/user-detail.component.scss
Normal file
|
|
@ -0,0 +1,397 @@
|
||||||
|
@import "src/@fuse/scss/fuse";
|
||||||
|
|
||||||
|
#order {
|
||||||
|
|
||||||
|
.header {
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
margin: 6px 0 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
|
||||||
|
.mat-tab-group,
|
||||||
|
.mat-tab-body-wrapper,
|
||||||
|
.tab-content {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
|
||||||
|
&.products {
|
||||||
|
|
||||||
|
.product-row {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.invoice {
|
||||||
|
|
||||||
|
#invoice {
|
||||||
|
|
||||||
|
&.compact {
|
||||||
|
padding: 0;
|
||||||
|
overflow: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
.invoice-container {
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 1020px;
|
||||||
|
min-width: 1020px;
|
||||||
|
max-width: 1020px;
|
||||||
|
padding: 64px 88px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #FFFFFF;
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
@include mat-elevation(7);
|
||||||
|
|
||||||
|
.header {
|
||||||
|
|
||||||
|
.invoice-date {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client {
|
||||||
|
|
||||||
|
.invoice-number {
|
||||||
|
font-size: 18px;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
|
||||||
|
.number {
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.due-date {
|
||||||
|
font-size: 18px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
|
||||||
|
.date {
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.issuer {
|
||||||
|
margin-right: -88px;
|
||||||
|
padding-right: 66px;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 96px;
|
||||||
|
padding: 0 8px;
|
||||||
|
border-right: 1px solid rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
|
||||||
|
.invoice-table {
|
||||||
|
margin-top: 64px;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
thead {
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
th {
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-color: rgba(0, 0, 0, 0.12);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
max-width: 360px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-table-footer {
|
||||||
|
margin: 32px 0 72px 0;
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
td {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
border-bottom: none;
|
||||||
|
padding: 4px 8px;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.discount {
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding-bottom: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.total {
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 24px 8px;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
font-size: 35px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: rgba(0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
|
||||||
|
.note {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// IE10 fix
|
||||||
|
.logo, .small-note {
|
||||||
|
-ms-flex: 0 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 32px;
|
||||||
|
min-width: 32px;
|
||||||
|
margin-right: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-note {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* PRINT STYLES */
|
||||||
|
@media print {
|
||||||
|
|
||||||
|
/* Invoice Specific Styles */
|
||||||
|
#invoice {
|
||||||
|
|
||||||
|
&.compact {
|
||||||
|
|
||||||
|
.invoice-container {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
|
||||||
|
.invoice-date {
|
||||||
|
margin-bottom: 16pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.issuer {
|
||||||
|
padding-right: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
|
||||||
|
.invoice-table {
|
||||||
|
margin-top: 16pt;
|
||||||
|
|
||||||
|
thead {
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-size: 10pt;
|
||||||
|
max-width: 60pt;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
td {
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail {
|
||||||
|
margin-top: 4pt;
|
||||||
|
font-size: 9pt;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-table-footer {
|
||||||
|
margin: 16pt 0;
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
td {
|
||||||
|
font-size: 13pt;
|
||||||
|
padding: 4pt 4pt;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.discount {
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding-bottom: 16pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.total {
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 16pt 4pt 0 4pt;
|
||||||
|
font-size: 16pt;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
|
||||||
|
.note {
|
||||||
|
font-size: 10pt;
|
||||||
|
margin-bottom: 8pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
margin-right: 8pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-note {
|
||||||
|
font-size: 8pt;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-tab-body-content {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-tab-label {
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
table-layout: fixed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
61
src/app/pages/users/user/component/user-detail.component.ts
Normal file
61
src/app/pages/users/user/component/user-detail.component.ts
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||||
|
import { Subject } from 'rxjs';
|
||||||
|
import { takeUntil } from 'rxjs/operators';
|
||||||
|
|
||||||
|
import { fuseAnimations } from 'src/@fuse/animations';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-user-user-detail',
|
||||||
|
templateUrl: './user-detail.component.html',
|
||||||
|
styleUrls: ['./user-detail.component.scss'],
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
animations: fuseAnimations
|
||||||
|
})
|
||||||
|
export class UserDetailComponent implements OnInit, OnDestroy {
|
||||||
|
user: any;
|
||||||
|
|
||||||
|
// Private
|
||||||
|
private _unsubscribeAll: Subject<any>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*
|
||||||
|
* @param {EcommerceOrderService} userService
|
||||||
|
* @param {FormBuilder} _formBuilder
|
||||||
|
*/
|
||||||
|
constructor(private _formBuilder: FormBuilder) {
|
||||||
|
// Set the defaults
|
||||||
|
// Set the private defaults
|
||||||
|
this._unsubscribeAll = new Subject();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Lifecycle hooks
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On init
|
||||||
|
*/
|
||||||
|
ngOnInit(): void {
|
||||||
|
// Subscribe to update order on changes
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On destroy
|
||||||
|
*/
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
// Unsubscribe from all subscriptions
|
||||||
|
this._unsubscribeAll.next();
|
||||||
|
this._unsubscribeAll.complete();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Public methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update status
|
||||||
|
*/
|
||||||
|
updateStatus(): void {}
|
||||||
|
}
|
||||||
164
src/app/pages/users/user/component/user-list.component.html
Normal file
164
src/app/pages/users/user/component/user-list.component.html
Normal file
|
|
@ -0,0 +1,164 @@
|
||||||
|
<div id="users" 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="column"
|
||||||
|
fxLayoutAlign="center center"
|
||||||
|
fxLayout.gt-xs="row"
|
||||||
|
fxLayoutAlign.gt-xs="space-between center"
|
||||||
|
>
|
||||||
|
<!-- APP TITLE -->
|
||||||
|
<div
|
||||||
|
class="logo mb-24 mb-sm-0"
|
||||||
|
fxLayout="row"
|
||||||
|
fxLayoutAlign="start center"
|
||||||
|
>
|
||||||
|
<mat-icon
|
||||||
|
class="logo-icon s-32 mr-16"
|
||||||
|
[@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
|
||||||
|
>
|
||||||
|
shopping_basket
|
||||||
|
</mat-icon>
|
||||||
|
<span
|
||||||
|
class="logo-text h1"
|
||||||
|
[@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
|
||||||
|
>Users</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<!-- / APP TITLE -->
|
||||||
|
|
||||||
|
<!-- SEARCH -->
|
||||||
|
<div class="search-wrapper ml-sm-32">
|
||||||
|
<div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<mat-icon>search</mat-icon>
|
||||||
|
<input #filter placeholder="Search for an order" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / SEARCH -->
|
||||||
|
</div>
|
||||||
|
<!-- / HEADER -->
|
||||||
|
|
||||||
|
<!-- CONTENT CARD -->
|
||||||
|
<div class="content-card">
|
||||||
|
<mat-table
|
||||||
|
class="users-table"
|
||||||
|
#table
|
||||||
|
matSort
|
||||||
|
[@animateStagger]="{ value: '50' }"
|
||||||
|
fusePerfectScrollbar
|
||||||
|
>
|
||||||
|
<!-- ID Column -->
|
||||||
|
<ng-container matColumnDef="id">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>ID</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let order">
|
||||||
|
<p class="text-truncate">{{ order.id }}</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Reference Column -->
|
||||||
|
<ng-container matColumnDef="reference">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
||||||
|
>Reference</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||||
|
<p class="text-truncate">{{ order.reference }}</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Name Column -->
|
||||||
|
<ng-container matColumnDef="customer">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>Customer</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let order">
|
||||||
|
<p class="text-truncate">
|
||||||
|
{{ order.customer.firstName }}
|
||||||
|
{{ order.customer.lastName }}
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Total Price Column -->
|
||||||
|
<ng-container matColumnDef="total">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md
|
||||||
|
>Total</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
|
||||||
|
<p class="total-price text-truncate">
|
||||||
|
{{ order.total | currency: 'USD':'symbol' }}
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Payment Column -->
|
||||||
|
<ng-container matColumnDef="payment">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
||||||
|
>Payment</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||||
|
<p class="text-truncate">
|
||||||
|
{{ order.payment.method }}
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Status Column -->
|
||||||
|
<ng-container matColumnDef="status">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>Status</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let order">
|
||||||
|
<p
|
||||||
|
class="status text-truncate h6 p-4"
|
||||||
|
[ngClass]="order.status[0].color"
|
||||||
|
>
|
||||||
|
{{ order.status[0].name }}
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Date Column -->
|
||||||
|
<ng-container matColumnDef="date">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
||||||
|
>Date</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||||
|
<p class="text-truncate">
|
||||||
|
{{ order.date }}
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<mat-header-row
|
||||||
|
*matHeaderRowDef="displayedColumns; sticky: true"
|
||||||
|
></mat-header-row>
|
||||||
|
|
||||||
|
<mat-row
|
||||||
|
*matRowDef="let order; columns: displayedColumns"
|
||||||
|
class="order"
|
||||||
|
matRipple
|
||||||
|
[routerLink]="'/apps/e-commerce/users/' + order.id"
|
||||||
|
>
|
||||||
|
</mat-row>
|
||||||
|
</mat-table>
|
||||||
|
|
||||||
|
<mat-paginator
|
||||||
|
#paginator
|
||||||
|
[pageIndex]="0"
|
||||||
|
[pageSize]="10"
|
||||||
|
[pageSizeOptions]="[5, 10, 25, 100]"
|
||||||
|
>
|
||||||
|
</mat-paginator>
|
||||||
|
</div>
|
||||||
|
<!-- / CONTENT CARD -->
|
||||||
|
</div>
|
||||||
|
<!-- / CENTER -->
|
||||||
|
</div>
|
||||||
117
src/app/pages/users/user/component/user-list.component.scss
Normal file
117
src/app/pages/users/user/component/user-list.component.scss
Normal file
|
|
@ -0,0 +1,117 @@
|
||||||
|
@import 'src/@fuse/scss/fuse';
|
||||||
|
|
||||||
|
app-user-user-list {
|
||||||
|
#users {
|
||||||
|
.top-bg {
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
height: 224px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .center {
|
||||||
|
> .header {
|
||||||
|
.search-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 480px;
|
||||||
|
border-radius: 28px;
|
||||||
|
overflow: hidden;
|
||||||
|
@include mat-elevation(1);
|
||||||
|
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
padding: 0 18px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
min-height: 48px;
|
||||||
|
max-height: 48px;
|
||||||
|
padding: 0 16px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
padding: 8px 0;
|
||||||
|
height: 160px !important;
|
||||||
|
min-height: 160px !important;
|
||||||
|
max-height: 160px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-tab-group,
|
||||||
|
.mat-tab-body-wrapper,
|
||||||
|
.tab-content {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.users-table {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
overflow: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
.mat-header-row {
|
||||||
|
min-height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-cell {
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-id {
|
||||||
|
flex: 0 1 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-image {
|
||||||
|
flex: 0 1 84px;
|
||||||
|
|
||||||
|
.product-image {
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-buttons {
|
||||||
|
flex: 0 1 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-indicator {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-right: 8px;
|
||||||
|
|
||||||
|
& + span {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-icon {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
75
src/app/pages/users/user/component/user-list.component.ts
Normal file
75
src/app/pages/users/user/component/user-list.component.ts
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
import {
|
||||||
|
Component,
|
||||||
|
ElementRef,
|
||||||
|
OnDestroy,
|
||||||
|
OnInit,
|
||||||
|
ViewChild,
|
||||||
|
ViewEncapsulation
|
||||||
|
} from '@angular/core';
|
||||||
|
import { MatPaginator } from '@angular/material/paginator';
|
||||||
|
import { MatSort } from '@angular/material/sort';
|
||||||
|
import { DataSource } from '@angular/cdk/collections';
|
||||||
|
import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
|
||||||
|
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
|
||||||
|
|
||||||
|
import { fuseAnimations } from 'src/@fuse/animations';
|
||||||
|
import { FuseUtils } from 'src/@fuse/utils';
|
||||||
|
|
||||||
|
import { takeUntil } from 'rxjs/internal/operators';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-user-user-list',
|
||||||
|
templateUrl: './user-list.component.html',
|
||||||
|
styleUrls: ['./user-list.component.scss'],
|
||||||
|
animations: fuseAnimations,
|
||||||
|
encapsulation: ViewEncapsulation.None
|
||||||
|
})
|
||||||
|
export class UserListComponent implements OnInit, OnDestroy {
|
||||||
|
displayedColumns = [
|
||||||
|
'id',
|
||||||
|
'reference',
|
||||||
|
'customer',
|
||||||
|
'total',
|
||||||
|
'payment',
|
||||||
|
'status',
|
||||||
|
'date'
|
||||||
|
];
|
||||||
|
|
||||||
|
@ViewChild(MatPaginator, { static: true })
|
||||||
|
paginator: MatPaginator;
|
||||||
|
|
||||||
|
@ViewChild('filter', { static: true })
|
||||||
|
filter: ElementRef;
|
||||||
|
|
||||||
|
@ViewChild(MatSort, { static: true })
|
||||||
|
sort: MatSort;
|
||||||
|
|
||||||
|
// Private
|
||||||
|
private _unsubscribeAll: Subject<any>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*/
|
||||||
|
constructor() {
|
||||||
|
// Set the private defaults
|
||||||
|
this._unsubscribeAll = new Subject();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Lifecycle hooks
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On init
|
||||||
|
*/
|
||||||
|
ngOnInit(): void {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On destroy
|
||||||
|
*/
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
// Unsubscribe from all subscriptions
|
||||||
|
this._unsubscribeAll.next();
|
||||||
|
this._unsubscribeAll.complete();
|
||||||
|
}
|
||||||
|
}
|
||||||
23
src/app/pages/users/user/component/user-list.theme.scss
Normal file
23
src/app/pages/users/user/component/user-list.theme.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
@mixin users-user-list-theme($theme) {
|
||||||
|
$background: map-get($theme, background);
|
||||||
|
$foreground: map-get($theme, foreground);
|
||||||
|
|
||||||
|
e-commerce-orders {
|
||||||
|
.header {
|
||||||
|
.search-wrapper {
|
||||||
|
background: map-get($background, card);
|
||||||
|
|
||||||
|
.search {
|
||||||
|
.mat-icon {
|
||||||
|
color: map-get($foreground, icon);
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
background: map-get($background, card);
|
||||||
|
color: map-get($foreground, text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
17
src/app/pages/users/user/user-routing.module.ts
Normal file
17
src/app/pages/users/user/user-routing.module.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
|
|
||||||
|
import { UserListComponent } from './component/user-list.component';
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
component: UserListComponent
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [RouterModule.forChild(routes)],
|
||||||
|
exports: [RouterModule]
|
||||||
|
})
|
||||||
|
export class UserRoutingModule {}
|
||||||
43
src/app/pages/users/user/user.module.ts
Normal file
43
src/app/pages/users/user/user.module.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
|
||||||
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
import { MatChipsModule } from '@angular/material/chips';
|
||||||
|
import { MatRippleModule } from '@angular/material/core';
|
||||||
|
import { MatExpansionModule } from '@angular/material/expansion';
|
||||||
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||||
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
|
import { MatInputModule } from '@angular/material/input';
|
||||||
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||||
|
import { MatSelectModule } from '@angular/material/select';
|
||||||
|
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||||
|
import { MatSortModule } from '@angular/material/sort';
|
||||||
|
import { MatTableModule } from '@angular/material/table';
|
||||||
|
import { MatTabsModule } from '@angular/material/tabs';
|
||||||
|
|
||||||
|
import { FuseSharedModule } from 'src/@fuse/shared.module';
|
||||||
|
import { UserRoutingModule } from './user-routing.module';
|
||||||
|
import { COMPONENTS } from './component';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
MatButtonModule,
|
||||||
|
MatChipsModule,
|
||||||
|
MatExpansionModule,
|
||||||
|
MatFormFieldModule,
|
||||||
|
MatIconModule,
|
||||||
|
MatInputModule,
|
||||||
|
MatPaginatorModule,
|
||||||
|
MatRippleModule,
|
||||||
|
MatSelectModule,
|
||||||
|
MatSortModule,
|
||||||
|
MatSnackBarModule,
|
||||||
|
MatTableModule,
|
||||||
|
MatTabsModule,
|
||||||
|
|
||||||
|
FuseSharedModule,
|
||||||
|
|
||||||
|
UserRoutingModule
|
||||||
|
],
|
||||||
|
declarations: [...COMPONENTS]
|
||||||
|
})
|
||||||
|
export class UserModule {}
|
||||||
15
src/app/pages/users/users-routing.module.ts
Normal file
15
src/app/pages/users/users-routing.module.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{
|
||||||
|
path: 'users',
|
||||||
|
loadChildren: './user/user.module#UserModule'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [RouterModule.forChild(routes)],
|
||||||
|
exports: [RouterModule]
|
||||||
|
})
|
||||||
|
export class UsersRoutingModule {}
|
||||||
9
src/app/pages/users/users.module.ts
Normal file
9
src/app/pages/users/users.module.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
|
||||||
|
import { FuseSharedModule } from 'src/@fuse/shared.module';
|
||||||
|
import { UsersRoutingModule } from './users-routing.module';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [FuseSharedModule, UsersRoutingModule]
|
||||||
|
})
|
||||||
|
export class UsersModule {}
|
||||||
Loading…
Reference in New Issue
Block a user