From 924a4dc1853705d54e57924ff8f9ef51be395e92 Mon Sep 17 00:00:00 2001 From: Galen Charlton Date: Sun, 16 Jun 2019 21:53:36 -0400 Subject: [PATCH] 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 Signed-off-by: Bill Erickson Signed-off-by: Jane Sandberg --- .../share/multi-select/multi-select.component.html | 13 ++++ .../share/multi-select/multi-select.component.ts | 88 ++++++++++++++++++++++ Open-ILS/src/eg2/src/app/staff/common.module.ts | 4 + .../src/app/staff/sandbox/sandbox.component.html | 4 +- 4 files changed, 107 insertions(+), 2 deletions(-) create mode 100644 Open-ILS/src/eg2/src/app/share/multi-select/multi-select.component.html create mode 100644 Open-ILS/src/eg2/src/app/share/multi-select/multi-select.component.ts 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 12c0ff164c..e833a347e2 100644 --- a/Open-ILS/src/eg2/src/app/staff/common.module.ts +++ b/Open-ILS/src/eg2/src/app/staff/common.module.ts @@ -17,6 +17,8 @@ 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 {DatetimeValidatorDirective} from '@eg/share/validators/datetime_validator.directive'; +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. @@ -37,6 +39,7 @@ import {DatetimeValidatorDirective} from '@eg/share/validators/datetime_validato AdminPageComponent, EgHelpPopoverComponent, DatetimeValidatorDirective, + MultiSelectComponent ], imports: [ EgCommonModule, @@ -60,6 +63,7 @@ import {DatetimeValidatorDirective} from '@eg/share/validators/datetime_validato AdminPageComponent, EgHelpPopoverComponent, DatetimeValidatorDirective, + 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 3e2985606a..88716f30bb 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 @@
- - + +
-- 2.11.0