webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.ts

   1 import { Component, OnInit } from '@angular/core';
   2 import { AbstractControl, FormBuilder } from '@angular/forms';
   3 import { Sort } from '@angular/material/sort';
   4 import { MatTableDataSource } from '@angular/material/table';
   5 import { EIProducer } from 'src/app/interfaces/ei.types';
   6 import { UiService } from 'src/app/services/ui/ui.service';
   7 import { EIProducerDataSource } from '../ei-producer.datasource';
   8
   9 @Component({
  10   selector: 'nrcp-producers-list',
  11   templateUrl: './producers-list.component.html',
  12   styleUrls: ['./producers-list.component.scss']
  13 })
  14 export class ProducersListComponent implements OnInit {
  15   darkMode: boolean;
  16   producersDataSource: MatTableDataSource<EIProducer> = new MatTableDataSource<EIProducer>();
  17
  18   readonly producersFormControl: AbstractControl;
  19
  20   constructor(
  21     private eiProducersDataSource: EIProducerDataSource,
  22     private ui: UiService,
  23     private formBuilder: FormBuilder) {
  24     this.producersFormControl = formBuilder.group({
  25       ei_producer_id: '',
  26       ei_producer_types: '',
  27       status: ''
  28     });
  29   }
  30
  31   ngOnInit(): void {
  32     this.refresh();
  33
  34     this.producersFormControl.valueChanges.subscribe(value => {
  35       const filter = { ...value, ei_producer_id: value.ei_producer_id.trim().toLowerCase() } as string;
  36       this.producersDataSource.filter = filter;
  37     });
  38
  39     this.producersDataSource.filterPredicate = ((data, filter) => {
  40       return this.isDataIncluding(data.ei_producer_id, filter.ei_producer_id)
  41         && this.isDataIncluding(data.ei_producer_types.join(','), filter.ei_producer_types)
  42         && this.isDataIncluding(data.status, filter.status);
  43     }) as (data: EIProducer, filter: any) => boolean;
  44
  45     this.ui.darkModeState.subscribe((isDark) => {
  46       this.darkMode = isDark;
  47     });
  48   }
  49
  50   isDataIncluding(data: string, filter: string): boolean {
  51     return !filter || data.toLowerCase().includes(filter);
  52   }
  53
  54   sortProducers(sort: Sort) {
  55     const data = this.producersDataSource.data
  56     data.sort((a: EIProducer, b: EIProducer) => {
  57       const isAsc = sort.direction === 'asc';
  58       switch (sort.active) {
  59         case 'id': return this.compare(a.ei_producer_id, b.ei_producer_id, isAsc);
  60         case 'types': return this.compare(a.ei_producer_types, b.ei_producer_types, isAsc);
  61         case 'status': return this.compare(a.status, b.status, isAsc);
  62         default: return 0;
  63       }
  64     });
  65     this.producersDataSource.data = data;
  66   }
  67
  68   compare(a: any, b: any, isAsc: boolean) {
  69     return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
  70   }
  71
  72   stopSort(event: any) {
  73     event.stopPropagation();
  74   }
  75
  76   getProducerTypes(eiProducer: EIProducer): string[] {
  77     if (eiProducer.ei_producer_types) {
  78       return eiProducer.ei_producer_types;
  79     }
  80     return ['< No types >'];
  81   }
  82
  83   getProducerStatus(eiProducer: EIProducer): string {
  84     if (eiProducer.status) {
  85       return eiProducer.status;
  86     }
  87     return '< No status >';
  88   }
  89
  90   refresh() {
  91     this.eiProducersDataSource.loadProducers();
  92     this.eiProducersDataSource.eiProducersSubject().subscribe((data) => {
  93       this.producersDataSource.data = data;
  94     });
  95   }
  96 }