rb-table, samples table

src/app/samples/samples.component.html

@@ -1 +1,41 @@
-<p>samples works!</p>
+<div class="header-addnew">
+  <h2>Samples</h2>
+  <button class="rb-btn rb-primary"><span class="rb-ic rb-ic-add"></span>&nbsp; New sample</button>
+</div>
+
+<rb-accordion>
+  <rb-accordion-title><span class="rb-ic rb-ic-filter"></span>&nbsp; Filter</rb-accordion-title>
+  <rb-accordion-body>
+    Not implemented (yet)
+  </rb-accordion-body>
+</rb-accordion>
+
+<rb-table>
+  <tr>
+    <th>Number</th>
+    <th>Material number</th>
+    <th>Material name</th>
+    <th>Supplier</th>
+    <th>Material</th>
+    <th>GF</th>
+    <th>CF</th>
+    <th>M</th>
+    <th>type</th>
+    <th>Color</th>
+    <th>Batch</th>
+  </tr>
+
+  <tr *ngFor="let sample of samples">
+    <td>{{sample.number}}</td>
+    <td>{{sample.material_number}}</td>
+    <td>{{materials[sample.material_id].name}}</td>
+    <td>{{materials[sample.material_id].supplier}}</td>
+    <td>{{materials[sample.material_id].group}}</td>
+    <td>{{materials[sample.material_id].glass_fiber}}</td>
+    <td>{{materials[sample.material_id].carbon_fiber}}</td>
+    <td>{{materials[sample.material_id].mineral}}</td>
+    <td>{{sample.type}}</td>
+    <td>{{sample.color}}</td>
+    <td>{{sample.batch}}</td>
+  </tr>
+</rb-table>

src/app/samples/samples.component.scss

@@ -0,0 +1,13 @@
+.header-addnew {
+  margin-bottom: 40px;
+
+  & > * {
+    display: inline;
+    margin-bottom: 10px;
+  }
+
+  button {
+    float: right;
+  }
+}
+

src/app/samples/samples.component.ts

@@ -1,15 +1,35 @@
 import { Component, OnInit } from '@angular/core';
+import {ApiService} from '../api.service';
 
 @Component({
   selector: 'app-samples',
   templateUrl: './samples.component.html',
   styleUrls: ['./samples.component.scss']
 })
-export class SamplesComponent implements OnInit {
+export class SamplesComponent implements OnInit {  // TODO: implement paging
 
-  constructor() { }
+  materials = {};
+  samples = [];
+
+  constructor(
+    private api: ApiService
+  ) { }
 
   ngOnInit(): void {
+    this.api.get('/materials').subscribe((mData: any) => {
+      this.materials = {};
+      mData.forEach(material => {
+        this.materials[material._id] = material;
+      });
+      console.log(this.materials);
+      this.api.get('/samples').subscribe(sData => {
+        console.log(sData);
+        this.samples = sData as any;
+        this.samples.forEach(sample => {
+          sample.material_number = this.materials[sample.material_id].numbers.find(e => sample.color === e.color).number;
+        });
+      });
+    });
   }
 
 }