/product-detail view, reactive form, new bs-select component: done

Author: valerisuleo

section_19-project/project/db/seeds/bread.js

@@ -3,42 +3,36 @@ let collection = [
         title: 'Pizza Slice',
         imageUrl: 'https://www.dropbox.com/s/0dymh0nkdhccz6j/119627_01.jpg?raw=1',
         price: 0.69,
-        categories: ['Bread', 'Dairy', 'Fruits', 'Seasoning and Spice', 'Vegetables'],
         category: 'Bread',
     },
     {
         title: 'Italian Style Panini Roll',
         imageUrl: 'https://www.dropbox.com/s/b03fg3pjd8m9e0z/1950_01.jpg?raw=1',
         price: 0.25,
-        categories: ['Bread', 'Dairy', 'Fruits', 'Seasoning and Spice', 'Vegetables'],
         category: 'Bread',
     },
     {
         title: 'French Baguette',
         imageUrl: 'https://www.dropbox.com/s/kgpaae6jahstelz/6742_01.jpg?raw=1',
         price: 0.69,
-        categories: ['Bread', 'Dairy', 'Fruits', 'Seasoning and Spice', 'Vegetables'],
         category: 'Bread',
     },
     {
         title: 'Maple and Pecan',
         imageUrl: 'https://www.dropbox.com/s/8wqgzxumpz9e99w/6817_01.jpg?raw=1',
         price: 0.49,
-        categories: ['Bread', 'Dairy', 'Fruits', 'Seasoning and Spice', 'Vegetables'],
         category: 'Bread',
     },
     {
         title: 'Double Chocolate Cookie',
         imageUrl: 'https://www.dropbox.com/s/lqjddrhhehdwiow/5207811_01.jpg?raw=1',
         price: 0.39,
-        categories: ['Bread', 'Dairy', 'Fruits', 'Seasoning and Spice', 'Vegetables'],
         category: 'Bread',
     },
     {
         title: 'All Butter Croisssant',
         imageUrl: 'https://www.dropbox.com/s/ojwtiirrdvo1mhs/121278_01.jpg?raw=1',
         price: 0.37,
-        categories: ['Bread', 'Dairy', 'Fruits', 'Seasoning and Spice', 'Vegetables'],
         category: 'Bread',
     },
 ]
@@ -47,7 +41,29 @@ let collection = [
 collection = collection.map((item, index) => {
     return {
         ...item,
-        seqN: index + 1
+        seqN: index + 1,
+        categories: [
+            {
+                name: 'Bread',
+                id: 1
+            },
+            {
+                name: 'Dairy',
+                id: 2
+            },
+            {
+                name: 'Fruits',
+                id: 3
+            },
+            {
+                name: 'Seasoning and Spice',
+                id: 4
+            },
+            {
+                name: 'Vegetables',
+                id: 5
+            }
+        ]
     }
 })
 

section_19-project/project/db/seeds/vegetables.js

@@ -3,35 +3,30 @@ let collection = [
         title: 'Oaklands Selection Pointed Red Peppers ',
         imageUrl: 'https://www.dropbox.com/s/3uvy83gkftwtmln/82632_01.jpg?raw=1',
         price: 1.05,
-        categories: ['Bread', 'Dairy', 'Fruits', 'Seasoning and Spice', 'Vegetables'],
         category: 'Vegetables',
     },
     {
         title: 'Oaklands Organic Vine Tomatoes',
         imageUrl: 'https://www.dropbox.com/s/7qe68yj8wyh0jd0/84570_01.jpg?raw=1',
         price: 1.60,
-        categories: ['Bread', 'Dairy', 'Fruits', 'Seasoning and Spice', 'Vegetables'],
         category: 'Vegetables',
     },
     {
         title: 'Oaklands Organic Carrots',
         imageUrl: 'https://www.dropbox.com/s/qf1597z38c1p2sy/84610_01.jpg?raw=1',
         price: 0.95,
-        categories: ['Bread', 'Dairy', 'Fruits', 'Seasoning and Spice', 'Vegetables'],
         category: 'Vegetables',
     },
     {
         title: 'Oaklands Baby Corn',
         imageUrl: 'https://www.dropbox.com/s/0cd780450mo01ho/82190_65.jpg?raw=1',
         price: 1.09,
-        categories: ['Bread', 'Dairy', 'Fruits', 'Seasoning and Spice', 'Vegetables'],
         category: 'Vegetables',
     },
     {
         title: 'Oaklands Selection British Piccolo Tomatoes',
         imageUrl: 'https://www.dropbox.com/s/daio1kdyrfw4jkp/82394_01.jpg?raw=1',
         price: 1.45,
-        categories: ['Bread', 'Dairy', 'Fruits', 'Seasoning and Spice', 'Vegetables'],
         category: 'Vegetables',
     }
 ]
