Open-ILS/src/eg2/src/app/share/multi-select/multi-select.component.ts

   1 /**
   2  * <eg-multi-select idlClass="acpl" linkedLibraryLabel="owning_lib">
   3  * </eg-multi-select>
   4  */
   5 import {Component, OnInit, Input, Output, ViewChild, EventEmitter, ElementRef} from '@angular/core';
   6 import {map} from 'rxjs/operators';
   7 import {Observable, of, Subject} from 'rxjs';
   8 import {StoreService} from '@eg/core/store.service';
   9 import {PcrudService} from '@eg/core/pcrud.service';
  10 import {ComboboxComponent, ComboboxEntry} from '@eg/share/combobox/combobox.component';
  11
  12 @Component({
  13   selector: 'eg-multi-select',
  14   templateUrl: './multi-select.component.html',
  15   styles: [`
  16     .icons {margin-left:-18px}
  17     .material-icons {font-size: 16px;font-weight:bold}
  18   `]
  19 })
  20 export class MultiSelectComponent implements OnInit {
  21
  22     selected: ComboboxEntry;
  23     entrylist: ComboboxEntry[];
  24
  25     @Input() idlClass: string;
  26     @Input() linkedLibraryLabel: string;
  27     @Input() startValue: string;
  28
  29     @Output() onChange: EventEmitter<string>;
  30
  31     constructor(
  32       private store: StoreService,
  33       private pcrud: PcrudService,
  34     ) {
  35         this.entrylist = [];
  36         this.onChange = new EventEmitter<string>();
  37     }
  38
  39     valueSelected(entry: ComboboxEntry) {
  40         if (entry) {
  41             this.selected = entry;
  42         } else {
  43             this.selected = null;
  44         }
  45     }
  46     addSelectedValue() {
  47         this.entrylist.push(this.selected);
  48         this.onChange.emit(this.compileCurrentValue());
  49     }
  50     removeValue(entry: ComboboxEntry) {
  51         this.entrylist = this.entrylist.filter(ent => ent.id !== entry.id);
  52         this.onChange.emit(this.compileCurrentValue());
  53     }
  54
  55     compileCurrentValue(): string {
  56         const valstr = this.entrylist.map(entry => entry.id).join(',');
  57         return '{' + valstr + '}';
  58     }
  59
  60     ngOnInit() {
  61         if (this.startValue && this.startValue !== '{}') {
  62             let valstr = this.startValue;
  63             valstr = valstr.replace(/^{/, '');
  64             valstr = valstr.replace(/}$/, '');
  65             const ids = valstr.split(',');
  66             const extra_args = {};
  67             if (this.linkedLibraryLabel) {
  68                 const flesh_fields: Object = {};
  69                 flesh_fields[this.idlClass] = [ this.linkedLibraryLabel ];
  70                 extra_args['flesh'] = 1;
  71                 extra_args['flesh_fields'] = flesh_fields;
  72                 this.pcrud.search(this.idlClass, { 'id' : ids }, extra_args).pipe(map(data => {
  73                     this.entrylist.push({
  74                         'id' : data.id(),
  75                         'label' : data.name() + ' (' + data[this.linkedLibraryLabel]().shortname() + ')'
  76                     });
  77                 })).toPromise();
  78             } else {
  79                 this.pcrud.search(this.idlClass, { 'id' : ids }, extra_args).pipe(map(data => {
  80                     this.entrylist.push({ 'id' : data.id(), 'label' : data.name() });
  81                 })).toPromise();
  82             }
  83         }
  84     }
  85
  86 }
  87
  88