Added create product

src/app/app.component.ts

@@ -3,9 +3,9 @@ import {Router, NavigationEnd} from '@angular/router';
 import {ElectronService} from 'ngx-electron';
 import {AngularFirestore} from 'angularfire2/firestore';
 import {filter} from 'rxjs/operators';
-import {MatDialog} from '../../node_modules/@angular/material';
+import {MatDialog} from '@angular/material';
 import {LoginComponent} from './login/login.component';
-import {AngularFireAuth} from '../../node_modules/angularfire2/auth';
+import {AngularFireAuth} from 'angularfire2/auth';
 
 @Component({
   selector: 'app-root',

src/app/app.module.ts

@@ -21,6 +21,7 @@ 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';
 
 @NgModule({
   declarations: [
@@ -33,6 +34,7 @@ import {DeleteCategoryComponent} from './store/deleteCategory/deleteCategory.com
     HomeComponent,
     LoginComponent,
     NewCategoryComponent,
+    NewProductComponent,
     ScalePipe,
     AboutComponent
   ],
@@ -57,7 +59,7 @@ import {DeleteCategoryComponent} from './store/deleteCategory/deleteCategory.com
     ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
   ],
   providers: [],
-  entryComponents: [DeleteCategoryComponent, LoginComponent, NewCategoryComponent],
+  entryComponents: [DeleteCategoryComponent, LoginComponent, NewCategoryComponent, NewProductComponent],
   bootstrap: [AppComponent]
 })
 export class AppModule {

src/app/login/login.component.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {AngularFireAuth} from 'angularfire2/auth';
-import {MatDialogRef} from '../../../node_modules/@angular/material';
+import {MatDialogRef} from '@angular/material';
 
 @Component({
   selector: 'login',

src/app/store/categories.component.html

@@ -2,11 +2,11 @@
     <div class="container">
         <div class="row py-5">
             <div *ngIf="app.user" class="ml-auto mr-3 mb-3">
-                <button mat-raised-button (click)="create()">
+                <button mat-raised-button (click)="createCategory()">
                     <mat-icon>playlist_add</mat-icon> Category
                 </button>
-                <button mat-raised-button class="ml-3">
-                    <mat-icon>note_add</mat-icon> Item
+                <button mat-raised-button class="ml-3" (click)="createItem()">
+                    <mat-icon>note_add</mat-icon> Product
                 </button>
             </div>
 
@@ -27,7 +27,7 @@
                         </mat-card-content>
                     </div>
                     <mat-card-actions *ngIf="app.user">
-                        <button mat-raised-button (click)="create(c)">
+                        <button mat-raised-button (click)="createCategory(c)">
                             <mat-icon>edit</mat-icon>
                         </button>
                         <button mat-raised-button class="ml-3" (click)="delete(c)">

src/app/store/categories.component.ts

@@ -2,12 +2,13 @@ import {Component} from '@angular/core';
 import {AngularFirestore} from 'angularfire2/firestore';
 import {AngularFireStorage} from 'angularfire2/storage';
 import {map} from 'rxjs/operators';
-import {ActivatedRoute, Router} from '../../../node_modules/@angular/router';
-import {MatDialog} from '../../../node_modules/@angular/material';
+import {ActivatedRoute, Router} from '@angular/router';
+import {MatDialog} from '@angular/material';
 import {NewCategoryComponent} from './newCategory/newCategory.component';
 import {AppComponent} from '../app.component';
-import {DomSanitizer} from '../../../node_modules/@angular/platform-browser';
+import {DomSanitizer} from '@angular/platform-browser';
 import {DeleteCategoryComponent} from './deleteCategory/deleteCategory.component';
+import {NewProductComponent} from './newProduct/newProduct.component';
 
 @Component({
   selector: 'store',
@@ -49,11 +50,15 @@ export class CategoriesComponent {
     });
   }
 
-  create(category) {
+  createCategory(category) {
     this.dialog.open(NewCategoryComponent, {data: {category: category, currentCategory: this.category}});
   }
 
-  delete(category) {
-    this.dialog.open(DeleteCategoryComponent, {data: category});
+  createItem(item) {
+    this.dialog.open(NewProductComponent, {data: {item: item, currentCategory: this.category}});
+  }
+
+  delete(obj) {
+    this.dialog.open(DeleteCategoryComponent, {data: obj});
   }
 }

src/app/store/deleteCategory/deleteCategory.component.ts

@@ -1,5 +1,5 @@
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '../../../../node_modules/@angular/material';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
 
 @Component({
   selector: 'delete-category',

src/app/store/newCategory/newCategory.component.html

@@ -1,7 +1,7 @@
 <mat-dialog-content>
     <h3 mat-dialog-title>
-        <span *ngIf="data">Update</span>
-        <span *ngIf="!data">Create</span> Category</h3>
+        <span *ngIf="data.category">Update</span>
+        <span *ngIf="!data.category">Create</span> Category</h3>
     <form id="createForm">
         <mat-form-field class="w-100">
             <input matInput placeholder="Name" name="name" [(ngModel)]="name">
@@ -21,7 +21,7 @@
         <mat-icon *ngIf="image">check</mat-icon>
     </button>
     <button mat-raised-button type="submit" form="createForm" color="primary" (click)="submit()">
-        <span *ngIf="data">Update</span>
-        <span *ngIf="!data">Create</span>
+        <span *ngIf="data.category">Update</span>
+        <span *ngIf="!data.category">Create</span>
     </button>
 </mat-dialog-actions>

src/app/store/newCategory/newCategory.component.ts

@@ -1,6 +1,6 @@
 import {Component, ViewChild, Inject} from '@angular/core';
 import {AngularFirestore} from 'angularfire2/firestore';
-import {MAT_DIALOG_DATA, MatDialogRef} from '../../../../node_modules/@angular/material';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
 
 @Component({
   selector: 'new-category',
@@ -19,7 +19,7 @@ export class NewCategoryComponent {
     private db: AngularFirestore,
     @Inject(MAT_DIALOG_DATA) public data
   ) {
-    this.categories = this.db.collection('categories').valueChanges();
+    this.categories = this.db.collection('categories', ref => ref.orderBy('name')).valueChanges();
     if (data.currentCategory) this.parent = data.currentCategory;
 
     if (data.category) {

src/app/store/newProduct/newProduct.component.html

@@ -0,0 +1,33 @@
+<mat-dialog-content>
+    <h3 mat-dialog-title>
+        <span *ngIf="data.product">Update</span>
+        <span *ngIf="!data.product">Create</span> Product</h3>
+    <form id="createForm">
+        <mat-form-field class="w-100">
+            <input matInput placeholder="Name" name="name" [(ngModel)]="name">
+        </mat-form-field>
+        <mat-form-field class="w-100">
+            <mat-select placeholder="Category" name="category" [(value)]="category">
+                <mat-option *ngFor="let c of categories | async" [value]="c.name">{{c.name}}</mat-option>
+            </mat-select>
+        </mat-form-field>
+        <mat-form-field class="w-100">
+            <textarea matInput rows="5" placeholder="Description" name="description" [(ngModel)]="description"></textarea>
+        </mat-form-field>
+        <mat-form-field>
+            <input matInput placeholder="Price" type="number" name="price" [(ngModel)]="price">
+            <span matPrefix>$&nbsp;</span>
+        </mat-form-field>
+        <input #fileInput type="file" (change)="imageChanged()" hidden>
+    </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-raised-button (click)="fileInput.click()">
+        <span *ngIf="!image">Add Image</span>
+        <mat-icon *ngIf="image">check</mat-icon>
+    </button>
+    <button mat-raised-button type="submit" form="createForm" color="primary" (click)="submit()">
+        <span *ngIf="data.product">Update</span>
+        <span *ngIf="!data.product">Create</span>
+    </button>
+</mat-dialog-actions>

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

@@ -0,0 +1,52 @@
+import {Component, ViewChild, Inject} from '@angular/core';
+import {AngularFirestore} from 'angularfire2/firestore';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
+
+@Component({
+  selector: 'new-item',
+  templateUrl: 'newProduct.component.html'
+})
+export class NewProductComponent {
+  @ViewChild('fileInput') fileInput;
+
+  categories;
+  category;
+  name: string;
+  description: string;
+  price: number = 0.0;
+  image: string;
+
+  constructor(
+    private dialogRef: MatDialogRef<NewProductComponent>,
+    private db: AngularFirestore,
+    @Inject(MAT_DIALOG_DATA) public data
+  ) {
+    this.categories = this.db.collection('categories', ref => ref.orderBy('name')).valueChanges();
+    if (data.currentCategory) this.category = data.currentCategory;
+  }
+
+  imageChanged() {
+    let reader = new FileReader();
+    reader.addEventListener('load', (event: any) => (this.image = event.target.result));
+    reader.readAsDataURL(this.fileInput.nativeElement.files[0]);
+  }
+
+  submit() {
+    let newProduct = {
+      name: this.name,
+      category: this.category,
+      description: this.description,
+      price: Number(this.price)
+    };
+    if (this.image) newProduct['image'] = this.image;
+
+    if (!this.data.category) {
+      this.db
+        .collection('products')
+        .add(newProduct)
+        .then(data => this.dialogRef.close());
+    } else {
+      this.data.item.ref.update(newProduct).then(data => this.dialogRef.close());
+    }
+  }
+}