No results component

src/app/custom1-module/customComponentMappings.ts

@@ -1,8 +1,13 @@
 import { NdeSearchBarContainerCustomComponent } from "../nde-search-bar-container-custom/nde-search-bar-container-custom.component";
+import { NdeSearchHintCustomComponent } from "../nde-search-hint-custom/nde-search-hint-custom.component";
+import { NdeSearchNoResultsCustomComponent } from "../nde-search-no-results-custom/nde-search-no-results-custom.component";
 import { NdeRequestFormCustomComponent } from "../nde-request-form-custom/nde-request-form-custom.component";
 
+
 // Define the map
 export const selectorComponentMap = new Map<string, any>([
   ["nde-formly-general-wrapper-bottom", NdeRequestFormCustomComponent],
   ["nde-search-bar-container-top", NdeSearchBarContainerCustomComponent],
+  ["nde-search-no-results-top", NdeSearchNoResultsCustomComponent],
+  ["nde-search-results-container-top", NdeSearchHintCustomComponent ]
 ]);

src/app/nde-search-hint-custom/nde-search-hint-custom.component.html

@@ -0,0 +1,15 @@
+<div *ngIf="isAstmSearch$ | async" class="hint-container">
+  <mat-card class="astm-hint-card">
+    <mat-card-content>
+      <div class="hint-content">
+        <mat-icon>info</mat-icon>
+        <span>
+          You can access ASTM standards using
+          <a [href]="ASTM_COMPASS_URL" target="_blank" rel="noopener noreferrer">
+            ASTM Compass
+          </a>
+        </span>
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>

src/app/nde-search-hint-custom/nde-search-hint-custom.component.scss

