2 |
57 |
--------------------------------------------------------------------------------
/src/app/shop/cart/cart-view.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component, Input} from "@angular/core";
5 |
6 | /*
7 | * Components
8 | */
9 | import { Cart, CartItem, CartService } from "../../services/cart.service";
10 | import {CartItemCountComponent} from "./cart-item-count.component";
11 |
12 | @Component({
13 | selector: "db-cart-view",
14 | templateUrl: "./cart-view.component.html"
15 | })
16 | export class CartViewComponent {
17 |
18 | private cart: Cart;
19 |
20 | constructor(private cartService: CartService) {
21 | this.cart = this.cartService.cart;
22 | }
23 |
24 | clearCart() {
25 | this.cartService.clearCart();
26 | }
27 |
28 | update(value, item: CartItem) {
29 | let res = value - item.count;
30 | if (res > 0) {
31 | for (let i = 0; i < res; i++) {
32 | this.cartService.addProduct(item.product);
33 | }
34 | } else if (res < 0) {
35 | for (let i = 0; i < -res; i++) {
36 | this.cartService.removeProduct(item.product);
37 | }
38 | }
39 | return value;
40 | }
41 | }
42 |
43 |
--------------------------------------------------------------------------------
/src/app/shop/category/category-card.component.html:
--------------------------------------------------------------------------------
1 |
3 |
56 |
4 |
32 |
5 |
29 |
30 | The cart is empty!
31 |
33 |
55 |
34 |
53 |
54 |
2 | 
3 |
9 |
--------------------------------------------------------------------------------
/src/app/shop/category/category-card.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component, Input} from "@angular/core";
5 | import {Router} from "@angular/router";
6 |
7 | /*
8 | * Components
9 | */
10 | import {Category} from "../../services/category.service";
11 |
12 | @Component({
13 | selector: "db-category-card",
14 | templateUrl: "./category-card.component.html"
15 | })
16 | export class CategoryCardComponent {
17 | @Input() category: Category;
18 |
19 | constructor(private router: Router) {}
20 |
21 | filterProducts(category: Category) {
22 | this.router.navigate(["/products"], { queryParams: { category: category.id} });
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/shop/category/category-list.component.html:
--------------------------------------------------------------------------------
1 |
4 |
8 | {{category.title}}
5 |{{category.desc}}
6 | 7 |
2 |
--------------------------------------------------------------------------------
/src/app/shop/category/category-list.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component, OnInit} from "@angular/core";
5 | import {Router} from "@angular/router";
6 | import {Observable} from "rxjs";
7 |
8 | /*
9 | * Components
10 | */
11 | import {Category, CategoryService} from "../../services/category.service";
12 |
13 | @Component({
14 | selector: "db-category-list",
15 | templateUrl: "./category-list.component.html"
16 | })
17 | export class CategoryListComponent implements OnInit {
18 |
19 | categories: ObservableCategories
3 |
4 | {{category.title}}
6 |
7 |
3 |
--------------------------------------------------------------------------------
/src/app/shop/category/category-slide.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component, Input, Output, EventEmitter} from "@angular/core";
5 |
6 | /*
7 | * Components
8 | */
9 | import {Category} from "../../services/category.service";
10 |
11 | @Component({
12 | selector: "db-category-slide",
13 | templateUrl: "./category-slide.component.html"
14 | })
15 | export class CategorySlideComponent {
16 | @Input() category: Category;
17 | @Output() select: EventEmitter{{category.title}}
4 |
2 |
--------------------------------------------------------------------------------
/src/app/shop/product/product-card.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component, Input, Output, EventEmitter} from "@angular/core";
5 |
6 | /*
7 | * Components
8 | */
9 | import { Product } from "../../services/product.service";
10 |
11 |
12 | @Component({
13 | selector: "db-product-card",
14 | templateUrl: "./product-card.component.html"
15 | })
16 | export class ProductCardComponent {
17 | @Input() products: Product[];
18 | @Output() addToCart: EventEmitter
3 |
20 |
4 | 
8 |
19 |
5 | {{product.title}}
6 |
7 |
9 |
11 |
15 |
18 | Price: ${{product.price}}
10 |
2 |
--------------------------------------------------------------------------------
/src/app/shop/product/product-list.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component} from "@angular/core";
5 |
6 | @Component({
7 | selector: "db-products",
8 | templateUrl: "./product-list.component.html"
9 | })
10 | export class ProductListComponent {}
11 |
--------------------------------------------------------------------------------
/src/app/shop/product/product-search.component.html:
--------------------------------------------------------------------------------
1 |
3 |
11 |
4 |
7 |
8 |
10 |
2 |
--------------------------------------------------------------------------------
/src/app/shop/product/product-search.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component} from "@angular/core";
5 | import {Router} from "@angular/router";
6 |
7 | @Component({
8 | selector: "db-product-search",
9 | templateUrl: "./product-search.component.html"
10 | })
11 | export class ProductSearchComponent {
12 |
13 | constructor(private router: Router) {}
14 |
15 | searchProduct(value: string) {
16 | this.router.navigate(["/products"], { queryParams: { search: value} });
17 | }
18 | }
19 |
20 |
--------------------------------------------------------------------------------
/src/app/shop/product/product-view.component.html:
--------------------------------------------------------------------------------
1 | Quick Shop
3 |
5 |
2 |
--------------------------------------------------------------------------------
/src/app/shop/product/product-view.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component, OnInit} from "@angular/core";
5 | import {ActivatedRoute} from "@angular/router";
6 |
7 | /*
8 | * Components Imports
9 | */
10 | import { Product, ProductService } from "../../services/product.service";
11 | import { Cart, CartItem, CartService } from "../../services/cart.service";
12 |
13 | @Component({
14 | selector: "db-product-view",
15 | templateUrl: "./product-view.component.html"
16 | })
17 | export class ProductViewComponent implements OnInit {
18 |
19 | product: Product;
20 | cartItem: CartItem;
21 |
22 | get quantity(): number {
23 | return this.cartItem ? this.cartItem.count : 0;
24 | }
25 |
26 | get amount(): number {
27 | return this.cartItem ? this.cartItem.amount : 0;
28 | }
29 |
30 | constructor(private route: ActivatedRoute,
31 | private productService: ProductService,
32 | private cartService: CartService) { }
33 |
34 | ngOnInit(): void {
35 | this.route
36 | .params
37 | .subscribe(params => {
38 | // Get the product id
39 | let id: string = params["id"];
40 | // Return the product from ProductService
41 | this.productService.getProduct(id).subscribe((product: Product) => this.product = product);
42 | // Return the cart item
43 | this.cartItem = this.cartService.findItem(id);
44 | });
45 | }
46 |
47 | addToCart() {
48 | this.cartItem = this.cartService.addProduct(this.product);
49 | }
50 |
51 | removeFromCart() {
52 | this.cartItem = this.cartService.removeProduct(this.product);
53 | }
54 | }
55 |
56 |
--------------------------------------------------------------------------------
/src/app/shop/shop.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { BrowserModule } from "@angular/platform-browser";
3 | import { CommonModule } from "@angular/common";
4 | import {FormsModule, ReactiveFormsModule} from "@angular/forms";
5 | import {RouterModule} from "@angular/router";
6 |
7 | import {CategoryListComponent} from "./category/category-list.component";
8 | import {CategoryTitlePipe} from "../pipes/category.pipe";
9 | import {CategoryCardComponent} from "./category/category-card.component";
10 | import {CategorySlideComponent} from "./category/category-slide.component";
11 |
12 | import { ProductListComponent } from "./product/product-list.component";
13 | import { ProductViewComponent } from "./product/product-view.component";
14 | import { ProductCardComponent } from "./product/product-card.component";
15 | import { ProductSearchComponent } from "./product/product-search.component";
16 | import { ProductGridComponent } from "./product/product-grid.component";
17 |
18 | import { CartItemCountComponent } from "./cart/cart-item-count.component";
19 | import { CartMenuComponent } from "./cart/cart-menu.component";
20 | import { CartViewComponent } from "./cart/cart-view.component";
21 |
22 | import { BsDropdownModule } from 'ngx-bootstrap';
23 |
24 | @NgModule({
25 | imports: [
26 | BrowserModule, CommonModule,
27 | FormsModule, ReactiveFormsModule,
28 | RouterModule, BsDropdownModule
29 | ],
30 | declarations: [
31 | CategoryListComponent,
32 | CategoryTitlePipe,
33 | CategoryCardComponent,
34 | CategorySlideComponent,
35 | ProductListComponent,
36 | ProductViewComponent,
37 | ProductCardComponent,
38 | ProductSearchComponent,
39 | ProductGridComponent,
40 | CartItemCountComponent,
41 | CartMenuComponent,
42 | CartViewComponent
43 | ],
44 | exports: [
45 | CategoryListComponent,
46 | CategoryTitlePipe,
47 | CategoryCardComponent,
48 | CategorySlideComponent,
49 | ProductListComponent,
50 | ProductViewComponent,
51 | ProductCardComponent,
52 | ProductSearchComponent,
53 | ProductGridComponent,
54 | CartItemCountComponent,
55 | CartMenuComponent,
56 | CartViewComponent
57 | ]
58 | })
59 | export class ShopModule { }
60 |
--------------------------------------------------------------------------------
/src/app/welcome/welcome.component.html:
--------------------------------------------------------------------------------
1 |
3 |
63 |
4 | 
5 |
6 |
7 |
31 |
8 |
20 |
9 |
12 | {{product?.title}}
10 |{{product?.desc}}
11 |-
13 |
- ID: {{product?.id}} 14 |
- Category: {{product?.categoryId | categoryTitle}} 15 |
21 |
25 |
22 |
24 | Price: {{product?.price | currency:'USD':true:'1.2-2'}}
23 |
26 |
30 |
27 |
29 | Price: {{product?.price | currency:'USD':true:'1.2-2'}}
28 |
32 |
62 |
33 |
61 |
34 |
59 |
60 |
2 |
23 |
--------------------------------------------------------------------------------
/src/app/welcome/welcome.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shadonet/angular6-bootstrap4-firebase-ecommerce-application/86cd12ec4d1f34a5fc421c24d2b977d65022711a/src/app/welcome/welcome.component.scss
--------------------------------------------------------------------------------
/src/app/welcome/welcome.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { WelcomeComponent } from './welcome.component';
4 |
5 | describe('WelcomeComponent', () => {
6 | let component: WelcomeComponent;
7 | let fixture: ComponentFixture
3 |
13 |
14 |
4 |
5 |
6 |
8 |
10 |
11 |
12 |
15 |
21 |
22 |
16 |
18 |
19 |
20 |