definma-ui/src/app/samples/samples.component.ts

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});
  }
}