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

   1 /**
   2  * <eg-multi-select idlClass="acpl" linkedLibraryLabel="owning_lib" idlKey="id">
   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() idlBaseQuery: any = null;
  27     @Input() idlKey: string;
  28     @Input() linkedLibraryLabel: string;
  29     @Input() startValue: string;
  30
  31     @Output() onChange: EventEmitter<string>;
  32
  33     constructor(
  34       private store: StoreService,
  35       private pcrud: PcrudService,
  36     ) {
  37         this.entrylist = [];
  38         this.onChange = new EventEmitter<string>();
  39     }
  40
  41     valueSelected(entry: ComboboxEntry) {
  42         if (entry) {
  43             this.selected = entry;
  44         } else {
  45             this.selected = null;
  46         }
  47     }
  48     addSelectedValue() {
  49         this.entrylist.push(this.selected);
  50         this.onChange.emit(this.compileCurrentValue());
  51     }
  52     removeValue(entry: ComboboxEntry) {
  53         this.entrylist = this.entrylist.filter(ent => ent.id !== entry.id);
  54         this.onChange.emit(this.compileCurrentValue());
  55     }
  56
  57     compileCurrentValue(): string {
  58         const valstr = this.entrylist.map(entry => entry.id).join(',');
  59         return '{' + valstr + '}';
  60     }
  61
  62     ngOnInit() {
  63         if (!this.idlKey) {
  64             this.idlKey = 'id';
  65         }
  66
  67         if (this.startValue && this.startValue !== '{}') {
  68             let valstr = this.startValue;
  69             valstr = valstr.replace(/^{/, '');
  70             valstr = valstr.replace(/}$/, '');
  71             const ids = valstr.split(',');
  72             const searchHash = {};
  73             searchHash[this.idlKey] = ids;
  74             const extra_args = {};
  75             if (this.linkedLibraryLabel) {
  76                 const flesh_fields: Object = {};
  77                 flesh_fields[this.idlClass] = [ this.linkedLibraryLabel ];
  78                 extra_args['flesh'] = 1;
  79                 extra_args['flesh_fields'] = flesh_fields;
  80                 this.pcrud.search(this.idlClass, searchHash, extra_args).pipe(map(data => {
  81                     this.entrylist.push({
  82                         'id' : data.id(),
  83                         'label' : data.name() + ' (' + data[this.linkedLibraryLabel]().shortname() + ')'
  84                     });
  85                 })).toPromise();
  86             } else {
  87                 this.pcrud.search(this.idlClass, searchHash, extra_args).pipe(map(data => {
  88                     this.entrylist.push({ 'id' : data.id(), 'label' : data.name() });
  89                 })).toPromise();
  90             }
  91         }
  92     }
  93
  94 }
  95
  96