122 add back button for search results

libs/carrier-portal/landing-page/src/lib/landing-page/landing-page.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
@@ -10,4 +10,9 @@ import { RouterModule } from '@angular/router';
   styleUrls: ['./landing-page.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class LandingPageComponent {}
+export class LandingPageComponent implements OnInit {
+  ngOnInit(): void {
+    localStorage.removeItem('searchTerm');
+    localStorage.removeItem('searchType');
+  }
+}

libs/carrier-portal/member-coverage/src/lib/member-coverage/member-coverage.component.html

@@ -10,6 +10,8 @@
         else: loadingError
       "
     >
+      <button (click)="goBack()">Back</button>
+
       <h1 class="person-header">{{ person.person_name.full_name }}</h1>
 
       <div *ngFor="let member of person.members" class="member-information">
@@ -22,7 +24,7 @@ <h2>Personal Info</h2>
             <!-- This translation is coming from the generic translations -->
             <dd>{{ t(member.gender) | titlecase }}</dd>
             <dt>DOB</dt>
-            <dd>{{ member.dob | date : 'MM/dd/YYYY' }}</dd>
+            <dd>{{ member.dob | date: 'MM/dd/YYYY' }}</dd>
             <dt>SSN</dt>
             <dd>{{ member.ssn | formatSsn }}</dd>
           </dl>

libs/carrier-portal/member-coverage/src/lib/member-coverage/member-coverage.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, Location } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { filter, map, switchMap, Observable } from 'rxjs';
@@ -40,7 +40,7 @@ import { PersonContactInfoComponent } from './person-contact-info.component';
         scope: 'memberCoverage',
         loader: scopeLoader(
           (lang: string, root: string) =>
-            import(`./${root}/${lang}.json`) as Promise<Translation>
+            import(`./${root}/${lang}.json`) as Promise<Translation>,
         ),
       },
     },
