Merge pull request #589 from petridishdev/advanced-search-loading

Adds loading prompt to advanced search
bcgov · Oct 31, 2020 · f7a05da · f7a05da
2 parents 24c9a89 + d3f371c
commit f7a05da
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 29 deletions.
diff --git a/client/src/app/search/advanced-search.component.ts b/client/src/app/search/advanced-search.component.ts
@@ -36,6 +36,18 @@ const FilterSpec = [
   {
     name: "inactive",
     label: "general.period-historical"
+  },
+  {
+    name: "inactive",
+    label: "attribute.entity_status",
+    options: [
+      {
+        tlabel: "general.show-inactive",
+        value: "true"
+      }
+    ],
+    defval: "false",
+    blank: true
   }
 ];
 
@@ -55,9 +67,8 @@ export class AdvancedSearchComponent implements OnInit, OnDestroy {
 
   private _refreshSubject = new BehaviorSubject<boolean>(false);
   private _filters = new Filter.FieldSet(FilterSpec);
-  private _cLoader = new Fetch.ModelListLoader(Model.CredentialFacetSearchResult, { persist: true });
-  private _ctLoader = new Fetch.ModelListLoader(Model.CredentialType, { persist: true });
-  private _queryParamMap: any = this.route.snapshot.queryParamMap;
+  private _cLoader = new Fetch.ModelListLoader(Model.CredentialFacetSearchResult, { persist: false });
+  private _ctLoader = new Fetch.ModelListLoader(Model.CredentialType, { persist: false });
   private _queryParams$: Observable<any> = this.route.queryParams;
   private _refresh$: Observable<boolean> = this._refreshSubject.asObservable();
   private _searchTriggered: boolean = false;
@@ -131,9 +142,9 @@ export class AdvancedSearchComponent implements OnInit, OnDestroy {
         })))
       );
 
-    this.credentials$ = this._cLoader.ready
+    this.credentials$ = this._cLoader.stream
       .pipe(
-        tap(data => this.loadFacets(data))
+        tap(stream => stream.data && this.loadFacets(stream))
       );
 
     this._filters.stream
@@ -144,7 +155,10 @@ export class AdvancedSearchComponent implements OnInit, OnDestroy {
 
     combineLatest([
       this._refresh$,
-      this._queryParams$,
+      this._queryParams$
+        .pipe(
+          tap(() => this.patchForm())
+        )
     ])
       .subscribe(([refresh]) => {
         if (!refresh) {
@@ -162,10 +176,11 @@ export class AdvancedSearchComponent implements OnInit, OnDestroy {
   }
 
   private patchForm(): void {
+    const queryParamMap: any = this.route.snapshot.queryParamMap;
     this.fg.patchValue({
-      text: this._queryParamMap.get('name') || '',
-      type: this._queryParamMap.get('topic_credential_type_id') || '',
-      archived: this._queryParamMap.get('inactive') || 'false'
+      text: queryParamMap.get('name') || '',
+      type: queryParamMap.get('topic_credential_type_id') || '',
+      archived: queryParamMap.get('inactive') || 'false'
     });
   }
 

diff --git a/client/themes/base/search/advanced-search.component.html b/client/themes/base/search/advanced-search.component.html
@@ -25,7 +25,7 @@ <h4 class="col-md-5 d-none d-md-block">What this search type does</h4>
 
 <section class="container" *ngIf="(fg.touched || fg.dirty) && blankQuery">
   <div class="row mt-4 mt-md-5">
-    <div class="col-md-8 col-lg-9 rows">
+    <div class="col-12">
       <div class="alert alert-info">{{ 'search.advanced-prompt' | translate }}</div>
     </div>
   </div>

diff --git a/client/themes/base/search/search-result-list.component.html b/client/themes/base/search/search-result-list.component.html
@@ -1,25 +1,28 @@
 <div class="row results mt-4 mt-md-5">
-  <div class="col-md-8 col-lg-9 rows">
-    <error-message [error]="result.error" [title]="'search.results-error' | translate"></error-message>
-    <div class="alert alert-info" *ngIf="blankQuery && !result.loading && !result.data">
-      {{ 'search.prompt' | translate }}
-    </div>
-    <div class="alert alert-info" *ngIf="result.loading && !result.data">
-      {{ 'search.running' | translate }}
-    </div>  
-    <ng-container *ngIf="result.data as creds">
+  <ng-container *ngIf="result?.data as creds else nodata">
+    <div class="col-md-8 col-lg-9 rows">
       <h3 class="control-label mb-1">{{ 'search.results-title' | translate }}</h3>
-      <ng-container *ngIf="creds.length">
+      <ng-container *ngIf="creds?.length else nocreds">
         <cred-list [records]="creds" format="search"></cred-list>
         <search-nav (nav)="onNav($event)" [info]="result.info" [loading]="result.loading"></search-nav>
       </ng-container>
-      <div class="alert alert-info" *ngIf="!creds.length">
-        {{ 'search.no-results' | translate }}
+      <ng-template #nocreds>
+        <div class="alert alert-info">{{ 'search.no-results' | translate }}</div>
+      </ng-template>
+    </div>
+    <div class="col-md-4 col-lg-3 facets">
+      <search-filters #searchFilters [filters]="filters"></search-filters>
+    </div>
+  </ng-container>
+  <ng-template #nodata>
+    <div class="col-12">
+      <error-message [error]="result.error" [title]="'search.results-error' | translate"></error-message>
+      <div class="alert alert-info" *ngIf="!result?.loading && blankQuery">
+        {{ 'search.prompt' | translate }}
       </div>
-    </ng-container>
-  </div>
-
-  <div class="col-md-4 col-lg-3 facets">
-    <search-filters #searchFilters [filters]="filters"></search-filters>
-  </div>
-</div>
+      <div class="alert alert-info" *ngIf="result?.loading">
+        {{ 'search.running' | translate }}
+      </div>
+    </div>
+  </ng-template>
+</div>