2
Fork 0

Seperate the fields into 3 categories

This commit is contained in:
Ruben Hartenstein (PEA4-Fe) 2021-01-07 10:57:06 +01:00
parent b54e167ee7
commit fa164b424c
6 changed files with 181 additions and 120 deletions

View File

@ -9,13 +9,7 @@
class="selection" (ngModelChange)="updateGroups($event)">
<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>

View File

@ -6,3 +6,7 @@ app-login {
width: 70%;
float: right;
}
rb-form-multi-select {
width: 20%;
}

View File

@ -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: {

View File

@ -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>

View File

@ -28,6 +28,10 @@ rb-table {
}
}
rb-form-multi-select{
min-width: 9rem;
}
.status-selection {
overflow: hidden;
margin-bottom: 10px;

View File

@ -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,23 +72,33 @@ 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: '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 }
];
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
@ -123,9 +140,9 @@ 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);
}
}
loadTemplateKeys(collection, insertBefore, f) {
this.d.load(collection + 'Templates', () => {
@ -157,29 +174,29 @@ 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, categorie?) {
if (event) { // adjust active keys
console.log(event);
this.keys.forEach(key => {
this.categories[categorie].forEach(key => {
if (event.hasOwnProperty(key.id)) {
key.active = event[key.id];
}
});
//this.refreshMultiSelect();
const sortId = this.filters.sort.replace(/(-asc|-desc)/, '');
if (event.hasOwnProperty(sortId) && !event[sortId]) { // reset sort if sort field was unselected
this.setSort('_id-asc');
}
this.updateActiveKeys();
}
if(options.firstPage){
if (options.firstPage) {
this.storage.set('currentPage', 1);
}
this.loadSamplesQueue.push(options);
@ -203,13 +220,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 +265,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 categorie in this.categories) {
this.categories[categorie].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 +333,20 @@ export class SamplesComponent implements OnInit {
}
storePreferences() {
let keys = [];
for (let categorie in this.categories) {
keys.push(...this.categories[categorie].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.loadPreferences();
}
loadPreferences() {
@ -334,10 +359,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 categorie in this.categories) {
const keyIndex = this.categories[categorie].findIndex(e => e.id === key.id);
if (keyIndex >= 0) {
this.categories[categorie][keyIndex].active = key.active;
}
}
});
}
@ -361,28 +389,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 categorie in this.categories) {
this.activeKeys.push(...this.categories[categorie].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 categorie in this.categories) {
this.categories[categorie].forEach(key => {
this.isActiveKey[key.id] = key.active;
});
}
}
sampleDetails(id: string, modal: TemplateRef<any>) { // show sample details
@ -505,4 +528,32 @@ 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]];
console.log(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];
if(id){
value.push(this.d.id.materials[sample.material_id][id]);
}else{
value.push(sample[key.id]);
}
});
this.data.push({id: sample._id, data: value});
});
}
originalOrder = (a: KeyValue<number, string>, b: KeyValue<number, string>): number => {
return 0;
}
}