add component for general text multi-select

Sponsored-by: C/W MARS
Sponsored-by: Missouri Evergreen Consortium

Signed-off-by: Mike Rylander <mrylander@gmail.com>
Signed-off-by: Jason Boyer <JBoyer@equinoxOLI.org>
Signed-off-by: rfrasur <rfrasur@library.in.gov>

diff --git a/Open-ILS/src/eg2/src/app/share/text-multi-select/text-multi-select.component.html b/Open-ILS/src/eg2/src/app/share/text-multi-select/text-multi-select.component.html
new file mode 100644 (file)
index 0000000..0219774
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/text-multi-select/text-multi-select.component.html
@@ -0,0 +1,10 @@
+<div>
+  <div class="row">
+    <input class="form-control" type="textbox" (change)="valueSelected($event.target.value)"/>
+    <button class="btn btn-outline-dark" (click)="addSelectedValue()" i18n>Add</button>
+  </div>
+  <div class="row" *ngFor="let entry of entrylist">
+    <div class="col-lg-4">{{entry}}</div>
+    <button class="btn btn-sm btn-warning" (click)="removeValue(entry)" i18n>Remove</button>
+  </div>
+</div>

diff --git a/Open-ILS/src/eg2/src/app/share/text-multi-select/text-multi-select.component.ts b/Open-ILS/src/eg2/src/app/share/text-multi-select/text-multi-select.component.ts
new file mode 100644 (file)
index 0000000..e903853
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/text-multi-select/text-multi-select.component.ts
@@ -0,0 +1,58 @@
+/**
+ * <eg-text-multi-select (onChange)="handler($event)"></eg-multi-select> // $event is an array
+ */
+import {Component, OnInit, Input, Output, ViewChild, EventEmitter, ElementRef} from '@angular/core';
+import {map} from 'rxjs/operators';
+import {Observable, of, Subject} from 'rxjs';
+
+@Component({
+  selector: 'eg-text-multi-select',
+  templateUrl: './text-multi-select.component.html',
+  styles: [`
+    .icons {margin-left:-18px}
+    .material-icons {font-size: 16px;font-weight:bold}
+  `]
+})
+export class TextMultiSelectComponent implements OnInit {
+
+    selected: string;
+    entrylist: string[];
+
+    @Input() startValue: Array<string>;
+
+    @Output() onChange: EventEmitter<string[]>;
+
+    constructor(
+    ) {
+        this.entrylist = [];
+        this.onChange = new EventEmitter<string[]>();
+    }
+
+    valueSelected(entry: any) {
+        if (entry) {
+            this.selected = entry;
+        } else {
+            this.selected = null;
+        }
+    }
+    addSelectedValue() {
+        if (this.selected) {
+            this.entrylist.push(this.selected);
+        }
+        this.onChange.emit([...this.entrylist]);
+    }
+    removeValue(entry: any) {
+        this.entrylist = this.entrylist.filter(ent => ent !== entry);
+        this.onChange.emit([...this.entrylist]);
+    }
+
+    ngOnInit() {
+        this.entrylist = [];
+        if (this.startValue && this.startValue.length) {
+            this.entrylist = [...this.startValue];
+        }
+    }
+
+}
+
+

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 7ddef79..280f92a 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/common.module.ts
+++ b/Open-ILS/src/eg2/src/app/staff/common.module.ts
@@ -15,6 +15,7 @@ import {BibSummaryComponent} from '@eg/staff/share/bib-summary/bib-summary.compo
 import {EgHelpPopoverComponent} from '@eg/share/eg-help-popover/eg-help-popover.component';
 import {DatetimeValidatorDirective} from '@eg/share/validators/datetime_validator.directive';
 import {MultiSelectComponent} from '@eg/share/multi-select/multi-select.component';
+import {TextMultiSelectComponent} from '@eg/share/text-multi-select/text-multi-select.component';
 import {NotBeforeMomentValidatorDirective} from '@eg/share/validators/not_before_moment_validator.directive';
 import {PatronBarcodeValidatorDirective} from '@eg/share/validators/patron_barcode_validator.directive';
 import {BroadcastService} from '@eg/share/util/broadcast.service';
@@ -37,6 +38,7 @@ import {FileExportService} from '@eg/share/util/file-export.service';
     EgHelpPopoverComponent,
     DatetimeValidatorDirective,
     MultiSelectComponent,
+    TextMultiSelectComponent,
     NotBeforeMomentValidatorDirective,
     PatronBarcodeValidatorDirective,
   ],
@@ -61,6 +63,7 @@ import {FileExportService} from '@eg/share/util/file-export.service';
     EgHelpPopoverComponent,
     DatetimeValidatorDirective,
     MultiSelectComponent,
+    TextMultiSelectComponent,
     NotBeforeMomentValidatorDirective,
     PatronBarcodeValidatorDirective
   ]