From 365e6c38f52029e9c4464c277f81d1747b9cf9c5 Mon Sep 17 00:00:00 2001 From: Stephanie Leary Date: Wed, 19 Oct 2022 15:49:41 -0500 Subject: [PATCH] LP1948693 Migrate from NgbTabset to ngbNav Updates the deprecated NgbTabset components to ngbNav and adds directive for keyboard navigation. See https://gist.github.com/stephanieleary/800b9f2b1d9c08cc66d694daaa1788b9 for a quick guide to the markup changes involved. Screens to test: 1. /staff/acq/provider, right click an existing provider to show details tabs 2. /staff/admin/local/negative-balances 3. /staff/admin/local/action/survey, edit an existing survey, test Edit Survey and Q&A tabs 4. /staff/admin/server/actor/org_unit, note that Addresses tab has a second set of tabs underneath 5. /staff/admin/server/actor/org_unit_type, note that eg-tree has also changed here 6. /staff/admin/server/permission/grp_tree, choose a group to see tabs 7. /staff/admin/server/config/print_template 8. /staff/booking/create_reservation 9. /staff/booking/manage_reservations, filter reservations section 10. /staff/booking/return 11. /staff/cat/authority/browse 12. /staff/cat/vandelay/import and all import/export tabs 13. /staff/cat/bucket/record/view 14. /staff/catalog/search 15. /staff/circ/holds/pull-list, right click a hold, choose Show Hold Details, the tabs are at the bottom of the screen Test plan: Note that you cannot navigate tabbed interfaces using the tab key on your keyboard. Apply the patch, then visit the screens listed above. You should be able to use the tab key to move sequentially through all the tabs. Pressing Enter on an inactive tab should make it active, just as clicking it would. You should not be able to click or press Enter to activate a disabled tab. You should be able to move from the last tab in the list into the first focusable element in the active tab's content panel. If you spot a tab content panel that doesn't contain a focusable element (i.e. links or inputs), let me know; we have to set its tabindex attribute manually. If a tab panel contains a second set of tabs, these should work as well. Note on ARIA and roles: Note that neither Bootstrap 5 nor ng-bootstrap are currently following the ARIA Authoring Practices Guide for tabs with manual activation (the recommended pattern for tab panels with complicated content, like form inputs or data tables), which does not recommend sequential movement: https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html. Therefore, we aren't following this pattern either. We can revisit this and/or take it up with Bootstrap. For now, running axe DevTools on any screen with navs will show ARIA role errors on role="tab" attributes. We are using ng-bootstrap's default ARIA roles for tabs, but they are incorrect. I am trying to get traction on a pull request to change the problem in ng-bootstrap, but in the meantime, we are not using the automatic [roles] directive. Role attributes have been set explicitly on all tabs and their containing elements. Note on eg-tree CSS: In the Org Unit Type screens, there was previously some inline CSS related to eg-tree that was causing compiler errors. I have moved this to a separate CSS file, and will revisit eg-tree styles more generally in another upcoming project. Signed-off-by: Stephanie Leary Signed-off-by: Bill Erickson --- .../app/staff/acq/lineitem/detail.component.html | 14 ++--- .../staff/acq/provider/acq-provider.component.html | 62 +++++++++++-------- .../staff/acq/provider/acq-provider.component.ts | 6 +- .../app/staff/acq/search/acq-search.component.html | 18 +++--- .../staff/admin/acq/claiming-admin.component.html | 18 +++--- .../acq/funds/fund-details-dialog.component.html | 22 +++---- ...nding-source-transactions-dialog.component.html | 10 +-- .../app/staff/admin/acq/funds/funds.component.html | 14 ++--- .../local/cash-reports/cash-reports.component.html | 10 +-- .../circ_limit_set_edit.component.html | 10 +-- .../copy-loc-order/copy-loc-order.component.ts | 2 +- .../course-associate-material.component.html | 14 ++--- .../course-reserves/course-list.component.html | 14 ++--- .../course-reserves/course-page.component.html | 18 +++--- .../local/negative-balances/list.component.ts | 2 +- .../admin/local/survey/survey-edit.component.html | 20 +++--- .../admin/local/survey/survey-edit.component.ts | 4 +- .../local/triggers/trigger-edit.component.html | 22 +++---- .../admin/local/triggers/triggers.component.html | 18 +++--- .../app/staff/admin/server/org-addr.component.html | 47 +++++++------- .../app/staff/admin/server/org-addr.component.ts | 11 ++-- .../admin/server/org-unit-type.component.html | 6 +- .../staff/admin/server/org-unit-type.component.ts | 3 +- .../app/staff/admin/server/org-unit.component.css | 14 +++++ .../app/staff/admin/server/org-unit.component.html | 41 +++++++------ .../app/staff/admin/server/org-unit.component.ts | 12 ++-- .../admin/server/perm-group-tree.component.html | 21 ++++--- .../admin/server/perm-group-tree.component.ts | 6 ++ .../admin/server/print-template.component.html | 21 ++++--- .../staff/admin/server/print-template.component.ts | 6 +- .../booking/create-reservation.component.html | 46 +++++++------- .../staff/booking/create-reservation.component.ts | 5 +- .../booking/manage-reservations.component.html | 36 +++++------ .../staff/booking/manage-reservations.component.ts | 4 +- .../src/app/staff/booking/return.component.html | 21 ++++--- .../eg2/src/app/staff/booking/return.component.ts | 13 ++-- .../app/staff/cat/authority/manage.component.html | 22 ++++--- .../app/staff/cat/authority/manage.component.ts | 4 +- .../cat/vandelay/display-attrs.component.html | 20 +++--- .../staff/cat/vandelay/display-attrs.component.ts | 4 +- .../staff/cat/vandelay/match-set.component.html | 21 ++++--- .../app/staff/cat/vandelay/match-set.component.ts | 4 +- .../cat/vandelay/queued-record.component.html | 35 ++++++----- .../staff/cat/vandelay/queued-record.component.ts | 4 +- .../app/staff/cat/volcopy/volcopy.component.html | 14 ++--- .../app/staff/catalog/record/record.component.html | 71 +++++++++++++--------- .../app/staff/catalog/record/record.component.ts | 6 +- .../app/staff/catalog/search-form.component.css | 2 - .../app/staff/catalog/search-form.component.html | 42 +++++++------ .../src/app/staff/catalog/search-form.component.ts | 4 +- .../app/staff/circ/holds/pull-list.component.ts | 2 +- .../circ/item/event-log/event-log.component.html | 10 +-- .../circ/patron/bill-statement.component.html | 10 +-- .../circ/patron/billing-history.component.html | 10 +-- .../src/app/staff/circ/patron/edit.component.html | 10 +-- .../circ/patron/event-log/event-log.component.html | 10 +-- .../src/app/staff/circ/patron/holds.component.html | 10 +-- .../src/app/staff/circ/patron/items.component.html | 14 ++--- .../app/staff/circ/patron/patron.component.html | 30 ++++----- .../src/app/staff/circ/patron/perms.component.html | 10 +-- .../reporter/simple/simple-reporter.component.html | 10 +-- .../staff/reporter/simple/sr-editor.component.html | 18 +++--- .../share/buckets/bucket-dialog.component.html | 14 ++--- .../app/staff/share/holds/detail.component.html | 10 +-- .../staff/share/marc-edit/editor.component.html | 10 +-- Open-ILS/src/eg2/src/styles.css | 2 +- 66 files changed, 570 insertions(+), 474 deletions(-) create mode 100644 Open-ILS/src/eg2/src/app/staff/admin/server/org-unit.component.css diff --git a/Open-ILS/src/eg2/src/app/staff/acq/lineitem/detail.component.html b/Open-ILS/src/eg2/src/app/staff/acq/lineitem/detail.component.html index 386dfc160a..ed3ad66a6a 100644 --- a/Open-ILS/src/eg2/src/app/staff/acq/lineitem/detail.component.html +++ b/Open-ILS/src/eg2/src/app/staff/acq/lineitem/detail.component.html @@ -1,8 +1,8 @@
-
    -
  • - Attributes +
      +
    • + Attributes
      @@ -14,8 +14,8 @@
      • -
    • - MARC View +
    • + MARC View
      @@ -25,8 +25,8 @@
      • -
    • - MARC Edit +
    • + MARC Edit
      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 d769a72df5..30fa372853 100644 --- 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 @@
      - - - + + +
      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 159bcb92ec..53228fa0e4 100644 --- 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/acq/search/acq-search.component.html b/Open-ILS/src/eg2/src/app/staff/acq/search/acq-search.component.html index 1decc23a07..1f9798cbb4 100644 --- a/Open-ILS/src/eg2/src/app/staff/acq/search/acq-search.component.html +++ b/Open-ILS/src/eg2/src/app/staff/acq/search/acq-search.component.html @@ -6,21 +6,21 @@
      -
      -
        -
      • - Summary +
          +
        • + Summary
          @@ -69,8 +69,8 @@
          • -
        • - Allocations +
        • + Allocations
          • -
        • - Transfers +
        • + Transfers
          • -
        • - Debits +
        • + Debits
          • -
        • - Tags +
        • + Tags
          diff --git a/Open-ILS/src/eg2/src/app/staff/admin/acq/funds/funding-source-transactions-dialog.component.html b/Open-ILS/src/eg2/src/app/staff/admin/acq/funds/funding-source-transactions-dialog.component.html index 22d449575c..7225ac4166 100644 --- a/Open-ILS/src/eg2/src/app/staff/admin/acq/funds/funding-source-transactions-dialog.component.html +++ b/Open-ILS/src/eg2/src/app/staff/admin/acq/funds/funding-source-transactions-dialog.component.html @@ -20,9 +20,9 @@
          -
            -
          • - Credits +
              +
            • + Credits
              • -
            • - Allocations +
            • + Allocations
                -
              • - Funds + (navChange)="onNavChange($event)" [keyboard]="true" [roles]="false" role="tablist"> +
              • + Funds
                • -
              • - Funding Sources +
              • + Funding Sources
                • -
              • - Fund Tags +
              • + Fund Tags
                diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.html b/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.html index 37023f2fc5..45e65908a0 100644 --- a/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.html +++ b/Open-ILS/src/eg2/src/app/staff/admin/local/cash-reports/cash-reports.component.html @@ -29,10 +29,10 @@
              -
                -
              • - Desk Payments +
              • + Desk Payments
                @@ -66,8 +66,8 @@
                • -
              • - Staff User Payments +
              • + Staff User Payments
                diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/circ_limit_set/circ_limit_set_edit.component.html b/Open-ILS/src/eg2/src/app/staff/admin/local/circ_limit_set/circ_limit_set_edit.component.html index edeb545057..9a14a873bc 100644 --- a/Open-ILS/src/eg2/src/app/staff/admin/local/circ_limit_set/circ_limit_set_edit.component.html +++ b/Open-ILS/src/eg2/src/app/staff/admin/local/circ_limit_set/circ_limit_set_edit.component.html @@ -1,10 +1,10 @@ -
                  -
                • - Edit Circulation Limit Set +
                • + Edit Circulation Limit Set
                  • -
                • - Edit Linked Entities +
                • + Edit Linked Entities
                  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 fb9eb4e2aa..3ac42bcad0 100644 --- 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/course-reserves/course-associate-material.component.html b/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-associate-material.component.html index f165d26ece..7f74dc17ad 100644 --- a/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-associate-material.component.html +++ b/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-associate-material.component.html @@ -31,9 +31,9 @@
                  -
                    -
                  • - Associate item +
                      +
                    • + Associate item
                      @@ -162,8 +162,8 @@
                      • -
                    • - Associate brief record +
                    • + Associate brief record
                      @@ -193,8 +193,8 @@
                      • -
                    • - Associate electronic resource from catalog +
                    • + Associate electronic resource from catalog
                      diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-list.component.html b/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-list.component.html index e2e1315c88..97ecff8475 100644 --- a/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-list.component.html +++ b/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-list.component.html @@ -11,9 +11,9 @@ -
                        -
                      • - Course list +
                          +
                        • + Course list
                          @@ -52,14 +52,14 @@
                          • -
                        • - Terms +
                        • + Terms
                          • -
                        • - Course roles +
                        • + Course roles diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-page.component.html b/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-page.component.html index d8bae1bc6e..0310f2c901 100644 --- a/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-page.component.html +++ b/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-page.component.html @@ -21,11 +21,11 @@
                      -
                        +
                          -
                        • - Edit course +
                        • + Edit course
                          @@ -45,8 +45,8 @@
                          • -
                        • - Course materials +
                        • + Course materials -
                        • - Course users +
                        • + Course users -
                        • - Course terms +
                        • + Course terms 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 2317ab92a5..822f1f5d79 100644 --- 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 f5d1c2cb96..b3d5895e37 100644 --- 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 @@ - - - +
                  - - +
                  • +
                + +
                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 73b3a7bca6..550b52c0d8 100644 --- 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/local/triggers/trigger-edit.component.html b/Open-ILS/src/eg2/src/app/staff/admin/local/triggers/trigger-edit.component.html index 34a66a86be..6084e2ca2b 100644 --- a/Open-ILS/src/eg2/src/app/staff/admin/local/triggers/trigger-edit.component.html +++ b/Open-ILS/src/eg2/src/app/staff/admin/local/triggers/trigger-edit.component.html @@ -3,10 +3,10 @@
                -
                  -
                • - Edit Definition +
                • + Edit Definition - - +
                  • +
                +
                \ No newline at end of file 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 0b27fd7417..dd3be36fd8 100644 --- 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; @@ -170,7 +170,7 @@ export class PrintTemplateComponent implements OnInit { this.org.list()[0]; } - 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 4dc4d89c8c..c881afd34c 100644 --- 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 @@

                Reservation details

                - - - + + +
                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 6e3ae3563b..ad83b6b677 100644 --- 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; 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 1a7e94b8da..fab42458f1 100644 --- 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 @@

                Filter reservations

                - - - + + +
                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 25ef296c32..5d4cea9d1b 100644 --- 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 82758dd704..ca6c8a4486 100644 --- 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 @@
                - - - +
                  +
                • + By patron +
                  @@ -24,9 +26,10 @@
                  - - - +
                  • +
                • + By resource +
                  @@ -41,6 +44,8 @@
                  - - +
                  • +
                + +
                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 f37e10e8a3..fad7764b4d 100644 --- 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'; @@ -21,10 +21,11 @@ export class ReturnComponent implements OnInit, OnDestroy { patronId: number; findPatron: FormGroup; subscriptions: Subscription[] = []; + patronTab: any; 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; constructor( @@ -44,6 +45,10 @@ export class ReturnComponent implements OnInit, OnDestroy { return this.handleParams$(params); })).subscribe(); + this.patronTab = + this.store.getItem('eg.booking.return.tab') + || 'patron_tab'; + this.findPatron = new FormGroup({ 'patronBarcode': new FormControl(null, [Validators.required], @@ -95,7 +100,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 c1951feda7..2d77dd4080 100644 --- 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 @@
          - - - + +
          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 95c0193f75..5e70b6316e 100644 --- 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 78a86ed34c..4249fe0d96 100644 --- 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 @@ - - - + + +
          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 7d1eceb4d4..86c60c792d 100644 --- 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 fd69cf93bd..b12f7da5cf 100644 --- 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 @@
      - - - + + +
      \ 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 64a4b35188..34a2f412ad 100644 --- 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 ed643d90a0..21fb720a0d 100644 --- 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,15 +9,18 @@ - - - + + +
      \ 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 872f0e59e7..120f84a68a 100644 --- 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/cat/volcopy/volcopy.component.html b/Open-ILS/src/eg2/src/app/staff/cat/volcopy/volcopy.component.html index bfa92177f2..5715df449b 100644 --- a/Open-ILS/src/eg2/src/app/staff/cat/volcopy/volcopy.component.html +++ b/Open-ILS/src/eg2/src/app/staff/cat/volcopy/volcopy.component.html @@ -17,10 +17,10 @@
      -
        -
      • - Holdings +
      • + Holdings
        • -
      • - Item Attributes +
      • + Item Attributes
        • -
      • - Preferences +
      • + Preferences
        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 d4f711e2ce..f0428fa7f8 100644 --- 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
        - - - + + +
        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 80e6e19e46..619a5a0f1f 100644 --- 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 4d2842e618..100da1b604 100644 --- 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 e75ef48fe9..9db594a0ad 100644 --- 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 @@
        - - - +
        - - - +
        • +
      • + Numeric Search +
        @@ -285,9 +287,10 @@
        - - - +
        • +
      • + MARC Search +
        - - - +
        • +
      • + Browse +
        @@ -349,9 +353,10 @@
        - - - +
        • +
      • + Shelf Browse +
        - - +
        • +
      + +
      +
      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 c7d9898be9..60c92e5ece 100644 --- 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 298325bc14..70470a708e 100644 --- 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/app/staff/circ/item/event-log/event-log.component.html b/Open-ILS/src/eg2/src/app/staff/circ/item/event-log/event-log.component.html index 8b3c707f5d..51338a63d2 100644 --- a/Open-ILS/src/eg2/src/app/staff/circ/item/event-log/event-log.component.html +++ b/Open-ILS/src/eg2/src/app/staff/circ/item/event-log/event-log.component.html @@ -2,15 +2,15 @@ -