Merge pull request #44 in DEFINMA/definma-ui from f/filter-separation to master

* commit '2aad393c0d6f4fa24df2c888ff9e81cac12d89b3': Fix a typo Performance updates Added value converter to correctly display values Seperate the fields into 3 categories
2021-01-08 13:26:02 +01:00
parent 7e0fc34a3e 2aad393c0d
commit bdce691210
6 changed files with 182 additions and 120 deletions
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -10,12 +10,6 @@
        <span *rbFormMultiSelectOption="let key">{{key.id}}</span>
    </rb-form-multi-select>

-    <!--
-    <rb-icon-button icon="forward-right" mode="primary" (click)="updateGroups()">
-        Apply groups 
-    </rb-icon-button>
-    -->
-
    <div id="divChart">
        <canvas id="myChart">
        </canvas>
--- a/src/app/home/home.component.scss
+++ b/src/app/home/home.component.scss
@@ -6,3 +6,7 @@ app-login {
  width: 70%;
  float: right;
 }
+
+rb-form-multi-select {
+  width: 20%;
+}
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -120,7 +120,8 @@ export class HomeComponent implements OnInit {
            label: 'Number of samples per group',
            data: data.data,
            backgroundColor: fillPattern,
-            borderWidth: 2
+            pointRadius: 4,
+            pointHoverRadius: 7
          }]
        },
        options: {
--- a/src/app/samples/samples.component.html
+++ b/src/app/samples/samples.component.html
@@ -3,9 +3,9 @@
    <rb-icon-button icon="add" mode="primary" class="space-left">New sample</rb-icon-button>
  </a>
  <rb-icon-button *ngIf="sampleSelect === 2" mode="secondary" icon="close" (click)="sampleSelect = 0"
-                  class="validation-close" iconOnly></rb-icon-button>
-  <rb-icon-button *ngIf="login.isLevel.dev" [icon]="sampleSelect === 2 ? 'checkmark' : 'clear-all'"
-                  mode="secondary" (click)="validate()">
+    class="validation-close" iconOnly></rb-icon-button>
+  <rb-icon-button *ngIf="login.isLevel.dev" [icon]="sampleSelect === 2 ? 'checkmark' : 'clear-all'" mode="secondary"
+    (click)="validate()">
    {{sampleSelect === 2 ? 'Validate' : 'Validation'}}
  </rb-icon-button>
 </div>
@@ -19,23 +19,22 @@
      <div class="status-selection">
        <label class="label">Status</label>
        <rb-form-checkbox name="status-validated" [(ngModel)]="filters.status.validated"
-                          [disabled]="!filters.status.new && !filters.status.deleted"
-                          (ngModelChange)="loadSamples({firstPage: true})">
+          [disabled]="!filters.status.new && !filters.status.deleted" (ngModelChange)="loadSamples({firstPage: true})">
          validated
        </rb-form-checkbox>
        <rb-form-checkbox name="status-new" [(ngModel)]="filters.status.new"
-                          [disabled]="!filters.status.validated && !filters.status.deleted"
-                          (ngModelChange)="loadSamples({firstPage: true})">
+          [disabled]="!filters.status.validated && !filters.status.deleted"
+          (ngModelChange)="loadSamples({firstPage: true})">
          new
        </rb-form-checkbox>
        <rb-form-checkbox name="status-deleted" [(ngModel)]="filters.status.deleted"
-                          [disabled]="!filters.status.validated && !filters.status.new"
-                          (ngModelChange)="loadSamples({firstPage: true})" *ngIf="login.isLevel.dev">
+          [disabled]="!filters.status.validated && !filters.status.new" (ngModelChange)="loadSamples({firstPage: true})"
+          *ngIf="login.isLevel.dev">
          deleted
        </rb-form-checkbox>
      </div>
      <rb-form-select name="pageSizeSelection" label="page size" [(ngModel)]="filters.pageSize" class="selection"
-                      (ngModelChange)="loadSamples({firstPage: true})" #pageSizeSelection>
+        (ngModelChange)="loadSamples({firstPage: true})" #pageSizeSelection>
        <option value="3">3</option>
        <option value="10">10</option>
        <option value="25">25</option>
@@ -45,10 +44,13 @@
        <option value="500">500</option>
      </rb-form-select>

-      <rb-form-multi-select name="fieldSelect" idField="id" [items]="keys" [(ngModel)]="isActiveKey" label="Fields"
-                            class="selection" (ngModelChange)="loadSamples({}, $event)">
-        <span *rbFormMultiSelectOption="let item" class="load-first-page">{{item.label}}</span>
-      </rb-form-multi-select>
+      <div id="multi">
+        <rb-form-multi-select *ngFor="let item of categories | keyvalue: originalOrder" name="fieldSelect" idField="id"
+          [items]="item.value" [(ngModel)]="isActiveKey" [label]="item.key" class="selection"
+          (ngModelChange)="loadSamples({}, $event, item.key)">
+          <span *rbFormMultiSelectOption="let item" class="load-first-page">{{item.label}}</span>
+        </rb-form-multi-select>
+      </div>

      <rb-icon-button icon="reset" mode="secondary" (click)="resetPreferences()" class="reset-preferences">
        Reset to default
@@ -59,7 +61,7 @@
          <ng-container *ngIf="isActiveKey[filter.field]">
            <rb-form-checkbox [name]="'filteractive-' + filter.field" [(ngModel)]="filter.active"></rb-form-checkbox>
            <rb-form-select [name]="'filtermode-' + filter.field" class="filtermode" [(ngModel)]="filter.mode"
-                            (ngModelChange)="updateFilterFields(filter.field)">
+              (ngModelChange)="updateFilterFields(filter.field)">
              <option value="eq" title="field is equal to value">=</option>
              <option value="ne" title="field is not equal to value">&ne;</option>
              <option value="lt" title="field is lower than value">&lt;</option>
@@ -73,29 +75,25 @@
            </rb-form-select>
            <div class="filter-inputs">
              <rb-array-input [(ngModel)]="filter.values" [name]="'filter-' + filter.field"
-                              [pushTemplate]="!(filter.mode === 'in' || filter.mode === 'nin') ? null :''"
-                              (ngModelChange)="updateFilterFields(filter.field)">
-                <ng-container *rbArrayInputItem="let item"
-                              [ngSwitch]="(filter.autocomplete.length ? 'autocomplete' : '') +
+                [pushTemplate]="!(filter.mode === 'in' || filter.mode === 'nin') ? null :''"
+                (ngModelChange)="updateFilterFields(filter.field)">
+                <ng-container *rbArrayInputItem="let item" [ngSwitch]="(filter.autocomplete.length ? 'autocomplete' : '') +
                              (filter.field == 'added' ? 'date' : (filter.field == 'type' ? 'type' : ''))">
                  <rb-form-date-input *ngSwitchCase="'date'" [rbArrayInputListener]="'filter-' + filter.field"
-                                      [name]="'filter-' + filter.field + item.i" [index]="item.i"
-                                      [label]="filter.label" [(ngModel)]="item.value"
-                                      [disabled]="filter.mode === 'null'"></rb-form-date-input>
+                    [name]="'filter-' + filter.field + item.i" [index]="item.i" [label]="filter.label"
+                    [(ngModel)]="item.value" [disabled]="filter.mode === 'null'"></rb-form-date-input>
                  <rb-form-input *ngSwitchCase="''" [rbArrayInputListener]="'filter-' + filter.field"
-                                 [name]="'filter-' + filter.field + item.i" [index]="item.i"
-                                 [label]="filter.label" [(ngModel)]="item.value" [disabled]="filter.mode === 'null'">
+                    [name]="'filter-' + filter.field + item.i" [index]="item.i" [label]="filter.label"
+                    [(ngModel)]="item.value" [disabled]="filter.mode === 'null'">
                  </rb-form-input>
                  <rb-form-input *ngSwitchCase="'autocomplete'" [rbArrayInputListener]="'filter-' + filter.field"
-                                 [name]="'filter-' + filter.field + item.i" [index]="item.i"
-                                 [label]="filter.label" [(ngModel)]="item.value"
-                                 [rbDebounceTime]="0" (keydown)="preventDefault($event, 'Enter')"
-                                 [rbFormInputAutocomplete]="autocomplete.bind(this, filter.autocomplete)"
-                                 [disabled]="filter.mode === 'null'"
-                                 ngModel></rb-form-input>
+                    [name]="'filter-' + filter.field + item.i" [index]="item.i" [label]="filter.label"
+                    [(ngModel)]="item.value" [rbDebounceTime]="0" (keydown)="preventDefault($event, 'Enter')"
+                    [rbFormInputAutocomplete]="autocomplete.bind(this, filter.autocomplete)"
+                    [disabled]="filter.mode === 'null'" ngModel></rb-form-input>
                  <rb-form-select *ngSwitchCase="'type'" [rbArrayInputListener]="'filter-' + filter.field"
-                                  [name]="'filter-' + filter.field + item.i" [index]="item.i"
-                                  [label]="filter.label" [(ngModel)]="item.value">
+                    [name]="'filter-' + filter.field + item.i" [index]="item.i" [label]="filter.label"
+                    [(ngModel)]="item.value">
                    <option value="as-delivered/raw">as-delivered/raw</option>
                    <option value="processed">processed</option>
                  </rb-form-select>
@@ -119,7 +117,6 @@
  </rb-accordion-body>
 </rb-accordion>

-
 <ng-container *ngTemplateOutlet="paging"></ng-container>

 <div class="samples-loading" *ngIf="loading">
@@ -137,7 +134,7 @@
    <div class="link-dialog">
      <label for="jsonUrl">URL for JSON download</label>
      <textarea class="linkmodal" id="jsonUrl" #linkarea [value]="sampleUrl({export: true, host: true})"
-                (keydown)="preventDefault($event)"></textarea>
+        (keydown)="preventDefault($event)"></textarea>
      <rb-form-checkbox class="space-right" name="download-spectra" [(ngModel)]="downloadSpectra">
        add spectra
      </rb-form-checkbox>
@@ -161,7 +158,7 @@

 <rb-table class="samples-table" scrollTop ellipsis>
  <tr>
-	<th *ngIf="login.isLevel.write">
+    <th *ngIf="login.isLevel.write">
      <span class="rb-ic rb-ic-edit clickable" *ngIf="login.isLevel.dev" (click)="batchEdit()"></span>
      <span class="rb-ic rb-ic-close clickable" *ngIf="sampleSelect === 1" (click)="sampleSelect = 0"></span>
    </th>
@@ -184,39 +181,22 @@
  </tr>

  <tr *ngFor="let sample of samples; index as i" class="clickable" (click)="sampleDetails(sample._id, sampleModal)">
-	<td *ngIf="login.isLevel.write">
-      <a [routerLink]="'/samples/edit/' + sample._id"
-         *ngIf="sample.status !== 'deleted' &&
+    <td *ngIf="login.isLevel.write">
+      <a [routerLink]="'/samples/edit/' + sample._id" *ngIf="sample.status !== 'deleted' &&
         (login.isLevel.dev || (login.isLevel.write && sample.user_id === login.userId))">
        <span class="rb-ic rb-ic-edit clickable"></span>
      </a>
      <span class="rb-ic rb-ic-undo clickable" *ngIf="sample.status === 'deleted' && login.isLevel.dev"
-            (click)="restoreSample(sample._id, restoreConfirm, $event)"></span>
+        (click)="restoreSample(sample._id, restoreConfirm, $event)"></span>
    </td>
-	<td *ngIf="sampleSelect">
+    <td *ngIf="sampleSelect">
      <rb-form-checkbox *ngIf="sample.status !== 'deleted'" [name]="'validate-' + i" (click)="stopPropagation($event)"
-                        [(ngModel)]="sample.selected">
+        [(ngModel)]="sample.selected">
      </rb-form-checkbox>
    </td>
-    <td *ngIf="isActiveKey['number']">{{sample.number}}</td>
-    <td *ngIf="isActiveKey['material.numbers']">{{d.id.materials[sample.material_id].numbers}}</td>
-    <td *ngIf="isActiveKey['material.name']">{{d.id.materials[sample.material_id].name}}</td>
-    <td *ngIf="isActiveKey['material.supplier']">{{d.id.materials[sample.material_id].supplier}}</td>
-    <td *ngIf="isActiveKey['material.group']">{{d.id.materials[sample.material_id].group}}</td>
-    <td *ngFor="let key of activeTemplateKeys.material">
-      {{d.id.materials[sample.material_id].properties[key[2]] | exists}}
+    <td *ngFor="let item of activeKeys; index as j">
+      {{data[i].data[j]}}
    </td>
-    <td *ngIf="isActiveKey['type']">{{sample.type}}</td>
-    <td *ngIf="isActiveKey['color']">{{sample.color}}</td>
-    <td *ngIf="isActiveKey['batch']">{{sample.batch}}</td>
-    <td *ngFor="let key of activeTemplateKeys.condition">
-      {{sample.condition ? sample.condition[key[1]] : '' | exists}}
-    </td>
-    <td *ngIf="isActiveKey['notes.comment']">{{sample.notes | exists: 'comment'}}</td>
-    <td *ngIf="isActiveKey['notes']">{{sample.notes | object: ['_id', 'sample_references']}}</td>
-    <td *ngFor="let key of activeTemplateKeys.measurements">{{sample[key[1]] | exists: key[2]}}</td>
-    <td *ngIf="isActiveKey['status']">{{sample.status}}</td>
-    <td *ngIf="isActiveKey['added']">{{sample.added | date:'dd/MM/yy'}}</td>
  </tr>
 </rb-table>

@@ -245,13 +225,34 @@
  <ng-template #sampleDetailsTemplate>
    <h3>{{sampleDetailsSample.number}}</h3>
    <rb-table class="sample-details-table">
-      <tr><th>Material</th><td>{{sampleDetailsSample.material.name}}</td></tr>
-      <tr><th>Supplier</th><td>{{sampleDetailsSample.material.supplier}}</td></tr>
-      <tr><th>Group</th><td>{{sampleDetailsSample.material.group}}</td></tr>
-      <tr><th>Type</th><td>{{sampleDetailsSample.type}}</td></tr>
-      <tr><th>color</th><td>{{sampleDetailsSample.color}}</td></tr>
-      <tr><th>Batch</th><td>{{sampleDetailsSample.batch}}</td></tr>
-      <tr><th>Comment</th><td>{{sampleDetailsSample.notes.comment | exists}}</td></tr>
+      <tr>
+        <th>Material</th>
+        <td>{{sampleDetailsSample.material.name}}</td>
+      </tr>
+      <tr>
+        <th>Supplier</th>
+        <td>{{sampleDetailsSample.material.supplier}}</td>
+      </tr>
+      <tr>
+        <th>Group</th>
+        <td>{{sampleDetailsSample.material.group}}</td>
+      </tr>
+      <tr>
+        <th>Type</th>
+        <td>{{sampleDetailsSample.type}}</td>
+      </tr>
+      <tr>
+        <th>color</th>
+        <td>{{sampleDetailsSample.color}}</td>
+      </tr>
+      <tr>
+        <th>Batch</th>
+        <td>{{sampleDetailsSample.batch}}</td>
+      </tr>
+      <tr>
+        <th>Comment</th>
+        <td>{{sampleDetailsSample.notes.comment | exists}}</td>
+      </tr>
      <tr *ngFor="let customField of sampleDetailsSample.notes.custom_fields_entries">
        <th>{{customField[0]}}</th>
        <td>{{customField[1]}}</td>
@@ -272,8 +273,14 @@
        <th>{{measurement.name}}</th>
        <td>{{measurement.value}}</td>
      </tr>
-      <tr><th>User</th><td>{{sampleDetailsSample.user}}</td></tr>
-      <tr><th>Status</th><td>{{sampleDetailsSample.status}}</td></tr>
+      <tr>
+        <th>User</th>
+        <td>{{sampleDetailsSample.user}}</td>
+      </tr>
+      <tr>
+        <th>Status</th>
+        <td>{{sampleDetailsSample.status}}</td>
+      </tr>
    </rb-table>
  </ng-template>
 </ng-template>
@@ -282,4 +289,4 @@
  <rb-dialog dialogTitle="Restore sample">
    Do you really want to restore this sample?
  </rb-dialog>
-</ng-template>
+</ng-template>
--- a/src/app/samples/samples.component.scss
+++ b/src/app/samples/samples.component.scss
@@ -28,6 +28,10 @@ rb-table {
  }
 }

