Added create formulas (Fixes #11)

src/app/formulaManager/newComponent/newComponent.component.ts

@@ -25,11 +25,11 @@ export class NewComponentComponent {
 
   submit() {
     let newComponent = {name: this.name, description: this.description, cost: Number(this.cost)};
-    if (!this.data) newComponent['created'] = new Date();
 
     if (!this.data) {
+      newComponent['created'] = new Date();
       this.db
-        .collection('components', ref => ref.orderBy('name'))
+        .collection('components')
         .add(newComponent)
         .then(data => this.dialogRef.close());
     } else {

src/app/formulaManager/newFormula/newFormula.component.html

@@ -1 +1,57 @@
-Test
+<mat-dialog-content>
+    <h3 mat-dialog-title>
+        <span *ngIf="data">Update</span>
+        <span *ngIf="!data">Create</span> Formula</h3>
+    <mat-form-field class="w-100">
+        <input matInput placeholder="Name" name="name" [(ngModel)]="name">
+    </mat-form-field>
+    <mat-checkbox class="float-right" [(ngModel)]="approved">Approved</mat-checkbox>
+    <mat-form-field>
+        <mat-select placeholder="Component" [(ngModel)]="component">
+            <mat-option *ngFor="let c of componentsList" [value]="c.name">
+                {{c.name}}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+    <mat-form-field style="width: 75px">
+        <input matInput type="number" placeholder="Amount" [(ngModel)]="amount">
+    </mat-form-field>
+    <mat-form-field style="width: 40px">
+        <mat-select placeholder="Unit" [(ngModel)]="unit">
+            <mat-option value="g">g</mat-option>
+            <mat-option value="oz">oz</mat-option>
+            <mat-option value="kg">kg</mat-option>
+            <mat-option value="lb">lb</mat-option>
+        </mat-select>
+    </mat-form-field>
+    <button mat-raised-button class="ml-3" (click)="add()">Add</button>
+    <table class="w-100 table">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Quantity</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let c of components; let i = index">
+                <td>{{c.name}}</td>
+                <td>{{c.quantity | convertFromG: unit}} {{unit}}</td>
+                <td>
+                    <button mat-icon-button (click)="remove(i)">
+                        <mat-icon>delete</mat-icon>
+                    </button>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <div class="float-right">
+        <strong>Yield: </strong>{{total() | convertFromG: unit}} {{unit}}
+    </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-raised-button type="submit" form="createForm" color="primary" (click)="submit()" [disabled]="components.length < 1 || !name">
+        <span *ngIf="data">Update</span>
+        <span *ngIf="!data">Create</span>
+    </button>
+</mat-dialog-actions>

src/app/formulaManager/newFormula/newFormula.component.ts

@@ -1,15 +1,67 @@
 import {Component, Inject} from '@angular/core';
 import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
 import {AngularFirestore} from 'angularfire2/firestore';
+import {LocalStorage} from '../../../../node_modules/webstorage-decorators';
+import {AppStore} from '../../app.store';
+import {ConvertToGPipe} from '../units.pipe';
 
 @Component({
   selector: 'new-formula',
   templateUrl: './newFormula.component.html'
 })
 export class NewFormulaComponent {
+  name: string;
+  amount: number;
+  approved: boolean = false;
+  component: string;
+  components: {component: string; name: string; quantity: number}[] = [];
+  componentsList = [];
+  @LocalStorage({defaultValue: 'kg', fieldName: 'newFormulaUnit'})
+  unit;
+
   constructor(
     private dialogRef: MatDialogRef<NewFormulaComponent>,
     private db: AngularFirestore,
+    private store: AppStore,
     @Inject(MAT_DIALOG_DATA) public data
-  ) {}
+  ) {
+    this.store.components.subscribe(rows => (this.componentsList = rows));
+  }
+
+  add() {
+    let id = this.componentsList.filter(row => row.name == this.component)[0].id;
+    console.log(id);
+    let amount = new ConvertToGPipe().transform(Number(this.amount), this.unit);
+    this.components.push({component: id, name: this.component, quantity: amount});
+    this.component = null;
+    this.amount = null;
+  }
+
+  remove(i) {
+    this.components.splice(i, 1);
+  }
+
+  submit() {
+    let newFormula = {
+      name: this.name,
+      approved: this.approved,
+      components: this.components.map((row: any) => {
+        return {component: this.db.collection('components').doc(row.component).ref, quantity: row.quantity};
+      })
+    };
+
+    if (!this.data) {
+      newFormula['created'] = new Date();
+      this.db
+        .collection('formulas')
+        .add(newFormula)
+        .then(data => this.dialogRef.close());
+    } else {
+      this.data.ref.update(newFormula).then(data => this.dialogRef.close());
+    }
+  }
+
+  total() {
+    return this.components.reduce((acc, row) => acc + row.quantity, 0);
+  }
 }

src/app/formulaManager/viewComponents/viewComponents.component.html

@@ -18,10 +18,14 @@
             <td>{{c.created | date}}</td>
             <td class="text-center">{{c.cost | currency}}</td>
             <td>
-                <mat-icon class="curs-pointer" (click)="createComponent(c)">edit</mat-icon>
+                <button mat-icon-button (click)="createComponent(c)">
+                    <mat-icon class="curs-pointer">edit</mat-icon>
+                </button>
             </td>
             <td>
-                <mat-icon class="curs-pointer" (click)="delete(c)">delete</mat-icon>
+                <button mat-icon-button (click)="delete(c)">
+                    <mat-icon class="curs-pointer">delete</mat-icon>
+                </button>
             </td>
         </tr>
     </tbody>