@@ -0,0 +1,27 @@
+.hint-container {
+  display: flex;
+  justify-content: center;
+  padding: 16px;
+  width: 100%;
+}
+
+.astm-hint-card {
+  max-width: 600px;
+  width: 100%;
+}
+
+.hint-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+
+  a {
+    font-weight: 500;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

src/app/nde-search-hint-custom/nde-search-hint-custom.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NdeSearchHintCustomComponent } from './nde-search-hint-custom.component';
+
+describe('NdeSearchHintCustomComponent', () => {
+  let component: NdeSearchHintCustomComponent;
+  let fixture: ComponentFixture<NdeSearchHintCustomComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NdeSearchHintCustomComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NdeSearchHintCustomComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/nde-search-hint-custom/nde-search-hint-custom.component.ts

@@ -0,0 +1,43 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { createFeatureSelector, Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+
+type SearchState = { searchParams: { q: string } };
+export const selectSearchState = createFeatureSelector<SearchState>('Search');
+
+@Component({
+  selector: 'custom-nde-search-hint-custom',
+  standalone: true,
+  imports: [AsyncPipe, NgIf, MatCardModule, MatIconModule],
+  templateUrl: './nde-search-hint-custom.component.html',
+  styleUrl: './nde-search-hint-custom.component.scss'
+})
+export class NdeSearchHintCustomComponent implements OnInit {
+  public store = inject(Store);
+
+  searchState$!: Observable<SearchState>;
+  searchTerm$!: Observable<string>;
+  isAstmSearch$!: Observable<boolean>;
+
+  readonly ASTM_COMPASS_URL = "https://databases.library.jhu.edu/databases/proxy/JHU05996";
+
+  ngOnInit(): void {
+    this.searchState$ = this.store.select(selectSearchState);
+    this.searchTerm$ = this.searchState$.pipe(
+      map((state) => state.searchParams.q)
+    );
+
+    this.isAstmSearch$ = this.searchTerm$.pipe(
+      map((term) => this.isAstmSearch(term))
+    );
+  }
+
+  isAstmSearch(term: string): boolean {
+    if (!term) return false;
+    return term.toLowerCase().includes("astm");
+  }
+}

src/app/nde-search-no-results-custom/nde-search-no-results-custom.component.html

@@ -0,0 +1,75 @@
+<div class="search-no-results">
+
+  <!-- DOI Detected Card -->
+  <div *ngIf="doiLink$ | async as doiLink" class="hint-container">
+    <mat-card class="hint-card warning-card">
+      <mat-card-content>
+        <div class="hint-content">
+          <mat-icon>warning</mat-icon>
+          <div class="hint-text">
+            <p>We detected a DOI in your search, but there were no results found.</p>
+            <a [href]="doiLink" target="_blank" rel="noopener noreferrer">
+              <mat-icon class="link-icon">open_in_new</mat-icon>
+              Check for access using the Citation Linker
+            </a>
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+
+  <!-- ISBN Detected Card -->
+  <div *ngIf="isbnLink$ | async as isbnLink" class="hint-container">
+    <mat-card class="hint-card warning-card">
+      <mat-card-content>
+        <div class="hint-content">
+          <mat-icon>warning</mat-icon>
+          <div class="hint-text">
+            <p>We detected an ISBN in your search, but there were no results found.</p>
+            <a [href]="isbnLink" target="_blank" rel="noopener noreferrer">
+              <mat-icon class="link-icon">open_in_new</mat-icon>
+              Check for access using the Citation Linker
+            </a>
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+
+  <!-- External Search Options Card -->
+  <div class="hint-container">
+    <mat-card class="hint-card info-card">
+      <mat-card-content>
+        <div class="hint-content">
+          <mat-icon>search</mat-icon>
+          <div class="hint-text">
+            <p class="section-title">Try searching other resources:</p>
+
+            <mat-list>
+              <mat-list-item>
+                <div class="list-item-content">
+                  <a [href]="borrowDirectLink$ | async" target="_blank" rel="noopener noreferrer">
+                    <mat-icon class="link-icon">open_in_new</mat-icon>
+                    Search BorrowDirect
+                  </a>
+                  <p class="link-description">Borrow from partner libraries</p>
+                </div>
+              </mat-list-item>
+
+              <mat-list-item>
+                <div class="list-item-content">
+                  <a [href]="worldCatLink$ | async" target="_blank" rel="noopener noreferrer">
+                    <mat-icon class="link-icon">open_in_new</mat-icon>
+                    Search WorldCat
+                  </a>
+                  <p class="link-description">Find items in libraries worldwide</p>
+                </div>
+              </mat-list-item>
+            </mat-list>
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+
+</div>

src/app/nde-search-no-results-custom/nde-search-no-results-custom.component.scss

@@ -0,0 +1,93 @@
+.search-no-results {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  width: 100%;
+}
+
+.hint-container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.hint-card {
+  max-width: 600px;
+  width: 100%;
+}
+
+.hint-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+
+  > mat-icon {
+    margin-top: 4px;
+  }
+}
+
+.hint-text {
+  flex: 1;
+
+  p {
+    margin: 0 0 8px 0;
+  }
+
+  a {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-weight: 500;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    .link-icon {
+      font-size: 18px;
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+
+.section-title {
+  font-weight: 500;
+  margin-bottom: 12px !important;
+}
+
+mat-list {
+  padding: 0;
+}
+
+mat-list-item {
+  height: auto !important;
+  padding: 8px 0 !important;
+}
+
+.list-item-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  a {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-weight: 500;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    .link-icon {
+      font-size: 18px;
+      width: 18px;
+      height: 18px;
+    }
+  }
+}

src/app/nde-search-no-results-custom/nde-search-no-results-custom.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NdeSearchNoResultsCustomComponent } from './nde-search-no-results-custom.component';
+
+describe('NdeSearchNoResultsCustomComponent', () => {
+  let component: NdeSearchNoResultsCustomComponent;
+  let fixture: ComponentFixture<NdeSearchNoResultsCustomComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NdeSearchNoResultsCustomComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NdeSearchNoResultsCustomComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});