View components dialog

src/app/formulaManager/formulaManager.component.ts

@@ -54,7 +54,7 @@ export class FormulaManagerComponent {
   }
 
   openComponents() {
-    this.dialog.open(ViewComponents);
+    this.dialog.open(ViewComponents, {height: '500px'});
   }
 
   cost() {

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

@@ -0,0 +1,28 @@
+<button mat-raised-button class="float-right mb-3">
+    <mat-icon>add</mat-icon> Component</button>
+<table class="table">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Description</th>
+            <th>Created</th>
+            <th>Cost Per Kg</th>
+            <th></th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let c of components | async">
+            <td>{{c.name}}</td>
+            <td>{{c.description}}</td>
+            <td>{{c.created | date}}</td>
+            <td class="text-center">{{c.cost | currency}}</td>
+            <td>
+                <mat-icon class="curs-pointer">edit</mat-icon>
+            </td>
+            <td>
+                <mat-icon class="curs-pointer" (click)="delete(c)">delete</mat-icon>
+            </td>
+        </tr>
+    </tbody>
+</table>

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

@@ -0,0 +1,32 @@
+import {Component} from '@angular/core';
+import {AngularFirestore} from '../../../../node_modules/angularfire2/firestore';
+import {map} from 'rxjs/operators';
+import {MatDialog} from '../../../../node_modules/@angular/material';
+import {DeleteComponent} from '../../delete/delete.component';
+
+@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;
+          })
+        )
+      );
+  }
+
+  delete(component) {
+    this.dialog.open(DeleteComponent, {data: component});
+  }
+}