LP1948693 Migrate from NgbTabset to ngbTab

Updates the deprecated NgbTabset components to ngbNav and adds directive
for keyboard navigation.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxOLI.org>

diff --git a/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider.component.html b/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider.component.html
index d769a72..9125d4e 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider.component.html
@@ -45,9 +45,10 @@
 <div class="col">
 <div class="row" id="acq-provider-page" [hidden]="!id">
   <div class="col-lg-12">
-    <ngb-tabset #acqProviderTabs [activeId]="activeTab" (tabChange)="onTabChange($event)">
-      <ngb-tab title="Provider" i18n-title id="details" [disabled]="!id">
-        <ng-template ngbTabContent>
+    <ul ngbNav #acqProviderTabs="ngbNav" [(activeId)]="activeTab" (navChange)="onNavChange($event)" [keyboard]="true" class="nav-tabs">
+      <li [ngbNavItem]="'details'" [disabled]="!id">
+        <a i18n ngbNavLink>Provider</a>
+        <ng-template ngbNavContent>
           <div class="row mt-3">
             <div class="col-lg-12 text-right pb-1">
               <button class="btn btn-secondary btn-sm" [disabled]="activeTab === defaultTabType"
@@ -56,9 +57,10 @@
           </div>
           <eg-provider-details #providerDetails (desireSummarize)="onDesireSummarize($event, true)"></eg-provider-details>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="Addresses" i18n-title id="addresses" [disabled]="!id || !this.providerRecord.currentProvider || !this.providerRecord.currentProvider.canAdmin">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'addresses'" [disabled]="!id || !this.providerRecord.currentProvider || !this.providerRecord.currentProvider.canAdmin">
+        <a i18n ngbNavLink>Addresses</a>
+        <ng-template ngbNavContent>
           <div class="row mt-3">
             <div class="col-lg-12 text-right pb-1">
               <button class="btn btn-secondary btn-sm" [disabled]="activeTab === defaultTabType"
@@ -67,9 +69,10 @@
           </div>
           <eg-provider-addresses></eg-provider-addresses>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="Contacts" i18n-title id="contacts" [disabled]="!id || !this.providerRecord.currentProvider || !this.providerRecord.currentProvider.canAdmin">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'contacts'" [disabled]="!id || !this.providerRecord.currentProvider || !this.providerRecord.currentProvider.canAdmin">">
+        <a i18n ngbNavLink>Contacts</a>
+          <ng-template ngbNavContent>
           <div class="row mt-3">
             <div class="col-lg-12 text-right pb-1">
               <button class="btn btn-secondary btn-sm" [disabled]="activeTab === defaultTabType"
@@ -78,9 +81,10 @@
           </div>
           <eg-provider-contacts (desireSummarize)="onDesireSummarize($event, true)"></eg-provider-contacts>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="Attribute Definitions" i18n-title id="attributes" [disabled]="!id || !this.providerRecord.currentProvider || !this.providerRecord.currentProvider.canAdmin">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'attributes'" [disabled]="!id || !this.providerRecord.currentProvider || !this.providerRecord.currentProvider.canAdmin">
+        <a i18n ngbNavLink>Attribute Definitions</a>
+        <ng-template ngbNavContent>
           <div class="row mt-3">
             <div class="col-lg-12 text-right pb-1">
               <button class="btn btn-secondary btn-sm" [disabled]="activeTab === defaultTabType"
@@ -89,9 +93,10 @@
           </div>
           <eg-provider-attributes></eg-provider-attributes>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="Holdings Definitions" i18n-title id="holdings" [disabled]="!id || !this.providerRecord.currentProvider || !this.providerRecord.currentProvider.canAdmin">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'holdings'" [disabled]="!id || !this.providerRecord.currentProvider || !this.providerRecord.currentProvider.canAdmin">
+        <a i18n ngbNavLink>Holdings Definitions</a>
+        <ng-template ngbNavContent>
           <div class="row mt-3">
             <div class="col-lg-12 text-right pb-1">
               <button class="btn btn-secondary btn-sm" [disabled]="activeTab === defaultTabType"
@@ -100,9 +105,10 @@
           </div>
           <eg-provider-holdings #providerHoldings></eg-provider-holdings>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="EDI" i18n-title id="edi_accounts" [disabled]="!id || !this.providerRecord.currentProvider || !this.providerRecord.currentProvider.canAdmin">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'edi_accounts'" [disabled]="!id || !this.providerRecord.currentProvider || !this.providerRecord.currentProvider.canAdmin">
+        <a i18n ngbNavLink>EDI</a>
+        <ng-template ngbNavContent>
           <div class="row mt-3">
             <div class="col-lg-12 text-right pb-1">
               <button class="btn btn-secondary btn-sm" [disabled]="activeTab === defaultTabType"
@@ -111,9 +117,10 @@
           </div>
           <eg-provider-edi-accounts (desireSummarize)="onDesireSummarize($event, true)"></eg-provider-edi-accounts>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="Invoices" i18n-title id="invoices" [disabled]="!id">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'invoices'" [disabled]="!id">
+        <a i18n ngbNavLink>Invoices</a>
+        <ng-template ngbNavContent>
           <div class="row mt-3">
             <div class="col-lg-12 text-right pb-1">
               <button class="btn btn-secondary btn-sm" [disabled]="activeTab === defaultTabType"
@@ -122,9 +129,10 @@
           </div>
           <eg-provider-invoices></eg-provider-invoices>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="POs" i18n-title id="purchase_orders" [disabled]="!id">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'purchase_orders'" [disabled]="!id">
+        <a i18n ngbNavLink>POs</a>
+        <ng-template ngbNavContent>
           <div class="row mt-3">
             <div class="col-lg-12 text-right pb-1">
               <button class="btn btn-secondary btn-sm" [disabled]="activeTab === defaultTabType"
@@ -133,8 +141,10 @@
           </div>
           <eg-provider-purchase-orders></eg-provider-purchase-orders>
         </ng-template>
-      </ngb-tab>
-    </ngb-tabset>
+      </li>
+    </ul>
+
+    <div [ngbNavOutlet]="acqProviderTabs" class="mt-2"></div>
   </div>
 </div>
 </div>

diff --git a/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider.component.ts b/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider.component.ts
index 159bcb9..53228fa 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider.component.ts
@@ -1,7 +1,7 @@
 import {Component, OnInit, AfterViewInit, ViewChild, ChangeDetectorRef, OnDestroy} from '@angular/core';
 import {filter, takeUntil} from 'rxjs/operators';
 import {Subject, Observable, of} from 'rxjs';
-import {NgbTabChangeEvent} from '@ng-bootstrap/ng-bootstrap';
+import {NgbNav, NgbNavChangeEvent} from '@ng-bootstrap/ng-bootstrap';
 import {Router, ActivatedRoute, ParamMap, RouterEvent, NavigationEnd} from '@angular/router';
 import {IdlService} from '@eg/core/idl.service';
 import {AcqProviderSummaryPaneComponent} from './summary-pane.component';