@@ -54,16 +54,22 @@ export class MemberCoverageComponent {
   person$: Observable<DataResult<Person>> = this.route.paramMap.pipe(
     map((parameters: ParamMap) => parameters.get('id') ?? '___IGNORE___'),
     filter((idString: string) => idString !== '___IGNORE___'),
-    switchMap((id: string) => this.personService.getPerson(id))
+    switchMap((id: string) => this.personService.getPerson(id)),
   );
 
+  constructor(private location: Location) {}
+
+  goBack(): void {
+    this.location.back();
+  }
+
   public policyExpanded(pol: Policy): boolean {
     return !this.isCanceled(pol);
   }
 
   private subscriber(pol: Policy): Enrollee | undefined {
     return pol.enrollees.find(
-      (en: Enrollee) => en.hbx_member_id === pol.subscriber_hbx_member_id
+      (en: Enrollee) => en.hbx_member_id === pol.subscriber_hbx_member_id,
     );
   }
 

libs/carrier-portal/member-search/src/lib/member-search/member-search.component.html

@@ -75,12 +75,16 @@ <h1>{{ pageHeading$ | async }}</h1>
     </form>
   </div>
 
-  <div
-    class="search-results"
+  <div *ngIf="loading" class="search-results">Loading...</div>
+
+  <ng-container
     *ngIf="searchResults$ | async as searchResults; else beginSearch"
   >
-    <ng-container *ngIf="searchResults.length > 0; else noResults">
+    <div *ngIf="!loading && searchResults.length > 0" class="search-results">
       <h2>Search Results</h2>
+
+      <button (click)="resetResults()">Reset</button>
+
       <div class="person-result">
         <table class="ea-table">
           <thead>
@@ -112,15 +116,25 @@ <h2>Search Results</h2>
           </tbody>
         </table>
       </div>
-    </ng-container>
-  </div>
-  <ng-template #noResults>
-    <h2>{{ noResultsMessage }}</h2>
-  </ng-template>
+    </div>
+
+    <div
+      *ngIf="
+        !loading &&
+          searchResults.length === 0 &&
+          (pageHeading$ | async) !== 'Member Search';
+        else beginSearch
+      "
+      class="search-results"
+    >
+      <h2>Search Results</h2>
+      <p>{{ noResultsMessage }}</p>
+    </div>
+  </ng-container>
 
-  <ng-template #beginSearch
-    ><div class="empty-search-results">
-      <p>Begin searching to see results</p>
+  <ng-template #beginSearch>
+    <div *ngIf="!loading" class="search-results">
+      <p>Enter a search term to begin</p>
     </div>
   </ng-template>
 </ng-container>

libs/carrier-portal/member-search/src/lib/member-search/member-search.component.ts

@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnInit,
+} from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
@@ -29,7 +34,8 @@ import { TranslocoModule } from '@ngneat/transloco';
   styleUrls: ['./member-search.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MemberSearchComponent {
+export class MemberSearchComponent implements OnInit {
+  loading = false;
   searchType: 'member_id' | 'name' = 'member_id';
 
   searchTerm: string | undefined;
@@ -51,19 +57,32 @@ export class MemberSearchComponent {
       : 'No members found with that name';
   }
 
+  ngOnInit(): void {
+    if (localStorage.getItem('searchTerm')) {
+      this.searchTerm = localStorage.getItem('searchTerm') || '';
+      this.searchType =
+        (localStorage.getItem('searchType') as 'member_id') || '';
+
+      this.searchBySearchTerm();
+    }
+  }
+
   searchPersonByIdentifier(): void {
+    this.loading = true;
     this.personService
       .searchPeople({ q: this.query })
       .pipe(
         tap((results) => {
           this.pageHeading.next(this.generatePageHeading(this.query));
           this.searchResults.next(results);
-        })
+          this.loading = false;
+        }),
       )
       .subscribe();
   }
 
   searchPersonByName(): void {
+    this.loading = true;
     const searchRequest: PersonNameQueryRequest | undefined =
       constructNameQuery(this.firstName, this.lastName);
     if (searchRequest === undefined) {
@@ -75,24 +94,32 @@ export class MemberSearchComponent {
         tap((results) => {
           this.pageHeading.next(
             this.generatePageHeading(
-              `${this.firstName ?? ''} ${this.lastName ?? ''}`
-            )
+              `${this.firstName ?? ''} ${this.lastName ?? ''}`,
+            ),
           );
           this.searchResults.next(results);
-        })
+          this.loading = false;
+        }),
       )
       .subscribe();
   }
 
   searchBySearchTerm(): void {
     if (this.searchTerm && this.searchTerm.length > 1) {
-      if (this.searchType === 'member_id') {
-        this.query = this.searchTerm || '';
+      this.query = this.searchTerm || '';
+      const [firstName, lastName] = (this.searchTerm || '').split(' ');
+      this.firstName = firstName;
+      this.lastName = lastName;
+
+      localStorage.setItem('searchTerm', this.searchTerm);
+      localStorage.setItem('searchType', this.searchType);
+
+      if (
+        localStorage.getItem('searchTerm') === 'member_id' ||
+        this.searchType === 'member_id'
+      ) {
         this.searchPersonByIdentifier();
       } else {
-        const [firstName, lastName] = (this.searchTerm || '').split(' ');
-        this.firstName = firstName;
-        this.lastName = lastName;
         this.searchPersonByName();
       }
     }
@@ -111,4 +138,13 @@ export class MemberSearchComponent {
 
     return `Search Results for "${trimmed}"`;
   }
+
+  resetResults() {
+    localStorage.removeItem('searchTerm');
+    localStorage.removeItem('searchType');
+    this.searchTerm = '';
+    this.searchType = 'member_id';
+    this.searchResults.next([]);
+    this.pageHeading.next('Member Search');
+  }
 }

libs/carrier-portal/transaction-details/src/lib/transaction-details/transaction-details.component.html

@@ -1,5 +1,4 @@
 <ng-container *transloco="let t">
-  <h1>Transaction Details</h1>
   <ng-container
     *ngIf="transaction$ | async as transactionResult; else loadingTransaction"
   >
@@ -10,6 +9,10 @@ <h1>Transaction Details</h1>
         else: loadingError
       "
     >
+      <button (click)="goBack()">Back</button>
+
+      <h1>Transaction Details</h1>
+
       <div class="transaction-information">
         <dl>
           <dt>Transaction Type</dt>
@@ -22,7 +25,7 @@ <h1>Transaction Details</h1>
           <dd>{{ transaction.reference_identification }}</dd>
           <dt>Transaction Date</dt>
           <dd>
-            {{ transaction.transaction_date | parseRawDate | date : 'M/d/yy' }}
+            {{ transaction.transaction_date | parseRawDate | date: 'M/d/yy' }}
           </dd>
           <dt>Transaction Time</dt>
           <dd>{{ transaction.transaction_time | parseRawTime }}</dd>

libs/carrier-portal/transaction-details/src/lib/transaction-details/transaction-details.component.ts

@@ -7,7 +7,13 @@ import {
 import { Component, inject } from '@angular/core';
 import { ParamMap, ActivatedRoute } from '@angular/router';
 import { Observable, map, filter, switchMap } from 'rxjs';
-import { AsyncPipe, DatePipe, NgIf, TitleCasePipe } from '@angular/common';
+import {
+  AsyncPipe,
+  DatePipe,
+  NgIf,
+  TitleCasePipe,
+  Location,
+} from '@angular/common';
 
 import {
   TransactionsService,
@@ -43,7 +49,7 @@ import { scopeLoader } from '@enroll/shared/i18n';
         scope: 'transactionDetails',
         loader: scopeLoader(
           (lang: string, root: string) =>
-            import(`./${root}/${lang}.json`) as Promise<Translation>
+            import(`./${root}/${lang}.json`) as Promise<Translation>,
         ),
       },
     },
@@ -57,6 +63,12 @@ export class TransactionDetailsComponent {
     this.route.paramMap.pipe(
       map((parameters: ParamMap) => parameters.get('id') ?? '___IGNORE___'),
       filter((idString: string) => idString !== '___IGNORE___'),
-      switchMap((id: string) => this.transactionsService.getTransaction(id))
+      switchMap((id: string) => this.transactionsService.getTransaction(id)),
     );
+
+  constructor(private location: Location) {}
+
+  goBack(): void {
+    this.location.back();
+  }
 }

libs/console/shell/src/lib/shell/shell.component.html

@@ -26,10 +26,16 @@
   </div>
 </div>
 <main>
-  <div class="portal-data" *ngIf="lastUpdatedData$ | async as lastUpdated">
-    <ng-container *ngIf="lastUpdated.ok">
-      Data current as of: {{ lastUpdated.data.last_update_at }}
+  <div class="portal-data">
+    Data current as of:
+    <ng-container
+      *ngIf="lastUpdatedData$ | async as lastUpdated; else loadingDate"
+    >
+      <ng-container *ngIf="lastUpdated.ok">
+        {{ lastUpdated.data.last_update_at }}
+      </ng-container>
     </ng-container>
+    <ng-template #loadingDate>Loading...</ng-template>
   </div>
   <router-outlet></router-outlet>
 </main>