@@ -40,7 +35,29 @@ let collection = [
 collection = collection.map((item, index) => {
     return {
         ...item,
-        seqN: index + 1
+        seqN: index + 1,
+        categories: [
+            {
+                name: 'Bread',
+                id: 1
+            },
+            {
+                name: 'Dairy',
+                id: 2
+            },
+            {
+                name: 'Fruits',
+                id: 3
+            },
+            {
+                name: 'Seasoning and Spice',
+                id: 4
+            },
+            {
+                name: 'Vegetables',
+                id: 5
+            }
+        ]
     }
 })
 

section_19-project/project/src/app/app-routing.module.ts

@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { ProductsIndexComponent } from './components/products/products-index/products-index.component';
+import { ProductsShowComponent } from './components/products/products-show/products-show.component';
 
 
 const routes: Routes = [
+    { path: 'products/:id', component: ProductsShowComponent },
     { path: 'products', component: ProductsIndexComponent }
     // { path: '**', component: PathNotFoundComponent }
 ];

section_19-project/project/src/app/app.module.ts

@@ -1,14 +1,17 @@
+// modules
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
 import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-
 import { AngularFireModule } from '@angular/fire';
 import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
 import { AngularFirestoreModule } from '@angular/fire/firestore';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+
+// extra
 import { environment } from '../environments/environment';
 import { DataService } from './services/data.service';
+// components
+import { AppComponent } from './app.component';
 import { ProductsIndexComponent } from './components/products/products-index/products-index.component';
 import { ProductsShowComponent } from './components/products/products-show/products-show.component';
 import { BootstrapFormComponent } from './reusable-components/bootstrap-form/bootstrap-form.component';
@@ -35,7 +38,8 @@ import { BootstrapCardGroupComponent } from './reusable-components/bootstrap-car
         AppRoutingModule,
         AngularFireModule.initializeApp(environment.firebase),
         AngularFirestoreModule,
-        AngularFireAnalyticsModule
+        AngularFireAnalyticsModule,
+        ReactiveFormsModule
     ],
     providers: [DataService],
     bootstrap: [AppComponent]

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

@@ -1,12 +1,12 @@
 <div class="row m-5">
     <div class="col-4">
-        <bootstrap-list (handleSelection)='handleSelection($event)' [props]='listGroup'></bootstrap-list>
+        <bootstrap-list (handleSelectedLi)='handleSelectedLi($event)' [props]='listGroup'></bootstrap-list>
     </div>
     <div class="col-8">
 
-        <div class="row row-cols-1 row-cols-md-3">
+        <div class="row row-cols-md-2 row-cols-xl-3">
             <bootstrap-cards-group *ngFor="let product of products">
-                <img class="selector-header card-img-top" src={{product.imageUrl}} alt="{{product.title}}">
+                <img (click)="navigateTo(product)" 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">{{product.title}}</h5>

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

@@ -2,6 +2,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { DataService } from '../../../services/data.service';
 import { IProduct, ICategory, IListGroup } from '../interfaces';
 import { Subscription } from 'rxjs';
