Support tabs in display of multiple strongs numbers

src/src/app/app.module.ts

@@ -37,6 +37,7 @@ import { MatBadgeModule } from '@angular/material/badge';
 import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatChipsModule } from '@angular/material/chips';
+import { MatTabsModule } from '@angular/material/tabs';
 import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 
@@ -153,6 +154,7 @@ export function markedOptionsFactory(): MarkedOptions {
     MatSnackBarModule,
     MatTooltipModule,
     MatFormFieldModule,
+    MatTabsModule,
     ClipboardModule,
   ],
   providers: [{ provide: APP_ID, useValue: 'ng-cli-universal' }],

src/src/app/components/passage/passage-card.component.ts

@@ -149,16 +149,20 @@ export class PassageCardComponent extends CardComponent implements OnInit {
   async openStrongs(q: string, asModal = false) {
     const dict = (this.cardItem.data as BiblePassageResult).dict;
     const numbers = q.split(' ');
-    for (const sn of numbers) {
-      if (asModal) {
+
+    if (asModal) {
+      const cards: CardItem[] = [];
+      for (const sn of numbers) {
         const card = await this.appService.getStrongsCard(sn, dict);
-        this.dialog.open(StrongsModalComponent, {
-          data: card,
-          autoFocus: 'content',
-        });
-      } else {
-        this.appService.getStrongs(sn, dict, this.cardItem);
+        cards.push(card);
       }
+
+      this.dialog.open(StrongsModalComponent, {
+        data: cards,
+        autoFocus: 'content',
+      });
+    } else {
+      this.appService.getStrongs(numbers, dict, this.cardItem);
     }
   }
 

src/src/app/components/strongs/card/strongs-card.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ElementRef, ViewChild, ChangeDetectionStrategy, Input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { StrongsModalComponent } from '../modal/strongs-modal.component';
@@ -18,6 +18,9 @@ export class StrongsCardComponent extends CardComponent {
   asModal = false;
   @ViewChild('strongs') strongsElement: ElementRef;
 
+  @Input()
+  data: StrongsResult;
+
   get strongsResult() {
     return this.cardItem.data as StrongsResult;
   }
@@ -52,7 +55,7 @@ export class StrongsCardComponent extends CardComponent {
         autoFocus: 'content',
       });
     } else {
-      this.appService.getStrongs(sn, dict, this.cardItem);
+      this.appService.getStrongs([sn], dict, this.cardItem);
     }
   }
 

src/src/app/components/strongs/modal/strongs-modal.component.html

@@ -1,22 +1,26 @@
-  <mat-toolbar>
-    <mat-icon aria-hidden="false" aria-label="Strongs Entry Icon">{{
-      icon$ | async
-    }}</mat-icon>
-    <div class="title">{{ cardItem.qry }}</div>
-    <span class="close-button">
-      <button
-        mat-icon-button
-        mat-dialog-close
-        aria-label="Exit the Strongs Modal"
-      >
-        <mat-icon>cancel</mat-icon>
-      </button>
-    </span>
-  </mat-toolbar>
-<mat-dialog-content  class="content">
-  <br />
-  <app-strongs
-    [data]="strongsResult"
-    (openPassage)="openPassage($event)"
-  ></app-strongs>
+<mat-toolbar>
+  <mat-icon aria-hidden="false" aria-label="Strongs Entry Icon">{{
+    icon$ | async
+  }}</mat-icon>
+  <div class="title">{{ this.title }}</div>
+  <span class="close-button">
+    <button
+      mat-icon-button
+      mat-dialog-close
+      aria-label="Exit the Strongs Modal"
+    >
+      <mat-icon>cancel</mat-icon>
+    </button>
+  </span>
+</mat-toolbar>
+<mat-dialog-content class="content">
+  <mat-tab-group>
+    <mat-tab *ngFor="let card of strongsResults">
+      <ng-template mat-tab-label>{{ card.prefix }}{{ card.sn }}</ng-template>
+      <app-strongs
+        [data]="card"
+        (openPassage)="openPassage($event)"
+      ></app-strongs>
+    </mat-tab>
+  </mat-tab-group>
 </mat-dialog-content>

src/src/app/components/strongs/modal/strongs-modal.component.ts

@@ -1,5 +1,6 @@
-import { Component, Inject, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Inject, ChangeDetectionStrategy, Input } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatTabsModule } from '@angular/material/tabs';
 import { Observable } from 'rxjs';
 import { BibleReference } from 'src/app/common/bible-reference';
 import { CardItem } from 'src/app/models/card-state';
