LP#1857150: adjust routing and single vs. double-click actions
authorGalen Charlton <gmc@equinoxinitiative.org>
Wed, 9 Sep 2020 16:31:28 +0000 (12:31 -0400)
committerJason Etheridge <jason@EquinoxInitiative.org>
Thu, 10 Sep 2020 20:36:38 +0000 (16:36 -0400)
This patch adjusts the routing to use a custom matcher so that
the base AcqProviderComponent doesn't get reinitalized unecessarily
when moving from the search form to a provider record and back. It
also ensures that when starting from the search form, single-clicking
a result won't hide the search form, while double-clicking will.

Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Signed-off-by: Ruth Frasur <rfrasur@library.in.gov>
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Jason Etheridge <jason@EquinoxInitiative.org>
Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider.component.html
Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider.component.ts
Open-ILS/src/eg2/src/app/staff/acq/provider/routing.module.ts

index 69aebda..7413707 100644 (file)
@@ -36,7 +36,7 @@
 
 <h3 i18n *ngIf="id && showSearchForm">{{providerRecord.currentProvider?.record.name()}} ({{providerRecord.currentProvider?.record.code()}})</h3>
 <div class="row">
-<div class="col-lg-auto">
+<div class="col-lg-auto" [hidden]="!id">
   <eg-acq-provider-summary-pane #acqSearchProviderSummary
     (summaryToggled)="onSummaryToggled($event)" [providerId]="id">
   </eg-acq-provider-summary-pane>
index 895407b..7eb6899 100644 (file)
@@ -64,9 +64,10 @@ export class AcqProviderComponent implements OnInit, AfterViewInit, OnDestroy {
         ).subscribe(routeEvent => {
             if (routeEvent instanceof NavigationEnd) {
                 if (this.previousUrl != null &&
-                    routeEvent.url === '/staff/acq/provider' &&
-                    this.previousUrl === routeEvent.url) {
+                    routeEvent.url === '/staff/acq/provider') {
                     this.acqProviderResults.resetSearch();
+                    this.showSearchForm = true;
+                    this.id = null;
                 }
                 this.previousUrl = routeEvent.url;
             }
@@ -82,8 +83,17 @@ export class AcqProviderComponent implements OnInit, AfterViewInit, OnDestroy {
         this.defaultTabType =
             this.store.getLocalItem('eg.acq.provider.default_tab') || 'details';
 
+        const keepSearchForm = history.state.hasOwnProperty('keepSearchForm') ?
+                                  history.state.keepSearchForm :
+                                  false;
+        if (keepSearchForm) {
+            this.showSearchForm = true;
+        }
+
         if (idParam) {
-            this.showSearchForm = false;
+            if (!keepSearchForm) {
+                this.showSearchForm = false;
+            }
             this.id = idParam;
             if (!tabTypeParam) {
                 this.activeTab = this.defaultTabType;
@@ -92,7 +102,9 @@ export class AcqProviderComponent implements OnInit, AfterViewInit, OnDestroy {
         }
 
         if (tabTypeParam) {
-            this.showSearchForm = false;
+            if (!keepSearchForm) {
+                this.showSearchForm = false;
+            }
             if (this.validTabTypes.includes(tabTypeParam)) {
                 this.activeTab = tabTypeParam;
             } else {
@@ -132,7 +144,10 @@ export class AcqProviderComponent implements OnInit, AfterViewInit, OnDestroy {
                     this.showSearchForm = false;
                 }
                 this.activeTab = this.defaultTabType;
-                this.router.navigate(['/staff', 'acq', 'provider', this.id, this.activeTab]);
+                this.router.navigate(
+                    ['/staff', 'acq', 'provider', this.id, this.activeTab],
+                    { state: { keepSearchForm: !hideSearchForm } }
+                );
             });
         };
 
index c8e0686..32f6785 100644 (file)
@@ -1,19 +1,37 @@
 import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import {RouterModule, Routes, UrlMatchResult} from '@angular/router';
 import {AcqProviderComponent} from './acq-provider.component';
 import {ProviderResolver, CanLeaveAcqProviderGuard} from './resolver.service';
 
 const routes: Routes = [
-  { path: '',
-    component: AcqProviderComponent,
-    runGuardsAndResolvers: 'always'
-  },
-  { path: ':id',
-    component: AcqProviderComponent,
-    resolve: { providerResolver : ProviderResolver },
-    runGuardsAndResolvers: 'always'
-  },
-  { path: ':id/:tab',
+  { matcher: (segments) => {
+        // using a custom matcher so that we
+        // don't force a component re-initialization
+        // when navigating from the search form to a
+        // provider record
+        if (segments.length === 0) {
+            return {
+                consumed: segments,
+                posParams: {}
+            };
+        } else if (segments.length === 1) {
+            return {
+                consumed: segments,
+                posParams: {
+                    id: segments[0],
+                }
+            };
+        } else if (segments.length > 1) {
+            return {
+                consumed: segments,
+                posParams: {
+                    id: segments[0],
+                    tab: segments[1],
+                }
+            };
+        }
+        return <UrlMatchResult>(null as any);
+    },
     component: AcqProviderComponent,
     resolve: { providerResolver : ProviderResolver },
     canDeactivate: [CanLeaveAcqProviderGuard],