From b28be4b7924ee11baa839b67676e83fd69fdc0d3 Mon Sep 17 00:00:00 2001
From: VLE2FE <lukas.veit@de.bosch.com>
Date: Mon, 13 Jul 2020 10:52:10 +0200
Subject: [PATCH] finished filters

---
 angular.json                           |   3 +-
 manifest.yml                           |   8 +
 package.json                           |   3 +-
 src/Staticfile                         |   2 +
 src/app/app.component.html             |   4 +-
 src/app/app.component.scss             |   5 +
 src/app/app.component.ts               |   7 +-
 src/app/app.module.ts                  |   4 +-
 src/app/login/login.component.ts       |   3 +
 src/app/object.pipe.spec.ts            |   8 +
 src/app/object.pipe.ts                 |  12 ++
 src/app/sample/sample.component.ts     |   1 -
 src/app/samples/samples.component.html |  97 ++++++++---
 src/app/samples/samples.component.scss |  79 ++++++++-
 src/app/samples/samples.component.ts   | 229 ++++++++++++++++++++-----
 src/app/services/api.service.ts        |  38 ++--
 src/app/services/login.service.ts      |   4 +
 17 files changed, 419 insertions(+), 88 deletions(-)
 create mode 100644 manifest.yml
 create mode 100644 src/Staticfile
 create mode 100644 src/app/object.pipe.spec.ts
 create mode 100644 src/app/object.pipe.ts