+rb-form-multi-select{
+  min-width: 9rem;
+}
+
 .status-selection {
  overflow: hidden;
  margin-bottom: 10px;
--- a/src/app/samples/samples.component.ts
+++ b/src/app/samples/samples.component.ts
@@ -10,6 +10,7 @@ import { ModalService } from '@inst-iot/bosch-angular-ui-components';
 import { DataService } from '../services/data.service';
 import { LocalStorageService } from 'angular-2-local-storage';
 import { Router } from '@angular/router';
+import { KeyValue } from '@angular/common';

 interface LoadSamplesOptions {
  toPage?: number;
@@ -24,6 +25,11 @@ interface KeyInterface {
  sortable: boolean;
 }

+interface Data {
+  id: string;
+  data: any[];
+}
+
@Component({
  selector: 'app-samples',
  templateUrl: './samples.component.html',
@@ -39,6 +45,7 @@ export class SamplesComponent implements OnInit {
  downloadCondition = false;
  downloadFlatten = true;
  samples: SampleModel[] = [];  // all samples to display
+  data: Data[] = [];
  totalSamples = 0;  // total number of samples
  csvUrl = '';  // store url separate so it only has to be generated when clicking the download button
  filters = {
@@ -65,27 +72,44 @@ export class SamplesComponent implements OnInit {
  page = 1;   // current page
  pages = 1;  // total number of pages
  loadSamplesQueue = [];  // arguments of queued up loadSamples() calls
-  keys: KeyInterface[] = [
+  materialKeys: KeyInterface[] = [
    { id: 'number', label: 'Number', active: true, sortable: true },
    { id: 'material.numbers', label: 'Material numbers', active: false, sortable: false },
-    { id: 'material.name', label: 'Product name', active: true, sortable: true },
    { id: 'material.supplier', label: 'Supplier', active: false, sortable: true },
    { id: 'material.group', label: 'Material', active: true, sortable: true },
    { id: 'type', label: 'Type', active: true, sortable: true },
    { id: 'color', label: 'Color', active: false, sortable: true },
    { id: 'batch', label: 'Batch', active: true, sortable: true },
-    { id: 'notes.comment', label: 'Comment', active: false, sortable: false },
+    { id: 'notes.comment', label: 'Comment', active: false, sortable: false }
+  ];
+  conditionKeys: KeyInterface[] = [
    { id: 'notes', label: 'Notes', active: false, sortable: false },
+  ];
+  measurementKeys: KeyInterface[] = [
+    { id: 'material.name', label: 'Product name', active: true, sortable: true },
    { id: 'status', label: 'Status', active: false, sortable: true },
    { id: 'added', label: 'Added', active: true, sortable: true }
  ];
+
+  // combines the 3 different categories
+  categories = {
+    material: this.materialKeys,
+    condition: this.conditionKeys,
+    measurement: this.measurementKeys
+  };
+
  isActiveKey: { [key: string]: boolean } = {};  // object to check if key is currently active
  activeKeys: KeyInterface[] = [];  // list of active keys
-  activeTemplateKeys = { material: [], condition: [], measurements: [] };
  sampleDetailsSample: any = null;  // sample for the sample details dialog
  sampleSelect = 0;  // modes: 0 - no selection, 1 - sample edit selection, 2 - validation selection
  loading = 0;  // number of loading instances

+  // change the way values are displayed
+  valueConverters = {
+    'added': (v: string, _sample) => new Date(v).toLocaleDateString(),
+    'notes': (v: any, _sample: any) => v.sample_references.length > 0 ? Object.keys(v.sample_references).map(r => v.sample_references[r].relation).join(", ") : "",
+    'notes.comment': (v: any, sample: any) => sample['notes']['comment']
+  }

  constructor(
    private api: ApiService,
@@ -96,8 +120,7 @@ export class SamplesComponent implements OnInit {
    private storage: LocalStorageService,
    private window: Window,
    private router: Router
-  ) {
-  }
+  ) {}

  ngOnInit(): void {
    this.loading = 8;
@@ -123,7 +146,7 @@ export class SamplesComponent implements OnInit {
    this.d.load('userKey', onLoad);
    this.d.load('conditionTemplates', onLoad);
    this.loadTemplateKeys('material', 'type', onLoad);
-    this.loadTemplateKeys('condition', 'notes.comment', onLoad);
+    this.loadTemplateKeys('condition', 'notes', onLoad);
    this.loadTemplateKeys('measurement', 'status', onLoad);
  }

@@ -157,18 +180,17 @@ export class SamplesComponent implements OnInit {
          }
        });
      });
-      this.keys.splice(this.keys.findIndex(e => e.id === insertBefore), 0, ...templateKeys);
-      this.keys = [...this.keys];  // complete overwrite array to invoke update in rb-multiselect
+      this.categories[collection].splice(this.categories[collection].findIndex(e => e.id === insertBefore), 0, ...templateKeys);
+      this.categories[collection] = [...this.categories[collection]];  // complete overwrite array to invoke update in rb-multiselect
      this.loadPreferences();
      f();
    });
  }

  // set toPage to null to reload first page, queues calls
-  loadSamples(options: LoadSamplesOptions = {}, event = null) {
+  loadSamples(options: LoadSamplesOptions = {}, event = null, category?) {
    if (event) {  // adjust active keys
-      console.log(event);
-      this.keys.forEach(key => {
+      this.categories[category].forEach(key => {
        if (event.hasOwnProperty(key.id)) {
          key.active = event[key.id];
        }
@@ -179,7 +201,7 @@ export class SamplesComponent implements OnInit {
      }
      this.updateActiveKeys();
    }
-    if(options.firstPage){
+    if (options.firstPage) {
      this.storage.set('currentPage', 1);
    }
    this.loadSamplesQueue.push(options);
@@ -203,13 +225,14 @@ export class SamplesComponent implements OnInit {
        }
        this.pages = Math.ceil(this.totalSamples / this.filters.pageSize);
        this.samples = sData as any;
+        this.storeData();
        this.loadSamplesQueue.shift();
        if (this.loadSamplesQueue.length > 0) {  // execute next queue item
          this.sampleLoader(this.loadSamplesQueue[0]);
        }
      }
    });
-    if(this.storage.get('currentPage') !== this.page){
+    if (this.storage.get('currentPage') !== this.page) {
      this.loadPage(Number(this.storage.get('currentPage')) - this.page);
    }
  }
@@ -247,13 +270,14 @@ export class SamplesComponent implements OnInit {
    if (options.export) {  // append API key on export
      query.push('key=' + this.d.d.userKey.key);
    }
-    this.keys.forEach(key => {
-      // do not load material properties for table
-      if (key.active && (options.export || (!options.export && key.id.indexOf('material.') < 0))) {
-        query.push('fields[]=' + key.id);
-      }
-    });

+    for (let category in this.categories) {
+      this.categories[category].forEach(key => {
+        if (key.active && (options.export || (!options.export && key.id.indexOf('material.') < 0))) {
+          query.push('fields[]=' + key.id);
+        }
+      });
+    }
    query.push(...cloneDeep(this.filters.filters)
      .map(e => {
        e.values = e.values.filter(el => el !== '');  // do not include empty values
@@ -314,14 +338,20 @@ export class SamplesComponent implements OnInit {
  }

  storePreferences() {
+    let keys = [];
+    for (let category in this.categories) {
+      keys.push(...this.categories[category].map(e => pick(e, ['id', 'active'])));
+    }
+
    const store = {
      filters: {
        ...pick(this.filters, ['status', 'pageSize', 'toPage', 'sort']),
        filters: this.filters.filters.map(e => pick(e, ['field', 'active', 'mode', 'values']))
      },
-      keys: this.keys.map(e => pick(e, ['id', 'active']))
+      keys: keys
    };
    this.storage.set('samplesPreferences', store);
+    this.calcFieldSelectKeys();
  }

  loadPreferences() {
@@ -334,10 +364,13 @@ export class SamplesComponent implements OnInit {
          this.filters.filters[filterIndex] = { ...this.filters.filters[filterIndex], ...filter };
        }
      });
+
      store.keys.forEach(key => {
-        const keyIndex = this.keys.findIndex(e => e.id === key.id);
-        if (keyIndex >= 0) {
-          this.keys[keyIndex].active = key.active;
+        for (let category in this.categories) {
+          const keyIndex = this.categories[category].findIndex(e => e.id === key.id);
+          if (keyIndex >= 0) {
+            this.categories[category][keyIndex].active = key.active;
+          }
        }
      });
    }
@@ -361,28 +394,23 @@ export class SamplesComponent implements OnInit {
  }

  updateActiveKeys() {  // array with all activeKeys
-    this.activeKeys = this.keys.filter(e => e.active);
-    this.filters.filters.forEach(filter => {  // disable filters of fields not displayed
-      if (!this.isActiveKey[filter.field]) {
-        filter.active = false;
-      }
-    });
-    this.activeTemplateKeys.material = this.keys
-      .filter(e => e.id.indexOf('material.properties.') >= 0 && e.active)
-      .map(e => e.id.split('.')
-        .map(el => decodeURIComponent(el)));
-    this.activeTemplateKeys.condition = this.keys.filter(e => e.id.indexOf('condition.') >= 0 && e.active)
-      .map(e => e.id.split('.')
-        .map(el => decodeURIComponent(el)));
-    this.activeTemplateKeys.measurements = this.keys.filter(e => e.id.indexOf('measurements.') >= 0 && e.active)
-      .map(e => e.id.split('.')
-        .map(el => decodeURIComponent(el)));
+    this.activeKeys = [];
+    for (let category in this.categories) {
+      this.activeKeys.push(...this.categories[category].filter(e => e.active));
+      this.filters.filters.forEach(filter => {  // disable filters of fields not displayed
+        if (!this.isActiveKey[filter.field]) {
+          filter.active = false;
+        }
+      });
+    }
  }

  calcFieldSelectKeys() {
-    this.keys.forEach(key => {
-      this.isActiveKey[key.id] = key.active;
-    });
+    for (let category in this.categories) {
+      this.categories[category].forEach(key => {
+        this.isActiveKey[key.id] = key.active;
+      });
+    }
  }

  sampleDetails(id: string, modal: TemplateRef<any>) {  // show sample details
@@ -417,7 +445,7 @@ export class SamplesComponent implements OnInit {
          .push(...Object.entries(measurement.values).filter(e => e[0] !== 'dpt')
            .map(e => ({ name: this.ucFirst(name) + ' ' + e[0], value: e[1] })));
      });
-      new Promise(resolve => {
+      new Promise<void>(resolve => {
        if (data.notes.sample_references.length) {  // load referenced samples if available
          let loadingCounter = data.notes.sample_references.length;
          this.sampleDetailsSample.notes.sample_references.forEach(reference => {
@@ -505,4 +533,28 @@ export class SamplesComponent implements OnInit {
  ucFirst(string) {  // convert first character of string to uppercase
    return string[0].toUpperCase() + string.slice(1);
  }
+
+  refreshMultiSelect() {
+    for (let collection in this.categories) {
+      this.categories[collection] = [...this.categories[collection]];
+    }
+  }
+
+  // stores data in a unified way
+  storeData() {
+    this.data = [];
+    this.samples.forEach(sample => {
+      let value = [];
+      this.activeKeys.forEach(key => {
+        let id = key.id.split('material.')[1];
+        let tmpValue = id ? this.d.id.materials[sample.material_id][id] : sample[key.id];
+        value.push(this.valueConverters[key.id] ? this.valueConverters[key.id](tmpValue, sample) : tmpValue);
+      });
+      this.data.push({ id: sample._id, data: value });
+    });
+  }
+
+  originalOrder = (a: KeyValue<number, string>, b: KeyValue<number, string>): number => {
+    return 0;
+  }
 }