LP1830432: Make the org-family-select reusable

[evergreen-equinox.git] / Open-ILS / src / eg2 / src / app / staff / sandbox / sandbox.component.ts

diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
index 6178969..17c6e6d 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
@@ -1,12 +1,10 @@
+
+import {timer as observableTimer, Observable, of} from 'rxjs';
 import {Component, OnInit, ViewChild, Input, TemplateRef} from '@angular/core';
 import {ProgressDialogComponent} from '@eg/share/dialog/progress.component';
 import {ToastService} from '@eg/share/toast/toast.service';
 import {StringService} from '@eg/share/string/string.service';
-import {Observable} from 'rxjs/Observable';
-import 'rxjs/add/observable/timer';
-import {of} from 'rxjs';
-import {map} from 'rxjs/operators/map';
-import {take} from 'rxjs/operators/take';
+import {map, take} from 'rxjs/operators';
 import {GridDataSource, GridColumn, GridRowFlairEntry} from '@eg/share/grid/grid';
 import {IdlService, IdlObject} from '@eg/core/idl.service';
 import {PcrudService} from '@eg/core/pcrud.service';
@@ -15,6 +13,9 @@ import {Pager} from '@eg/share/util/pager';
 import {DateSelectComponent} from '@eg/share/date-select/date-select.component';
 import {PrintService} from '@eg/share/print/print.service';
 import {ComboboxEntry} from '@eg/share/combobox/combobox.component';
+import {FormatService} from '@eg/core/format.service';
+import {FmRecordEditorComponent} from '@eg/share/fm-editor/fm-editor.component';
+import {FormGroup, FormControl} from '@angular/forms';
 
 @Component({
   templateUrl: 'sandbox.component.html'
@@ -30,6 +31,9 @@ export class SandboxComponent implements OnInit {
     @ViewChild('printTemplate')
     private printTemplate: TemplateRef<any>;
 
+    @ViewChild('fmRecordEditor')
+    private fmRecordEditor: FmRecordEditorComponent;
+
     // @ViewChild('helloStr') private helloStr: StringComponent;
 
     gridDataSource: GridDataSource = new GridDataSource();
@@ -55,17 +59,51 @@ export class SandboxComponent implements OnInit {
 
     name = 'Jane';
 
+    dynamicTitleText: string;
+
+    badOrgForm: FormGroup;
+
+    complimentEvergreen: (rows: IdlObject[]) => void;
+    notOneSelectedRow: (rows: IdlObject[]) => boolean;
+
+    // selector field value on metarecord object
+    aMetarecord: string;
+
+    // cross-tab communications example
+    private sbChannel: any;
+    sbChannelText: string;
+
     constructor(
         private idl: IdlService,
         private org: OrgService,
         private pcrud: PcrudService,
         private strings: StringService,
         private toast: ToastService,
+        private format: FormatService,
         private printer: PrintService
     ) {
+        // BroadcastChannel is not yet defined in PhantomJS and elsewhere
+        this.sbChannel = (typeof BroadcastChannel === 'undefined') ?
+            {} : new BroadcastChannel('eg.sbChannel');
+        this.sbChannel.onmessage = (e) => this.sbChannelHandler(e);
     }
 
     ngOnInit() {
+        this.badOrgForm = new FormGroup({
+            'badOrgSelector': new FormControl(
+                {'id': 4, 'includeAncestors': false, 'includeDescendants': true}, (c: FormControl) => {
+                    // An Angular custom validator
+                    if (c.value.orgIds && c.value.orgIds.length > 5) {
+                        return { tooMany: 'That\'s too many bad libraries!' };
+                    } else {
+                        return null;
+                    }
+            } )
+        });
+
+        this.badOrgForm.get('badOrgSelector').valueChanges.subscribe(bad => {
+            this.toast.danger('The worst libraries are: ' + JSON.stringify(bad.orgIds));
+        });
 
         this.gridDataSource.data = [
             {name: 'Jane', state: 'AZ'},
@@ -108,6 +146,41 @@ export class SandboxComponent implements OnInit {
                 return cbt;
             }));
         };
+
+        this.complimentEvergreen = (rows: IdlObject[]) => alert('Evergreen is great!');
+        this.notOneSelectedRow = (rows: IdlObject[]) => (rows.length !== 1);
+
+        this.pcrud.retrieve('bre', 1, {}, {fleshSelectors: true})
+        .subscribe(bib => {
+            // Format service will automatically find the selector
+            // value to display from our fleshed metarecord field.
+            this.aMetarecord = this.format.transform({
+                value: bib.metarecord(),
+                idlClass: 'bre',
+                idlField: 'metarecord'
+            });
+        });
+    }
+
+    sbChannelHandler = msg => {
+        setTimeout(() => { this.sbChannelText = msg.data.msg; });
+    }
+
+    sendMessage($event) {
+        this.sbChannel.postMessage({msg : $event.target.value});
+    }
+
+    // Example of click handler for row action
+    complimentEvergreen2(rows: IdlObject[]) {
+        alert('I know, right?');
+    }
+
+    openEditor() {
+        this.fmRecordEditor.open({size: 'lg'}).subscribe(
+            pcrudResult => console.debug('Record editor performed action'),
+            err => console.error(err),
+            () => console.debug('Dialog closed')
+        );
     }
 
     btGridRowClassCallback(row: any): string {
@@ -148,7 +221,15 @@ export class SandboxComponent implements OnInit {
             text: '<b>hello</b>',
             printContext: 'default'
         });
+    }
 
+    printWithDialog() {
+        this.printer.print({
+            template: this.printTemplate,
+            contextData: {world : this.world},
+            printContext: 'default',
+            showDialog: true
+        });
     }
 
     changeDate(date) {
@@ -160,7 +241,7 @@ export class SandboxComponent implements OnInit {
         this.progressDialog.open();
 
         // every 250ms emit x*10 for 0-10
-        Observable.timer(0, 250).pipe(
+        observableTimer(0, 250).pipe(
             map(x => x * 10),
             take(11)
         ).subscribe(