@@ -15,14 +16,16 @@ import { AppService } from 'src/app/services/app.service';
 })
 export class StrongsModalComponent {
   icon$: Observable<string>;
-  strongsResult: StrongsResult;
+  strongsResults: StrongsResult[];
+  title: string;
 
   constructor(
-    @Inject(MAT_DIALOG_DATA) public cardItem: CardItem,
+    @Inject(MAT_DIALOG_DATA) public cardItems: CardItem[],
     public dialogRef: MatDialogRef<StrongsModalComponent>,
     private appService: AppService
   ) {
-    this.strongsResult = cardItem.data as StrongsResult;
+    this.title = cardItems.map(o => o.qry).reduce((p, c) => `${p}, ${c}`);
+    this.strongsResults = cardItems.map(o => o.data as StrongsResult);
     this.icon$ = appService.select((state) => state.settings.value.cardIcons.strongs);
   }
 
@@ -32,6 +35,6 @@ export class StrongsModalComponent {
 
   openPassage(p: string) {
     const ref = BibleReference.makePassageFromReferenceKey(p);
-    this.appService.getPassage(ref, this.cardItem);
+    this.appService.getPassage(ref, this.cardItems[0]);
   }
 }

src/src/app/models/strongs-state.ts

@@ -1,7 +1,6 @@
 export type StrongsDictionary = 'heb' | 'grk';
 
 export interface StrongsResult {
-  readonly dict: StrongsDictionary;
   readonly prefix: string;
   readonly sn: number;
   readonly def: StrongsDefinition;

src/src/app/services/app.service.ts

@@ -286,6 +286,43 @@ export const addCardAction = (card: CardItem, nextToItem: CardItem): AppAction =
   };
 };
 
+export const addCardsAction = (cardsToAdd: CardItem[], nextToItem: CardItem): AppAction => {
+  return {
+    handle(state: AppState) {
+      let cards = [...state.currentCards.value];
+      let cache = state.cardCache;
+
+      for (let card of cardsToAdd) {
+        if (nextToItem && state.settings.value.displaySettings.insertCardNextToItem) {
+          const idx = cards.indexOf(nextToItem);
+
+          if (state.settings.value.displaySettings.appendCardToBottom) {
+            const before = cards.slice(0, idx + 1);
+            const after = cards.slice(idx + 1);
+            cards = [...before, card, ...after];
+          } else {
+            const before = cards.slice(0, idx);
+            const after = cards.slice(idx);
+            cards = [...before, card, ...after];
+          }
+        } else {
+          if (state.settings.value.displaySettings.appendCardToBottom) {
+            cards = [...cards, card];
+          } else {
+            cards = [card, ...cards];
+          }
+        }
+        cache = updateInCardCache(card, state.cardCache);
+      }
+      return {
+        ...state,
+        currentCards: new Storable(cards),
+        cardCache: cache,
+      };
+    },
+  };
+};
+
 export const updateCardAction = (newCard: CardItem, oldCard: CardItem): AppAction => {
   return {
     handle(state: AppState) {
@@ -635,7 +672,6 @@ export const deleteNoteAction = (note: NoteItem): AppAction => {
   providedIn: 'root',
 })
 export class AppService extends createReducingService(initialState) {
-  //createStateService(appReducer, initialState) {
   private wordToStem: Map<string, string>;
   private paragraphs: HashTable<Paragraph>;
   private searchIndexArray: string[];
@@ -1000,13 +1036,17 @@ export class AppService extends createReducingService(initialState) {
 
   //#region Strongs
 
-  async getStrongs(strongsNumber: string, dict: StrongsDictionary, nextToItem: CardItem = null) {
-    const card = await this.getStrongsCard(strongsNumber, dict);
-    if (!card) {
-      return; // nothing was returned. so an error occurred.
+  async getStrongs(strongsNumber: string[], dict: StrongsDictionary, nextToItem: CardItem = null) {
+    const cards = [];
+    for (const sn of strongsNumber) {
+      const card = await this.getStrongsCard(sn, dict);
+      cards.push(card);
+    }
+    if (cards.length < 1) {
+      return;
     }
 
-    this.dispatch(addCardAction(card, nextToItem));
+    this.dispatch(addCardsAction(cards, nextToItem));
   }
 
   async getStrongsCard(strongsNumber: string, dict: StrongsDictionary) {