import {Component, OnInit, ViewChild} from '@angular/core'; import {ApiService} from '../services/api.service'; interface LoadSamplesOptions { toPage?: number; event?: Event; firstPage?: boolean; } @Component({ selector: 'app-samples', templateUrl: './samples.component.html', styleUrls: ['./samples.component.scss'] }) // TODO: always show first page on sort change export class SamplesComponent implements OnInit { // TODO: implement paging @ViewChild('pageSizeSelection') pageSizeSelection: HTMLElement; materials = {}; samples = []; totalSamples = 0; // total number of samples filters = {status: {new: true, validated: true}, pageSize: 25, toPage: 0, sort: 'added-asc'}; 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'}, ]; constructor( private api: ApiService ) { } ngOnInit(): void { this.api.get('/materials?status=all', (mData: any) => { this.materials = {}; mData.forEach(material => { this.materials[material._id] = material; }); this.loadSamples(); }); this.api.get('/samples/count', (data: {count: number}) => { this.totalSamples = data.count; }); } loadSamples(options: LoadSamplesOptions = {}) { // set toPage to null to reload first page, queues calls this.loadSamplesQueue.push(options); if (this.loadSamplesQueue.length <= 1) { // nothing queued up this.sampleLoader(this.loadSamplesQueue[0]); } } 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); } 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; }); this.loadSamplesQueue.shift(); if (this.loadSamplesQueue.length > 0) { // execute next queue item this.sampleLoader(this.loadSamplesQueue[0]); } }); } loadPage(delta) { if (!/[0-9]+/.test(delta) || (this.page <= 1 && delta < 0)) { // invalid delta return; } this.page += delta; this.loadSamples({toPage: delta}); } pages() { return Math.ceil(this.totalSamples / this.filters.pageSize); } setSort(string) { this.filters.sort = string; this.loadSamples({firstPage: true}); } }