LP1913338 Catalog search form visibility stickiness WIP

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

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 6edd2e0..7059d49 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
@@ -7,16 +7,21 @@
 
 <div id='staffcat-search-form'>
 
-  <div *ngIf="!showThyself" class="row pt-1 pb-1 mb-2 pr-2">
+  <div *ngIf="canBeHidden()" class="row pt-1 pr-2">
     <div class="col-lg-12 d-flex">
       <div class="flex-1"></div><!-- push right -->
-      <a (click)="toggleFormDisplay()" class="label-with-material-icon no-href" i18n>
-        Show Search Form <span class="material-icons">unfold_more</span>
+      <a (click)="toggleFormDisplay()" class="label-with-material-icon no-href">
+        <ng-container *ngIf="hideForm()" i18n>
+          Show Search Form <span class="material-icons">unfold_more</span>
+        </ng-container>
+        <ng-container *ngIf="!hideForm()" i18n>
+          Hide Search Form <span class="material-icons">unfold_less</span>
+        </ng-container>
       </a>
     </div>
   </div>
   
-  <div *ngIf="showThyself" class="row pt-3 pb-3 mb-3">
+  <div *ngIf="!hideForm()" class="row pt-3 pb-3 mb-3">
   <div class="col-lg-8">
     <ngb-tabset #searchTabs [activeId]="searchTab" (tabChange)="onTabChange($event)">
       <ngb-tab title="Keyword Search" i18n-title id="term">

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 89bfc5b..41eceb3 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
@@ -17,8 +17,8 @@ const LEGACY_TAB_NAME_MAP = {
 
 // Automatically collapse the search form on these pages
 const COLLAPSE_ON_PAGES = [
-    new RegExp(/catalog\/record\//),
-    new RegExp(/catalog\/hold\//)
+    new RegExp(/staff\/catalog\/record\//),
+    new RegExp(/staff\/catalog\/hold\//)
 ];
 
 @Component({
@@ -35,9 +35,10 @@ export class SearchFormComponent implements OnInit, AfterViewInit {
     copyLocations: IdlObject[];
     searchTab: string;
 
-    // Display the full form if true, otherwise display the expandy.
-    showThyself = true;
-    showThyselfSetting = false;
+    // What does the user want us to do?
+    // On pages where we can be hidded, start out hidden, unless the
+    // user has opted to show us.
+    showSearchFormSetting = false;
 
     constructor(
         private renderer: Renderer2,
@@ -52,11 +53,6 @@ export class SearchFormComponent implements OnInit, AfterViewInit {
 
     }
 
-    toggleFormDisplay() {
-        this.showThyself = !this.showThyself;
-        this.store.setItem('eg.catalog.search.form.open', this.showThyself);
-    }
-
     ngOnInit() {
         this.ccvmMap = this.cat.ccvmMap;
         this.cmfMap = this.cat.cmfMap;
@@ -77,20 +73,27 @@ export class SearchFormComponent implements OnInit, AfterViewInit {
         });
 
         this.store.getItem('eg.catalog.search.form.open')
-        .then(value => this.showThyselfSetting = value);
-
-        this.router.events.subscribe(routeEvent => {
-            if (routeEvent instanceof NavigationEnd) {
-                this.showThyself = true;
-                if (!this.showThyselfSetting) {
-                    COLLAPSE_ON_PAGES.forEach(pageRegex => {
-                        if (routeEvent.url.match(pageRegex)) {
-                            this.showThyself = false;
-                        }
-                    });
-                }
+        .then(value => this.showSearchFormSetting = value);
+    }
+
+    // Are we on a page where the form is allowed to be collapsed.
+    canBeHidden(): boolean {
+        for (let idx = 0; idx < COLLAPSE_ON_PAGES.length; idx++) {
+            const pageRegex = COLLAPSE_ON_PAGES[idx];
+            if (this.router.url.match(pageRegex)) {
+                return true;
             }
-        });
+        }
+        return false;
+    }
+
+    hideForm(): boolean {
+        return this.canBeHidden() && !this.showSearchFormSetting;
+    }
+
+    toggleFormDisplay() {
+        this.showSearchFormSetting = !this.showSearchFormSetting;
+        this.store.setItem('eg.catalog.search.form.open', this.showSearchFormSetting);
     }
 
     ngAfterViewInit() {