definma-ui/src/app/samples/samples.component.html

<div class="header-addnew">
  <h2>Samples</h2>
  <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>
    <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>

<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>
    <th></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>
    <td><a [routerLink]="'/samples/edit/' + sample._id"><span class="rb-ic rb-ic-edit"></span></a></td>
  </tr>
</rb-table>