Fix bug where strongs numbers in a strongs definition weren't rendering

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

@@ -52,7 +52,7 @@ export class StrongsCardComponent extends CardComponent {
     if (this.asModal) {
       const card = await this.appService.getStrongsCard(sn, dict);
       this.dialog.open(StrongsModalComponent, {
-        data: card,
+        data: [card],
         autoFocus: 'content',
       });
     } else {

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

@@ -14,19 +14,23 @@
   </span>
 </mat-toolbar>
 <mat-dialog-content class="content">
-  <mat-tab-group *ngIf="strongsResults.length > 1">
+  <ng-container *ngIf="(results$ | async).length > 1; let strongs">
-    <mat-tab *ngFor="let card of strongsResults">
+    <mat-tab-group [(selectedIndex)]="selectedIndex">
-      <ng-template mat-tab-label>{{ card.prefix }}{{ card.sn }}</ng-template>
+      <mat-tab *ngFor="let card of results$ | async; index as idx">
-      <app-strongs
+        <ng-template mat-tab-label>{{ card.prefix }}{{ card.sn }}</ng-template>
-        [data]="card"
+        <app-strongs
-        (openPassage)="openPassage($event)"
+          [data]="card"
-      ></app-strongs>
+          (openPassage)="openPassage($event)"
-    </mat-tab>
+          (openStrongs)="openStrongs($event)"
-  </mat-tab-group>
+        ></app-strongs>
-  <ng-container *ngIf="strongsResults.length === 1">
+      </mat-tab>
+    </mat-tab-group>
+  </ng-container>
+  <ng-container *ngIf="(results$ | async).length === 1">
     <app-strongs
-      [data]="strongsResults[0]"
+      [data]="(results$ | async)[0]"
       (openPassage)="openPassage($event)"
+      (openStrongs)="openStrongs($event)"
     ></app-strongs>
   </ng-container>
 </mat-dialog-content>

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

@@ -1,7 +1,8 @@
-import { ChangeDetectionStrategy,Component, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA,MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { BibleReference } from 'src/app/common/bible-reference';
+import { SubscriberBase } from 'src/app/common/subscriber-base';
 import { CardItem } from 'src/app/models/card-state';
 import { StrongsResult } from 'src/app/models/strongs-state';
 import { AppService } from 'src/app/services/app.service';
@@ -13,25 +14,56 @@ import { AppService } from 'src/app/services/app.service';
   preserveWhitespaces: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class StrongsModalComponent {
+export class StrongsModalComponent extends SubscriberBase {
   icon$: Observable<string>;
-  strongsResults: StrongsResult[];
+  results$: BehaviorSubject<StrongsResult[]> = new BehaviorSubject([]);
+  selectedIndex = 0;
   title: string;
+  asModal = false;
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public cardItems: CardItem[],
     public dialogRef: MatDialogRef<StrongsModalComponent>,
-    private appService: AppService
+    private appService: AppService,
+    protected dialog: MatDialog
   ) {
-    this.title = cardItems.map(o => o.qry).reduce((p, c) => `${p}, ${c}`);
+    super();
-    this.strongsResults = cardItems.map(o => o.data as StrongsResult);
+    this.title = cardItems.map((o) => o.qry).reduce((p, c) => `${p}, ${c}`);
+    this.results$.next(cardItems.map((o) => o.data as StrongsResult));
     this.icon$ = appService.select((state) => state.settings.value.cardIcons.strongs);
+
+    this.addSubscription(
+      this.appService
+        .select((state) => state.settings.value.displaySettings.showStrongsAsModal)
+        .subscribe((asModal) => {
+          this.asModal = asModal;
+        })
+    );
   }
 
   cancel() {
     this.dialogRef.close();
   }
 
+  async openStrongs(q: string) {
+    const dict = q.substring(0, 1) === 'H' ? 'heb' : 'grk';
+    const sn = q.substring(1);
+    if (this.asModal) {
+      const currIdx = this.results$.value.findIndex((o) => o.sn.toString() === sn);
+      if (currIdx > -1) {
+        this.selectedIndex = currIdx;
+        return;
+      }
+      const card = await this.appService.getStrongsCard(sn, dict);
+      const strongs = card.data as StrongsResult;
+      const ordered = [...this.results$.value.filter((o) => `${o.prefix}${o.sn}` !== q), strongs];
+      this.results$.next(ordered);
+      this.selectedIndex = ordered.length - 1;
+    } else {
+      this.appService.getStrongs([sn], dict, this.cardItems[0]);
+    }
+  }
+
   openPassage(p: string) {
     const ref = BibleReference.makePassageFromReferenceKey(p);
     this.appService.getPassage(ref, this.cardItems[0]);