Added deleting products (Fixes #9)

src/app/app.module.ts

@@ -20,8 +20,8 @@ import {AngularFireStorageModule} from 'angularfire2/storage';
 import {LoginComponent} from './login/login.component';
 import {AngularFireAuthModule} from 'angularfire2/auth';
 import {NewCategoryComponent} from './store/newCategory/newCategory.component';
-import {DeleteCategoryComponent} from './store/deleteCategory/deleteCategory.component';
 import {NewProductComponent} from './store/newProduct/newProduct.component';
+import {DeleteComponent} from './store/delete/delete.component';
 
 @NgModule({
   declarations: [
@@ -29,7 +29,7 @@ import {NewProductComponent} from './store/newProduct/newProduct.component';
     CategoriesComponent,
     ConvertFromGPipe,
     ConvertToGPipe,
-    DeleteCategoryComponent,
+    DeleteComponent,
     FormulaManagerComponent,
     HomeComponent,
     LoginComponent,
@@ -59,7 +59,7 @@ import {NewProductComponent} from './store/newProduct/newProduct.component';
     ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
   ],
   providers: [],
-  entryComponents: [DeleteCategoryComponent, LoginComponent, NewCategoryComponent, NewProductComponent],
+  entryComponents: [DeleteComponent, LoginComponent, NewCategoryComponent, NewProductComponent],
   bootstrap: [AppComponent]
 })
 export class AppModule {

src/app/store/categories.component.html

@@ -5,7 +5,7 @@
                 <button mat-raised-button (click)="createCategory()">
                     <mat-icon>playlist_add</mat-icon> Category
                 </button>
-                <button mat-raised-button class="ml-3" (click)="createItem()">
+                <button mat-raised-button class="ml-3" (click)="createProduct()">
                     <mat-icon>note_add</mat-icon> Product
                 </button>
             </div>
@@ -36,6 +36,26 @@
                     </mat-card-actions>
                 </mat-card>
             </ng-container>
+
+            <ng-container *ngFor="let p of products | async">
+                <mat-card class="m-3 curs-pointer">
+                    <div [routerLink]="['/products', p.name]">
+                        <img *ngIf="p.image" mat-card-image [src]="p.image" [alt]="p.name" style="width: 200px; height: 200px;">
+                        <mat-divider *ngIf="p.image" class="custom-line"></mat-divider>
+                        <mat-card-content class="text-center">
+                            <h5>{{p.name}}</h5>
+                        </mat-card-content>
+                    </div>
+                    <mat-card-actions *ngIf="app.user">
+                        <button mat-raised-button (click)="createProduct(p)">
+                            <mat-icon>edit</mat-icon>
+                        </button>
+                        <button mat-raised-button class="ml-3" (click)="delete(p)">
+                            <mat-icon>delete</mat-icon>
+                        </button>
+                    </mat-card-actions>
+                </mat-card>
+            </ng-container>
         </div>
     </div>
 </div>

src/app/store/categories.component.ts

@@ -7,8 +7,8 @@ import {MatDialog} from '@angular/material';
 import {NewCategoryComponent} from './newCategory/newCategory.component';
 import {AppComponent} from '../app.component';
 import {DomSanitizer} from '@angular/platform-browser';
-import {DeleteCategoryComponent} from './deleteCategory/deleteCategory.component';
 import {NewProductComponent} from './newProduct/newProduct.component';
+import {DeleteComponent} from './delete/delete.component';
 
 @Component({
   selector: 'store',
@@ -17,6 +17,7 @@ import {NewProductComponent} from './newProduct/newProduct.component';
 export class CategoriesComponent {
   category: string;
   categories;
+  products;
 
   constructor(
     private db: AngularFirestore,
@@ -47,6 +48,23 @@ export class CategoriesComponent {
               })
           )
         );
+
+      this.products = this.db
+        .collection('products', ref => ref.orderBy('name'))
+        .snapshotChanges()
+        .pipe(
+          map(rows =>
+            rows
+              .map((row: any) =>
+                Object.assign({id: row.payload.doc.id, ref: row.payload.doc.ref}, row.payload.doc.data())
+              )
+              .filter((row: any) => row.category == this.category)
+              .map((row: any) => {
+                row.image = this.domSanitizer.bypassSecurityTrustUrl(row.image);
+                return row;
+              })
+          )
+        );
     });
   }
 
@@ -54,11 +72,11 @@ export class CategoriesComponent {
     this.dialog.open(NewCategoryComponent, {data: {category: category, currentCategory: this.category}});
   }
 
-  createItem(item) {
+  createProduct(product) {
-    this.dialog.open(NewProductComponent, {data: {item: item, currentCategory: this.category}});
+    this.dialog.open(NewProductComponent, {data: {product: product, currentCategory: this.category}});
   }
 
   delete(obj) {
-    this.dialog.open(DeleteCategoryComponent, {data: obj});
+    this.dialog.open(DeleteComponent, {data: obj});
   }
 }

src/app/store/delete/delete.component.html

@@ -1,10 +1,10 @@
 <mat-dialog-content>
     <h3 mat-dialog-title>Delete {{data.name}}</h3>
-    <p>You are about to delete a category, any items attached to it will be lost.
+    <p>You are about to delete {{data.name}}. This cannot be undone.
-        <br>Edit the items and change their category to prevent this, once ready,
+        <br>
-        <br>please re-enter
+        <br> please enter
-        <span style="background-color: #ffff00">{{data.name}}</span> bellow to awknoledge your action.</p>
+        <span style="background-color: #ffff00">{{data.name}}</span> bellow to confirm your action.</p>
-    <mat-form-field>
+    <mat-form-field class="w-100">
         <input matInput placeholder="Confirm" [(ngModel)]="confirm">
     </mat-form-field>
 </mat-dialog-content>

src/app/store/delete/delete.component.ts

@@ -2,13 +2,13 @@ import {Component, Inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
 
 @Component({
-  selector: 'delete-category',
+  selector: 'delete',
-  templateUrl: 'deleteCategory.component.html'
+  templateUrl: 'delete.component.html'
 })
-export class DeleteCategoryComponent {
+export class DeleteComponent {
   confirm = '';
 
-  constructor(private dialogRef: MatDialogRef<DeleteCategoryComponent>, @Inject(MAT_DIALOG_DATA) public data) {}
+  constructor(private dialogRef: MatDialogRef<DeleteComponent>, @Inject(MAT_DIALOG_DATA) public data) {}
 
   delete() {
     this.data.ref.delete().then(() => this.dialogRef.close());

src/app/store/newProduct/newProduct.component.ts

@@ -23,6 +23,13 @@ export class NewProductComponent {
   ) {
     this.categories = this.db.collection('categories', ref => ref.orderBy('name')).valueChanges();
     if (data.currentCategory) this.category = data.currentCategory;
+
+    if (data.product) {
+      this.category = data.product.category;
+      this.name = data.product.name;
+      this.description = data.product.description;
+      this.price = data.product.price;
+    }
   }
 
   imageChanged() {
@@ -40,13 +47,13 @@ export class NewProductComponent {
     };
     if (this.image) newProduct['image'] = this.image;
 
-    if (!this.data.category) {
+    if (!this.data.product) {
       this.db
         .collection('products')
         .add(newProduct)
         .then(data => this.dialogRef.close());
     } else {
-      this.data.item.ref.update(newProduct).then(data => this.dialogRef.close());
+      this.data.product.ref.update(newProduct).then(data => this.dialogRef.close());
     }
   }
 }