bs-filter-list added to product-index : done

Author: valerisuleo

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

@@ -5,4 +5,14 @@ export interface IProduct {
     categories?: string[];
     category: string;
     id?: string;
+}
+
+export interface ICategory {
+    categoryName: string;
+    isSelected: boolean;
+}
+
+export interface IListGroup {
+    list: any[];
+    key: string;
 }

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

@@ -1,16 +1,18 @@
 <div class="row mt-5">
-    <div class="col-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quae illo, ipsa asperiores iure a! Et molestiae, atque cum at corrupti esse, perferendis tempore eaque officia qui laborum libero quisquam!</div>
-    <div class="col-10">
+    <div class="col-md-6 col-xl-2">
+        <bootstrap-list [props]='listGroup'></bootstrap-list>
+    </div>
+    <div class="col-md-6 col-xl-10">
         <div class="card-group">
-            <bootstrap-card *ngFor="let item of products">
-                <img class="selector-header card-img-top" src={{item.imageUrl}} alt="">
+            <bootstrap-card *ngFor="let product of products">
+                <img class="selector-header card-img-top" src={{product.imageUrl}} alt="">
                 <ng-container class="selector-body">
                     <div class="card-body">
                         <h5 class="card-title">
-                            {{item.title}}
+                            {{product.title}}
                         </h5>
                         <p class="card-text">
-                            ${{item.price}}
+                            ${{product.price}}
                         </p>
                         <a href="#" class="btn btn-primary">Go somewhere</a>
                     </div>

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { DataService } from '../../../services/data.service';
-import { IProduct } from '../interfaces';
+import { IProduct, ICategory, IListGroup } from '../interfaces';
 import { Subscription } from 'rxjs';
 
 @Component({
@@ -10,20 +10,34 @@ import { Subscription } from 'rxjs';
 })
 export class ProductsIndexComponent implements OnInit, OnDestroy {
 
-    products: IProduct[] = [];
     subscription: Subscription;
+    listGroup: IListGroup;
+    products: IProduct[] = [];
+    categories: ICategory[] = [];
+
 
     constructor(private service: DataService) { }
 
     getCollection() {
         this.subscription = this.service.getAll('vegetables')
             .subscribe((response: any) => {
-                console.log(response);
-                
                 this.products = response;
+                this.extractCategories(this.products);
             });
     }
 
+    extractCategories(data: IProduct[]) {
+        const { categories } = data[0];
+        const remap: ICategory[] = categories.map((item: string) => {
+            return {
+                categoryName: item,
+                isSelected: false
+            }
+        });
+        this.listGroup = { list: remap, key: 'categoryName'};
+    }
+
+
     ngOnInit(): void {
         this.getCollection();
     }

section_19-project/project/src/app/reusable-components/bootstrap-list/bootstrap-list.component.html

@@ -1 +1,8 @@
-<p>bootstrap-list works!</p>
+<ul class="list-group">
+    <li *ngFor="let item of list" 
+        (click)="toggleActiveClass(item)" 
+        class="list-group-item" 
+        [ngClass]="{'active': item.isSelected}">
+        {{ item[propertyKey] }}
+    </li>
+</ul>

section_19-project/project/src/app/reusable-components/bootstrap-list/bootstrap-list.component.ts

@@ -1,15 +1,33 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 
 @Component({
-  selector: 'app-bootstrap-list',
-  templateUrl: './bootstrap-list.component.html',
-  styleUrls: ['./bootstrap-list.component.scss']
+    selector: 'bootstrap-list',
+    templateUrl: './bootstrap-list.component.html',
+    styleUrls: ['./bootstrap-list.component.scss']
 })
-export class BootstrapListComponent implements OnInit {
+export class BootstrapListComponent implements OnChanges {
+    @Input() props: any;
 
-  constructor() { }
+    list: any[] = [];
+    propertyKey: string;
 
-  ngOnInit(): void {
-  }
+    constructor() { }
 
+    toggleActiveClass(current) {
+        this.list
+            .filter(el => el != current)
+            .forEach(item => item.isSelected = false);
+        current.isSelected = !current.isSelected;
+    }
+
+    ngOnChanges(change: SimpleChanges): void {
+        const { currentValue, firstChange } = change.props;
+        if (currentValue && !firstChange) {
+            const { list, key } = currentValue;
+            this.list = list;
+            this.propertyKey = key;
+        }
+    }
 }
+
+

section_19-project/project/src/app/services/data.service.ts

@@ -10,6 +10,7 @@ export class DataService {
     constructor(private db: AngularFirestore) { }
 
     getAll(collectioName: string) {
+        
         const response: AngularFirestoreCollection<ID> = this.db.collection(collectioName);
 
         return response.snapshotChanges()