Updated formula manager page to work with new data

src/app/app.store.ts

@@ -39,7 +39,6 @@ export class AppStore {
         map(rows =>
           rows.map((row: any) => {
             let temp = Object.assign({ id: row.payload.doc.id, ref: row.payload.doc.ref }, row.payload.doc.data());
-            temp.created = temp.created.toDate();
             return <Component>temp;
           })
         ),
@@ -53,13 +52,7 @@ export class AppStore {
       map(data =>
         data[0].map(row => {
           let temp = <any>Object.assign({ id: row.payload.doc.id, ref: row.payload.doc.ref }, row.payload.doc.data());
-          temp.created = temp.created.toDate();
+          temp.components = temp.components.map(row => ({component: data[1].find(c => c.id == row.component), quantity: row.quantity}));
-
-          temp.components = temp.components.map(row => {
-            let component = data[1].filter(c => c.id == row.component.id)[0];
-            return { component: component, quantity: row.quantity };
-          });
-
           return <Formula>temp;
         })
       ),

src/app/formulaManager/formulaManager.component.html

@@ -51,7 +51,7 @@
         <mat-card *ngIf="formula" class="my-4 mx-auto" style="max-width: 600px">
             <mat-card-header>
                 <mat-card-title class="mb-0"><h4>{{formula.name}}</h4></mat-card-title>
-                <mat-card-subtitle>{{formula.created | date}}</mat-card-subtitle>
+                <mat-card-subtitle>{{formula.createdOn.seconds * 1000 | date}}</mat-card-subtitle>
                 <div *ngIf="store.user" class="ml-auto">
                     <h4>Approved:
                         <mat-icon *ngIf="formula.approved" class="text-success" style="transform: translateY(20%)">check_circle</mat-icon>
@@ -72,7 +72,7 @@
                     <tr *ngFor="let c of formula.components">
                         <td style="width: 80%">{{c.component?.name}}</td>
                         <td class="text-right" style="width: 10%">{{c.quantity | scale: formula.total : _newTotal | convertFromG: unit}} {{unit}}</td>
-                        <td class="text-right" style="width: 10%">{{c.quantity | scale: formula.total : _newTotal / 1000 * c.component.cost | currency}}</td>
+                        <td class="text-right" style="width: 10%">{{c.quantity | scale: formula.total : _newTotal / 1000 * c.component.price | currency}}</td>
                     </tbody>
                 </table>
                 <div class="col-12 d-lg-block mb-3" style="height: 4px; background:black; width: 100%;"></div>

src/app/formulaManager/formulaManager.component.ts

@@ -52,7 +52,7 @@ export class FormulaManagerComponent {
     cost() {
         let cost = 0;
         this.formula.components.forEach(
-            row => (cost += (((row.quantity / this.formula.total) * this._newTotal) / 1000) * row.component.cost)
+            row => (cost += (((row.quantity / this.formula.total) * this._newTotal) / 1000) * row.component.price)
         );
         return cost;
     }

src/app/formulaManager/newComponent/newComponent.component.html

@@ -10,15 +10,16 @@
             <input matInput placeholder="Description" name="description" [(ngModel)]="description">
         </mat-form-field>
         <mat-form-field>
-            <input matInput placeholder="Cost Per Kg" type="number" name="cost" [(ngModel)]="cost">
+            <input matInput placeholder="Price ($/Kg)" type="number" name="cost" [(ngModel)]="price">
             <span matPrefix>$&nbsp;</span>
         </mat-form-field>
     </form>
 </mat-dialog-content>
 <mat-divider></mat-divider>
 <mat-dialog-actions class="justify-content-end">
-    <button mat-button type="submit" form="createForm" (click)="submit()" [disabled]="!name || !cost">
+    <button mat-button type="submit" form="createForm" (click)="submit()" [disabled]="!name || !price">
         <span *ngIf="data">Update</span>
         <span *ngIf="!data">Create</span>
     </button>
-</mat-dialog-actions>
+    <button *ngIf="data" mat-button class="ml-2" color="warn" (click)="delete()">Delete</button>
+</mat-dialog-actions>

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

@@ -1,6 +1,7 @@
-import {Component, ViewChild, Inject} from '@angular/core';
+import {Component, Inject} from '@angular/core';
 import {AngularFirestore} from 'angularfire2/firestore';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
+import {DeleteComponent} from '../../delete/delete.component';
 
 @Component({
   selector: 'new-component',
@@ -9,31 +10,36 @@ import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
 export class NewComponentComponent {
   name: string;
   description: string;
-  cost: number;
+  price: number;
 
   constructor(
     private dialogRef: MatDialogRef<NewComponentComponent>,
+    private dialog: MatDialog,
     private db: AngularFirestore,
     @Inject(MAT_DIALOG_DATA) public data
   ) {
     if (data) {
       this.name = data.name;
       this.description = data.description;
-      this.cost = data.cost;
+      this.price = data.price;
     }
   }
 
+  delete() {
+    this.dialog.open(DeleteComponent, {data: this.data}).afterClosed().subscribe(() => this.dialogRef.close());
+  }
+
   submit() {
-    let newComponent = {name: this.name, description: this.description, cost: Number(this.cost)};
+    let newComponent = {name: this.name, description: this.description, price: Number(this.price), createdOn: new Date()};
 
     if (!this.data) {
       newComponent['created'] = new Date();
       this.db
         .collection('components')
-        .add(newComponent)
+        .doc(newComponent.name).set(newComponent)
-        .then(data => this.dialogRef.close());
+        .then(ignore => this.dialogRef.close());
     } else {
-      this.data.ref.update(newComponent).then(data => this.dialogRef.close());
+      this.data.ref.update(newComponent).then(ignore => this.dialogRef.close());
     }
   }
 }

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

@@ -42,7 +42,7 @@
         </thead>
         <tbody>
             <tr *ngFor="let c of components; let i = index">
-                <td>{{c.name}}</td>
+                <td>{{c.component.name}}</td>
                 <td>{{c.quantity | convertFromG: unit}} {{unit}}</td>
                 <td>
                     <button mat-icon-button (click)="remove(i)">
@@ -62,4 +62,4 @@
         <span *ngIf="data">Update</span>
         <span *ngIf="!data">Create</span>
     </button>
-</mat-dialog-actions>
+</mat-dialog-actions>

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

@@ -14,7 +14,7 @@ export class NewFormulaComponent {
 	amount: number;
 	approved: boolean = false;
 	component: string;
-	components: { component: string; name: string; quantity: number }[] = [];
+	components: { component: Component; quantity: number }[] = [];
 	componentsList = [];
 	@LocalStorage({ defaultValue: 'kg', fieldName: 'newFormulaUnit' })
 	unit;
@@ -30,17 +30,14 @@ export class NewFormulaComponent {
 		if (this.data) {
 			this.name = this.data.name;
 			this.approved = this.data.approved;
-			this.components = this.data.components.map(row => {
+			this.components = this.data.components;
-				return { component: row.component.id, name: row.component.name, quantity: row.quantity };
-			});
 		}
 	}
 
 	add() {
-		let id = this.componentsList.filter(row => row.name == this.component)[0].id;
+		let component = this.componentsList.find(row => row.name == this.component);
-		console.log(id);
 		let amount = new ConvertToGPipe().transform(Number(this.amount), this.unit);
-		this.components.push({ component: id, name: this.component, quantity: amount });
+		this.components.push({ component: component, quantity: amount });
 		this.component = null;
 	    this.amount = null;
 	}
@@ -53,19 +50,14 @@ export class NewFormulaComponent {
 		let newFormula = {
 			name: this.name,
 			approved: this.approved,
-			components: this.components.map((row: any) => {
+			components: this.components.map((row: any) => ({component: row.component.id, quantity: row.quantity})),
-				return { component: this.db.collection('components').doc(row.component).ref, quantity: row.quantity };
+			createdOn: new Date()
-			})
 		};
 
 		if (!this.data) {
-			newFormula['created'] = new Date();
+			this.db.collection('formulas').doc(this.name).set(newFormula).then(ignore => this.dialogRef.close());
-			this.db
-				.collection('formulas')
-				.add(newFormula)
-				.then(data => this.dialogRef.close());
 		} else {
-			this.data.ref.update(newFormula).then(data => this.dialogRef.close());
+			this.data.ref.update(newFormula).then(ignore => this.dialogRef.close());
 		}
 	}
 

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

@@ -1,37 +1,17 @@
-<div class="bg-white text-right p-2" style="overflow: auto">
+<div>
-    <button mat-raised-button class="float-right mb-3" (click)="createComponent()">
+    <div class="border-bottom font-weight-bold d-flex w-100" style="border-width: 3px !important;">
-        <mat-icon>add</mat-icon> Create
+        <div class="p-2" style="width: 150px">Name</div>
-    </button>
+        <div class="p-2" style="flex-grow: 1">Description</div>
-</div>
+        <div class="p-2 text-center" style="width: 100px">Created</div>
-<div class="px-2">
+        <div class="p-2 text-right" style="width: 100px">$/Kg</div>
-    <table class="table">
+    </div>
-    <thead>
+    <div class="border-bottom w-100 py-2 text-center">
-    <tr>
+        <a (click)="createComponent()" [routerLink]="">+ Add Component</a>
-        <th>Name</th>
+    </div>
-        <th>Description</th>
+    <div *ngFor="let c of store.components | async" class="border-bottom d-flex w-100 py-2">
-        <th>Created</th>
+        <div class="px-2" style="width: 150px"><a (click)="createComponent(c)" [routerLink]="">{{c.name}}</a></div>
-        <th>Cost Per Kg</th>
+        <div class="px-2" style="flex-grow: 1">{{c.description}}</div>
-        <th></th>
+        <div class="px-2 text-center" style="width: 100px">{{c.createdOn.seconds * 1000 | date}}</div>
-        <th></th>
+        <div class="px-2 text-right" style="width: 100px">{{c.price | currency}}</div>
-    </tr>
+    </div>
-    </thead>
-    <tbody>
-    <tr *ngFor="let c of store.components | async">
-        <td>{{c.name}}</td>
-        <td>{{c.description}}</td>
-        <td>{{c.created | date}}</td>
-        <td class="text-center">{{c.cost | currency}}</td>
-        <td>
-            <button mat-icon-button (click)="createComponent(c)">
-                <mat-icon class="curs-pointer">edit</mat-icon>
-            </button>
-        </td>
-        <td>
-            <button mat-icon-button (click)="delete(c)">
-                <mat-icon class="curs-pointer">delete</mat-icon>
-            </button>
-        </td>
-    </tr>
-    </tbody>
-    </table>
 </div>