View components dialog

src/app/app.module.ts

@@ -24,9 +24,11 @@ import {NewProductComponent} from './store/newProduct/newProduct.component';
 import {DeleteComponent} from './delete/delete.component';
 import {ProductsComponent} from './store/products/products.component';
 import {CartComponent} from './store/cart/cart.component';
+import {ViewComponents} from './formulaManager/viewComponents/viewComponents.component';
 
 @NgModule({
   declarations: [
+    AboutComponent,
     AppComponent,
     CategoriesComponent,
     CartComponent,
@@ -40,7 +42,7 @@ import {CartComponent} from './store/cart/cart.component';
     NewProductComponent,
     ProductsComponent,
     ScalePipe,
-    AboutComponent
+    ViewComponents
   ],
   imports: [
     AngularMaterialModule,
@@ -65,7 +67,7 @@ import {CartComponent} from './store/cart/cart.component';
     ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
   ],
   providers: [],
-  entryComponents: [DeleteComponent, LoginComponent, NewCategoryComponent, NewProductComponent],
+  entryComponents: [DeleteComponent, LoginComponent, NewCategoryComponent, NewProductComponent, ViewComponents],
   bootstrap: [AppComponent]
 })
 export class AppModule {

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});
+  }
+}