Orders
2 || Customer | 6 |Date | 7 |8 | |
|---|---|---|
| {{ order.shipping.name }} | 13 |{{ order.datePlaced | date}} | 14 |15 | View 16 | | 17 |
Orders
2 || Customer | 6 |Date | 7 |8 | |
|---|---|---|
| {{ order.shipping.name }} | 13 |{{ order.datePlaced | date}} | 14 |15 | View 16 | | 17 |
2 |
--------------------------------------------------------------------------------
/src/app/shared/services/shopping-cart.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, inject } from '@angular/core/testing';
2 |
3 | import { ShoppingCartService } from './shopping-cart.service';
4 |
5 | describe('ShoppingCartService', () => {
6 | beforeEach(() => {
7 | TestBed.configureTestingModule({
8 | providers: [ShoppingCartService]
9 | });
10 | });
11 |
12 | it('should be created', inject([ShoppingCartService], (service: ShoppingCartService) => {
13 | expect(service).toBeTruthy();
14 | }));
15 | });
16 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "outDir": "./dist/out-tsc",
5 | "sourceMap": true,
6 | "declaration": false,
7 | "moduleResolution": "node",
8 | "emitDecoratorMetadata": true,
9 | "experimentalDecorators": true,
10 | "target": "es5",
11 | "typeRoots": [
12 | "node_modules/@types"
13 | ],
14 | "lib": [
15 | "es2016",
16 | "dom"
17 | ],
18 | "baseUrl": "./src",
19 | "paths": {
20 | "shared/*": [
21 | "app/shared/*"
22 | ]
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/admin/components/admin-orders/admin-orders.component.ts:
--------------------------------------------------------------------------------
1 | import { Order } from '../../../shared/models/order';
2 | import { OrderService } from '../../../shared/services/order.service';
3 | import { Component, OnInit } from '@angular/core';
4 |
5 | @Component({
6 | selector: 'app-admin-orders',
7 | templateUrl: './admin-orders.component.html',
8 | styleUrls: ['./admin-orders.component.css']
9 | })
10 | export class AdminOrdersComponent {
11 | orders$;
12 |
13 | constructor(private orderService: OrderService) {
14 | this.orders$ = orderService.getOrders();
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/shared/models/order.ts:
--------------------------------------------------------------------------------
1 | import { ShoppingCart } from './shopping-cart';
2 |
3 | export class Order {
4 | datePlaced: number;
5 | items: any[];
6 |
7 | constructor(public userId: string, public shipping: any, shoppingCart: ShoppingCart) {
8 | this.datePlaced = new Date().getTime();
9 |
10 | this.items = shoppingCart.items.map(i => {
11 | return {
12 | product: {
13 | title: i.title,
14 | imageUrl: i.imageUrl,
15 | price: i.price
16 | },
17 | quantity: i.quantity,
18 | totalPrice: i.totalPrice
19 | }
20 | })
21 | }
22 | }
--------------------------------------------------------------------------------
/src/app/shopping/components/products/products.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 | {{ shoppingCart.getQuantity(product) }} in cart
9 |
10 |
11 |
14 |
15 |
3 |
17 |
18 |
--------------------------------------------------------------------------------
/src/app/shopping/components/products/product-filter/product-filter.component.html:
--------------------------------------------------------------------------------
1 |
4 |
6 |
7 |
16 |
8 |
9 |
14 |
15 |
10 |
12 |
13 |
2 |
19 |
--------------------------------------------------------------------------------
/src/app/shopping/components/products/product-filter/product-filter.component.ts:
--------------------------------------------------------------------------------
1 | import { CategoryService } from '../../../../shared/services/category.service';
2 | import { Component, OnInit, Input } from '@angular/core';
3 |
4 | @Component({
5 | selector: 'product-filter',
6 | templateUrl: './product-filter.component.html',
7 | styleUrls: ['./product-filter.component.css']
8 | })
9 | export class ProductFilterComponent implements OnInit {
10 | categories$;
11 | @Input('category') category;
12 |
13 | constructor(categoryService: CategoryService) {
14 | this.categories$ = categoryService.getAll();
15 | }
16 |
17 | ngOnInit() {
18 | }
19 |
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/admin/services/admin-auth-guard.service.ts:
--------------------------------------------------------------------------------
1 | import { Observable } from 'rxjs/Observable';
2 | import { UserService } from '../../shared/services/user.service';
3 | import { AuthService } from '../../shared/services/auth.service';
4 | import { CanActivate } from '@angular/router';
5 | import { Injectable } from '@angular/core';
6 | import 'rxjs/add/operator/map';
7 |
8 | @Injectable()
9 | export class AdminAuthGuard implements CanActivate {
10 |
11 | constructor(private auth: AuthService, private userService: UserService) { }
12 |
13 | canActivate(): Observable
3 | All Categories
8 |
15 | {{ c.name }}
16 |
17 |
18 |
2 |
--------------------------------------------------------------------------------
/src/app/shared/components/product-card/product-card.component.ts:
--------------------------------------------------------------------------------
1 | import { ShoppingCart } from '../../models/shopping-cart';
2 | import { ShoppingCartService } from '../../services/shopping-cart.service';
3 | import { Product } from '../../models/product';
4 | import { Component, OnInit, Input } from '@angular/core';
5 |
6 | @Component({
7 | selector: 'product-card',
8 | templateUrl: './product-card.component.html',
9 | styleUrls: ['./product-card.component.css']
10 | })
11 | export class ProductCardComponent {
12 | @Input('product') product: Product;
13 | @Input('show-actions') showActions = true;
14 | @Input('shopping-cart') shoppingCart: ShoppingCart;
15 |
16 | constructor(private cartService: ShoppingCartService) { }
17 |
18 | addToCart() {
19 | this.cartService.addToCart(this.product);
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/admin/components/admin-orders/admin-orders.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AdminOrdersComponent } from './admin-orders.component';
4 |
5 | describe('AdminOrdersComponent', () => {
6 | let component: AdminOrdersComponent;
7 | let fixture: ComponentFixture
3 |
20 | Order Summary
4 |You have {{ cart.totalItemsCount }} items in your shopping cart.
5 |-
6 |
-
7 | {{ item.quantity }} x {{ item.title }}
8 | 9 | {{ item.totalPrice | currency:'USD':true }} 10 |11 |
12 |
-
13 | Total
14 | 15 | {{ cart.totalPrice | currency:'USD':true }} 16 |17 |
18 |
2 | ![{{ product.title }}]()
3 |
18 |
--------------------------------------------------------------------------------
/src/app/shopping/components/order-success/order-success.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { OrderSuccessComponent } from './order-success.component';
4 |
5 | describe('OrderSuccessComponent', () => {
6 | let component: OrderSuccessComponent;
7 | let fixture: ComponentFixture
4 |
7 |
17 | {{ product.title }}
5 |{{ product.price | currency:'USD':true }}
6 |3 | New Product 4 |
5 |6 | 10 |
11 | 12 |Shopping Cart
2 |
3 |
11 |
12 |
51 |
--------------------------------------------------------------------------------
/src/app/shopping/components/products/products.component.ts:
--------------------------------------------------------------------------------
1 | import { ShoppingCart } from '../../../shared/models/shopping-cart';
2 | import { Observable } from 'rxjs/Observable';
3 | import { ShoppingCartService } from '../../../shared/services/shopping-cart.service';
4 | import { Product } from '../../../shared/models/product';
5 | import { ActivatedRoute } from '@angular/router';
6 | import { ProductService } from '../../../shared/services/product.service';
7 | import { Component, OnInit } from '@angular/core';
8 | import 'rxjs/add/operator/switchMap';
9 |
10 | @Component({
11 | selector: 'app-products',
12 | templateUrl: './products.component.html',
13 | styleUrls: ['./products.component.css']
14 | })
15 | export class ProductsComponent implements OnInit {
16 | products: Product[] = [];
17 | filteredProducts: Product[] = [];
18 | category: string;
19 | cart$: Observable
4 |
10 | 5 | You have {{ cart.totalItemsCount }} items in your shopping cart. 6 | 7 | 8 |
9 || 14 | | Product | 15 |Quantity | 16 |Price | 17 |
|---|---|---|---|
|
22 |
23 |
24 | |
25 | 26 | {{ item.title }} 27 | | 28 |
29 | |
32 | 33 | {{ item.totalPrice | currency:'USD':true }} 34 | | 35 |
| 40 | | 41 | | 42 | | {{ cart.totalPrice | currency:'USD':true }} | 43 |
| 46 | Check Out 47 | | 48 ||||
3 |
51 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 |
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
39 |
40 | /** Evergreen browsers require these. **/
41 | import 'core-js/es6/reflect';
42 | import 'core-js/es7/reflect';
43 |
44 |
45 | /**
46 | * Required to support Web Animations `@angular/animation`.
47 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
48 | **/
49 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
50 |
51 |
52 |
53 | /***************************************************************************************************
54 | * Zone JS is required by Angular itself.
55 | */
56 | import 'zone.js/dist/zone'; // Included with Angular CLI.
57 |
58 |
59 |
60 | /***************************************************************************************************
61 | * APPLICATION IMPORTS
62 | */
63 |
64 | /**
65 | * Date, currency, decimal and percent pipes.
66 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
67 | */
68 | // import 'intl'; // Run `npm install --save intl`.
69 | /**
70 | * Need to import at least one locale-data with intl.
71 | */
72 | // import 'intl/locale-data/jsonp/en';
73 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "arrow-return-shorthand": true,
7 | "callable-types": true,
8 | "class-name": true,
9 | "comment-format": [
10 | true,
11 | "check-space"
12 | ],
13 | "curly": true,
14 | "eofline": true,
15 | "forin": true,
16 | "import-blacklist": [
17 | true,
18 | "rxjs"
19 | ],
20 | "import-spacing": true,
21 | "indent": [
22 | true,
23 | "spaces"
24 | ],
25 | "interface-over-type-literal": true,
26 | "label-position": true,
27 | "max-line-length": [
28 | true,
29 | 140
30 | ],
31 | "member-access": false,
32 | "member-ordering": [
33 | true,
34 | {
35 | "order": [
36 | "static-field",
37 | "instance-field",
38 | "static-method",
39 | "instance-method"
40 | ]
41 | }
42 | ],
43 | "no-arg": true,
44 | "no-bitwise": true,
45 | "no-console": [
46 | true,
47 | "debug",
48 | "info",
49 | "time",
50 | "timeEnd",
51 | "trace"
52 | ],
53 | "no-construct": true,
54 | "no-debugger": true,
55 | "no-duplicate-super": true,
56 | "no-empty": false,
57 | "no-empty-interface": true,
58 | "no-eval": true,
59 | "no-inferrable-types": [
60 | true,
61 | "ignore-params"
62 | ],
63 | "no-misused-new": true,
64 | "no-non-null-assertion": true,
65 | "no-shadowed-variable": true,
66 | "no-string-literal": false,
67 | "no-string-throw": true,
68 | "no-switch-case-fall-through": true,
69 | "no-trailing-whitespace": true,
70 | "no-unnecessary-initializer": true,
71 | "no-unused-expression": true,
72 | "no-use-before-declare": true,
73 | "no-var-keyword": true,
74 | "object-literal-sort-keys": false,
75 | "one-line": [
76 | true,
77 | "check-open-brace",
78 | "check-catch",
79 | "check-else",
80 | "check-whitespace"
81 | ],
82 | "prefer-const": true,
83 | "quotemark": [
84 | true,
85 | "single"
86 | ],
87 | "radix": true,
88 | "semicolon": [
89 | true,
90 | "always"
91 | ],
92 | "triple-equals": [
93 | true,
94 | "allow-null-check"
95 | ],
96 | "typedef-whitespace": [
97 | true,
98 | {
99 | "call-signature": "nospace",
100 | "index-signature": "nospace",
101 | "parameter": "nospace",
102 | "property-declaration": "nospace",
103 | "variable-declaration": "nospace"
104 | }
105 | ],
106 | "typeof-compare": true,
107 | "unified-signatures": true,
108 | "variable-name": false,
109 | "whitespace": [
110 | true,
111 | "check-branch",
112 | "check-decl",
113 | "check-operator",
114 | "check-separator",
115 | "check-type"
116 | ],
117 | "directive-selector": [
118 | true,
119 | "attribute",
120 | "app",
121 | "camelCase"
122 | ],
123 | "component-selector": [
124 | true,
125 | "element",
126 | "app",
127 | "kebab-case"
128 | ],
129 | "use-input-property-decorator": true,
130 | "use-output-property-decorator": true,
131 | "use-host-property-decorator": true,
132 | "no-input-rename": true,
133 | "no-output-rename": true,
134 | "use-life-cycle-interface": true,
135 | "use-pipe-transform-interface": true,
136 | "component-class-suffix": true,
137 | "directive-class-suffix": true,
138 | "no-access-missing-member": true,
139 | "templates-use-public": true,
140 | "invoke-injectable": true
141 | }
142 | }
143 |
--------------------------------------------------------------------------------
4 |
46 |
47 |
48 |
50 |