LP#1832897: add Angular widget to for selecting multiple linked rows
[working/Evergreen.git] / 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