From: Galen Charlton Date: Mon, 17 Jun 2019 01:53:36 +0000 (-0400) Subject: LP#1832897: add Angular widget to for selecting multiple linked rows X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=85a5031b5169bd47b0bf2cbd1b61ce2d8d6a498c;p=working%2FEvergreen.git LP#1832897: add Angular widget to for selecting multiple linked rows This component provides a widget to allow the user to select multiple linked rows. In particularly, it is meant to handle IDL fields whose underlying database columns are intarrays that refer to records in another IDL class. The widget's user interface consists of an eg-combobox for selecting new values to add to the list and a list of the existing values. The component has the following attributes: - idlClass: IDL class of the records being linked to - linkedLibraryLabel: if supplied, specifies that the display label in the comboox should include the library shortname as found in the specified field. - startValue: init value to display This component emits onChange events. Signed-off-by: Galen Charlton --- diff --git a/Open-ILS/src/eg2/src/app/share/multi-select/multi-select.component.html b/Open-ILS/src/eg2/src/app/share/multi-select/multi-select.component.html new file mode 100644 index 0000000000..c4aa9e5299 --- /dev/null +++ b/Open-ILS/src/eg2/src/app/share/multi-select/multi-select.component.html @@ -0,0 +1,13 @@ +
+
+ + + +
+
+
{{entry.label}}
+ +
+
diff --git a/Open-ILS/src/eg2/src/app/share/multi-select/multi-select.component.ts b/Open-ILS/src/eg2/src/app/share/multi-select/multi-select.component.ts new file mode 100644 index 0000000000..0c35beb4dc --- /dev/null +++ b/Open-ILS/src/eg2/src/app/share/multi-select/multi-select.component.ts @@ -0,0 +1,88 @@ +/** + * + * + */ +import {Component, OnInit, Input, Output, ViewChild, EventEmitter, ElementRef} from '@angular/core'; +import {map} from 'rxjs/operators'; +import {Observable, of, Subject} from 'rxjs'; +import {StoreService} from '@eg/core/store.service'; +import {PcrudService} from '@eg/core/pcrud.service'; +import {ComboboxComponent, ComboboxEntry} from '@eg/share/combobox/combobox.component'; + +@Component({ + selector: 'eg-multi-select', + templateUrl: './multi-select.component.html', + styles: [` + .icons {margin-left:-18px} + .material-icons {font-size: 16px;font-weight:bold} + `] +}) +export class MultiSelectComponent implements OnInit { + + selected: ComboboxEntry; + entrylist: ComboboxEntry[]; + + @Input() idlClass: string; + @Input() linkedLibraryLabel: string; + @Input() startValue: string; + + @Output() onChange: EventEmitter; + + constructor( + private store: StoreService, + private pcrud: PcrudService, + ) { + this.entrylist = []; + this.onChange = new EventEmitter(); + } + + valueSelected(entry: ComboboxEntry) { + if (entry) { + this.selected = entry; + } else { + this.selected = null; + } + } + addSelectedValue() { + this.entrylist.push(this.selected); + this.onChange.emit(this.compileCurrentValue()); + } + removeValue(entry: ComboboxEntry) { + this.entrylist = this.entrylist.filter(ent => ent.id !== entry.id); + this.onChange.emit(this.compileCurrentValue()); + } + + compileCurrentValue(): string { + const valstr = this.entrylist.map(entry => entry.id).join(','); + return '{' + valstr + '}'; + } + + ngOnInit() { + if (this.startValue && this.startValue !== '{}') { + let valstr = this.startValue; + valstr = valstr.replace(/^{/, ''); + valstr = valstr.replace(/}$/, ''); + const ids = valstr.split(','); + const extra_args = {}; + if (this.linkedLibraryLabel) { + const flesh_fields: Object = {}; + flesh_fields[this.idlClass] = [ this.linkedLibraryLabel ]; + extra_args['flesh'] = 1; + extra_args['flesh_fields'] = flesh_fields; + this.pcrud.search(this.idlClass, { 'id' : ids }, extra_args).pipe(map(data => { + this.entrylist.push({ + 'id' : data.id(), + 'label' : data.name() + ' (' + data[this.linkedLibraryLabel]().shortname() + ')' + }); + })).toPromise(); + } else { + this.pcrud.search(this.idlClass, { 'id' : ids }, extra_args).pipe(map(data => { + this.entrylist.push({ 'id' : data.id(), 'label' : data.name() }); + })).toPromise(); + } + } + } + +} + + diff --git a/Open-ILS/src/eg2/src/app/staff/common.module.ts b/Open-ILS/src/eg2/src/app/staff/common.module.ts index 66c62c32eb..035c0ef9da 100644 --- a/Open-ILS/src/eg2/src/app/staff/common.module.ts +++ b/Open-ILS/src/eg2/src/app/staff/common.module.ts @@ -21,6 +21,7 @@ import {TranslateComponent} from '@eg/staff/share/translate/translate.component' import {AdminPageComponent} from '@eg/staff/share/admin-page/admin-page.component'; import {EgHelpPopoverComponent} from '@eg/share/eg-help-popover/eg-help-popover.component'; import {ReactiveFormsModule} from '@angular/forms'; +import {MultiSelectComponent} from '@eg/share/multi-select/multi-select.component'; /** * Imports the EG common modules and adds modules common to all staff UI's. @@ -41,7 +42,8 @@ import {ReactiveFormsModule} from '@angular/forms'; BibSummaryComponent, TranslateComponent, AdminPageComponent, - EgHelpPopoverComponent + EgHelpPopoverComponent, + MultiSelectComponent ], imports: [ EgCommonModule, @@ -66,7 +68,8 @@ import {ReactiveFormsModule} from '@angular/forms'; BibSummaryComponent, TranslateComponent, AdminPageComponent, - EgHelpPopoverComponent + EgHelpPopoverComponent, + MultiSelectComponent ] }) diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html index a628e9ca36..43aca95fbc 100644 --- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html +++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html @@ -110,8 +110,8 @@
- - + +