/product-detail: Update pruduct + batched writes: done

Author: valerisuleo

section_19-project/project/src/app/components/products/batched-writes.ts

@@ -0,0 +1,29 @@
+function create(db, path, id, obj) {
+    const batch = db.firestore.batch();
+    const ref = db.doc(`/${path}/${id}`).ref;
+
+    batch.set(ref, obj);
+    batch.commit();
+}
+
+function remove(db, path, id) {
+    const batch = db.firestore.batch();
+    const ref = db.doc(`/${path}/${id}`).ref;
+
+    batch.delete(ref);
+    batch.commit();
+}
+
+function update(db, path, id, obj) {
+    const batch = db.firestore.batch();
+    const ref = db.doc(`/${path}/${id}`).ref;
+
+    batch.update(ref, obj);
+    batch.commit();
+}
+
+export default {
+    create,
+    remove,
+    update
+}

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

@@ -2,14 +2,15 @@ export interface IProduct {
     title: string;
     imageUrl: string;
     price: number;
-    categories: string[];
+    categories: ICategory[];
     category: string;
     id: string;
     count: number;
     isOpen: boolean;
+    seqN: number;
 }
 
-export interface ICategory {
+export interface ICategoryMenu {
     categoryName: string;
     isActive: boolean;
     id: string;
@@ -19,4 +20,9 @@ export interface ICategory {
 export interface IListGroup {
     list: any[];
     key: string;
+}
+
+export interface ICategory {
+    name: string;
+    id: number;
 }

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, ICategory, IListGroup } from '../interfaces';
+import { IProduct, ICategoryMenu, IListGroup } from '../interfaces';
 import { Subscription } from 'rxjs';
 import { Router } from '@angular/router';
 
@@ -14,7 +14,7 @@ export class ProductsIndexComponent implements OnInit, OnDestroy {
     subscription: Subscription;
     listGroup: IListGroup;
     products: IProduct[] = [];
-    categories: ICategory[] = [];
+    categories: ICategoryMenu[] = [];
     lastPageloaded: number = 0;
     // default apiCalled onload
     apiEndpoint: string = 'vegetables';
@@ -23,7 +23,7 @@ export class ProductsIndexComponent implements OnInit, OnDestroy {
 
     getCategoriesMenu() {
         this.service.getAll('categories')
-            .subscribe((response: ICategory[]) => {
+            .subscribe((response: ICategoryMenu[]) => {
                 const addCssClass = response.map((item: any) => {
                     return {
                         ...item,
@@ -34,7 +34,7 @@ export class ProductsIndexComponent implements OnInit, OnDestroy {
             })
     }
 
-    handleSelectedLi(obj: ICategory) {
+    handleSelectedLi(obj: ICategoryMenu) {
         this.products = [];
         this.lastPageloaded = 0;
         const currentCategory = obj.categoryName.toLowerCase();
@@ -43,7 +43,6 @@ export class ProductsIndexComponent implements OnInit, OnDestroy {
     }
 
     navigateTo(currentProduct: IProduct) {
-        const endPoint = currentProduct.category.toLowerCase();
         this.router.navigate([`/products/${currentProduct.id}`], { state: { data: currentProduct } });
     }
 

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

@@ -1,57 +1,114 @@
-import { Component, OnInit } from '@angular/core';
-import { IProduct } from '../interfaces';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
 import { BootstrapFormComponent } from '../../../reusable-components/bootstrap-form/bootstrap-form.component';
+import { DataService } from '../../../services/data.service';
+import { AngularFirestore } from '@angular/fire/firestore';
+import { IProduct, ICategory } from '../interfaces';
 import formTemplate from './form-template';
+import * as fsBatchedWrites from '../batched-writes';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'products-show',
     templateUrl: './products-show.component.html',
     styleUrls: ['./products-show.component.scss']
 })
-export class ProductsShowComponent extends BootstrapFormComponent implements OnInit {
+export class ProductsShowComponent extends BootstrapFormComponent implements OnInit, OnDestroy {
 
-    constructor() { 
+    constructor(private service: DataService, private db: AngularFirestore) {
         super()
     }
 
-    product: IProduct;
+    public id: string;
+    public apiEndPoint: string;
+    public product: IProduct;
+    private destroyed$: Subject<boolean> = new Subject();
 
-    productDetail() {
+
+    productDetail(): void {
         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)
+        this.setFormValue(this.product);
+        this.apiEndPoint = this.product.category.toLowerCase();
+        this.id = this.product.id;
     }
 
-    productEdit(product: IProduct) {
-        console.log(product);
+    setFormValue(product: IProduct): void {
         this.formGroup.setValue({
             title: product.title,
             imageUrl: product.imageUrl,
             price: product.price,
-            categories: product.categories,
-            // category: product.category
-        })
+            categories: this.preSelectCategory()
+        });
+    }
 
+    preSelectCategory(): ICategory {
+        const { categories, category } = this.product;
+        const current: string = category.toLowerCase();
+        return categories.find(item => item.name.toLowerCase() === current);
     }
 
-    handleSubmit(isSubmitted: boolean) {
-        const { value } = this.formGroup;
-        console.log(value)
-        
+    productEdit(resource: IProduct) {
+        this.service.update(this.apiEndPoint, this.id, resource);
+    }
+
+    handleSubmit(isSubmitted: boolean): void {
+
+        if (isSubmitted) {
+            const { value } = this.formGroup;
+            const payload = { ...this.product };
+
+            payload.imageUrl = value.imageUrl;
+            payload.price = value.price;
+            payload.title = value.title;
+
+            if (payload.category === value.categories.name) {
+                this.productEdit(payload);
+                this.refreshStorage();
+            } else {
+                payload.category = value.categories.name;
+
+                let newApiEndPoint: string = value.categories.name;
+                newApiEndPoint = newApiEndPoint.replace(/ /g, '').toLowerCase();
+
+                this.service.getCollectionOrderBy(newApiEndPoint, 'seqN', "desc")
+                    .pipe(takeUntil(this.destroyed$))
+                    .subscribe((res: any) => {
+                        const seqNHighest = res[0].seqN;
+                        payload.seqN = seqNHighest + 1;
+                        fsBatchedWrites.default.remove(this.db, this.apiEndPoint, this.id);
+                        fsBatchedWrites.default.create(this.db, newApiEndPoint, this.id, payload);
+                    });
+            }
+
+        }
+        this.formGroup.reset();
+    }
+
+    refreshStorage(): void {
+        this.service.getItem(this.apiEndPoint, this.id)
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((response: any) => {
+                this.product = response;
+                localStorage.setItem('product', JSON.stringify(this.product));
+            });
     }
 
     ngOnInit(): void {
         this.formMaker(formTemplate);
         this.productDetail();
     }
 
+    public ngOnDestroy(): void {
+        this.destroyed$.next(true);
+        this.destroyed$.complete();
+    }
+
 
 }

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

@@ -2,7 +2,6 @@
     <div class="form-group">
         <label [for]="label">{{label}}</label>
         <select [formControlName]="name" class="form-control">
-            <option></option>
             <option *ngFor="let option of options" [ngValue]="option">
                 {{ option[optionKey] }}
             </option>

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

@@ -47,9 +47,32 @@ export class DataService {
             )
     }
 
+    getCollectionOrderBy(
+        collectioName: string,
+        key: string,
+        sortOrder: OrderByDirection,
+      
+    ) {
+        const response: AngularFirestoreCollection<ID> = this.db.collection(
+            collectioName,
+            ref => ref
+                .orderBy(key, sortOrder)
+        );
+
+        return response.snapshotChanges()
+            .pipe(
+                map(snaps => snapsCoverter(snaps)),
+                first()
+            )
+    }
+
     getItem(collectioName: string, id: string) {
         return this.db.collection(collectioName).doc(id).valueChanges();
     }
 
+    update(collectioName: string, id: string, resource) {
+        return this.db.collection(collectioName).doc(id).set(resource);
+    }
+
 
 }