BRS-283: Add "Historical" tag to Subarea filters on Review Data page (#…

…332)

* create historic pill comp, update enter-data and review-data

* dereference array in func call

src/app/app.module.ts

@@ -30,6 +30,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { LoadingService } from './services/loading.service';
 import { LockRecordsModule } from './lock-records/lock-records.module';
 import { VarianceSearchModule } from './variance-search/variance-search.module';
+import { HistoricalPillModule } from './shared/components/historical-pill/historical-pill.module';
 
 export function initConfig(
   configService: ConfigService,
@@ -66,7 +67,8 @@ export function initConfig(
     InfiniteLoadingBarModule,
     BrowserAnimationsModule,
     ToastrModule.forRoot(),
-    VarianceSearchModule
+    VarianceSearchModule,
+    HistoricalPillModule
   ],
   providers: [
     {

src/app/enter-data/sub-area-search/sub-area-search.component.html

@@ -68,24 +68,9 @@
   let-query="query"
   let-typeaheadTemplateMethods
 >
-  <ul class="custom-list-group">
-    <li
-      class="custom-list-group-item"
-      *ngFor="let match of matches"
-      [class.active]="typeaheadTemplateMethods.isActive(match)"
-      (click)="typeaheadTemplateMethods.selectMatch(match, $event)"
-      (mouseenter)="typeaheadTemplateMethods.selectActive(match)"
-    >
-      <span [innerHtml]="getHighlightedMatch(match, query)[0]"></span>
-      <span
-        class="custom-highlight"
-        [innerHtml]="getHighlightedMatch(match, query)[1]"
-      ></span>
-      <span [innerHtml]="getHighlightedMatch(match, query)[2]"></span>
-      <div
-        *ngIf="match?.item?.value?.isLegacy"
-        class="mx-2 badge bg-primary historical-pill"
-      >historical</div>
-    </li>
-  </ul>
-</ng-template>
+  <app-historical-pill
+    [matches]="matches"
+    [query]="query"
+    [typeaheadTemplateMethods]="typeaheadTemplateMethods"
+  ></app-historical-pill>
+</ng-template>

src/app/enter-data/sub-area-search/sub-area-search.component.scss

@@ -1,27 +0,0 @@
-.historical-pill {
-  background-color: #2464A4 !important;
-}
-
-.custom-list-group {
-  max-height: 300px;
-  padding-left: 0;
-  margin: 0;
-  list-style: none;
-  overflow-y: scroll;
-  overflow-x: hidden;
-}
-
-.custom-list-group-item {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  padding-top: 0.35rem;
-  padding-bottom: 0.35rem;
-
-  &:hover {
-    background-color: var(--bs-gray-200);
-  }
-}
-
-.custom-highlight {
-  font-weight: bold;
-}

src/app/enter-data/sub-area-search/sub-area-search.component.spec.ts

@@ -201,14 +201,6 @@ describe('SubAreaSearchComponent', () => {
     expect(urlUpdateSpy).toHaveBeenCalledTimes(1);
   })
 
-  it('should highlight typeahead properly', async() => {
-    expect(component.getHighlightedMatch({value:'string'}, ['str'])).toEqual([
-      `<span></span>`,
-      `<span>str</span>`,
-      `<span>ing</span>`,
-    ])
-  })
-
   it('gets local storage park by park orcs', async () => {
     expect(component.getLocalStorageParkById(mockPark.orcs)).toEqual(mockPark);
   })

src/app/enter-data/sub-area-search/sub-area-search.component.ts

@@ -185,28 +185,6 @@ export class SubAreaSearchComponent implements OnDestroy {
     this._subAreas.next(this.createTypeaheadObj(parkSelection.subAreas, 'name'));
   }
 
-  // Custom typeahead formatter so that we can put 'historical' badges on subareas.
-  getHighlightedMatch(item, query) {
-    query = query.join(' ');
-    let display = item.value;
-    if (display.toLocaleLowerCase().indexOf(query) > -1) {
-      const left_str = display.substring(0, display.toLocaleLowerCase().indexOf(query));
-      const highlight_str = display.substring(display.toLocaleLowerCase().indexOf(query), display.toLocaleLowerCase().indexOf(query) + query.length);
-      const right_str = display.substring(display.toLocaleLowerCase().indexOf(query) + query.length);
-      return [
-        '<span>' + left_str + '</span>',
-        '<span>' + highlight_str + '</span>',
-        '<span>' + right_str + '</span>',
-      ];
-    }
-    else
-      return [
-        '<span>' + display + '</span>',
-        '',
-        '',
-      ];
-  }
-
   // Perform search
   search() {
     this.updateUrl();

src/app/enter-data/sub-area-search/sub-area-search.module.ts

@@ -5,17 +5,19 @@ import { TextToLoadingSpinnerModule } from 'src/app/shared/components/text-to-lo
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgdsFormsModule } from '@digitalspace/ngds-forms'
+import { HistoricalPillModule } from "../../shared/components/historical-pill/historical-pill.module";
 
 @NgModule({
-  declarations: [SubAreaSearchComponent],
-  imports: [
-    CommonModule,
-    NgbModule,
-    TextToLoadingSpinnerModule,
-    NgdsFormsModule,
-    FormsModule,
-    ReactiveFormsModule
-  ],
-  exports: [SubAreaSearchComponent]
+    declarations: [SubAreaSearchComponent],
+    exports: [SubAreaSearchComponent],
+    imports: [
+        CommonModule,
+        NgbModule,
+        TextToLoadingSpinnerModule,
+        NgdsFormsModule,
+        FormsModule,
+        ReactiveFormsModule,
+        HistoricalPillModule
+    ]
 })
 export class SubAreaSearchModule { }

src/app/shared/components/historical-pill/historical-pill.component.html

@@ -0,0 +1,20 @@
+<ul class="custom-list-group">
+  <li
+    class="custom-list-group-item"
+    *ngFor="let match of matches"
+    [class.active]="typeaheadTemplateMethods.isActive(match)"
+    (click)="typeaheadTemplateMethods.selectMatch(match, $event)"
+    (mouseenter)="typeaheadTemplateMethods.selectActive(match)"
+  >
+    <span [innerHtml]="getHighlightedMatch(match, query).left"></span>
+    <span
+      class="custom-highlight"
+      [innerHtml]="getHighlightedMatch(match, query).highlight"
+    ></span>
+    <span [innerHtml]="getHighlightedMatch(match, query).right"></span>
+    <div
+      *ngIf="match?.item?.value?.isLegacy"
+      class="mx-2 badge bg-primary historical-pill"
+    >historical</div>
+  </li>
+</ul>

src/app/shared/components/historical-pill/historical-pill.component.scss

@@ -0,0 +1,27 @@
+.historical-pill {
+  background-color: #2464A4 !important;
+}
+
+.custom-list-group {
+  max-height: 300px;
+  padding-left: 0;
+  margin: 0;
+  list-style: none;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+.custom-list-group-item {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.35rem;
+  padding-bottom: 0.35rem;
+
+  &:hover {
+    background-color: var(--bs-gray-200);
+  }
+}
+
+.custom-highlight {
+  font-weight: bold;
+}

src/app/shared/components/historical-pill/historical-pill.component.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HistoricalPillComponent } from './historical-pill.component';
+
+describe('HistoricalPillComponent', () => {
+  let component: HistoricalPillComponent;
+  let fixture: ComponentFixture<HistoricalPillComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [HistoricalPillComponent]
+    });
+    fixture = TestBed.createComponent(HistoricalPillComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should highlight typeahead properly', async() => {
+    expect(component.getHighlightedMatch({value:'string'}, ['str'])).toEqual({
+      left: '<span></span>',
+      highlight: '<span>str</span>',
+      right: '<span>ing</span>'}
+    )
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/historical-pill/historical-pill.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-historical-pill',
+  templateUrl: './historical-pill.component.html',
+  styleUrls: ['./historical-pill.component.scss']
+})
+export class HistoricalPillComponent {
+  @Input() matches: any;
+  @Input() query: any;
+  @Input() typeaheadTemplateMethods: any;
+
+  // Custom typeahead formatter so that we can put 'historical' badges on subareas.
+  getHighlightedMatch(item, query) {
+    query = query.join(' ');
+    let display = item.value;
+    let result = {
+      left: '',
+      highlight: '',
+      right: '',
+    }
+
+    if (display.toLocaleLowerCase().indexOf(query) > -1) {
+      const left_str = display.substring(0, display.toLocaleLowerCase().indexOf(query));
+      const highlight_str = display.substring(display.toLocaleLowerCase().indexOf(query), display.toLocaleLowerCase().indexOf(query) + query.length);
+      const right_str = display.substring(display.toLocaleLowerCase().indexOf(query) + query.length);
+      return {
+        left: '<span>' + left_str + '</span>',
+        highlight: '<span>' + highlight_str + '</span>',
+        right: '<span>' + right_str + '</span>'
+      };
+    } else {
+      result.left = '<span>' + display + '</span>'
+    }
+
+    return result;
+  }
+}

src/app/shared/components/historical-pill/historical-pill.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HistoricalPillComponent } from './historical-pill.component';
+
+@NgModule({
+  declarations: [HistoricalPillComponent],
+  imports: [CommonModule],
+  exports: [HistoricalPillComponent],
+})
+export class HistoricalPillModule {}

src/app/variance-search/variance-filters/variance-filters.component.html

@@ -18,6 +18,7 @@
           [selectionListItems]="_subAreas?.value"
           [resetButton]="true"
           [disabled]="getValue('park')"
+          [selectionListTemplate]="historicalPill"
         >
         </ngds-typeahead-input>
       </div>
@@ -74,4 +75,17 @@
       </div>
     </div>
   </section>
-</div>
+</div>
+
+<ng-template
+  #historicalPill
+  let-matches="matches"
+  let-query="query"
+  let-typeaheadTemplateMethods
+  >
+  <app-historical-pill
+    [matches]="matches"
+    [query]="query"
+    [typeaheadTemplateMethods]="typeaheadTemplateMethods"
+  ></app-historical-pill>
+</ng-template>

src/app/variance-search/variance-filters/variance-filters.component.scss

@@ -2,4 +2,4 @@
 
 .bg-filter {
   background-color: $calc-blue;
-}
+}

src/app/variance-search/variance-search.module.ts

@@ -6,22 +6,24 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { VarianceListComponent } from './variance-list/variance-list.component';
 import { VarianceAccordionComponent } from './variance-list/variance-accordion/variance-accordion.component';
 import { NgdsFormsModule } from '@digitalspace/ngds-forms'
+import { HistoricalPillModule } from "../shared/components/historical-pill/historical-pill.module";
 
 @NgModule({
-  declarations: [
-    VarianceSearchComponent,
-    VarianceFiltersComponent,
-    VarianceListComponent,
-    VarianceAccordionComponent,
-  ],
-  imports: [
-    FormsModule,
-    ReactiveFormsModule,
-    CommonModule,
-    NgdsFormsModule
-  ],
-  exports: [
-    VarianceSearchComponent
-  ]
+    declarations: [
+        VarianceSearchComponent,
+        VarianceFiltersComponent,
+        VarianceListComponent,
+        VarianceAccordionComponent,
+    ],
+    exports: [
+        VarianceSearchComponent
+    ],
+    imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        CommonModule,
+        NgdsFormsModule,
+        HistoricalPillModule
+    ]
 })
 export class VarianceSearchModule { }