+import { Router } from '@angular/router';
 
 @Component({
     selector: 'products-index',
@@ -18,7 +19,7 @@ export class ProductsIndexComponent implements OnInit, OnDestroy {
     // default apiCalled onload
     apiEndpoint: string = 'vegetables';
 
-    constructor(private service: DataService) { }
+    constructor(private service: DataService, private router: Router) { }
 
     getCategoriesMenu() {
         this.service.getAll('categories')
@@ -33,14 +34,19 @@ export class ProductsIndexComponent implements OnInit, OnDestroy {
             })
     }
 
-    handleSelection(obj: ICategory) {
+    handleSelectedLi(obj: ICategory) {
         this.products = [];
         this.lastPageloaded = 0;
         const currentCategory = obj.categoryName.toLowerCase();
         this.apiEndpoint = currentCategory;
         this.getCollection();
     }
 
+    navigateTo(currentProduct: IProduct) {
+        const endPoint = currentProduct.category.toLowerCase();
+        this.router.navigate([`/products/${currentProduct.id}`], { state: { data: currentProduct } });
+    }
+
     getCollection() {
         this.subscription = this.service
             .getCollectionPaginated(this.apiEndpoint, 'seqN', "asc", this.lastPageloaded, 3)

section_19-project/project/src/app/components/products/products-show/form-template.ts

@@ -0,0 +1,32 @@
+const formTemplate = [
+    {
+        name: "title",
+        type: "text",
+        label: "Title",
+        isRequired: false,
+        minLenght: 0
+    },
+    {
+        name: "price",
+        type: "text",
+        label: "Price",
+        isRequired: false,
+        minLenght: 0
+    },
+    {
+        name: "categories",
+        type: "select",
+        label: "Categories",
+        isRequired: false,
+        minLenght: 0
+    },
+    {
+        name: "imageUrl",
+        type: "text",
+        label: "Image Url",
+        isRequired: false,
+        minLenght: 0
+    },
+];
+
+export default formTemplate

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

@@ -1 +1,21 @@
-<p>products-show works!</p>
+<div class="row mt-5">
+    <div class="col">
+        <bootstrap-form (handleSubmit)="handleSubmit($event)" [formGroup]='formGroup'>
+            <bootstrap-input 
+                *ngFor="let item of inputs" 
+                [formGroup]='formGroup' 
+                [name]='item.name' 
+                [type]='item.type' 
+                [label]='item.label'>
+            </bootstrap-input>
+
+            <bootstrap-select *ngFor="let item of selects" 
+                [formGroup]='formGroup'
+                [options]='product.categories' 
+                [optionKey]="'name'" 
+                [name]='item.name' 
+                [label]='item.label'>
+            </bootstrap-select>
+        </bootstrap-form>
+    </div>
+</div>

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

@@ -1,15 +1,57 @@
 import { Component, OnInit } from '@angular/core';
+import { IProduct } from '../interfaces';
+import { BootstrapFormComponent } from '../../../reusable-components/bootstrap-form/bootstrap-form.component';
+import formTemplate from './form-template';
 
 @Component({
-  selector: 'app-products-show',
-  templateUrl: './products-show.component.html',
-  styleUrls: ['./products-show.component.scss']
+    selector: 'products-show',
+    templateUrl: './products-show.component.html',
+    styleUrls: ['./products-show.component.scss']
 })
-export class ProductsShowComponent implements OnInit {
+export class ProductsShowComponent extends BootstrapFormComponent implements OnInit {
 
-  constructor() { }
+    constructor() { 
+        super()
+    }
+
+    product: IProduct;
+
+    productDetail() {
+        const { data } = history.state;
+        if (data) {
+            localStorage.setItem('product', JSON.stringify(data));
+            this.product = data;
+        } else {
+            // this will prevent a blank page on refresh
+            const fetchDataFromLocalStorage = JSON.parse(localStorage.getItem('product'));
+            this.product = fetchDataFromLocalStorage;
+        }
+        console.log(this.product);
+        // this.productEdit(this.product)
+    }
+
+    productEdit(product: IProduct) {
+        console.log(product);
+        this.formGroup.setValue({
+            title: product.title,
+            imageUrl: product.imageUrl,
+            price: product.price,
+            categories: product.categories,
+            // category: product.category
+        })
+
+    }
+
+    handleSubmit(isSubmitted: boolean) {
+        const { value } = this.formGroup;
+        console.log(value)
+        
+    }
+
+    ngOnInit(): void {
+        this.formMaker(formTemplate);
+        this.productDetail();
+    }
 
-  ngOnInit(): void {
-  }
 
 }

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

@@ -1 +1,5 @@
-<p>bootstrap-form works!</p>
+<form (ngSubmit)="submit()" [formGroup]='formGroup'>
+    <ng-content></ng-content>
+    <button type="submit" class="btn btn-primary">Submit</button>
+    <!-- <button [disabled]="!formGroup.valid" type="submit" class="btn btn-primary">Submit</button> -->
+</form>