@@ -36,7 +36,7 @@ export class AcqProviderComponent implements OnInit, AfterViewInit, OnDestroy {
     @ViewChild('createErrString', { static: false }) createErrString: StringComponent;
     @ViewChild('leaveConfirm', { static: true }) leaveConfirm: ConfirmDialogComponent;
 
-    onTabChange: ($event: NgbTabChangeEvent) => void;
+    onNavChange: ($event: NgbNavChangeEvent) => void;
 
     onDesireSummarize: ($event: number, updateSummaryOnly?: boolean, hideSearchForm?: boolean) => void;
     onSummaryToggled: ($event: boolean) => void;
@@ -112,7 +112,7 @@ export class AcqProviderComponent implements OnInit, AfterViewInit, OnDestroy {
             this.showSearchForm = true;
         }
 
-        this.onTabChange = ($event) => {
+        this.onNavChange = ($event) => {
             $event.preventDefault();
             this.canDeactivate().subscribe(canLeave => {
                 if (!canLeave) { return; }

diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/copy-loc-order/copy-loc-order.component.ts b/Open-ILS/src/eg2/src/app/staff/admin/local/copy-loc-order/copy-loc-order.component.ts
index fb9eb4e..3ac42bc 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/admin/local/copy-loc-order/copy-loc-order.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/admin/local/copy-loc-order/copy-loc-order.component.ts
@@ -1,7 +1,7 @@
 import {Component, Input, ViewChild, OnInit} from '@angular/core';
 import {tap, concatMap} from 'rxjs/operators';
 import {IdlService, IdlObject} from '@eg/core/idl.service';
-import {NgbTabset, NgbTabChangeEvent} from '@ng-bootstrap/ng-bootstrap';
+import {NgbNav, NgbNavChangeEvent} from '@ng-bootstrap/ng-bootstrap';
 import {OrgService} from '@eg/core/org.service';
 import {AuthService} from '@eg/core/auth.service';
 import {PcrudService} from '@eg/core/pcrud.service';

diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/negative-balances/list.component.ts b/Open-ILS/src/eg2/src/app/staff/admin/local/negative-balances/list.component.ts
index 2317ab9..822f1f5 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/admin/local/negative-balances/list.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/admin/local/negative-balances/list.component.ts
@@ -2,7 +2,7 @@ import {Component, Input, ViewChild, OnInit} from '@angular/core';
 import {EMPTY} from 'rxjs';
 import {map, tap, concatMap} from 'rxjs/operators';
 import {IdlService, IdlObject} from '@eg/core/idl.service';
-import {NgbTabset, NgbTabChangeEvent} from '@ng-bootstrap/ng-bootstrap';
+import {NgbNav, NgbNavChangeEvent} from '@ng-bootstrap/ng-bootstrap';
 import {OrgService} from '@eg/core/org.service';
 import {AuthService} from '@eg/core/auth.service';
 import {NetService} from '@eg/core/net.service';

diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/survey/survey-edit.component.html b/Open-ILS/src/eg2/src/app/staff/admin/local/survey/survey-edit.component.html
index 86f2f20..9973e6b 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/admin/local/survey/survey-edit.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/admin/local/survey/survey-edit.component.html
@@ -1,8 +1,9 @@
 <eg-staff-banner bannerText="Survey ID # {{surveyId}}" i18n-bannerText
                 class="mb-3"></eg-staff-banner>
-<ngb-tabset #surveyTabs [activeId]="surveyTab" (tabChange)="onTabChange($event)" class="mb-3">
-    <ngb-tab title="Edit Survey" i18n-title id="edit">
-        <ng-template ngbTabContent>
+<ul ngbNav #surveyTabs="ngbNav" [(activeId)]="surveyTab" (navChange)="onNavChange($event)" [keyboard]="true" class="mb-3 nav-tabs">
+    <li [ngbNavItem]="'edit'">
+        <a i18n ngbNavLink>Edit Survey</a>
+        <ng-template ngbNavContent>
             <div class="col-lg-6 offset-lg-3 mt-3">
                 <div style="text-align: center;">
                     <button class="p-2 mb-3 btn btn-danger btn-lg" 
@@ -19,9 +20,10 @@
                 </eg-fm-record-editor>
             </div>
         </ng-template>
-    </ngb-tab>
-    <ngb-tab title="Questions and Answers" i18n-title id="qanda">
-        <ng-template ngbTabContent>
+    </li>
+    <li [ngbNavItem]="'qanda'">
+        <a i18n ngbNavLink>Questions and Answers</a>
+        <ng-template ngbNavContent>
             <div class="col-lg-8 offset-lg-2 mt-3">
                 <eg-staff-banner bannerText="Questions & Answers" i18n-bannerText>
                     </eg-staff-banner>
@@ -91,8 +93,10 @@
                 </div>
             </div>
         </ng-template>
-    </ngb-tab>
-</ngb-tabset>
+    </li>
+</ul>
+
+<div [ngbNavOutlet]="surveyTabs" class="mt-2"></div>
 
 <eg-string #createAnswerString i18n-text text="New Answer Added"></eg-string>
 <eg-string #createAnswerErrString i18n-text text="Failed to Create New Answer">

diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/survey/survey-edit.component.ts b/Open-ILS/src/eg2/src/app/staff/admin/local/survey/survey-edit.component.ts
index 73b3a7b..550b52c 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/admin/local/survey/survey-edit.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/admin/local/survey/survey-edit.component.ts
@@ -6,7 +6,7 @@ import {ToastService} from '@eg/share/toast/toast.service';
 import {NetService} from '@eg/core/net.service';
 import {AuthService} from '@eg/core/auth.service';
 import {IdlObject, IdlService } from '@eg/core/idl.service';
-import {NgbTabset, NgbTabChangeEvent} from '@ng-bootstrap/ng-bootstrap';
+import {NgbNav, NgbNavChangeEvent} from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
     templateUrl: './survey-edit.component.html'
@@ -83,7 +83,7 @@ export class SurveyEditComponent implements OnInit {
         });
     }
 
-    onTabChange(event: NgbTabChangeEvent) {
+    onNavChange(event: NgbNavChangeEvent) {
         this.surveyTab = event.nextId;
     }
 

diff --git a/Open-ILS/src/eg2/src/app/staff/admin/server/org-unit.component.html b/Open-ILS/src/eg2/src/app/staff/admin/server/org-unit.component.html
index 0955e98..1958916 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/admin/server/org-unit.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/admin/server/org-unit.component.html
@@ -37,9 +37,10 @@
         </span>
       </div>
     </div>
-    <ngb-tabset #rootTabs (tabChange)="tabChanged($event)" *ngIf="currentOrg()">
-      <ngb-tab title="Main Settings" i18n-title id="main">
-        <ng-template ngbTabContent>
+    <ul ngbNav #rootTabs="ngbNav" [(activeId)]="orgUnitTab" (navChange)="navChanged($event)" *ngIf="currentOrg()" [disabled]="currentOrg().isnew()" [keyboard]="true" class="nav-tabs">
+      <li [ngbNavItem]="'main'">
+        <a i18n ngbNavLink>Main Settings</a>
+        <ng-template ngbNavContent>
           <div class="mt-2">
             <eg-fm-record-editor *ngIf="currentOrg()" #editDialog idlClass="aou" 
               [mode]="currentOrg().isnew() ? 'create': 'update'" [hideBanner]="true" 
@@ -59,10 +60,10 @@
             </eg-fm-record-editor>
           </div>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="Hours of Operation" i18n-title id="hours" 
-        [disabled]="currentOrg().isnew()">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'hours'">
+        <a i18n ngbNavLink>Hours of Operation</a>
+        <ng-template ngbNavContent>
           <div class="mt-2 common-form striped-even">
             <div class="row font-weight-bold mb-2">
               <div class="col-lg-3 offset-lg-2" i18n>Open Time</div>
@@ -112,16 +113,18 @@
             </div>
           </div>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="Addresses" i18n-title id="addresses" 
-        [disabled]="currentOrg().isnew()">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'addresses'" [disabled]="currentOrg().isnew()">
+        <a i18n ngbNavLink>Addresses</a>
+        <ng-template ngbNavContent>
           <div class="mt-2">
             <eg-admin-org-address [orgId]="currentOrg().id()" (addrChange)="addressChanged($event)">
             </eg-admin-org-address>
           </div>
         </ng-template>
-      </ngb-tab>
-    </ngb-tabset>
+      </li>
+    </ul>
+
+    <div [ngbNavOutlet]="rootTabs" class="mt-2"></div>
   </div>
 </div>

diff --git a/Open-ILS/src/eg2/src/app/staff/admin/server/org-unit.component.ts b/Open-ILS/src/eg2/src/app/staff/admin/server/org-unit.component.ts
index 160e972..9c17966 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/admin/server/org-unit.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/admin/server/org-unit.component.ts
@@ -1,7 +1,7 @@
 import {Component, Input, ViewChild, OnInit} from '@angular/core';
 import {Tree, TreeNode} from '@eg/share/tree/tree';
 import {IdlService, IdlObject} from '@eg/core/idl.service';
-import {NgbTabset, NgbTabChangeEvent} from '@ng-bootstrap/ng-bootstrap';
+import {NgbNav, NgbNavChangeEvent} from '@ng-bootstrap/ng-bootstrap';
 import {OrgService} from '@eg/core/org.service';
 import {AuthService} from '@eg/core/auth.service';
 import {PcrudService} from '@eg/core/pcrud.service';
@@ -20,6 +20,7 @@ export class OrgUnitComponent implements OnInit {
     tree: Tree;
     selected: TreeNode;
     winHeight = 500;
+    orgUnitTab: string;
 
     @ViewChild('editString', { static: true }) editString: StringComponent;
     @ViewChild('errorString', { static: true }) errorString: StringComponent;
@@ -39,7 +40,7 @@ export class OrgUnitComponent implements OnInit {
         this.loadAouTree(this.org.root().id());
     }
 
-    tabChanged(evt: NgbTabChangeEvent) {
+    navChanged(evt: NgbNavChangeEvent) {
         const tab = evt.nextId;
         // stubbing out in case we need it.
     }

diff --git a/Open-ILS/src/eg2/src/app/staff/admin/server/print-template.component.ts b/Open-ILS/src/eg2/src/app/staff/admin/server/print-template.component.ts
index 0276005..80a0c67 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/admin/server/print-template.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/admin/server/print-template.component.ts
@@ -11,7 +11,7 @@ import {ComboboxComponent, ComboboxEntry
     } from '@eg/share/combobox/combobox.component';
 import {PrintService} from '@eg/share/print/print.service';
 import {LocaleService} from '@eg/core/locale.service';
-import {NgbTabset, NgbTabChangeEvent} from '@ng-bootstrap/ng-bootstrap';
+import {NgbNav, NgbNavChangeEvent} from '@ng-bootstrap/ng-bootstrap';
 import {FmRecordEditorComponent} from '@eg/share/fm-editor/fm-editor.component';
 import {SampleDataService} from '@eg/share/util/sample-data.service';
 import {OrgFamily} from '@eg/share/org-family-select/org-family-select.component';
@@ -39,7 +39,7 @@ export class PrintTemplateComponent implements OnInit {
     selectedOrgs: number[];
 
     @ViewChild('templateSelector', { static: true }) templateSelector: ComboboxComponent;
-    @ViewChild('tabs', { static: false }) tabs: NgbTabset;
+    @ViewChild('tabs', { static: false }) tabs: NgbNav;
     @ViewChild('editDialog', { static: true }) editDialog: FmRecordEditorComponent;
     @ViewChild('confirmDelete', { static: true }) confirmDelete: ConfirmDialogComponent;
     @ViewChild('printContextCbox', {static: false}) printContextCbox: ComboboxComponent;
@@ -112,7 +112,7 @@ export class PrintTemplateComponent implements OnInit {
         this.sampleData.holds_for_bib = wide_holds;
     }
 
-    onTabChange(evt: NgbTabChangeEvent) {
+    onTabChange(evt: NgbNavChangeEvent) {
         if (evt.nextId === 'template') {
             this.refreshPreview();
         }

diff --git a/Open-ILS/src/eg2/src/app/staff/booking/create-reservation.component.html b/Open-ILS/src/eg2/src/app/staff/booking/create-reservation.component.html
index 4dc4d89..e7d2df1 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/booking/create-reservation.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/booking/create-reservation.component.html
@@ -27,13 +27,13 @@
   </div>
   <div class="card col-sm-6">
     <h2 class="card-header" i18n>Reservation details</h2>
-    <ngb-tabset #details="ngbTabset">
-      <ngb-tab id="select-resource-type">
-        <ng-template ngbTabTitle>
+    <ul ngbNav #details="ngbNav" [(activeId)]="detailsTab" [keyboard]="true" class="nav-tabs">
+      <li [ngbNavItem]="'select-resource-type'">
+        <a ngbNavLink>
           <span class="material-icons">dns</span>
           <ng-container i18n>Choose resource by type</ng-container>
-        </ng-template>
-        <ng-template ngbTabContent>
+        </a>
+        <ng-template ngbNavContent>
           <div ngbPanelContent class="row">
             <div class="col">
               <div class="input-group">
@@ -54,14 +54,14 @@
             </div>
           </div>
         </ng-template>
-      </ngb-tab>
+      </li>
 
-      <ngb-tab id="select-resource">
-        <ng-template ngbTabTitle>
+      <li [ngbNavItem]="'select-resource'">
+        <a ngbNavLink>
           <span class="material-icons">assignment</span>
           <ng-container i18n>Choose resource by barcode</ng-container>
-        </ng-template>
-        <ng-template ngbTabContent>
+        </a>
+        <ng-template ngbNavContent>
           <div ngbPanelContent class="row">
             <div class="col">
               <div class="input-group">
@@ -73,14 +73,14 @@
             </div>
           </div>
         </ng-template>
-      </ngb-tab>
+      </li>
 
-      <ngb-tab id="attributes" [disabled]="0 === attributes.length">
-        <ng-template ngbTabTitle>
+      <li [ngbNavItem]="'attributes'" [disabled]="0 === attributes.length">
+        <a ngbNavLink>
           <span class="material-icons">filter_list</span>
           <ng-container i18n>Limit by attributes</ng-container>
-        </ng-template>
-        <ng-template ngbTabContent>
+        </a>
+        <ng-template ngbNavContent>
           <ul class="list-group list-group-flush" formArrayName="selectedAttributes">
             <li *ngFor="let attribute of attributes; let i = index" class="list-group-item">
               <span class="input-group">
@@ -96,14 +96,14 @@
             </li>
           </ul>
         </ng-template>
-      </ngb-tab>
+      </li>
 
-      <ngb-tab id="display-settings">
-        <ng-template ngbTabTitle>
+      <li [ngbNavItem]="'display-settings'">
+        <a ngbNavLink>
           <span class="material-icons">settings</span>
           <ng-container i18n>Schedule settings</ng-container>
-        </ng-template>
-        <ng-template ngbTabContent>
+        </a>
+        <ng-template ngbNavContent>
           <ul class="list-group list-group-flush">
             <li class="list-group-item">
               <span class="input-group">
@@ -144,8 +144,10 @@
             </li>
           </ul>
         </ng-template>
-      </ngb-tab>
-    </ngb-tabset>
+      </li>
+    </ul>
+
+    <div [ngbNavOutlet]="details" class="mt-2"></div>
   </div>
 </form>
 

diff --git a/Open-ILS/src/eg2/src/app/staff/booking/create-reservation.component.ts b/Open-ILS/src/eg2/src/app/staff/booking/create-reservation.component.ts
index 6e3ae35..ad83b6b 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/booking/create-reservation.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/booking/create-reservation.component.ts
@@ -3,7 +3,7 @@ import {FormGroup, FormControl, ValidationErrors, ValidatorFn, FormArray} from '
 import {Router, ActivatedRoute} from '@angular/router';
 import {from, iif, Observable, of, throwError, timer, Subscription} from 'rxjs';
 import {catchError, debounceTime, takeLast, mapTo, single, switchMap, tap} from 'rxjs/operators';
-import {NgbCalendar, NgbTabset} from '@ng-bootstrap/ng-bootstrap';
+import {NgbCalendar, NgbNav, NgbNavChangeEvent} from '@ng-bootstrap/ng-bootstrap';
 import {AuthService} from '@eg/core/auth.service';
 import {ComboboxEntry} from '@eg/share/combobox/combobox.component';
 import {FormatService} from '@eg/core/format.service';
@@ -68,9 +68,10 @@ export class CreateReservationComponent implements OnInit, AfterViewInit, OnDest
     changeGranularity: ($event: ComboboxEntry) => void;
 
     dateRange: DateRange;
+    detailsTab: string = '';
 
     @ViewChild('createDialog', { static: true }) createDialog: CreateReservationDialogComponent;
-    @ViewChild('details', { static: true }) details: NgbTabset;
+    @ViewChild('details', { static: true }) details: NgbNav;
     @ViewChild('noTimezoneSetDialog', { static: true }) noTimezoneSetDialog: NoTimezoneSetComponent;
     @ViewChild('viewReservation', { static: true }) viewReservation: FmRecordEditorComponent;
     @ViewChildren('scheduleGrid') scheduleGrids: QueryList<GridComponent>;

diff --git a/Open-ILS/src/eg2/src/app/staff/booking/manage-reservations.component.html b/Open-ILS/src/eg2/src/app/staff/booking/manage-reservations.component.html
index 1a7e94b..a15bcc2 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/booking/manage-reservations.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/booking/manage-reservations.component.html
@@ -10,12 +10,12 @@
   <div class="col-sm-6 offset-sm-3">
     <div class="card">
       <h2 class="card-header" i18n>Filter reservations</h2>
-      <ngb-tabset #filterTabs [activeId]="startingTab" class="mt-1">
-        <ngb-tab id="patron">
-          <ng-template ngbTabTitle>
+      <ul ngbNav #filterTabs="ngbNav" [(activeId)]="startingTab" [keyboard]="true" class="nav-tabs">
+        <li [ngbNavItem]="'patron'">
+          <a ngbNavLink>
             <span class="material-icons" *ngIf="patronId">filter_list</span> <span i18n>Filter by patron</span>
-          </ng-template>
-          <ng-template ngbTabContent>
+          </a>
+          <ng-template ngbNavContent>
             <div class="m-2">
               <div class="input-group m-2">
                 <div class="input-group-prepend">
@@ -28,12 +28,12 @@
               </div>
             </div>
           </ng-template>
-        </ngb-tab>
-        <ngb-tab id="resource">
-          <ng-template ngbTabTitle>
+        </li>
+        <li [ngbNavItem]="'resource'">
+          <a ngbNavLink>
             <span class="material-icons" *ngIf="resourceBarcode.value">filter_list</span> <span i18n>Filter by resource</span>
-          </ng-template>
-          <ng-template ngbTabContent>
+          </a>
+          <ng-template ngbNavContent>
             <div class="m-2">
               <div class="input-group m-2">
                 <div class="input-group-prepend">
@@ -46,12 +46,12 @@
               </div>
             </div>
           </ng-template>
-        </ngb-tab>
-        <ngb-tab id="type">
-          <ng-template ngbTabTitle>
+        </li>
+        <li [ngbNavItem]="'type'">
+          <a ngbNavLink>
             <span class="material-icons" *ngIf="resourceTypeForGrid">filter_list</span> <span i18n>Filter by resource type</span>
-          </ng-template>
-          <ng-template ngbTabContent>
+          </a>
+          <ng-template ngbNavContent>
             <div class="m-2">
               <div class="input-group m-2">
                 <div class="input-group-prepend">
@@ -64,8 +64,10 @@
               </div>
             </div>
           </ng-template>
-        </ngb-tab>
-      </ngb-tabset>
+        </li>
+      </ul>
+
+      <div [ngbNavOutlet]="filterTabs" class="mt-2"></div>
     </div>
   </div>
 </form>

diff --git a/Open-ILS/src/eg2/src/app/staff/booking/manage-reservations.component.ts b/Open-ILS/src/eg2/src/app/staff/booking/manage-reservations.component.ts
index 25ef296..5d4cea9 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/booking/manage-reservations.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/booking/manage-reservations.component.ts
@@ -3,7 +3,7 @@ import {FormGroup, FormControl} from '@angular/forms';
 import {Router, ActivatedRoute, ParamMap} from '@angular/router';
 import {Subscription, of} from 'rxjs';
 import {debounceTime, single, tap, switchMap} from 'rxjs/operators';
-import {NgbTabset} from '@ng-bootstrap/ng-bootstrap';
+import {NgbNav, NgbNavChangeEvent} from '@ng-bootstrap/ng-bootstrap';
 import {AuthService} from '@eg/core/auth.service';
 import {PcrudService} from '@eg/core/pcrud.service';
 import {ReservationsGridComponent} from './reservations-grid.component';
@@ -27,7 +27,7 @@ export class ManageReservationsComponent implements OnInit, OnDestroy {
     startingTab: 'patron' | 'resource' | 'type' = 'patron';
     startingPickupOrgs: OrgFamily = {primaryOrgId: this.auth.user().ws_ou(), includeDescendants: true};
 
-    @ViewChild('filterTabs', { static: true }) filterTabs: NgbTabset;
+    @ViewChild('filterTabs', { static: true }) filterTabs: NgbNav;
     @ViewChild('reservationsGrid', { static: true }) reservationsGrid: ReservationsGridComponent;
 
     removeFilters: () => void;

diff --git a/Open-ILS/src/eg2/src/app/staff/booking/return.component.html b/Open-ILS/src/eg2/src/app/staff/booking/return.component.html
index 82758dd..29b5bb4 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/booking/return.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/booking/return.component.html
@@ -3,9 +3,11 @@
 <eg-title i18n-prefix i18n-suffix prefix="Booking" suffix="Return"></eg-title>
 
 <form [formGroup]="findPatron">
-  <ngb-tabset (tabChange)="handleTabChange($event)" activeId="patron" #tabs>
-    <ngb-tab title="By patron" i18n-title id="patron">
-      <ng-template ngbTabContent>
+  <ul ngbNav #tabs="ngbNav" [(activeId)]="tabs" 
+      (navChange)="handleNavChange($event)" [keyboard]="true" class="nav-tabs">
+    <li [ngbNavItem]="'patron'">
+      <a i18n ngbNavLink>By patron</a>
+      <ng-template ngbNavContent>
         <div class="row">
           <div class="col-md-4">
             <div class="input-group flex-nowrap">
@@ -24,9 +26,10 @@
           <eg-reservations-grid #returnedGrid [patron]="patronId" status="returnedToday" persistSuffix="return.patron.returned"></eg-reservations-grid>
         </div>
       </ng-template>
-    </ngb-tab>
-    <ngb-tab title="By resource" i18n-title id="resource">
-      <ng-template ngbTabContent>
+    </li>
+    <li [ngbNavItem]="'resource'">
+      <a i18n ngbNavLink>By resource</a>
+      <ng-template ngbNavContent>
         <div class="input-group flex-nowrap">
           <div class="input-group-prepend">
             <label class="input-group-text" for="resource-barcode" i18n>Resource barcode</label>
@@ -41,6 +44,8 @@
           <eg-reservations-grid #returnedGrid [patron]="patronId" status="returnedToday" persistSuffix="return.resource.returned"></eg-reservations-grid>
         </div>
       </ng-template>
-    </ngb-tab>
-  </ngb-tabset>
+    </li>
+  </ul>
+
+  <div [ngbNavOutlet]="tabs" class="mt-2"></div>
 </form>

diff --git a/Open-ILS/src/eg2/src/app/staff/booking/return.component.ts b/Open-ILS/src/eg2/src/app/staff/booking/return.component.ts
index f37e10e..24bc908 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/booking/return.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/booking/return.component.ts
@@ -1,7 +1,7 @@
 import {Component, OnInit, OnDestroy, QueryList, ViewChildren, ViewChild} from '@angular/core';
 import {Router, ActivatedRoute, ParamMap} from '@angular/router';
 import {FormGroup, FormControl, Validators} from '@angular/forms';
-import {NgbTabChangeEvent, NgbTabset} from '@ng-bootstrap/ng-bootstrap';
+import {NgbNav, NgbNavChangeEvent} from '@ng-bootstrap/ng-bootstrap';
 import {Observable, from, of, Subscription} from 'rxjs';
 import { single, switchMap, tap, debounceTime } from 'rxjs/operators';
 import {PatronService} from '@eg/staff/share/patron/patron.service';
@@ -23,8 +23,8 @@ export class ReturnComponent implements OnInit, OnDestroy {
     subscriptions: Subscription[] = [];
 
     noSelectedRows: (rows: IdlObject[]) => boolean;
-    handleTabChange: ($event: NgbTabChangeEvent) => void;
-    @ViewChild('tabs', { static: true }) tabs: NgbTabset;
+    handleNavChange: ($event: NgbNavChangeEvent) => void;
+    @ViewChild('tabs', { static: true }) tabs: NgbNav;
     @ViewChildren(ReservationsGridComponent) grids: QueryList<ReservationsGridComponent>;
 
     constructor(
@@ -95,7 +95,7 @@ export class ReturnComponent implements OnInit, OnDestroy {
         );
         this.noSelectedRows = (rows: IdlObject[]) => (rows.length === 0);
 
-        this.handleTabChange = ($event) => {
+        this.handleNavChange = ($event) => {
             this.store.setItem('eg.booking.return.tab', $event.nextId)
             .then(() => {
                 this.router.navigate(['/staff', 'booking', 'return']);

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/authority/manage.component.html b/Open-ILS/src/eg2/src/app/staff/cat/authority/manage.component.html
index c1951fe..0e92e63 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/authority/manage.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/authority/manage.component.html
@@ -12,24 +12,26 @@
   </div>
 </div>
 
-<ngb-tabset #authTabs [activeId]="authTab" 
-  (tabChange)="beforeTabChange($event)">
-  <ngb-tab title="Linked Bibs" i18n-title id="bibs">
-    <ng-template ngbTabContent>
+<ul ngbNav #authTabs="ngbNav" [(activeId)]="authTab" 
+  (navChange)="beforeNavChange($event)" [keyboard]="true" class="nav-tabs">
+  <li [ngbNavItem]="'bibs'">
+    <a i18n ngbNavLink>Linked Bibs</a>
+    <ng-template ngbNavContent>
       <div class="mt-3" *ngIf="authMeta">
         <eg-bib-list #bibList [bibIdSource]="linkedBibIdSource"
           gridPersistKey="cat.authority.manage.bibs"></eg-bib-list>
       </div>
     </ng-template>
-  </ngb-tab>
-  <ngb-tab title="Edit" i18n-title id="edit">
-    <ng-template ngbTabContent>
+  </li>
+  <li [ngbNavItem]="'edit'">
+    <a i18n ngbNavLink>Edit</a>
+    <ng-template ngbNavContent>
       <div class="mt-3">
         <eg-marc-editor #marcEditor recordType="authority" [recordId]="authId">
         </eg-marc-editor>
       </div>
     </ng-template>
-  </ngb-tab>
-</ngb-tabset>
-
+  </li>
+</ul>
 
+<div [ngbNavOutlet]="authTabs" class="mt-2"></div>

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/authority/manage.component.ts b/Open-ILS/src/eg2/src/app/staff/cat/authority/manage.component.ts
index 95c0193..5e70b63 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/authority/manage.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/cat/authority/manage.component.ts
@@ -2,7 +2,7 @@ import {Component, OnInit, ViewChild} from '@angular/core';
 import {Router, ActivatedRoute, ParamMap} from '@angular/router';
 import {Observable} from 'rxjs';
 import {map, switchMap} from 'rxjs/operators';
-import {NgbTabset, NgbTabChangeEvent} from '@ng-bootstrap/ng-bootstrap';
+import {NgbNav, NgbNavChangeEvent} from '@ng-bootstrap/ng-bootstrap';
 import {IdlObject} from '@eg/core/idl.service';
 import {Pager} from '@eg/share/util/pager';
 import {NetService} from '@eg/core/net.service';
@@ -66,7 +66,7 @@ export class ManageAuthorityComponent implements OnInit {
 
     // Changing a tab in the UI means changing the route.
     // Changing the route ultimately results in changing the tab.
-    beforeTabChange(evt: NgbTabChangeEvent) {
+    beforeNavChange(evt: NgbNavChangeEvent) {
 
         // prevent tab changing until after route navigation
         evt.preventDefault();

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/display-attrs.component.html b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/display-attrs.component.html
index 78a86ed..6e20ee5 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/display-attrs.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/display-attrs.component.html
@@ -1,17 +1,21 @@
 
-<ngb-tabset #tabs [activeId]="attrType" (tabChange)="onTabChange($event)">
-       <ngb-tab title="Bibliographic Attributes" i18n-title id="bib">
+<ul ngbNav #tabs="ngbNav" [(activeId)]="attrType" (navChange)="onNavChange($event)" [keyboard]="true" class="nav-tabs">
+       <li [ngbNavItem]="'bib'">
+               <a i18n ngbNavLink>Bibliographic Attributes</a>
                <ng-template ngbTabContent>
       <div class="mt-3">
         <eg-admin-page idlClass="vqbrad"></eg-admin-page>
       </div>
                </ng-template>
-       </ngb-tab>
-       <ngb-tab title="Authority Attributes" i18n-title id="authority">
+       </li>
+       <li [ngbNavItem]="'authority'">
+               <a i18n ngbNavLink>Authority Attributes</a>
                <ng-template ngbTabContent>
       <div class="mt-3">
         <eg-admin-page idlClass="vqarad"></eg-admin-page>
       </div>
                </ng-template>
-       </ngb-tab>
-</ngb-tabset>
+       </li>
+</ul>
+
+<div [ngbNavOutlet]="tabs" class="mt-2"></div>

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/display-attrs.component.ts b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/display-attrs.component.ts
index 7d1eceb..86c60c7 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/display-attrs.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/display-attrs.component.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {Router, ActivatedRoute, ParamMap} from '@angular/router';
-import {NgbTabset, NgbTabChangeEvent} from '@ng-bootstrap/ng-bootstrap';
+import {NgbNav, NgbNavChangeEvent} from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   templateUrl: 'display-attrs.component.html'
@@ -20,7 +20,7 @@ export class DisplayAttrsComponent {
 
     // Changing a tab in the UI means changing the route.
     // Changing the route ultimately results in changing the tab.
-    onTabChange(evt: NgbTabChangeEvent) {
+    onNavChange(evt: NgbNavChangeEvent) {
         this.attrType = evt.nextId;
 
         // prevent tab changing until after route navigation

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/match-set.component.html b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/match-set.component.html
index fd69cf9..5200048 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/match-set.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/match-set.component.html
@@ -20,17 +20,22 @@
   </div>
 </div>
 
-<ngb-tabset [activeId]="matchSetTab" (tabChange)="onTabChange($event)">
-       <ngb-tab title="Match Set Editor" i18n-title id="editor">
-               <ng-template ngbTabContent>
+<ul ngbNav #matchSetTabs="ngbNav" [(activeId)]="matchSetTab" 
+      (navChange)="onNavChange($event)" [keyboard]="true" class="nav-tabs">
+       <li [ngbNavItem]="'editor'">
+               <a i18n ngbNavLink>Match Set Editor</a>
+    <ng-template ngbTabContent>
       <eg-match-set-expression [matchSet]="matchSet">
       </eg-match-set-expression>
                </ng-template>
-       </ngb-tab>
-       <ngb-tab title="Match Set Quality Metrics" i18n-title id="quality">
-               <ng-template ngbTabContent>
+       </li>
+       <li [ngbNavItem]="'quality'">
+               <a i18n ngbNavLink>Match Set Quality Metrics</a>
+    <ng-template ngbTabContent>
       <eg-match-set-quality [matchSet]="matchSet">
       </eg-match-set-quality>
                </ng-template>
-       </ngb-tab>
-</ngb-tabset>
+       </li>
+</ul>
+
+<div [ngbNavOutlet]="matchSetTabs" class="mt-2"></div>
\ No newline at end of file

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/match-set.component.ts b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/match-set.component.ts
index 64a4b35..34a2f41 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/match-set.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/match-set.component.ts
@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {Router, ActivatedRoute, ParamMap} from '@angular/router';
-import {NgbTabset, NgbTabChangeEvent} from '@ng-bootstrap/ng-bootstrap';
+import {NgbNav, NgbNavChangeEvent} from '@ng-bootstrap/ng-bootstrap';
 import {IdlObject} from '@eg/core/idl.service';
 import {PcrudService} from '@eg/core/pcrud.service';
 import {OrgService} from '@eg/core/org.service';
@@ -36,7 +36,7 @@ export class MatchSetComponent implements OnInit {
 
     // Changing a tab in the UI means changing the route.
     // Changing the route ultimately results in changing the tab.
-    onTabChange(evt: NgbTabChangeEvent) {
+    onNavChange(evt: NgbNavChangeEvent) {
         this.matchSetTab = evt.nextId;
 
         // prevent tab changing until after route navigation

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queued-record.component.html b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queued-record.component.html
index ed643d9..ee3cc02 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queued-record.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queued-record.component.html
@@ -9,14 +9,17 @@
   </div>
 </div>
 
-<ngb-tabset #recordTabs [activeId]="recordTab" (tabChange)="onTabChange($event)">
-  <ngb-tab title="Queued Record MARC" i18n-title id="marc">
+<ul ngbNav #recordTabs="ngbNav" [(activeId)]="recordTab" 
+      (navChange)="onNavChange($event)" [keyboard]="true" class="nav-tabs">
+  <li [ngbNavItem]="'marc'">
+    <a i18n ngbNavLink>Queued Record MARC</a>
     <ng-template ngbTabContent>
       <eg-marc-html [recordId]="recordId" [recordType]="'vandelay-'+queueType">
       </eg-marc-html>
     </ng-template>
-  </ngb-tab>
-  <ngb-tab title="Edit Record" i18n-title id="edit">
+  </li>
+  <li [ngbNavItem]="'edit'">
+    <a i18n ngbNavLink>Edit Record</a>
     <ng-template ngbTabContent>
       <ng-container *ngIf="queuedRecord">
         <eg-marc-editor [inPlaceMode]="true" [recordXml]="queuedRecord.marc()"
@@ -28,17 +31,21 @@
           *ngIf="queueType !== 'bib'"></eg-marc-editor>
       </ng-container>
     </ng-template>
-  </ngb-tab>
-  <ngb-tab title="Record Matches" i18n-title id="matches">
+  </li>
+  <li [ngbNavItem]="'matches'">
+    <a i18n ngbNavLink>Record Matches</a>
     <ng-template ngbTabContent>
       <eg-queued-record-matches [recordId]="recordId" [queueType]="queueType">
       </eg-queued-record-matches>
     </ng-template>
-  </ngb-tab>
-  <ngb-tab title="Import Items" i18n-title id="items">
+  </li>
+  <li [ngbNavItem]="'items'">
+    <a i18n ngbNavLink>Import Items</a>
     <ng-template ngbTabContent>
       <eg-queued-record-items [recordId]="recordId">
       </eg-queued-record-items>
     </ng-template>
-  </ngb-tab>
-</ngb-tabset>
+  </li>
+</ul>
+
+<div [ngbNavOutlet]="recordTabs" class="mt-2"></div>
\ No newline at end of file

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queued-record.component.ts b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queued-record.component.ts
index 872f0e5..120f84a 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queued-record.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queued-record.component.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {Router, ActivatedRoute, ParamMap} from '@angular/router';
-import {NgbTabset, NgbTabChangeEvent} from '@ng-bootstrap/ng-bootstrap';
+import {NgbNav, NgbNavChangeEvent} from '@ng-bootstrap/ng-bootstrap';
 import {PcrudService} from '@eg/core/pcrud.service';
 import {IdlObject} from '@eg/core/idl.service';
 
@@ -33,7 +33,7 @@ export class QueuedRecordComponent {
 
     // Changing a tab in the UI means changing the route.
     // Changing the route ultimately results in changing the tab.
-    onTabChange(evt: NgbTabChangeEvent) {
+    onNavChange(evt: NgbNavChangeEvent) {
         this.recordTab = evt.nextId;
 
         // prevent tab changing until after route navigation

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.html
index d4f711e..dd3346e 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.html
@@ -36,35 +36,40 @@
             (click)="setDefaultTab()" i18n>Set Default View</button>
       </div>
     </div>
-    <ngb-tabset #recordTabs [activeId]="recordTab" 
-      (tabChange)="beforeTabChange($event)">
-      <ngb-tab title="Item Table" i18n-title id="item_table">
-        <ng-template ngbTabContent>
+    <ul ngbNav #recordTabs="ngbNav" [(activeId)]="recordTab" [roles]="false"
+      (navChange)="beforeNavChange($event)" [keyboard]="true" class="nav-tabs">
+      <li [ngbNavItem]="'item_table'" role="tab">
+        <a i18n ngbNavLink>Item Table</a>
+        <ng-template ngbNavContent>
           <eg-catalog-copies [recordId]="recordId"></eg-catalog-copies>
         </ng-template>
-      </ngb-tab>
+      </li>
       <!-- NOTE some tabs send the user over to the AngJS app -->
-      <ngb-tab title="MARC Edit" i18n-title id="marc_edit">
-        <ng-template ngbTabContent>
+      <li [ngbNavItem]="'marc_edit'" role="tab">
+        <a i18n ngbNavLink>MARC Edit</a>
+        <ng-template ngbNavContent>
           <div class="mt-3">
             <eg-marc-editor #marcEditor (recordSaved)="handleMarcRecordSaved()" 
               [recordId]="recordId"></eg-marc-editor>
           </div>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="MARC View" i18n-title id="marc_html">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'marc_html'" role="tab">
+        <a i18n ngbNavLink>MARC View</a>
+        <ng-template ngbNavContent>
           <eg-marc-html [recordId]="recordId" recordType="bib"></eg-marc-html>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="Record Notes" i18n-title id="bibnotes">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'bibnotes'" role="tab">
+        <a i18n ngbNavLink>Record Notes</a>
+        <ng-template ngbNavContent>
           <eg-catalog-record-notes [recordId]="recordId">
           </eg-catalog-record-notes>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="View Holds" i18n-title id="holds">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'holds'" role="tab">
+        <a i18n ngbNavLink>View Holds</a>
+        <ng-template ngbNavContent>
           <eg-holds-grid [recordId]="recordId"
             preFetchSetting="catalog.record.holds.prefetch"
             printTemplate="holds_for_bib"
@@ -72,27 +77,31 @@
             [defaultSort]="[{name:'request_time',dir:'asc'}]"
             [initialPickupLib]="currentSearchOrg()"></eg-holds-grid>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="Monograph Parts" i18n-title id="monoparts">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'monoparts'" role="tab">
+        <a i18n ngbNavLink>Monograph Parts</a>
+        <ng-template ngbNavContent>
           <eg-catalog-record-parts [recordId]="recordId">
           </eg-catalog-record-parts>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="Holdings View" i18n-title id="holdings">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'holdings'" role="tab">
+        <a i18n ngbNavLink>Holdings View</a>
+        <ng-template ngbNavContent>
           <eg-holdings-maintenance #holdingsMaint [recordId]="recordId">
           </eg-holdings-maintenance>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="Conjoined Items" i18n-title id="conjoined">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'conjoined'" role="tab">
+        <a i18n ngbNavLink>Conjoined Items</a>
+        <ng-template ngbNavContent>
           <eg-catalog-record-conjoined [recordId]="recordId">
           </eg-catalog-record-conjoined>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="Shelf Browse" i18n-title id="cnbrowse">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'cnbrowse'" role="tab">
+        <a i18n ngbNavLink>Shelf Browse</a>
+        <ng-template ngbNavContent>
           <ng-container *ngIf="summary">
             <div class="mt-2">
               <eg-catalog-cn-browse-results [bibSummary]="summary">
@@ -100,8 +109,10 @@
             </div>
           </ng-container>
         </ng-template>
-      </ngb-tab>
-    </ngb-tabset>
+      </li>
+    </ul>
+
+    <div [ngbNavOutlet]="recordTabs" class="mt-2"></div>
   </div>
 </div>
 

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.ts b/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.ts
index 80e6e19..619a5a0 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.ts
@@ -1,5 +1,5 @@
 import {Component, OnInit, Input, ViewChild, HostListener} from '@angular/core';
-import {NgbTabset, NgbTabChangeEvent} from '@ng-bootstrap/ng-bootstrap';
+import {NgbNav, NgbNavChangeEvent} from '@ng-bootstrap/ng-bootstrap';
 import {Router, ActivatedRoute, ParamMap} from '@angular/router';
 import {PcrudService} from '@eg/core/pcrud.service';
 import {IdlObject} from '@eg/core/idl.service';
@@ -25,7 +25,7 @@ export class RecordComponent implements OnInit {
     recordTab: string;
     summary: BibRecordSummary;
     searchContext: CatalogSearchContext;
-    @ViewChild('recordTabs', { static: true }) recordTabs: NgbTabset;
+    @ViewChild('recordTabs', { static: true }) recordTabs: NgbNav;
     @ViewChild('marcEditor', {static: false}) marcEditor: MarcEditorComponent;
 
     @ViewChild('holdingsMaint', {static: false})
@@ -83,7 +83,7 @@ export class RecordComponent implements OnInit {
 
     // Changing a tab in the UI means changing the route.
     // Changing the route ultimately results in changing the tab.
-    beforeTabChange(evt: NgbTabChangeEvent) {
+    beforeNavChange(evt: NgbNavChangeEvent) {
 
         // prevent tab changing until after route navigation
         evt.preventDefault();

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.css b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.css
index 4d2842e..100da1b 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.css
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.css
@@ -23,6 +23,4 @@ select.form-control:not([size]):not([multiple]) {
 
 .tab-content {
   padding: 5px;
-  margin-top: 25px;
-  font-weight: bold;
 }

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
index e75ef48..9655e29 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
@@ -31,9 +31,10 @@
   
   <div *ngIf="!hideForm()" class="row pt-3 pb-1 mb-1">
   <div class="col-lg-8">
-    <ngb-tabset #searchTabs [activeId]="searchTab" (tabChange)="onTabChange($event)">
-      <ngb-tab title="Keyword Search" i18n-title id="term">
-        <ng-template ngbTabContent>
+    <ul ngbNav #searchTabs="ngbNav" [(activeId)]="searchTab" (navChange)="onNavChange($event)" [keyboard]="true" class="nav-tabs">
+      <li [ngbNavItem]="'term'">
+        <a i18n ngbNavLink>Keyword Search</a>
+        <ng-template ngbNavContent>
           <div class="row"
             [ngClass]="{'mt-4': idx === 0, 'mt-1': idx > 0}"
             *ngFor="let q of context.termSearch.query; let idx = index; trackBy:trackByIdx">
@@ -259,9 +260,10 @@
             </div>
           </div>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="Numeric Search" i18n-title id="ident">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'ident'">
+        <a i18n ngbNavLink>Numeric Search</a>
+        <ng-template ngbNavContent>
           <div class="row mt-4">
             <div class="col-lg-12">
               <div class="form-inline">
@@ -285,9 +287,10 @@
             </div>
           </div>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="MARC Search" i18n-title id="marc">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'marc'">
+        <a i18n ngbNavLink>MARC Search</a>
+        <ng-template ngbNavContent>
           <div class="row mt-4">
             <div class="col-lg-12">
               <div class="form-inline mt-2" 
@@ -327,9 +330,10 @@
             </div>
           </div>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="Browse" i18n-title id="browse">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'browse'">
+        <a i18n ngbNavLink>Browse</a>
+        <ng-template ngbNavContent>
           <div class="row mt-4">
             <div class="col-lg-12 form-inline">
               <label for="field-class" i18n>Browse for</label>
@@ -349,9 +353,10 @@
             </div>
           </div>
         </ng-template>
-      </ngb-tab>
-      <ngb-tab title="Shelf Browse" i18n-title id="cnbrowse">
-        <ng-template ngbTabContent>
+      </li>
+      <li [ngbNavItem]="'cnbrowse'">
+        <a i18n ngbNavLink>Shelf Browse</a>
+        <ng-template ngbNavContent>
           <div class="row mt-4">
             <div class="col-lg-12 form-inline">
               <label for="cnbrowse-term-input" i18n>
@@ -365,8 +370,11 @@
             </div>
           </div>
         </ng-template>
-      </ngb-tab>      
-    </ngb-tabset>
+      </li>      
+    </ul>
+
+    <div [ngbNavOutlet]="searchTabs" class="mt-2"></div>
+
   </div>
   <div class="col-lg-4">
     <div class="row">

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.ts b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.ts
index c7d9898..60c92e5 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.ts
@@ -6,7 +6,7 @@ import {ServerStoreService} from '@eg/core/server-store.service';
 import {CatalogService} from '@eg/share/catalog/catalog.service';
 import {CatalogSearchContext, CatalogSearchState} from '@eg/share/catalog/search-context';
 import {StaffCatalogService} from './catalog.service';
-import {NgbTabset, NgbTabChangeEvent} from '@ng-bootstrap/ng-bootstrap';
+import {NgbNav, NgbNavChangeEvent} from '@ng-bootstrap/ng-bootstrap';
 
 // Maps opac-style default tab names to local tab names.
 const LEGACY_TAB_NAME_MAP = {
@@ -144,7 +144,7 @@ export class SearchFormComponent implements OnInit, AfterViewInit {
         });
     }
 
-    onTabChange(evt: NgbTabChangeEvent) {
+    onNavChange(evt: NgbNavChangeEvent) {
         this.searchTab = evt.nextId;
 
         // Focus after tab-change event has a chance to complete

diff --git a/Open-ILS/src/eg2/src/app/staff/circ/holds/pull-list.component.ts b/Open-ILS/src/eg2/src/app/staff/circ/holds/pull-list.component.ts
index 298325b..70470a7 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/circ/holds/pull-list.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/circ/holds/pull-list.component.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {NgbTabset, NgbTabChangeEvent} from '@ng-bootstrap/ng-bootstrap';
+import {NgbNav, NgbNavChangeEvent} from '@ng-bootstrap/ng-bootstrap';
 import {Router, ActivatedRoute, ParamMap} from '@angular/router';
 import {PcrudService} from '@eg/core/pcrud.service';
 import {AuthService} from '@eg/core/auth.service';

diff --git a/Open-ILS/src/eg2/src/styles.css b/Open-ILS/src/eg2/src/styles.css
index 4e1366e..d96e5ad 100644 (file)
--- a/Open-ILS/src/eg2/src/styles.css
+++ b/Open-ILS/src/eg2/src/styles.css
@@ -288,7 +288,7 @@ body>.dropdown-menu {z-index: 2100;}
  * 5. Turning off view encapsulation for the acq search component
  *    breaks a lot of styles.
  */
-#acq-search-page ngb-tabset .nav.nav-tabs {
+#acq-search-page ngbNav .nav.nav-tabs {
   background-color: rgb(247, 247, 247);
 }