/product-index: counters and ngtemplate added

Author: valerisuleo

section_19-project/project/src/app/components/products/interfaces.ts

@@ -4,7 +4,9 @@ export interface IProduct {
     price: number;
     categories?: string[];
     category: string;
-    id?: string;
+    id: string;
+    count: number;
+    isOpen: boolean;
 }
 
 export interface ICategory {

section_19-project/project/src/app/components/products/products-index/products-index.component.html

@@ -5,7 +5,7 @@
     <div class="col-md-6 col-xl-10">
         <div class="card-group">
             <bootstrap-card *ngFor="let product of products">
-                <img class="selector-header card-img-top" src={{product.imageUrl}} alt="">
+                <img class="selector-header card-img-top" src={{product.imageUrl}} alt="{{product.title}}">
                 <ng-container class="selector-body">
                     <div class="card-body">
                         <h5 class="card-title">
@@ -14,7 +14,26 @@ <h5 class="card-title">
                         <p class="card-text">
                             ${{product.price}}
                         </p>
-                        <a href="#" class="btn btn-primary">Go somewhere</a>
+                        <ng-container *ngIf="!product.isOpen
+                            then button
+                            else counter">
+                        </ng-container>
+
+                        <ng-template #counter>
+                            <div class="input-group mb-3">
+                                <div class="input-group-prepend">
+                                    <button (click)="removeItem(product)" class="btn btn-secondary" type="button" id="button-addon1">-</button>
+                                </div>
+                                <input type="text" class="form-control text-center" [placeholder]="product.count + ' in cart'" readonly>
+                                <div class="input-group-append">
+                                    <button (click)="addItem(product)" class="btn btn-secondary" type="button" id="button-addon2">+</button>
+                                </div>
+                            </div>
+                        </ng-template>
+
+                        <ng-template #button>
+                            <button (click)="counterShow(product)" class="btn btn-secondary btn-block">ADD TO CART</button>
+                        </ng-template>
                     </div>
                 </ng-container>
             </bootstrap-card>

section_19-project/project/src/app/components/products/products-index/products-index.component.ts

@@ -15,13 +15,20 @@ export class ProductsIndexComponent implements OnInit, OnDestroy {
     products: IProduct[] = [];
     categories: ICategory[] = [];
 
-
     constructor(private service: DataService) { }
 
     getCollection() {
         this.subscription = this.service.getAll('vegetables')
             .subscribe((response: any) => {
-                this.products = response;
+
+                const addCounter = response.map((item) => {
+                    return {
+                        ...item,
+                        count: 1,
+                        isOpen:false
+                    }
+                });
+                this.products = addCounter;
                 this.extractCategories(this.products);
             });
     }
@@ -35,9 +42,32 @@ export class ProductsIndexComponent implements OnInit, OnDestroy {
                 cssClass: 'organic'
             }
         });
-        this.listGroup = { list: remap, key: 'categoryName'};
+        this.listGroup = { list: remap, key: 'categoryName' };
     }
 
+    counterShow(current: IProduct) {
+        current.isOpen = true;
+    }
+
+
+    addItem(current: IProduct) {
+        const index = this.products.indexOf(current);
+        current.count = current.count + 1;
+        this.products[index] = current;
+    }
+
+    removeItem(current: IProduct) {
+        if (current.count >= 1) {
+            const index = this.products.indexOf(current);
+            current.count = current.count - 1;
+            this.products[index] = current;
+        }
+        if (current.count === 0) {
+            // hide counter
+            current.isOpen = false;
+        }
+
+    }
 
     ngOnInit(): void {
         this.getCollection();