Converted everything to use a store

src/app/formulaManager/component.ts

@@ -0,0 +1,10 @@
+import {DocumentReference} from 'angularfire2/firestore';
+
+export interface Component {
+  cost: number;
+  created: Date;
+  description: string;
+  id: string;
+  name: string;
+  ref: DocumentReference;
+}

src/app/formulaManager/formula.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {DocumentReference} from 'angularfire2/firestore';
+
+export interface Formula {
+  approved: boolean;
+  components: {component: Component; quantity: number}[];
+  created: Date;
+  id: string;
+  name: string;
+  ref: DocumentReference;
+}

src/app/formulaManager/formulaManager.component.html

@@ -1,11 +1,11 @@
 <div class="container">
-    <div *ngIf="user" class="row">
+    <div *ngIf="store.user" class="row">
         <div class="col-12 mt-3">
             <div class="float-right">
                 <button mat-raised-button class="mr-3" (click)="openComponents()">
                     <mat-icon>list</mat-icon> Components
                 </button>
-                <button mat-raised-button>
+                <button mat-raised-button (click)="newFormula()">
                     <mat-icon>add</mat-icon> Formula
                 </button>
             </div>
@@ -18,7 +18,7 @@
                 <mat-icon matSuffix>search</mat-icon>
             </mat-form-field>
             <mat-list style="max-height: 250px; overflow: auto;">
-                <ng-container *ngFor="let f of formulas | async; let i = index">
+                <ng-container *ngFor="let f of store.formulas | async; let i = index">
                     <mat-divider *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1 && i > 0"></mat-divider>
                     <mat-list-item *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1" (click)="displayFormula(f)">{{f.name}}</mat-list-item>
                 </ng-container>

src/app/formulaManager/formulaManager.component.ts

@@ -6,21 +6,17 @@ import {LocalStorage} from 'webstorage-decorators';
 import {MatDialog} from '@angular/material';
 import {ViewComponents} from './viewComponents/viewComponents.component';
 import {AngularFireAuth} from 'angularfire2/auth';
+import {NewFormulaComponent} from './newFormula/newFormula.component';
+import {AppStore} from '../app.store';
 
 @Component({
   selector: 'formula-manager',
   templateUrl: './formulaManager.component.html'
 })
 export class FormulaManagerComponent {
-  @ViewChildren('cost') componentCosts: ElementRef[];
-
-  formulas;
   formula;
-  installPrompt;
-  components;
   @LocalStorage({defaultValue: 'g'})
   unit;
-  user;
 
   _newTotal: number = 0;
   get newTotal() {
@@ -30,36 +26,13 @@ export class FormulaManagerComponent {
     this._newTotal = new ConvertToGPipe().transform(total, this.unit);
   }
 
-  constructor(
-    private db: AngularFirestore,
-    public electron: ElectronService,
-    private dialog: MatDialog,
-    private afAuth: AngularFireAuth
-  ) {
-    this.formulas = this.db.collection('formulas', ref => ref.orderBy('name')).valueChanges();
-    this.afAuth.user.subscribe(user => {
-      this.user = user;
-    });
-  }
-
-  create(row: string) {
-    let data = new RegExp(/(.+?)\t(.+?)\t(.+?)\t\$(\d\.\d\d)\s*?(\w.*)/).exec(row);
-    this.db.collection('components').add({
-      name: data[1],
-      vendor: 'GCm9FzeJ8NNpBl6G9BCu',
-      description: data[3],
-      cost: data[4],
-      created: new Date(data[5])
-    });
-  }
+  constructor(public electron: ElectronService, private dialog: MatDialog, public store: AppStore) {}
 
   openComponents() {
     this.dialog.open(ViewComponents, {height: '500px'});
   }
 
   cost() {
-    if (!this.formula || this.formula.components.filter(row => typeof row.component.get == 'function').length > 0)
-      return 0;
     let cost = 0;
     this.formula.components.forEach(
       row => (cost += (((row.quantity / this.formula.total) * this._newTotal) / 1000) * row.component.cost)
@@ -68,21 +41,12 @@ export class FormulaManagerComponent {
   }
 
   displayFormula(formula) {
-    formula.components
-      .filter(row => typeof row.component.get == 'function')
-      .forEach((row, i, arr) => row.component.get().then(row => (arr[i].component = row.data())));
     formula.total = formula.components.reduce((acc, row) => (acc += row.quantity), 0);
     this.newTotal = new ConvertFromGPipe().transform(formula.total, this.unit);
     this.formula = formula;
   }
 
-  prompt() {
-    if (this.installPrompt) this.installPrompt.prompt();
-  }
-
-  @HostListener('beforeinstallprompt', ['$event'])
-  setPrompt(e) {
-    this.installPrompt = e;
-    this.installPrompt.preventDefault();
+  newFormula() {
+    this.dialog.open(NewFormulaComponent);
   }
 }

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

@@ -0,0 +1 @@
+Test

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

@@ -0,0 +1,15 @@
+import {Component, Inject} from '@angular/core';
+import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
+import {AngularFirestore} from 'angularfire2/firestore';
+
+@Component({
+  selector: 'new-formula',
+  templateUrl: './newFormula.component.html'
+})
+export class NewFormulaComponent {
+  constructor(
+    private dialogRef: MatDialogRef<NewFormulaComponent>,
+    private db: AngularFirestore,
+    @Inject(MAT_DIALOG_DATA) public data
+  ) {}
+}

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

@@ -12,7 +12,7 @@
         </tr>
     </thead>
     <tbody>
-        <tr *ngFor="let c of components | async">
+        <tr *ngFor="let c of store.components | async">
             <td>{{c.name}}</td>
             <td>{{c.description}}</td>
             <td>{{c.created | date}}</td>

src/app/formulaManager/viewComponents/viewComponents.component.ts

@@ -4,32 +4,18 @@ import {map} from 'rxjs/operators';
 import {MatDialog} from '@angular/material';
 import {DeleteComponent} from '../../delete/delete.component';
 import {NewComponentComponent} from '../newComponent/newComponent.component';
+import {AppStore} from '../../app.store';
 
 @Component({
   selector: '',
   templateUrl: './viewComponents.component.html'
 })
 export class ViewComponents {
-  components;
-
-  constructor(private db: AngularFirestore, private dialog: MatDialog) {
-    this.components = this.db
-      .collection('components')
-      .snapshotChanges()
-      .pipe(
-        map(rows =>
-          rows.map((row: any) => {
-            row = Object.assign({id: row.payload.doc.id, ref: row.payload.doc.ref}, row.payload.doc.data());
-            row.created = row.created.toDate();
-            return row;
-          })
-        )
-      );
-  }
+  constructor(private dialog: MatDialog, public store: AppStore) {}
 
   createComponent(component?) {
-    if(component) {
-      this.dialog.open(NewComponentComponent, { data: component })
+    if (component) {
+      this.dialog.open(NewComponentComponent, {data: component});
     } else {
       this.dialog.open(NewComponentComponent);
     }