banana/definma-ui
2
Fork 0
Code Releases Activity

fixed type filter

Browse Source
This commit is contained in:
VLE2FE
2020-08-14 14:29:17 +02:00
parent 5f6411c613
commit f07c3be23a
7 changed files with 104 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/app.component.ts
View File

@@ -2,7 +2,6 @@ import { Component, isDevMode} from '@angular/core';
import {LoginService} from './services/login.service';
import {NavigationStart, Router} from '@angular/router';
// TODO: filter by not completely filled/no measurements
// TODO: get rid of chart.js (+moment.js)
@@ -19,7 +18,8 @@ export class AppComponent {
constructor(
public login: LoginService,
public router: Router
public router: Router,
private window: Window
) {
this.devMode = isDevMode();
this.router.events.subscribe(event => {
@@ -38,7 +38,7 @@ export class AppComponent {
return `mailto:lukas.veit@de.bosch.com?subject=Bug report&body=Thanks for sending the report! Your bug will be (hopefully) fixed soon.
%0D%0A%0D%0A--- REPORT DATA ---
%0D%0A%0D%0ATime: ${new Date().toString()}%0D%0A
URL: ${window.location}%0D%0A%0D%0AWhat did you do?%0D%0A${encodeURIComponent(this.bugReport.do)}
URL: ${this.window.location}%0D%0A%0D%0AWhat did you do?%0D%0A${encodeURIComponent(this.bugReport.do)}
%0D%0A%0D%0AWhat did not work?%0D%0A${encodeURIComponent(this.bugReport.work)}%0D%0A%0D%0ABrowser:%0D%0A
%0D%0AappCodeName: ${navigator.appCodeName}
%0D%0AappVersion: ${navigator.appVersion}
@@ -47,8 +47,8 @@ URL: ${window.location}%0D%0A%0D%0AWhat did you do?%0D%0A${encodeURIComponent(th
%0D%0Aoscpu: ${navigator.oscpu}
%0D%0Aplatform: ${navigator.platform}
%0D%0AuserAgent: ${navigator.userAgent}
%0D%0AinnerWidth: ${window.innerWidth}
%0D%0AinnerHeight: ${window.innerHeight}`;
%0D%0AinnerWidth: ${this.window.innerWidth}
%0D%0AinnerHeight: ${this.window.innerHeight}`;
}
closeBugReport(close) {
@@ -56,7 +56,7 @@ URL: ${window.location}%0D%0A%0D%0AWhat did you do?%0D%0A${encodeURIComponent(th
}
toTheTop() {
window.scroll(0, 0);
this.window.scroll(0, 0);
}
}

1
src/app/rb-custom-inputs/rb-table/rb-table.component.scss
View File

@@ -34,5 +34,6 @@ table.ellipsis {
white-space: nowrap;
overflow: hidden;
max-width: 200px;
//min-width: 100px;
}
}

19
src/app/samples/samples.component.html
View File

@@ -73,7 +73,7 @@
(ngModelChange)="updateFilterFields(filter.field)">
<ng-container *rbArrayInputItem="let item"
[ngSwitch]="(filter.autocomplete.length ? 'autocomplete' : '') +
(filter.field == 'added' ? 'date' : '')">
(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"></rb-form-date-input>
@@ -86,6 +86,12 @@
[rbDebounceTime]="0" (keydown)="preventDefault($event, 'Enter')"
[rbFormInputAutocomplete]="autocomplete.bind(this, filter.autocomplete)"
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">
<option value="as-delivered/raw">as-delivered/raw</option>
<option value="processed">processed</option>
</rb-form-select>
</ng-container>
</rb-array-input>
</div>
@@ -132,17 +138,17 @@
<th *ngIf="validation">
<rb-form-checkbox name="validate-all" (change)="selectAll($event)">all</rb-form-checkbox>
</th>
<th *ngFor="let key of activeKeys">
<th *ngFor="let key of activeKeys" [title]="key.label">
<div class="sort-header">
<span>{{key.label}}</span>
<ng-container *ngIf="key.sortable">
<div *ngIf="key.sortable">
<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>
</ng-container>
</div>
</div>
</th>
<th *ngIf="login.isLevel.write"></th>
@@ -165,6 +171,9 @@
<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']">{{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>
@@ -188,7 +197,7 @@
<button class="rb-btn rb-link" type="button" (click)="loadPage(-1)" [disabled]="page === 1">
<span class="rb-ic rb-ic-back-left"></span>
</button>
<rb-form-input label="page" (change)="loadPage({toPage: $event.target.value - page})" [ngModel]="page">
<rb-form-input label="page" (ngModelChange)="loadPage($event - page)" [ngModel]="page">
</rb-form-input>
<span>
of {{pages}} ({{totalSamples}} samples)

37
src/app/samples/samples.component.scss
View File

@@ -54,7 +54,7 @@ rb-table {
.paging {
height: 50px;
rb-form-input {
max-width: 50px;
max-width: 65px;
}
> * {
@@ -72,23 +72,34 @@ rb-table {
}
.sort-header {
display: inline-grid;
grid-template-columns: 1fr auto;
grid-column-gap: 5px;
width: 100%;
position: relative;
:first-child {
grid-row: span 2;
& > span:first-child {
max-width: 180px;
overflow: hidden;
display: block;
text-overflow: ellipsis;
margin-right: 20px;
}
:nth-child(2) {
margin-bottom: -3px;
cursor: pointer;
}
div {
display: grid;
grid-template-columns: 1fr;
position: absolute;
right: 0;
top: 0;
background: #FFF;
:nth-child(3) {
margin-top: -3px;
cursor: pointer;
:nth-child(1) {
margin-bottom: -3px;
cursor: pointer;
}
:nth-child(2) {
margin-top: -3px;
cursor: pointer;
}
}
}

57
src/app/samples/samples.component.ts
View File

@@ -78,7 +78,7 @@ export class SamplesComponent implements OnInit {
];
isActiveKey: {[key: string]: boolean} = {};
activeKeys: KeyInterface[] = [];
activeTemplateKeys = {material: [], measurements: []};
activeTemplateKeys = {material: [], condition: [], measurements: []};
sampleDetailsSample: any = null;
validation = false; // true to activate validation mode
@@ -89,12 +89,13 @@ export class SamplesComponent implements OnInit {
public login: LoginService,
private modalService: ModalService,
public d: DataService,
private storage: LocalStorageService
private storage: LocalStorageService,
private window: Window
) {
}
ngOnInit(): void {
let loading = 7;
let loading = 8;
const onLoad = () => {
if ((--loading) <= 0) {
this.loadSamples();
@@ -117,6 +118,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', onLoad);
this.loadTemplateKeys('measurement', 'status', onLoad);
}
@@ -128,15 +130,16 @@ export class SamplesComponent implements OnInit {
const parameterName = encodeURIComponent(parameter.name);
// exclude spectrum and duplicates
if (parameter.name !== 'dpt' && !templateKeys.find(e => new RegExp('.' + parameterName + '$').test(e.id))) {
const collectionNames = {material: 'material.properties', condition: 'condition', measurement: 'measurements.' + item.name};
templateKeys.push({
id: `${collection === 'material' ? 'material.properties' : collection + 's.' + item.name}.${parameterName}`,
label: `${this.ucFirst(item.name)} ${this.ucFirst(parameter.name)}`,
id: `${collectionNames[collection]}.${parameterName}`,
label: `${this.ucFirst(item.name)} ${parameter.name}`,
active: false,
sortable: true
});
this.filters.filters.push({
field: `${collection === 'material' ? 'material.properties' : collection + 's.' + item.name}.${parameterName}`,
label: `${this.ucFirst(item.name)} ${this.ucFirst(parameter.name)}`,
field: `${collectionNames[collection]}.${parameterName}`,
label: `${this.ucFirst(item.name)} ${parameter.name}`,
active: false,
autocomplete: [],
mode: 'eq',
@@ -153,6 +156,7 @@ export class SamplesComponent implements OnInit {
}
loadSamples(options: LoadSamplesOptions = {}, event = null) { // set toPage to null to reload first page, queues calls
console.log(this.isActiveKey);
if (event) { // adjust active keys
this.keys.forEach(key => {
if (event.hasOwnProperty(key.id)) {
@@ -169,15 +173,21 @@ export class SamplesComponent implements OnInit {
}
private sampleLoader(options: LoadSamplesOptions) { // actual loading of the sample, do not call directly
this.api.get(this.sampleUrl({paging: true, pagingOptions: options}), (sData, ignore, headers) => {
if (!options.toPage && headers['x-total-items']) {
this.totalSamples = headers['x-total-items'];
this.api.get(this.sampleUrl({paging: true, pagingOptions: options}), (sData, err, headers) => {
if (err) {
this.storage.remove('samplesPreferences');
this.api.requestError(err);
}
this.pages = Math.ceil(this.totalSamples / this.filters.pageSize);
this.samples = sData as any;
this.loadSamplesQueue.shift();
if (this.loadSamplesQueue.length > 0) { // execute next queue item
this.sampleLoader(this.loadSamplesQueue[0]);
else {
if (!options.toPage && headers['x-total-items']) {
this.totalSamples = headers['x-total-items'];
}
this.pages = Math.ceil(this.totalSamples / this.filters.pageSize);
this.samples = sData as any;
this.loadSamplesQueue.shift();
if (this.loadSamplesQueue.length > 0) { // execute next queue item
this.sampleLoader(this.loadSamplesQueue[0]);
}
}
});
}
@@ -216,7 +226,7 @@ export class SamplesComponent implements OnInit {
}
this.keys.forEach(key => {
// do not load material properties for table
if (key.active && (options.export || (!options.export && key.id.indexOf('material') < 0))) {
if (key.active && (options.export || (!options.export && key.id.indexOf('material.') < 0))) {
query.push('fields[]=' + key.id);
}
});
@@ -253,12 +263,13 @@ export class SamplesComponent implements OnInit {
query.push('fields[]=condition');
}
}
return (options.host && isDevMode() ? window.location.host : '') +
return (options.host && isDevMode() ? this.window.location.host : '') +
(options.export ? this.api.hostName : '') +
'/samples?' + query.join('&');
}
loadPage(delta) {
console.log(delta);
if (!/[0-9]+/.test(delta) || (this.page <= 1 && delta < 0)) { // invalid delta
return;
}
@@ -293,9 +304,9 @@ export class SamplesComponent implements OnInit {
this.keys[keyIndex].active = key.active;
}
});
this.calcFieldSelectKeys();
this.updateActiveKeys();
}
this.calcFieldSelectKeys();
this.updateActiveKeys();
}
updateFilterFields(field) {
@@ -313,10 +324,18 @@ export class SamplesComponent implements OnInit {
updateActiveKeys() { // array with all activeKeys
this.activeKeys = this.keys.filter(e => e.active);
this.filters.filters.forEach(filter => {
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)));

29
src/app/services/api.service.ts
View File

@@ -44,24 +44,29 @@ export class ApiService {
observable.subscribe(data => {
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);
console.log(f.length);
if (f.length > 1) {
f(undefined, err, undefined);
}
else {
const modalRef = this.modalService.openComponent(ErrorComponent);
modalRef.instance.message = 'Network request failed!';
const details = [err.error.status];
if (err.error.details) {
details.push(err.error.details);
}
modalRef.instance.details = details;
modalRef.result.then(() => {
this.window.location.reload();
});
this.requestError(err);
}
});
}
requestError(err) {
const modalRef = this.modalService.openComponent(ErrorComponent);
modalRef.instance.message = 'Network request failed!';
const details = [err.error.status];
if (err.error.details) {
details.push(err.error.details);
}
modalRef.instance.details = details;
modalRef.result.then(() => {
this.window.location.reload();
});
}
private url(url) {
if (/http[s]?:\/\//.test(url)) {
return url;