457 lines
16 KiB
TypeScript
457 lines
16 KiB
TypeScript
import {Component, ElementRef, isDevMode, OnInit, TemplateRef, ViewChild} from '@angular/core';
|
|
import {ApiService} from '../services/api.service';
|
|
import {AutocompleteService} from '../services/autocomplete.service';
|
|
import cloneDeep from 'lodash/cloneDeep';
|
|
import pick from 'lodash/pick';
|
|
import omit from 'lodash/omit';
|
|
import {SampleModel} from '../models/sample.model';
|
|
import {LoginService} from '../services/login.service';
|
|
import {ModalService} from '@inst-iot/bosch-angular-ui-components';
|
|
import {DataService} from '../services/data.service';
|
|
import {LocalStorageService} from 'angular-2-local-storage';
|
|
|
|
|
|
interface LoadSamplesOptions {
|
|
toPage?: number;
|
|
event?: Event;
|
|
firstPage?: boolean;
|
|
}
|
|
interface KeyInterface {
|
|
id: string;
|
|
label: string;
|
|
active: boolean;
|
|
sortable: boolean;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-samples',
|
|
templateUrl: './samples.component.html',
|
|
styleUrls: ['./samples.component.scss']
|
|
})
|
|
|
|
export class SamplesComponent implements OnInit {
|
|
|
|
@ViewChild('pageSizeSelection') pageSizeSelection: ElementRef<HTMLElement>;
|
|
@ViewChild('linkarea') linkarea: ElementRef<HTMLTextAreaElement>;
|
|
|
|
downloadSpectra = false; // TODO: streamline these options after csv option handling is clear
|
|
downloadCondition = false;
|
|
downloadFlatten = true;
|
|
samples: SampleModel[] = [];
|
|
totalSamples = 0; // total number of samples
|
|
csvUrl = ''; // store url separate so it only has to be generated when clicking the download button
|
|
filters = {
|
|
status: {new: true, validated: true, deleted: false},
|
|
pageSize: 25,
|
|
toPage: 0,
|
|
sort: 'added-asc',
|
|
filters: [
|
|
{field: 'number', label: '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: 'notes', label: 'Notes', active: false, autocomplete: [], mode: 'eq', values: ['']},
|
|
{field: 'added', label: 'Added', active: false, autocomplete: [], mode: 'eq', values: ['']}
|
|
]
|
|
};
|
|
page = 1;
|
|
pages = 1;
|
|
loadSamplesQueue = []; // arguments of queued up loadSamples() calls
|
|
keys: KeyInterface[] = [
|
|
{id: 'number', label: 'Number', active: true, sortable: true},
|
|
{id: 'material.numbers', label: 'Material numbers', active: false, sortable: false},
|
|
{id: 'material.name', label: 'Material name', active: true, sortable: true},
|
|
{id: 'material.supplier', label: 'Supplier', active: true, sortable: true},
|
|
{id: 'material.group', label: 'Material', active: false, sortable: true},
|
|
{id: 'type', label: 'Type', active: true, sortable: true},
|
|
{id: 'color', label: 'Color', active: true, sortable: true},
|
|
{id: 'batch', label: 'Batch', active: true, sortable: true},
|
|
{id: 'notes', label: 'Notes', active: false, sortable: false},
|
|
{id: 'status', label: 'Status', active: true, sortable: true},
|
|
{id: 'added', label: 'Added', active: true, sortable: true}
|
|
];
|
|
isActiveKey: {[key: string]: boolean} = {};
|
|
activeKeys: KeyInterface[] = [];
|
|
activeTemplateKeys = {material: [], condition: [], measurements: []};
|
|
sampleDetailsSample: any = null;
|
|
validation = false; // true to activate validation mode
|
|
|
|
|
|
constructor(
|
|
private api: ApiService,
|
|
public autocomplete: AutocompleteService,
|
|
public login: LoginService,
|
|
private modalService: ModalService,
|
|
public d: DataService,
|
|
private storage: LocalStorageService,
|
|
private window: Window
|
|
) {
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
let loading = 8;
|
|
const onLoad = () => {
|
|
if ((--loading) <= 0) {
|
|
this.loadSamples();
|
|
}
|
|
};
|
|
|
|
this.calcFieldSelectKeys();
|
|
this.d.load('materials', () => {
|
|
this.filters.filters.find(e => e.field === 'material.name').autocomplete = this.d.arr.materials.map(e => e.name);
|
|
onLoad();
|
|
});
|
|
this.d.load('materialSuppliers', () => {
|
|
this.filters.filters.find(e => e.field === 'material.supplier').autocomplete = this.d.arr.materialSuppliers;
|
|
onLoad();
|
|
});
|
|
this.d.load('materialGroups', () => {
|
|
this.filters.filters.find(e => e.field === 'material.group').autocomplete = this.d.arr.materialGroups;
|
|
onLoad();
|
|
});
|
|
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);
|
|
}
|
|
|
|
loadTemplateKeys(collection, insertBefore, f) {
|
|
this.d.load(collection + 'Templates', () => {
|
|
const templateKeys = [];
|
|
this.d.arr[collection + 'Templates'].forEach(item => {
|
|
item.parameters.forEach(parameter => {
|
|
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: `${collectionNames[collection]}.${parameterName}`,
|
|
label: `${this.ucFirst(item.name)} ${parameter.name}`,
|
|
active: false,
|
|
sortable: true
|
|
});
|
|
this.filters.filters.push({
|
|
field: `${collectionNames[collection]}.${parameterName}`,
|
|
label: `${this.ucFirst(item.name)} ${parameter.name}`,
|
|
active: false,
|
|
autocomplete: [],
|
|
mode: 'eq',
|
|
values: ['']
|
|
});
|
|
}
|
|
});
|
|
});
|
|
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.loadPreferences();
|
|
f();
|
|
});
|
|
}
|
|
|
|
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)) {
|
|
key.active = event[key.id];
|
|
}
|
|
});
|
|
this.updateActiveKeys();
|
|
}
|
|
this.loadSamplesQueue.push(options);
|
|
if (this.loadSamplesQueue.length <= 1) { // nothing queued up
|
|
this.sampleLoader(this.loadSamplesQueue[0]);
|
|
}
|
|
this.storePreferences();
|
|
}
|
|
|
|
private sampleLoader(options: LoadSamplesOptions) { // actual loading of the sample, do not call directly
|
|
this.api.get(this.sampleUrl({paging: true, pagingOptions: options}), (sData, err, headers) => {
|
|
if (err) {
|
|
this.storage.remove('samplesPreferences');
|
|
this.api.requestError(err);
|
|
}
|
|
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]);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
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', 'user_id']; // keys which should always be added if export = false
|
|
const query: string[] = [];
|
|
query.push(...Object.keys(this.filters.status).filter(e => this.filters.status[e]).map(e => 'status[]=' + e));
|
|
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.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);
|
|
}
|
|
});
|
|
|
|
query.push(...cloneDeep(this.filters.filters)
|
|
.map(e => {
|
|
e.values = e.values.filter(el => el !== ''); // do not include empty values
|
|
if (e.field === 'added') { // correct timezone
|
|
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.length > 0)
|
|
.map(e => 'filters[]=' + encodeURIComponent(JSON.stringify(pick(e, ['mode', 'field', 'values']))))
|
|
);
|
|
if (!options.export) {
|
|
additionalTableKeys.forEach(key => {
|
|
if (query.indexOf('fields[]=' + key) < 0) { // add key if not already added
|
|
query.push('fields[]=' + key);
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
if (options.csv) {
|
|
query.push('output=csv');
|
|
}
|
|
else if (this.downloadFlatten) {
|
|
query.push('output=flatten');
|
|
}
|
|
if (this.downloadSpectra) {
|
|
query.push('fields[]=measurements.spectrum.dpt');
|
|
}
|
|
if (this.downloadCondition) {
|
|
query.push('fields[]=condition');
|
|
}
|
|
}
|
|
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;
|
|
}
|
|
this.page += delta;
|
|
this.loadSamples({toPage: delta});
|
|
}
|
|
|
|
storePreferences() {
|
|
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']))
|
|
};
|
|
this.storage.set('samplesPreferences', store);
|
|
}
|
|
|
|
loadPreferences() {
|
|
const store: any = this.storage.get('samplesPreferences');
|
|
if (store) {
|
|
this.filters = {...this.filters, ...pick(store.filters, ['status', 'pageSize', 'toPage', 'sort'])};
|
|
store.filters.filters.forEach(filter => {
|
|
const filterIndex = this.filters.filters.findIndex(e => e.field === filter.field);
|
|
if (filterIndex >= 0) {
|
|
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;
|
|
}
|
|
});
|
|
}
|
|
this.calcFieldSelectKeys();
|
|
this.updateActiveKeys();
|
|
}
|
|
|
|
updateFilterFields(field) {
|
|
const filter = this.filters.filters.find(e => e.field === field);
|
|
filter.active = true;
|
|
if (filter.active) {
|
|
this.loadSamples({firstPage: true});
|
|
}
|
|
}
|
|
|
|
setSort(string) {
|
|
this.filters.sort = string;
|
|
this.loadSamples({firstPage: true});
|
|
}
|
|
|
|
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)));
|
|
}
|
|
|
|
calcFieldSelectKeys() {
|
|
this.keys.forEach(key => {
|
|
this.isActiveKey[key.id] = key.active;
|
|
});
|
|
}
|
|
|
|
sampleDetails(id: string, modal: TemplateRef<any>) {
|
|
this.sampleDetailsSample = null;
|
|
this.api.get<SampleModel>('/sample/' + id, data => {
|
|
this.sampleDetailsSample = new SampleModel().deserialize(data);
|
|
if (data.notes.custom_fields) { // convert custom_fields for more optimized display
|
|
this.sampleDetailsSample.notes.custom_fields_entries = Object.entries(this.sampleDetailsSample.notes.custom_fields);
|
|
}
|
|
else {
|
|
this.sampleDetailsSample.custom_fields_entries = [];
|
|
}
|
|
if (Object.keys(data.condition).length) {
|
|
this.sampleDetailsSample.condition_entries = Object.entries(omit(this.sampleDetailsSample.condition, ['condition_template']))
|
|
.map(e => {
|
|
e[0] = `${this.ucFirst(this.d.id.conditionTemplates[this.sampleDetailsSample.condition.condition_template].name)} ${e[0]}`;
|
|
return e;
|
|
});
|
|
}
|
|
else {
|
|
this.sampleDetailsSample.condition_entries = [];
|
|
}
|
|
this.sampleDetailsSample.measurement_entries = [];
|
|
this.sampleDetailsSample.measurements.forEach(measurement => { // convert measurements for more optimized display without dpt
|
|
const name = this.d.id.measurementTemplates[measurement.measurement_template].name;
|
|
this.sampleDetailsSample.measurement_entries.push(...Object.entries(measurement.values).filter(e => e[0] !== 'dpt')
|
|
.map(e => ({name: this.ucFirst(name) + ' ' + e[0], value: e[1]})));
|
|
});
|
|
new Promise(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 => {
|
|
this.api.get<SampleModel>('/sample/' + reference.sample_id, rData => {
|
|
reference.number = rData.number;
|
|
loadingCounter --;
|
|
if (!loadingCounter) {
|
|
resolve();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
else {
|
|
resolve();
|
|
}
|
|
}).then(() => {
|
|
this.modalService.open(modal).then(() => {});
|
|
});
|
|
});
|
|
}
|
|
|
|
validate() {
|
|
if (this.validation) {
|
|
this.samples.forEach(sample => {
|
|
if (sample.validate) {
|
|
this.api.put('/sample/validate/' + sample._id);
|
|
}
|
|
});
|
|
this.loadSamples();
|
|
this.validation = false;
|
|
}
|
|
else {
|
|
this.validation = true;
|
|
}
|
|
}
|
|
|
|
restoreSample(id, modal, event) {
|
|
this.stopPropagation(event);
|
|
this.modalService.open(modal).then(res => {
|
|
if (res) {
|
|
this.api.put('/sample/restore/' + id, {}, ignore => {
|
|
this.samples.find(e => e._id === id).status = 'new';
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
selectAll(event) {
|
|
this.samples.forEach(sample => {
|
|
if (sample.status !== 'deleted') {
|
|
sample.validate = event.target.checked;
|
|
}
|
|
else {
|
|
sample.validate = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
preventDefault(event, key = 'all') {
|
|
if (key === 'all' || event.key === key) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
|
|
stopPropagation(event) {
|
|
event.stopPropagation();
|
|
}
|
|
|
|
clipboard() {
|
|
this.linkarea.nativeElement.select();
|
|
this.linkarea.nativeElement.setSelectionRange(0, 99999);
|
|
document.execCommand('copy');
|
|
}
|
|
|
|
ucFirst(string) {
|
|
return string[0].toUpperCase() + string.slice(1);
|
|
}
|
|
|
|
|
|
}
|