first version of sample.component finished

src/app/samples/samples.component.html

@@ -1,12 +1,22 @@
 <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>
+  <a routerLink="/samples/new">
+    <button class="rb-btn rb-primary"><span class="rb-ic rb-ic-add"></span>&nbsp; New sample</button>
+  </a>
 </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)
+    <form>
+      <rb-form-select name="statusSelect" label="Status" [(ngModel)]="filters.status">
+        <option value="validated">validated</option>
+        <option value="new">new</option>
+        <option value="all">all</option>
+      </rb-form-select>
+
+      <button class="rb-btn rb-secondary" (click)="loadSamples()">Apply filters</button>
+    </form>
   </rb-accordion-body>
 </rb-accordion>
 
@@ -23,6 +33,7 @@
     <th>type</th>
     <th>Color</th>
     <th>Batch</th>
+    <th></th>
   </tr>
 
   <tr *ngFor="let sample of samples">
@@ -37,5 +48,6 @@
     <td>{{sample.type}}</td>
     <td>{{sample.color}}</td>
     <td>{{sample.batch}}</td>
+    <td><a [routerLink]="'/samples/edit/' + sample._id"><span class="rb-ic rb-ic-edit"></span></a></td>
   </tr>
 </rb-table>

src/app/samples/samples.component.scss

@@ -1,3 +1,5 @@
+@import "~@inst-iot/bosch-angular-ui-components/styles/variables/colors";
+
 .header-addnew {
   margin-bottom: 40px;
 
@@ -11,3 +13,12 @@
   }
 }
 
+.rb-ic.rb-ic-edit {
+  font-size: 1.1rem;
+  color: $color-gray-silver-sand;
+  cursor: pointer;
+
+  &:hover {
+    color: #000;
+  }
+}

src/app/samples/samples.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import {ApiService} from '../api.service';
+import {ApiService} from '../services/api.service';
 
 @Component({
   selector: 'app-samples',
@@ -10,24 +10,27 @@ export class SamplesComponent implements OnInit {  // TODO: implement paging
 
   materials = {};
   samples = [];
+  filters = {status: 'validated'};
 
   constructor(
     private api: ApiService
   ) { }
 
   ngOnInit(): void {
-    this.api.get('/materials').subscribe((mData: any) => {
+    this.api.get('/materials?status=all', (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;
-        });
+      this.loadSamples();
+    });
+  }
+
+  loadSamples() {
+    this.api.get(`/samples?status=${this.filters.status}`, 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;
       });
     });
   }