diff --git a/angular.json b/angular.json
index 126fb2c..066b70a 100644
--- a/angular.json
+++ b/angular.json
@@ -26,7 +26,8 @@
             "assets": [
               "src/favicon.ico",
               "src/assets",
-              { "glob": "**/*", "input": "./node_modules/@inst-iot/bosch-angular-ui-components/assets", "output": "./assets" }
+              { "glob": "**/*", "input": "./node_modules/@inst-iot/bosch-angular-ui-components/assets", "output": "./assets" },
+              "src/Staticfile"
             ],
             "styles": [
               "src/styles.scss"
diff --git a/manifest.yml b/manifest.yml
new file mode 100644
index 0000000..852c5cd
--- /dev/null
+++ b/manifest.yml
@@ -0,0 +1,8 @@
+---
+applications:
+  - name: definma
+    path: dist/UI
+    buildpack: staticfile_buildpack
+    memory: 128M
+    instances: 1
+    stack: cflinuxfs3
diff --git a/package.json b/package.json
index d77ae2a..b188818 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build --prod --aot",
+    "build-push": "ng build --prod --aot && cf push",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
diff --git a/src/Staticfile b/src/Staticfile
new file mode 100644
index 0000000..03b776c
--- /dev/null
+++ b/src/Staticfile
@@ -0,0 +1,2 @@
+pushstate: enabled
+force_https: true
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 140a69a..0546de3 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,7 @@
 <rb-full-header>
   <nav *rbMainNavItems>
     <a routerLink="/home" routerLinkActive="active" rbLoadingLink>Home</a>
-    <a routerLink="/samples" routerLinkActive="active" rbLoadingLink *ngIf="loginService.canActivate()">Samples</a>
+    <a routerLink="/samples" routerLinkActive="active" rbLoadingLink *ngIf="loginService.isLoggedIn">Samples</a>
   </nav>
 
   <nav *rbActionNavItems>
@@ -18,7 +18,7 @@
     </div>
   </ng-template>
 
-  <div *rbSubBrandHeader>Digital Fingerprint of Plastics</div>
+  <div *rbSubBrandHeader><span class="dev-label" *ngIf="devMode">DEVELOPMENT</span>Digital Fingerprint of Plastics</div>
 </rb-full-header>
 
 <div class="container">
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29..31ad797 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,5 @@
+.dev-label {
+  color: #F00;
+  font-size: 32px;
+  margin-right: 40px;
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 1f033c4..8b6391c 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, isDevMode} from '@angular/core';
 import {LoginService} from './services/login.service';
 
 // TODO: add multiple samples at once
@@ -6,6 +6,7 @@ import {LoginService} from './services/login.service';
 // TODO: validation: VZ, Humidity: min/max value, DPT: filename
 // TODO: filter by not completely filled/no measurements
 // TODO: account
+// TODO: admin user handling, template pages, validation of samples
 
 @Component({
   selector: 'app-root',
@@ -18,4 +19,8 @@ export class AppComponent {
     public loginService: LoginService
   ) {
   }
+
+  get devMode() {
+    return isDevMode();
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 0bfe9db..60c0738 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -15,6 +15,7 @@ import { SampleComponent } from './sample/sample.component';
 import { ValidateDirective } from './validate.directive';
 import {CommonModule} from '@angular/common';
 import { ErrorComponent } from './error/error.component';
+import { ObjectPipe } from './object.pipe';
 
 @NgModule({
   declarations: [
@@ -24,7 +25,8 @@ import { ErrorComponent } from './error/error.component';
     SamplesComponent,
     SampleComponent,
     ValidateDirective,
-    ErrorComponent
+    ErrorComponent,
+    ObjectPipe
   ],
   imports: [
     LocalStorageModule.forRoot({
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index bc5612e..765d641 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,6 +1,7 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {ValidationService} from '../services/validation.service';
 import {LoginService} from '../services/login.service';
+import {Router} from '@angular/router';
 
 
 @Component({
@@ -19,6 +20,7 @@ export class LoginComponent implements OnInit {
   constructor(
     private validate: ValidationService,
     private loginService: LoginService,
+    private router: Router
   ) { }
 
   ngOnInit() {
@@ -28,6 +30,7 @@ export class LoginComponent implements OnInit {
     this.loginService.login(this.username, this.password).then(ok => {
       if (ok) {
         this.message = 'Login successful';  // TODO: think about following action
+        this.router.navigate(['/samples']);
       }
       else {
         this.message = 'Wrong credentials!';
diff --git a/src/app/object.pipe.spec.ts b/src/app/object.pipe.spec.ts
new file mode 100644
index 0000000..5560af0
--- /dev/null
+++ b/src/app/object.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { ObjectPipe } from './object.pipe';
+
+describe('ObjectPipe', () => {
+  it('create an instance', () => {
+    const pipe = new ObjectPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/object.pipe.ts b/src/app/object.pipe.ts
new file mode 100644
index 0000000..cf7ced5
--- /dev/null
+++ b/src/app/object.pipe.ts
@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'object'
+})
+export class ObjectPipe implements PipeTransform {
+
+  transform(value: object): string {
+    return value ? Object.entries(value).map(e => e.join(': ')).join(', ') : '';
+  }
+
+}
diff --git a/src/app/sample/sample.component.ts b/src/app/sample/sample.component.ts
index 137e986..96d57c3 100644
--- a/src/app/sample/sample.component.ts
+++ b/src/app/sample/sample.component.ts
@@ -24,7 +24,6 @@ import {MeasurementModel} from '../models/measurement.model';
 // TODO: multiple samples for base data, extend multiple measurements, conditions
 
 
-
 @Component({
   selector: 'app-sample',
   templateUrl: './sample.component.html',
diff --git a/src/app/samples/samples.component.html b/src/app/samples/samples.component.html
index 02f0a6a..ee76318 100644
--- a/src/app/samples/samples.component.html
+++ b/src/app/samples/samples.component.html
@@ -8,17 +8,18 @@
 <rb-accordion>
   <rb-accordion-title [open]="true"><span class="rb-ic rb-ic-filter"></span>&nbsp; Filter</rb-accordion-title>
   <rb-accordion-body>
-    <form (change)="loadSamples({event: $event})">
+    <form class="filters">
       <div class="status-selection">
         <label class="label">Status</label>
-        <rb-form-checkbox name="status-validated" [(ngModel)]="filters.status.validated" [disabled]="!filters.status.new">
+        <rb-form-checkbox name="status-validated" [(ngModel)]="filters.status.validated" [disabled]="!filters.status.new" (ngModelChange)="loadSamples({firstPage: true})">
           validated
         </rb-form-checkbox>
-        <rb-form-checkbox name="status-new" [(ngModel)]="filters.status.new" [disabled]="!filters.status.validated">
+        <rb-form-checkbox name="status-new" [(ngModel)]="filters.status.new" [disabled]="!filters.status.validated" (ngModelChange)="loadSamples({firstPage: true})">
           new
         </rb-form-checkbox>
       </div>
-      <rb-form-select name="pageSizeSelection" label="page size" [(ngModel)]="filters.pageSize" class="page-size-selection" #pageSizeSelection>
+      <rb-form-select name="pageSizeSelection" label="page size" [(ngModel)]="filters.pageSize" class="selection" (ngModelChange)="loadSamples({firstPage: true})" #pageSizeSelection>
+        <option value="3">3</option>
         <option value="10">10</option>
         <option value="25">25</option>
         <option value="50">50</option>
@@ -27,38 +28,92 @@
         <option value="500">500</option>
       </rb-form-select>
 
+      <rb-form-multi-select name="fieldSelect" idField="id" [items]="keys" [(ngModel)]="activeKeys" label="Fields" class="selection" (ngModelChange)="loadSamples()">
+        <span *rbFormMultiSelectOption="let item" class="load-first-page">{{item.label}}</span>
+      </rb-form-multi-select>
+
+      <div class="fieldfilters">
+        <div *ngFor="let filter of filters.filters">
+          <rb-form-checkbox [name]="'filteractive-' + filter.field" [(ngModel)]="filter.active" (ngModelChange)="loadSamples({firstPage: true})"></rb-form-checkbox>
+          <rb-form-select [name]="'filtermode-' + filter.field" class="filtermode" [(ngModel)]="filter.mode" (ngModelChange)="updateFilterFields(filter.field)">
+            <option value="eq">=</option>
+            <option value="ne">&ne;</option>
+            <option value="lt">&lt;</option>
+            <option value="lte">&le;</option>
+            <option value="gt">&gt;</option>
+            <option value="gte">&ge;</option>
+            <option value="in">&isin;</option>
+            <option value="nin">&notin;</option>
+          </rb-form-select>
+          <div>
+            <ng-container *ngFor="let ignore of [].constructor(filter.values.length); index as i">
+              <rb-form-date-input *ngIf="filter.field === 'added'; else noDate" [name]="'filter-' + filter.field + i" [label]="filter.label" [(ngModel)]="filter.values[i]" (ngModelChange)="updateFilterFields(filter.field)"></rb-form-date-input>
+              <ng-template #noDate>
+                <rb-form-input *ngIf="!filter.autocomplete.length" [name]="'filter-' + filter.field + i" [label]="filter.label" [(ngModel)]="filter.values[i]" (ngModelChange)="updateFilterFields(filter.field)"></rb-form-input>
+                <rb-form-input *ngIf="filter.autocomplete.length" [name]="'filter-' + filter.field + i" [label]="filter.label" [rbFormInputAutocomplete]="autocomplete.bind(this, filter.autocomplete)" [rbDebounceTime]="0" (keydown)="preventDefault($event, 'Enter')" [(ngModel)]="filter.values[i]" (ngModelChange)="updateFilterFields(filter.field)" ngModel></rb-form-input>
+              </ng-template>
+            </ng-container>
+          </div>
+<!--          <rb-form-date-input *ngIf="filter.field === 'added'; else noDate" [name]="'filter-' + filter.field" [label]="filter.label" [(ngModel)]="filter.values[0]" (ngModelChange)="loadSamples({firstPage: true})"></rb-form-date-input>-->
+<!--          <ng-template #noDate>-->
+<!--            <rb-form-input *ngIf="!filter.autocomplete.length" [name]="'filter-' + filter.field" [label]="filter.label" [(ngModel)]="filter.values[0]" (ngModelChange)="loadSamples({firstPage: true})"></rb-form-input>-->
+<!--            <rb-form-input *ngIf="filter.autocomplete.length" [name]="'filter-' + filter.field" [label]="filter.label" [rbFormInputAutocomplete]="autocomplete.bind(this, filter.autocomplete)" [rbDebounceTime]="0" (keydown)="preventDefault($event, 'Enter')" [(ngModel)]="filter.values[0]" (ngModelChange)="loadSamples({firstPage: true})" ngModel></rb-form-input>-->
+<!--          </ng-template>-->
+        </div>
+      </div>
+
 <!--      <button class="rb-btn rb-secondary" (click)="loadSamples()">Apply filters</button>-->
     </form>
   </rb-accordion-body>
 </rb-accordion>
 
+
 <ng-container *ngTemplateOutlet="paging"></ng-container>
 
+<div class="download">
+  <button class="rb-btn rb-secondary" type="button" [rbModal]="linkModal" ><span class="rb-ic rb-ic-download"></span>  JSON download link
+  </button>
+  <ng-template #linkModal let-close="close">
+    URL for JSON download:
+    <textarea class="linkmodal" #linkarea [value]="sampleUrl({export: true, host: true})" (keydown)="preventDefault($event)"></textarea>
+    <rb-form-checkbox name="download-csv" [(ngModel)]="downloadCsv">
+      add spectra
+    </rb-form-checkbox>
+    <button class="rb-btn rb-secondary" type="button" (click)="clipboard()"><span class="rb-ic rb-ic-clipboard"></span>  Copy to clipboard</button>
+  </ng-template>
+  <a [href]="csvUrl" download="samples.csv">
+    <button class="rb-btn rb-secondary" type="button" (mousedown)="csvUrl = sampleUrl({csv: true, export: true})"><span class="rb-ic rb-ic-download"></span>  Download result as CSV</button>
+  </a>
+</div>
+
 <rb-table>
   <tr>
-    <th *ngFor="let key of activeKeys">
+    <th *ngFor="let key of activeKeysArray()">
       <div class="sort-header">
-        <span>{{key.name}}</span>
-        <span class="rb-ic rb-ic-up" [ngClass]="{'sort-active-desc': filters.sort === key.key + '-' + 'desc'}" (click)="setSort(key.key + '-' + 'desc')"></span>
-        <span class="rb-ic rb-ic-down" [ngClass]="{'sort-active-asc': filters.sort === key.key + '-' + 'asc'}" (click)="setSort(key.key + '-' + 'asc')"></span>
+        <span>{{key.label}}</span>
+<!--        <span class="rb-ic rb-ic-up" [ngClass]="{'sort-active-desc': filters.sort === key.id + '-' + 'desc'}" (click)="setSort(key.id + '-' + 'desc')"></span>-->
+<!--        <span class="rb-ic rb-ic-down" [ngClass]="{'sort-active-asc': filters.sort === key.id + '-' + 'asc'}" (click)="setSort(key.id + '-' + 'asc')"></span>-->
+        <span class="rb-ic rb-ic-up sort-arr-up" (click)="setSort(key.id + '-' + 'desc')"><span *ngIf="filters.sort === key.id + '-' + 'desc'"></span></span>
+        <span class="rb-ic rb-ic-down sort-arr-down" (click)="setSort(key.id + '-' + 'asc')"><span *ngIf="filters.sort === key.id + '-' + 'asc'"></span></span>
       </div>
     </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>{{sample.added | date}}</td>
+    <td *ngIf="activeKeys['number']">{{sample.number}}</td>
+    <td *ngIf="activeKeys['material.number']">{{sample.material_number}}</td>
+    <td *ngIf="activeKeys['material.name']">{{materials[sample.material_id].name}}</td>
+    <td *ngIf="activeKeys['material.supplier']">{{materials[sample.material_id].supplier}}</td>
+    <td *ngIf="activeKeys['material.group']">{{materials[sample.material_id].group}}</td>
+    <td *ngIf="activeKeys['material.glass_fiber']">{{materials[sample.material_id].glass_fiber}}</td>
+    <td *ngIf="activeKeys['material.carbon_fiber']">{{materials[sample.material_id].carbon_fiber}}</td>
+    <td *ngIf="activeKeys['material.mineral']">{{materials[sample.material_id].mineral}}</td>
+    <td *ngIf="activeKeys['type']">{{sample.type}}</td>
+    <td *ngIf="activeKeys['color']">{{sample.color}}</td>
+    <td *ngIf="activeKeys['batch']">{{sample.batch}}</td>
+    <td *ngIf="activeKeys['added']">{{sample.added | date:'dd/MM/yy'}}</td>
+    <td *ngFor="let key of activeMeasurementKeys()">{{sample[key[1]] ? sample[key[1]][key[2]] : ''}}</td>
     <td><a [routerLink]="'/samples/edit/' + sample._id"><span class="rb-ic rb-ic-edit"></span></a></td>
   </tr>
 </rb-table>
@@ -72,7 +127,7 @@
     </button>
     <rb-form-input label="page" (change)="loadPage({toPage: $event.target.value - page})" [ngModel]="page"></rb-form-input>
     <span>
-      of {{pages()}}
+      of {{pages()}} ({{totalSamples}} samples)
     </span>
     <button class="rb-btn rb-link" type="button" (click)="loadPage(1)" [disabled]="page >= pages()">
       <span class="rb-ic  rb-ic-forward-right"></span>
diff --git a/src/app/samples/samples.component.scss b/src/app/samples/samples.component.scss
index c3fb393..0641a55 100644
--- a/src/app/samples/samples.component.scss
+++ b/src/app/samples/samples.component.scss
@@ -23,10 +23,6 @@
   }
 }
 
-form {
-  overflow: hidden;
-}
-
 .status-selection {
   overflow: hidden;
   margin-bottom: 10px;
@@ -46,8 +42,8 @@ form {
   }
 }
 
-.page-size-selection {
-  max-width: 125px;
+.selection {
+  max-width: 230px;
   float: left;
 }
 
@@ -102,3 +98,74 @@ form {
   background: linear-gradient(to top, #FFF 17%, $color-bosch-light-blue-w50 17%);;
   border-radius: 8px 8px 0 0;
 }
+
+.filters:after {
+  content:"";
+  clear:both;
+  display:block;
+}
+
+.download {
+  margin-top: 5px;
+  float: right;
+
+  & > rb-form-checkbox {
+    display: inline-block;
+  }
+
+  button {
+    margin-right: 10px;
+  }
+}
+
+.sort-arr-up {
+  position: relative;
+
+  & > span {
+    width: 0;
+    height: 0;
+    border-left: 6.3px solid transparent;
+    border-right: 6.3px solid transparent;
+    border-bottom: 6.3px solid #000;
+    position: absolute;
+    top: 5px;
+    display: block;
+    left: 2px;
+  }
+}
+
+.sort-arr-down {
+  position: relative;
+
+  & > span {
+    width: 0;
+    height: 0;
+    border-left: 6.3px solid transparent;
+    border-right: 6.3px solid transparent;
+    border-top: 6.3px solid #000;
+    position: absolute;
+    top: 5px;
+    display: block;
+    left: 2px;
+  }
+}
+
+.fieldfilters {
+  clear: both;
+
+  & > div {
+    display: grid;
+    grid-template-columns: auto auto 1fr;
+  }
+}
+
+.filtermode {
+  max-width: 100px;
+}
+
+textarea.linkmodal {
+  display: block;
+  min-width: 600px;
+  min-height: 200px;
+  border: none;
+}
diff --git a/src/app/samples/samples.component.ts b/src/app/samples/samples.component.ts
index 2384cbc..8e51b5a 100644
--- a/src/app/samples/samples.component.ts
+++ b/src/app/samples/samples.component.ts
@@ -1,5 +1,7 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, isDevMode, OnInit, ViewChild} from '@angular/core';
 import {ApiService} from '../services/api.service';
+import {AutocompleteService} from '../services/autocomplete.service';
+import _ from 'lodash';
 
 
 
@@ -15,36 +17,77 @@ interface LoadSamplesOptions {
   styleUrls: ['./samples.component.scss']
 })
 
-// TODO: always show first page on sort change
 
-export class SamplesComponent implements OnInit {  // TODO: implement paging
 
-  @ViewChild('pageSizeSelection') pageSizeSelection: HTMLElement;
+export class SamplesComponent implements OnInit {
 
+  @ViewChild('pageSizeSelection') pageSizeSelection: ElementRef<HTMLElement>;
+  @ViewChild('linkarea') linkarea: ElementRef<HTMLTextAreaElement>;
+
+  customFields = [''];
+  downloadCsv = false;
   materials = {};
   samples = [];
   totalSamples = 0;  // total number of samples
-  filters = {status: {new: true, validated: true}, pageSize: 25, toPage: 0, sort: 'added-asc'};
+  csvUrl = '';  // store url separate so it only has to be generated when clicking the download button
+  filters = {
+    status: {new: true, validated: true},
+    pageSize: 25,
+    toPage: 0,
+    sort: 'added-asc',
+    filters: [
+      {field: 'number', label: 'Number', active: false, autocomplete: [], mode: 'eq', values: ['']},
+      {field: 'material.number', label: 'Material number', active: false, autocomplete: [], mode: 'eq', values: ['']},
+      {field: 'material.name', label: 'Material name', active: false, autocomplete: [], mode: 'eq', values: ['']},
+      {field: 'material.supplier', label: 'Supplier', active: false, autocomplete: [], mode: 'eq', values: ['']},
+      {field: 'material.group', label: 'Material', active: false, autocomplete: [], mode: 'eq', values: ['']},
+      {field: 'material.glass_fiber', label: 'GF', active: false, autocomplete: [], mode: 'eq', values: ['']},
+      {field: 'material.carbon_fiber', label: 'CF', active: false, autocomplete: [], mode: 'eq', values: ['']},
+      {field: 'material.mineral', label: 'M', active: false, autocomplete: [], mode: 'eq', values: ['']},
+      {field: 'type', label: 'Type', active: false, autocomplete: [], mode: 'eq', values: ['']},
+      {field: 'color', label: 'Color', active: false, autocomplete: [], mode: 'eq', values: ['']},
+      {field: 'batch', label: 'Batch', active: false, autocomplete: [], mode: 'eq', values: ['']},
+      {field: 'added', label: 'Added', active: false, autocomplete: [], mode: 'eq', values: [new Date()]}
+    ]
+  };
   page = 1;
   loadSamplesQueue = [];  // arguments of queued up loadSamples() calls
-  activeKeys = [
-    {name: 'Number', key: 'number'},
-    // {name: 'Material number', key: ''},
-    {name: 'Material name', key: ''},
-    {name: 'Supplier', key: ''},
-    // {name: 'Material', key: ''},
-    // {name: 'GF', key: ''},
-    // {name: 'CF', key: ''},
-    // {name: 'M', key: ''},
-    {name: 'Type', key: 'type'},
-    {name: 'Color', key: 'color'},
-    {name: 'Batch', key: 'batch'},
-    {name: 'Added', key: 'added'},
+  apiKey = '';
+  activeKeys =  {
+    number: true,
+    'material.number': true,
+    'material.name': true,
+    'material.supplier': true,
+    'material.group': false,
+    'material.glass_fiber': false,
+    'material.carbon_fiber': false,
+    'material.mineral': false,
+    type: true,
+    color: true,
+    batch: true,
+    added: true,
+  };
+  keys = [
+    {id: 'number', label: 'Number'},
+    {id: 'material.number', label: 'Material number'},
+    {id: 'material.name', label: 'Material name'},
+    {id: 'material.supplier', label: 'Supplier'},
+    {id: 'material.group', label: 'Material'},
+    {id: 'material.glass_fiber', label: 'GF'},
+    {id: 'material.carbon_fiber', label: 'CF'},
+    {id: 'material.mineral', label: 'M'},
+    {id: 'type', label: 'Type'},
+    {id: 'color', label: 'Color'},
+    {id: 'batch', label: 'Batch'},
+    {id: 'added', label: 'Added'}
   ];
 
+
   constructor(
-    private api: ApiService
-  ) { }
+    private api: ApiService,
+    public autocomplete: AutocompleteService
+  ) {
+  }
 
   ngOnInit(): void {
     this.api.get('/materials?status=all', (mData: any) => {
@@ -52,10 +95,30 @@ export class SamplesComponent implements OnInit {  // TODO: implement paging
       mData.forEach(material => {
         this.materials[material._id] = material;
       });
+      this.filters.filters.find(e => e.field === 'material.name').autocomplete = mData.map(e => e.name);
+      this.filters.filters.find(e => e.field === 'color').autocomplete = [...new Set(mData.reduce((s, e) => {s.push(...e.numbers.map(el => el.color)); return s; }, []))];
       this.loadSamples();
     });
-    this.api.get('/samples/count', (data: {count: number}) => {
-      this.totalSamples = data.count;
+    this.api.get('/user/key', (data: {key: string}) => {
+      this.apiKey = data.key;
+    });
+    this.api.get<string[]>('/material/suppliers', (data: any) => {
+      this.filters.filters.find(e => e.field === 'material.supplier').autocomplete = data;
+    });
+    this.api.get<string[]>('/material/groups', (data: any) => {
+      this.filters.filters.find(e => e.field === 'material.group').autocomplete = data;
+    });
+    this.api.get('/template/measurements', (data: {name: string, parameters: {name: string, range: object}[]}[]) => {
+      const measurementKeys = [];
+      data.forEach(item => {
+        item.parameters.forEach(parameter => {
+          this.activeKeys[`measurements.${item.name}.${encodeURIComponent(parameter.name)}`] = false;
+          measurementKeys.push({id: `measurements.${item.name}.${encodeURIComponent(parameter.name)}`, label: `${this.ucFirst(item.name)} ${this.ucFirst(parameter.name)}`});
+          this.filters.filters.push({field: `measurements.${item.name}.${parameter.name}`, label: `${this.ucFirst(item.name)} ${this.ucFirst(parameter.name)}`, active: false, autocomplete: [], mode: 'eq', values: ['']});
+        });
+      });
+      console.log(this.filters.filters);
+      this.keys = [...this.keys, ...measurementKeys];
     });
   }
 
@@ -67,26 +130,13 @@ export class SamplesComponent implements OnInit {  // TODO: implement paging
   }
 
   private sampleLoader(options: LoadSamplesOptions) {  // actual loading of the sample, do not call directly
-    const query: string[] = [];
-    query.push('status=' + (this.filters.status.new && this.filters.status.validated ? 'all' : (this.filters.status.new ? 'new' : 'validated')));
-    if (this.samples[0]) {  // do not include from-id when page size was changed
-      if (!options.firstPage && (!options.event || ((options.event.target as HTMLElement).id.indexOf(this.pageSizeSelection.id) < 0))) {
-        query.push('from-id=' + this.samples[0]._id);
+    this.api.get(this.sampleUrl({paging: true, pagingOptions: options}), (sData, ignore, headers) => {
+      if (!options.toPage) {
+        this.totalSamples = headers['x-total-items'];
       }
-      else {
-        this.page = 1;
-      }
-    }
-    if (options.toPage) {
-      query.push('to-page=' + options.toPage);
-    }
-    query.push('page-size=' + this.filters.pageSize);
-    query.push('sort=' + this.filters.sort);
-
-    this.api.get('/samples?' + query.join('&'), 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;
+        sample.material_number = sample.color === '' ? '' : this.materials[sample.material_id].numbers.find(e => sample.color === e.color).number;
       });
       this.loadSamplesQueue.shift();
       if (this.loadSamplesQueue.length > 0) {  // execute next queue item
@@ -95,6 +145,65 @@ export class SamplesComponent implements OnInit {  // TODO: implement paging
     });
   }
 
+  sampleUrl(options: {paging?: boolean, pagingOptions?: {firstPage?: boolean, toPage?: number, event?: Event}, csv?: boolean, export?: boolean, host?: boolean}) {  // return url to fetch samples
+    const additionalTableKeys = ['material_id', '_id', 'color'];  // keys which should always be added if export = false
+    const query: string[] = [];
+    query.push('status=' + (this.filters.status.new && this.filters.status.validated ? 'all' : (this.filters.status.new ? 'new' : 'validated')));
+    if (options.paging) {
+      if (this.samples[0]) {  // do not include from-id when page size was changed
+        if (!options.pagingOptions.firstPage) {
+          query.push('from-id=' + this.samples[0]._id);
+        }
+        else {
+          this.page = 1;
+        }
+      }
+      if (options.pagingOptions.toPage) {
+        query.push('to-page=' + options.pagingOptions.toPage);
+      }
+      query.push('page-size=' + this.filters.pageSize);
+    }
+    query.push('sort=' + this.filters.sort);
+    if (options.csv) {
+      query.push('csv=true');
+    }
+    if (options.export) {
+      query.push('key=' + this.apiKey);
+    }
+    Object.keys(this.activeKeys).forEach(key => {
+      if (this.activeKeys[key] && (options.export || (!options.export && key.indexOf('material') < 0))) {  // do not load material properties for table
+        query.push('fields[]=' + key);
+      }
+    });
+    console.log(this.filters.filters);
+
+    query.push(..._.cloneDeep(this.filters.filters)
+      .map(e => {
+        e.values = e.values.filter(el => el !== '');
+        if (e.field === 'added') {
+          console.log(e.values);
+          e.values = e.values.map(el => new Date(new Date(el).getTime() - new Date(el).getTimezoneOffset() * 60000).toISOString());
+        }
+        return e;
+      })
+      .filter(e => e.active && e.values[0] !== '')
+      .map(e => 'filters[]=' + encodeURIComponent(JSON.stringify(_.pick(e, ['mode', 'field', 'values']))))
+    );
+    console.log(this.filters);
+    if (!options.export) {
+      additionalTableKeys.forEach(key => {
+      if (query.indexOf('fields[]=' + key) < 0) {  // add key if not already added
+        query.push('fields[]=' + key);
+      }
+      });
+    }
+    else if (this.downloadCsv) {
+      query.push('fields[]=measurements.spectrum.dpt');
+    }
+    console.log('/samples?' + query.join('&'));
+    return (options.host && isDevMode() ? window.location.host : '') + (options.export ? this.api.hostName : '') + '/samples?' + query.join('&');
+  }
+
   loadPage(delta) {
     if (!/[0-9]+/.test(delta) || (this.page <= 1 && delta < 0)) {  // invalid delta
       return;
@@ -103,6 +212,24 @@ export class SamplesComponent implements OnInit {  // TODO: implement paging
     this.loadSamples({toPage: delta});
   }
 
+  updateFilterFields(field) {
+    const filter = this.filters.filters.find(e => e.field === field);
+    if (filter.mode === 'in' || filter.mode === 'nin') {
+      if (filter.values[filter.values.length - 1] === '' && filter.values[filter.values.length - 2] === '') {
+        filter.values.pop();
+      }
+      else if (filter.values[filter.values.length - 1] !== '') {
+        filter.values.push((filter.field === 'added' ? new Date() : '') as string & Date);
+      }
+    }
+    else {
+      filter.values = [filter.values[0] as string & Date];
+    }
+    if (filter.active) {
+      this.loadSamples({firstPage: true});
+    }
+  }
+
   pages() {
     return Math.ceil(this.totalSamples / this.filters.pageSize);
   }
@@ -111,4 +238,28 @@ export class SamplesComponent implements OnInit {  // TODO: implement paging
     this.filters.sort = string;
     this.loadSamples({firstPage: true});
   }
+
+  activeKeysArray() {  // array with all activeKeys names
+    return Object.keys(this.activeKeys).filter(e => this.activeKeys[e] === true).map(e => this.keys.find(el => el.id === e));
+  }
+
+  activeMeasurementKeys() {
+    return Object.keys(this.activeKeys).filter(e => e.indexOf('measurements.') >= 0 && this.activeKeys[e]).map(e => e.split('.').map(el => decodeURIComponent(el)));
+  }
+
+  preventDefault(event, key = 'all') {
+    if (key === 'all' || event.key === key) {
+      event.preventDefault();
+    }
+  }
+
+  clipboard() {
+    this.linkarea.nativeElement.select();
+    this.linkarea.nativeElement.setSelectionRange(0, 99999);
+    document.execCommand('copy');
+  }
+
+  ucFirst(string) {
+    return string[0].toUpperCase() + string.slice(1);
+  }
 }
diff --git a/src/app/services/api.service.ts b/src/app/services/api.service.ts
index 86f74ec..0924640 100644
--- a/src/app/services/api.service.ts
+++ b/src/app/services/api.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, isDevMode } from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 import {LocalStorageService} from 'angular-2-local-storage';
 import {Observable} from 'rxjs';
@@ -11,7 +11,7 @@ import {ModalService} from '@inst-iot/bosch-angular-ui-components';
 })
 export class ApiService {
 
-  private host = '/api';
+  private host = isDevMode() ? '/api' : 'https://definma-api.apps.de1.bosch-iot-cloud.com';
 
   constructor(
     private http: HttpClient,
@@ -19,25 +19,29 @@ export class ApiService {
     private modalService: ModalService
   ) { }
 
-  get<T>(url, f: (data?: T, err?) => void = () => {}) {
-    this.requestErrorHandler<T>(this.http.get(this.host + url, this.authOptions()), f);
+  get hostName() {
+    return this.host;
   }
 
-  post<T>(url, data = null, f: (data?: T, err?) => void = () => {}) {
-    this.requestErrorHandler<T>(this.http.post(this.host + url, data, this.authOptions()), f);
+  get<T>(url, f: (data?: T, err?, headers?) => void = () => {}) {
+    this.requestErrorHandler<T>(this.http.get(this.host + url, this.options()), f);
   }
 
-  put<T>(url, data = null, f: (data?: T, err?) => void = () => {}) {
-    this.requestErrorHandler<T>(this.http.put(this.host + url, data, this.authOptions()), f);
+  post<T>(url, data = null, f: (data?: T, err?, headers?) => void = () => {}) {
+    this.requestErrorHandler<T>(this.http.post(this.host + url, data, this.options()), f);
   }
 
-  delete<T>(url, f: (data?: T, err?) => void = () => {}) {
-    this.requestErrorHandler<T>(this.http.delete(this.host + url, this.authOptions()), f);
+  put<T>(url, data = null, f: (data?: T, err?, headers?) => void = () => {}) {
+    this.requestErrorHandler<T>(this.http.put(this.host + url, data, this.options()), f);
   }
 
-  private requestErrorHandler<T>(observable: Observable<any>, f: (data?: T, err?) => void) {
+  delete<T>(url, f: (data?: T, err?, headers?) => void = () => {}) {
+    this.requestErrorHandler<T>(this.http.delete(this.host + url, this.options()), f);
+  }
+
+  private requestErrorHandler<T>(observable: Observable<any>, f: (data?: T, err?, headers?) => void) {
     observable.subscribe(data => {
-      f(data, undefined);
+      f(data.body, undefined, data.headers.keys().reduce((s, e) => {s[e.toLowerCase()] = data.headers.get(e); return s; }, {}));
     }, err => {
       if (f.length === 2) {
         f(undefined, err);
@@ -49,13 +53,17 @@ export class ApiService {
     });
   }
 
-  private authOptions() {
+  private options(): {headers: HttpHeaders, observe: 'body'} {
+    return {headers: this.authOptions(), observe: 'response' as 'body'};
+  }
+
+  private authOptions(): HttpHeaders {
     const auth = this.storage.get('basicAuth');
     if (auth) {
-      return {headers: new HttpHeaders({Authorization: 'Basic ' + auth})};
+      return new HttpHeaders({Authorization: 'Basic ' + auth});
     }
     else {
-      return {};
+      return new HttpHeaders();
     }
   }
 }
diff --git a/src/app/services/login.service.ts b/src/app/services/login.service.ts
index bb578b6..5cc336f 100644
--- a/src/app/services/login.service.ts
+++ b/src/app/services/login.service.ts
@@ -56,4 +56,8 @@ export class LoginService implements CanActivate {
       }
     });
   }
+
+  get isLoggedIn() {
+    return this.loggedIn;
+  }
 }