diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 06c7342..334be4f 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,11 +1,15 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; - -const routes: Routes = []; +const routes: Routes = [ + { + path: 'pages', + loadChildren: './pages/pages.module#PagesModule' + } +]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) -export class AppRoutingModule { } +export class AppRoutingModule {} diff --git a/src/app/navigation/i18n/en.ts b/src/app/navigation/i18n/en.ts index d14d045..6b3c982 100644 --- a/src/app/navigation/i18n/en.ts +++ b/src/app/navigation/i18n/en.ts @@ -5,8 +5,8 @@ export const locale = { DASHBOARD: 'Dashboard', USERS: 'Users', APPLICATIONS: 'Application', - SAMPLE: { - TITLE: 'Sample', + USER: { + TITLE: 'User', BADGE: '15' } } diff --git a/src/app/navigation/i18n/ko.ts b/src/app/navigation/i18n/ko.ts index 5dc5d9d..adbd164 100644 --- a/src/app/navigation/i18n/ko.ts +++ b/src/app/navigation/i18n/ko.ts @@ -5,8 +5,8 @@ export const locale = { DASHBOARD: '대시보드', USERS: '사용자 관리', APPLICATIONS: '어플리케이션', - SAMPLE: { - TITLE: '샘플', + USER: { + TITLE: '사용자', BADGE: '15' } } diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts index 211fefd..6417ed5 100644 --- a/src/app/navigation/navigation.ts +++ b/src/app/navigation/navigation.ts @@ -16,15 +16,15 @@ export const navigation: FuseNavigation[] = [ type: 'collapsable', children: [ { - id: 'sample', - title: 'Sample', - translate: 'NAV.SAMPLE.TITLE', + id: 'user', + title: 'User', + translate: 'NAV.USER.TITLE', type: 'item', icon: 'email', - url: '/sample', + url: '/pages/users/users', badge: { title: '25', - translate: 'NAV.SAMPLE.BADGE', + translate: 'NAV.USER.BADGE', bg: '#F44336', fg: '#FFFFFF' } diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts new file mode 100644 index 0000000..cdb88c8 --- /dev/null +++ b/src/app/pages/pages-routing.module.ts @@ -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 {} diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts new file mode 100644 index 0000000..82718f0 --- /dev/null +++ b/src/app/pages/pages.module.ts @@ -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 {} diff --git a/src/app/pages/users/user/component/index.ts b/src/app/pages/users/user/component/index.ts new file mode 100644 index 0000000..0c6c60c --- /dev/null +++ b/src/app/pages/users/user/component/index.ts @@ -0,0 +1,4 @@ +import { UserDetailComponent } from './user-detail.component'; +import { UserListComponent } from './user-list.component'; + +export const COMPONENTS = [UserDetailComponent, UserListComponent]; diff --git a/src/app/pages/users/user/component/user-detail.component.html b/src/app/pages/users/user/component/user-detail.component.html new file mode 100644 index 0000000..77b20e5 --- /dev/null +++ b/src/app/pages/users/user/component/user-detail.component.html @@ -0,0 +1,449 @@ +
+ + +
+ + + +
+ + +
+ + +
+ + + +
+
+ Order {{user.reference}} +
+
+ from + {{user.customer.firstName}} {{user.customer.lastName}} +
+
+
+ + +
+ + + +
+ + +
+ + + + + +
+ +
+ +
+ account_circle +
Customer
+
+ +
+ + + + + + + + + + + + + + + + + +
NameEmailPhoneCompany
+
+ + {{user.customer.firstName}} + {{user.customer.lastName}} + +
+ 		+ + + {{user.customer.phone}} + + {{user.customer.company}} + +
+
+ + + + + + + Shipping Address + + +
+
{{user.customer.shippingAddress.address}} +
+ +
+ + + + + + + Invoice Address + + +
+
{{user.customer.invoiceAddress.address}} +
+ +
+ + + + + +
+ +
+ +
+ access_time +
Order Status
+
+ + + + + + + + + + + + + + + +
StatusUpdated On
+ + {{status.name}} + + + + {{status.date | date}} + +
+ + + +
+ +
+ +
+ attach_money +
Payment
+
+ + + + + + + + + + + + + + + + + + +
TransactionIDPayment MethodAmountDate
+ + {{user.payment.transactionId}} + + + + {{user.payment.method}} + + + + {{user.payment.amount}} + + + + {{user.payment.date | date}} + +
+
+ + +
+ +
+ local_shipping +
Shipping
+
+ + + + + + + + + + + + + + + + + + + + +
Tracking CodeCarrierWeightFeeDate
+ {{shipping.tracking}} + + {{shipping.carrier}} + + {{shipping.weight}} + + {{shipping.fee}} + + {{shipping.date}} +
+
+ +
+ + + +
+ + + + + + + + + + + + + + + + + + + +
IDImageNamePriceQuantity
+ {{product.id}} + + + + {{product.name}} + + {{product.price}} + + {{product.quantity}} +
+
+ + + + +
+ +
+ +
+ + +
+ +
+
{{user.date}}
+ +
+
+
+ INVOICE + {{user.reference}} +
+ +
+
+ {{user.customer.firstName}} + {{user.customer.lastName}} +
+
+ {{user.customer.invoiceAddress.address}} +
+
{{user.customer.phone}}
+ +
+
+ +
+ + +
+
FUSE INC.
+
2810 Country Club Road Cranford, NJ 07016 +
+
+66 123 455 87
+ +
www.fuseinc.com
+
+
+
+
+ +
+ + + + + + + + + + + + + + + + + + +
PRODUCTPRICEQUANTITYTOTAL
+
+ {{product.name}} +
+ 		+ {{product.price | currency:'USD':'symbol'}} + + {{product.quantity}} + + {{product.total | currency:'USD':'symbol'}} +
+ + + + + + + + + + + + + + + + + + + + +
SUBTOTAL{{user.subtotal | currency:'USD':'symbol'}}
TAX{{user.tax | currency:'USD':'symbol'}}
DISCOUNT-{{user.discount | currency:'USD':'symbol'}}
TOTAL{{user.total | currency:'USD':'symbol'}}
+
+ +
+
Please pay within 15 days. Thank you for your business. +
+
+ +
+ 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. +
+
+
+
+ + +
+
+
+ + + + +
+ + +
+ + +
+ +
\ No newline at end of file diff --git a/src/app/pages/users/user/component/user-detail.component.scss b/src/app/pages/users/user/component/user-detail.component.scss new file mode 100644 index 0000000..c7ae6a8 --- /dev/null +++ b/src/app/pages/users/user/component/user-detail.component.scss @@ -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; + } + } + +} diff --git a/src/app/pages/users/user/component/user-detail.component.ts b/src/app/pages/users/user/component/user-detail.component.ts new file mode 100644 index 0000000..1959c86 --- /dev/null +++ b/src/app/pages/users/user/component/user-detail.component.ts @@ -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; + + /** + * 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 {} +} diff --git a/src/app/pages/users/user/component/user-list.component.html b/src/app/pages/users/user/component/user-list.component.html new file mode 100644 index 0000000..b295a96 --- /dev/null +++ b/src/app/pages/users/user/component/user-list.component.html @@ -0,0 +1,164 @@ +
+ +
+ + + +
+ +
+ + + + + +
+
+ search + +
+
+ +
+ + + +
+ + + + ID + +

{{ order.id }}

+ + + + + + Reference + +

{{ order.reference }}

+ + + + + + Customer + +

+ {{ order.customer.firstName }} + {{ order.customer.lastName }} +

+ + + + + + Total + +

+ {{ order.total | currency: 'USD':'symbol' }} +

+ + + + + + Payment + +

+ {{ order.payment.method }} +

+ + + + + + Status + +

+ {{ order.status[0].name }} +

+ + + + + + Date + +

+ {{ order.date }} +

+ + + + + + + + + + + +
+ +
+ +
diff --git a/src/app/pages/users/user/component/user-list.component.scss b/src/app/pages/users/user/component/user-list.component.scss new file mode 100644 index 0000000..cc36a37 --- /dev/null +++ b/src/app/pages/users/user/component/user-list.component.scss @@ -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%; + } + } +} diff --git a/src/app/pages/users/user/component/user-list.component.ts b/src/app/pages/users/user/component/user-list.component.ts new file mode 100644 index 0000000..077821d --- /dev/null +++ b/src/app/pages/users/user/component/user-list.component.ts @@ -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; + + /** + * 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(); + } +} diff --git a/src/app/pages/users/user/component/user-list.theme.scss b/src/app/pages/users/user/component/user-list.theme.scss new file mode 100644 index 0000000..e0d6767 --- /dev/null +++ b/src/app/pages/users/user/component/user-list.theme.scss @@ -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); + } + } + } + } + } +} diff --git a/src/app/pages/users/user/user-routing.module.ts b/src/app/pages/users/user/user-routing.module.ts new file mode 100644 index 0000000..4559bae --- /dev/null +++ b/src/app/pages/users/user/user-routing.module.ts @@ -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 {} diff --git a/src/app/pages/users/user/user.module.ts b/src/app/pages/users/user/user.module.ts new file mode 100644 index 0000000..c768da1 --- /dev/null +++ b/src/app/pages/users/user/user.module.ts @@ -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 {} diff --git a/src/app/pages/users/users-routing.module.ts b/src/app/pages/users/users-routing.module.ts new file mode 100644 index 0000000..a16c34b --- /dev/null +++ b/src/app/pages/users/users-routing.module.ts @@ -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 {} diff --git a/src/app/pages/users/users.module.ts b/src/app/pages/users/users.module.ts new file mode 100644 index 0000000..1816472 --- /dev/null +++ b/src/app/pages/users/users.module.ts @@ -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 {}