closes #20

LederCards · Apr 29, 2024 · 1b7e57a · 1b7e57a
1 parent 477a489
commit 1b7e57a
Show file tree

Hide file tree

Showing 16 changed files with 216 additions and 217 deletions.
diff --git a/src/app/_shared/components/card-text/card-text.component.ts b/src/app/_shared/components/card-text/card-text.component.ts
@@ -23,7 +23,7 @@ export class CardTextComponent {
   }
 
   private fixText(): string {
-    return this.text().split('+').join('\\+').split('-').join('\\-');
+    return (this.text() ?? '').split('+').join('\\+').split('-').join('\\-');
   }
 
   private getCustomRenderer(): marked.Renderer {

diff --git a/src/app/_shared/components/search-cards/search-cards.component.html b/src/app/_shared/components/search-cards/search-cards.component.html
@@ -1,37 +1,38 @@
-@if(displayTotal === 0) {
+@if(searchService.displayTotal() === 0) {
 <div class="no-results ion-text-center">
   <h2>No results found</h2>
   <p>For help using the search tool, check the <a target="_blank" [routerLink]="['/syntax']">help guide</a>.</p>
 </div>
 }
 
-@if(displayTotal > 0) {
+@if(searchService.displayTotal() > 0) {
 <ng-container>
   <ng-container *ngTemplateOutlet="cardSwitches"></ng-container>
 
   <ion-grid class="info">
     <ion-row>
       <ion-col>
-        <span>{{ displayCurrent | number }} - {{ displayMaximum | number }}
-          of&nbsp;</span> {{ displayTotal | number }} {{ queryDesc }}
+        <span>{{ searchService.displayCurrent() | number }} - {{ searchService.displayMaximum() | number }}
+          of&nbsp;</span> {{ searchService.displayTotal() | number }} {{ searchService.queryDesc() }}
       </ion-col>
     </ion-row>
   </ion-grid>
 
   <div class="page-container">
     <ion-grid class="cards">
       <ion-row>
-        @for(card of visibleCards; track card.id) {
+        @for(card of searchService.visibleCards(); track card.id) {
         <ion-col class="card-container" [sizeMd]="3" [sizeSm]="6" [sizeXs]="12">
           <a [routerLink]="['/card', card.id]">
-            <app-card-display class="card" [cardCode]="card.id" [display]="queryDisplayValue"></app-card-display>
+            <app-card-display class="card" [cardCode]="card.id"
+              [display]="searchService.queryDisplayValue"></app-card-display>
           </a>
         </ion-col>
         }
       </ion-row>
     </ion-grid>
 
-    @if(visibleCards.length > 4) {
+    @if(searchService.visibleCards().length > 4) {
     <ng-container *ngTemplateOutlet="cardSwitches"></ng-container>
     }
   </div>
@@ -43,45 +44,50 @@ <h2>No results found</h2>
     <ion-row>
       <ion-col [sizeXs]="12" [sizeMd]="2">
         <div class="text-display">Cards as</div>
-        <ion-select class="themed" [(ngModel)]="queryDisplayValue" interface="popover" placeholder="Card Display"
-          (ionChange)="redoCurrentSearch()">
+        <ion-select class="themed" [(ngModel)]="searchService.queryDisplayValue" interface="popover"
+          placeholder="Card Display" (ionChange)="searchService.redoCurrentSearch()">
           <ion-select-option value="images">Images</ion-select-option>
           <ion-select-option value="text">Text</ion-select-option>
         </ion-select>
       </ion-col>
 
       <ion-col [sizeXs]="12" [sizeMd]="4">
         <div class="text-display">Sorted by</div>
-        <ion-select class="themed" [(ngModel)]="querySortValue" interface="popover" placeholder="Sort Prop"
-          (ionChange)="redoCurrentSearch()">
+        <ion-select class="themed" [(ngModel)]="searchService.querySortValue" interface="popover"
+          placeholder="Sort Prop" (ionChange)="searchService.redoCurrentSearch()">
           <ion-select-option value="name">Name</ion-select-option>
           <ion-select-option value="id">ID</ion-select-option>
           <ion-select-option value="product">Product</ion-select-option>
         </ion-select>
 
-        <ion-select class="themed" [(ngModel)]="querySortByValue" interface="popover" placeholder="Sort Dir"
-          (ionChange)="redoCurrentSearch()">
+        <ion-select class="themed" [(ngModel)]="searchService.querySortByValue" interface="popover"
+          placeholder="Sort Dir" (ionChange)="searchService.redoCurrentSearch()">
           <ion-select-option value="asc">Asc ↑</ion-select-option>
           <ion-select-option value="desc">Desc ↓</ion-select-option>
         </ion-select>
       </ion-col>
 
       <ion-col [sizeXs]="12" [sizeMd]="6" class="pagination ion-justify-content-center">
-        <ion-button fill="outline" color="secondary" [disabled]="pageValue <= 0" (click)="changePage(0)">
+        <ion-button fill="outline" color="secondary" [disabled]="searchService.pageValue() <= 0"
+          (click)="changePage(0)">
           <span class="symbol">&laquo;</span>
         </ion-button>
 
-        <ion-button fill="outline" color="secondary" [disabled]="pageValue <= 0" (click)="changePage(pageValue - 1)">
+        <ion-button fill="outline" color="secondary" [disabled]="searchService.pageValue() <= 0"
+          (click)="changePage(searchService.pageValue() - 1)">
           <span class="symbol left">&lsaquo;</span> <span class="ion-hide-sm-down">Previous</span>
         </ion-button>
 
-        <ion-button fill="outline" color="secondary" [disabled]="pageValue >= totalPages"
-          (click)="changePage(pageValue + 1)">
-          <span class="ion-hide-sm-down">Next {{ cardsPerPage }}</span> <span class="symbol right">&rsaquo;</span>
+        <ion-button fill="outline" color="secondary"
+          [disabled]="searchService.pageValue() >= searchService.totalPages()"
+          (click)="changePage(searchService.pageValue() + 1)">
+          <span class="ion-hide-sm-down">Next {{ searchService.cardsPerPage }}</span> <span
+            class="symbol right">&rsaquo;</span>
         </ion-button>
 
-        <ion-button fill="outline" color="secondary" [disabled]="pageValue >= totalPages"
-          (click)="changePage(totalPages)">
+        <ion-button fill="outline" color="secondary"
+          [disabled]="searchService.pageValue() >= searchService.totalPages()"
+          (click)="changePage(searchService.totalPages())">
           <span class="symbol">&raquo;</span>
         </ion-button>
       </ion-col>

diff --git a/src/app/_shared/components/search-cards/search-cards.component.ts b/src/app/_shared/components/search-cards/search-cards.component.ts
@@ -1,163 +1,25 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  Component,
-  effect,
-  inject,
-  input,
-  output,
-  ViewChild,
-} from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { DatatableComponent, SelectionType } from '@siemens/ngx-datatable';
-import { sortBy } from 'lodash';
+import { Component, inject, output } from '@angular/core';
 
-import { type ICard } from '../../../../../interfaces';
-import { queryToText } from '../../../../../search/search';
-import { CardsService } from '../../../cards.service';
-
-type QueryDisplay = 'images' | 'text';
-type QuerySort = keyof ICard;
-type QuerySortBy = 'asc' | 'desc';
+import { ActivatedRoute } from '@angular/router';
+import { SearchService } from '../../../search.service';
 
 @Component({
   selector: 'app-search-cards',
   templateUrl: './search-cards.component.html',
   styleUrls: ['./search-cards.component.scss'],
 })
 export class SearchCardsComponent {
-  private router = inject(Router);
   private route = inject(ActivatedRoute);
-  private cardsService = inject(CardsService);
-
-  @ViewChild(DatatableComponent) table!: DatatableComponent;
-
-  private queryValue = '';
-  public queryDisplayValue: QueryDisplay = 'images';
-  public querySortValue: QuerySort = 'name';
-  public querySortByValue: QuerySortBy = 'asc';
-  public pageValue = 0;
-
-  public query = input<string>('');
-  public queryDisplay = input<QueryDisplay>('images');
-  public querySort = input<QuerySort>('name');
-  public querySortBy = input<QuerySortBy>('asc');
-  public page = input<number>(0);
+  private searchService = inject(SearchService);
 
   public pageChanged = output<number>();
 
   public queryDesc = '';
 
-  public readonly cardsPerPage = 60;
-  public totalPages = 0;
-  public queriedCards: ICard[] = [];
-  public visibleCards: ICard[] = [];
-
-  public displayCurrent = 0;
-  public displayTotal = 0;
-  public displayMaximum = 0;
-
-  public selected: any[] = [];
-  public expanded: any = {};
-  public checkboxSelectionType: SelectionType = SelectionType.checkbox;
-
-  constructor() {
-    effect(() => {
-      this.queryValue = this.query();
-      this.queryDisplayValue = this.queryDisplay();
-      this.querySortValue = this.querySort();
-      this.querySortByValue = this.querySortBy();
-      this.pageValue = this.page();
-
-      this.search(this.queryValue, false);
-      this.changePage(this.pageValue);
-    });
-  }
-
-  redoCurrentSearch() {
-    this.search(this.queryValue);
-  }
-
-  search(query: string, changePage = true) {
-    this.queryValue = query;
-    this.pageValue = 0;
-    this.totalPages = 0;
-    this.displayCurrent = 0;
-    this.displayTotal = 0;
-    this.displayMaximum = 0;
-
-    if (!this.query) {
-      this.queriedCards = [];
-      this.visibleCards = [];
-      this.updateParams();
-      return;
-    }
-
-    this.queryDesc = queryToText(this.queryValue);
-
-    this.queriedCards = this.cardsService.searchCards(this.queryValue);
-    this.doExtraSorting();
-
-    if (changePage) {
-      this.changePage(0);
-    }
-  }
-
-  updateParams() {
-    if (!this.queryValue) {
-      return;
-    }
-
-    this.router.navigate([], {
-      relativeTo: this.route,
-      queryParams: {
-        q: this.queryValue,
-        d: this.queryDisplayValue,
-        s: this.querySortValue,
-        b: this.querySortByValue,
-        p: this.pageValue,
-      },
-      queryParamsHandling: 'merge',
-    });
-  }
-
-  doExtraSorting() {
-    this.queriedCards = sortBy(this.queriedCards, this.querySortValue);
-    if (this.querySortByValue === 'desc') {
-      this.queriedCards = this.queriedCards.reverse();
-    }
-  }
-
   changePage(newPage: number) {
-    this.pageValue = newPage;
-    this.totalPages =
-      Math.ceil(this.queriedCards.length / this.cardsPerPage) - 1;
-
-    if (this.pageValue > this.totalPages) {
-      this.pageValue = this.totalPages;
-    }
-
-    if (this.pageValue < 0) {
-      this.pageValue = 0;
-    }
-
-    this.visibleCards = this.queriedCards.slice(
-      this.pageValue * this.cardsPerPage,
-      (this.pageValue + 1) * this.cardsPerPage
-    );
-
-    this.displayCurrent = this.pageValue * this.cardsPerPage + 1;
-    this.displayTotal = this.queriedCards.length;
-    this.displayMaximum = Math.min(
-      this.displayTotal,
-      (this.pageValue + 1) * this.cardsPerPage
-    );
-
-    this.updateParams();
-    this.pageChanged.emit(this.pageValue);
-  }
-
-  select({ selected }: any) {
-    this.selected = [...selected];
+    this.searchService.changePage(newPage);
+    this.pageChanged.emit(newPage);
   }
 
   public getDetailHeight(): any {

diff --git a/src/app/_shared/components/topbar/topbar.component.html b/src/app/_shared/components/topbar/topbar.component.html
@@ -13,8 +13,7 @@
         }
 
         @if(showSearch()) {
-        <app-omnisearch (type)="type.emit($event)" (enter)="enter.emit($event)"
-          [initialQuery]="query()"></app-omnisearch>
+        <app-omnisearch (type)="doType($event)" (enter)="doEnter($event)" [initialQuery]="query()"></app-omnisearch>
         }
       </ion-col>
 

diff --git a/src/app/_shared/components/topbar/topbar.component.ts b/src/app/_shared/components/topbar/topbar.component.ts
@@ -1,15 +1,39 @@
-import { Component, input, output } from '@angular/core';
+import { Component, inject, input } from '@angular/core';
+import { Router } from '@angular/router';
+import { SearchService } from '../../../search.service';
 
 @Component({
   selector: 'app-topbar',
   templateUrl: './topbar.component.html',
   styleUrls: ['./topbar.component.scss'],
 })
 export class TopbarComponent {
+  private router = inject(Router);
+  private searchService = inject(SearchService);
+
   public title = input<string>('');
   public showSearch = input<boolean>(true);
   public query = input<string>('');
 
-  public type = output<string>();
-  public enter = output<string>();
+  public searchOnType = input<boolean>(false);
+  public searchOnEnter = input<boolean>(false);
+
+  doType($event: string) {
+    if (!this.searchOnType()) return;
+    this.search($event);
+  }
+
+  doEnter($event: string) {
+    if (!this.searchOnEnter()) return;
+    this.search($event);
+  }
+
+  private search(query: string) {
+    this.router.navigate(['/search'], {
+      queryParamsHandling: 'merge',
+      queryParams: { q: query },
+    });
+
+    this.searchService.search(query);
+  }
 }
diff --git a/src/app/card/card.page.html b/src/app/card/card.page.html
@@ -1,5 +1,5 @@
 <ion-header>
-  <app-topbar (enter)="search($event)"></app-topbar>
+  <app-topbar [searchOnEnter]="true"></app-topbar>
 </ion-header>
 
 <ion-content>

diff --git a/src/app/faq/faq.page.html b/src/app/faq/faq.page.html
@@ -1,5 +1,5 @@
 <ion-header>
-  <app-topbar (enter)="search($event)"></app-topbar>
+  <app-topbar [searchOnEnter]="true"></app-topbar>
 </ion-header>
 
 <ion-content>

diff --git a/src/app/faq/faq.page.ts b/src/app/faq/faq.page.ts
@@ -47,8 +47,4 @@ export class FaqPage {
     this.locale.set(faq.locale);
     this.productId.set(faq.productId);
   }
-
-  search(query: string) {
-    this.router.navigate(['/search'], { queryParams: { q: query } });
-  }
 }
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
@@ -12,6 +12,8 @@ export class HomePage {
   public searchQuery = '';
 
   search(query: string) {
-    this.router.navigate(['/search'], { queryParams: { q: query } });
+    this.router.navigate(['/search'], {
+      queryParams: { q: query },
+    });
   }
 }