LP1813647 Angular page title component & sandbox example

Adds a new component <eg-title /> which may be used to pass strings to
the native Angular Title service.

Each title may have a prefix and/or a suffix.  If both are defined, they
are separated by a "-" (by default / en-US) and the prefix is tructed to
12 characters, consistent with AngularJS strings.setPageTitle()
function.

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/Open-ILS/src/eg2/src/app/share/title/title.component.html b/Open-ILS/src/eg2/src/app/share/title/title.component.html
new file mode 100644 (file)
index 0000000..a72eef7
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/title/title.component.html
@@ -0,0 +1,19 @@
+
+<ng-template #titleStringTmpl let-pfx="pfx" let-sfx="sfx">
+
+  <ng-container *ngIf="pfx">
+    <ng-container *ngIf="sfx">
+      <!-- trim prefix value when it competes with a suffix and add a seperator -->
+      <ng-container>{{pfx | slice:0:12}} - </ng-container>
+    </ng-container>
+    <ng-container *ngIf="!sfx">{{pfx}}</ng-container>
+  </ng-container>
+
+  <ng-container *ngIf="sfx">{{sfx}}</ng-container>
+
+  <!-- if no values are defined, use a generic default -->
+  <ng-container *ngIf="!pfx && !sfx">Evergreen</ng-container>
+
+</ng-template>
+<eg-string #titleString [template]="titleStringTmpl"></eg-string>
+

diff --git a/Open-ILS/src/eg2/src/app/share/title/title.component.ts b/Open-ILS/src/eg2/src/app/share/title/title.component.ts
new file mode 100644 (file)
index 0000000..8dc1871
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/title/title.component.ts
@@ -0,0 +1,55 @@
+import {Component, Input, AfterViewInit, ViewChild} from '@angular/core';
+import {Title} from '@angular/platform-browser';
+import {StringComponent} from '@eg/share/string/string.component';
+
+/*
+    <eg-title i18n-prefix i18n-suffix
+        prefix="Patron #{{patronId}}
+        suffix="Staff Client">
+    </eg-title>
+
+    Tab title shows (in en-US):  "Patron #123 - Staff Client"
+*/
+
+@Component({
+  selector: 'eg-title',
+  templateUrl: 'title.component.html'
+})
+
+export class TitleComponent implements AfterViewInit {
+
+    initDone: boolean;
+
+    pfx: string;
+    @Input() set prefix(p: string) {
+        this.pfx = p;
+        this.setTitle();
+    }
+
+    sfx: string;
+    @Input() set suffix(s: string) {
+        this.sfx = s;
+        this.setTitle();
+    }
+
+    @ViewChild('titleString') titleString: StringComponent;
+
+    constructor(private title: Title) {}
+
+    ngAfterViewInit() {
+        this.initDone = true;
+        this.setTitle();
+    }
+
+    setTitle() {
+
+        // Avoid setting the title while the page is still loading
+        if (!this.initDone) { return; }
+
+        setTimeout(() => {
+            this.titleString.current({pfx: this.pfx, sfx: this.sfx})
+            .then(txt => this.title.setTitle(txt));
+        });
+    }
+}
+

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 e83143c..5a83f8a 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/common.module.ts
+++ b/Open-ILS/src/eg2/src/app/staff/common.module.ts
@@ -14,6 +14,7 @@ import {ToastService} from '@eg/share/toast/toast.service';
 import {ToastComponent} from '@eg/share/toast/toast.component';
 import {StringComponent} from '@eg/share/string/string.component';
 import {StringService} from '@eg/share/string/string.service';
+import {TitleComponent} from '@eg/share/title/title.component';
 import {FmRecordEditorComponent} from '@eg/share/fm-editor/fm-editor.component';
 import {DateSelectComponent} from '@eg/share/date-select/date-select.component';
 import {RecordBucketDialogComponent} from '@eg/staff/share/buckets/record-bucket-dialog.component';
@@ -35,6 +36,7 @@ import {AdminPageComponent} from '@eg/staff/share/admin-page/admin-page.componen
     AccessKeyInfoComponent,
     ToastComponent,
     StringComponent,
+    TitleComponent,
     OpChangeComponent,
     FmRecordEditorComponent,
     DateSelectComponent,
@@ -58,6 +60,7 @@ import {AdminPageComponent} from '@eg/staff/share/admin-page/admin-page.componen
     AccessKeyInfoComponent,
     ToastComponent,
     StringComponent,
+    TitleComponent,
     OpChangeComponent,
     FmRecordEditorComponent,
     DateSelectComponent,

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 8249335..00c2ee7 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -2,6 +2,19 @@
 <eg-staff-banner bannerText="Sandbox" i18n-bannerText>
 </eg-staff-banner>
 
+<eg-title 
+  i18n-prefix i18n-suffix
+  prefix=":) {{dynamicTitleText}}"
+  suffix="Sandbox">
+</eg-title>
+
+<div class="row flex pt-2">
+  <div i18n> Modify Page Title: </div>
+  <div class="col-lg-2">
+    <input type="text" [(ngModel)]="dynamicTitleText" class="form-control"/>
+  </div>
+</div>
+
 <!-- FM Editor Experiments ----------------------------- -->
 <div class="row mb-3">
   <ng-template #descriptionTemplate 
@@ -100,7 +113,6 @@
 <ng-template #printTemplate let-context>Hello, {{context.world}}!</ng-template>
 
 <br/><br/>
-HERasdfE
 <div class="row">
   <div class="col-lg-3">
     <eg-translate #translate [idlObject]="oneBtype" fieldName="name"></eg-translate>

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 a36af85..ed2c496 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
@@ -53,6 +53,8 @@ export class SandboxComponent implements OnInit {
 
     name = 'Jane';
 
+    dynamicTitleText: string;
+
     complimentEvergreen: (rows: IdlObject[]) => void;
     notOneSelectedRow: (rows: IdlObject[]) => boolean;
 
@@ -112,7 +114,6 @@ export class SandboxComponent implements OnInit {
 
         this.complimentEvergreen = (rows: IdlObject[]) => alert('Evergreen is great!');
         this.notOneSelectedRow = (rows: IdlObject[]) => (rows.length !== 1);
-
     }
 
     btGridRowClassCallback(row: any): string {