SF-3077 Add UI for mixed training sources

src/SIL.XForge.Scripture/ClientApp/src/app/shared/book-multi-select/book-multi-select.component.html

@@ -1,5 +1,5 @@
 <ng-container *transloco="let t; read: 'book_select'">
-  @if (availableBooks.length > 0 && !readonly) {
+  @if (availableBooks.length > 0 && !readonly && !basicMode) {
     <div>
       <mat-checkbox
         class="ot-checkbox"
@@ -44,14 +44,20 @@
         [disabled]="readonly"
         (change)="onChipListChange(book)"
       >
-        <mat-chip-option
-          [value]="book"
-          [selected]="book.selected"
-          [matTooltip]="t('book_progress', { percent: getPercentage(book) | l10nPercent })"
-        >
-          {{ "canon.book_names." + book.bookId | transloco }}
-          <div class="border-fill" [style.width]="book.progressPercentage + '%'"></div>
-        </mat-chip-option>
+        @if (!basicMode) {
+          <mat-chip-option
+            [value]="book"
+            [selected]="book.selected"
+            [matTooltip]="t('book_progress', { percent: getPercentage(book) | l10nPercent })"
+          >
+            {{ "canon.book_names." + book.bookId | transloco }}
+            <div class="border-fill" [style.width]="book.progressPercentage + '%'"></div>
+          </mat-chip-option>
+        } @else {
+          <mat-chip-option [value]="book" [selected]="book.selected">
+            {{ "canon.book_names." + book.bookId | transloco }}
+          </mat-chip-option>
+        }
       </mat-chip-listbox>
     }
   </div>

src/SIL.XForge.Scripture/ClientApp/src/app/shared/book-multi-select/book-multi-select.component.ts

@@ -28,6 +28,7 @@ export class BookMultiSelectComponent extends SubscriptionDisposable implements
   @Input() availableBooks: number[] = [];
   @Input() selectedBooks: number[] = [];
   @Input() readonly: boolean = false;
+  @Input() basicMode: boolean = false;
   @Output() bookSelect = new EventEmitter<number[]>();
 
   protected loaded = false;

src/SIL.XForge.Scripture/ClientApp/src/app/shared/utils.ts

@@ -9,6 +9,7 @@ import { SFProjectProfileDoc } from '../core/models/sf-project-profile-doc';
 import { roleCanAccessCommunityChecking, roleCanAccessTranslate } from '../core/models/sf-project-role-info';
 import { SFProjectUserConfigDoc } from '../core/models/sf-project-user-config-doc';
 import { SelectableProject } from '../core/paratext.service';
+import { DraftSource } from '../translate/draft-generation/draft-sources.service';
 
 // Regular expression for getting the verse from a segment ref
 // Some projects will have the right to left marker in the segment attribute which we need to account for
@@ -190,7 +191,7 @@ export function checkAppAccess(
   }
 }
 
-export function projectLabel(project: SelectableProject | undefined): string {
+export function projectLabel(project: SelectableProject | DraftSource | undefined): string {
   if (project == null || (!project.shortName && !project.name)) {
     return '';
   }

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-generation-steps/draft-generation-steps.component.html

@@ -63,11 +63,13 @@ <h4 class="explanation">
           </button>
         </div>
       </mat-step>
-      <mat-step [completed]="isTrainingOptional || userSelectedTrainingBooks.length > 0">
+      <mat-step [completed]="isTrainingOptional || userSelectedSourceTrainingBooks.length > 0">
         <ng-template matStepLabel>
           {{ t("choose_books_for_training_label") }}
         </ng-template>
         <h1 class="mat-headline-4">{{ t("choose_books_for_training") }}</h1>
+        <h2>Translated Books</h2>
+        <p>{{ targetProjectName }}</p>
         <app-book-multi-select
           [availableBooks]="availableTrainingBooks"
           [selectedBooks]="initialSelectedTrainingBooks"
@@ -103,10 +105,34 @@ <h4 class="explanation">
             </div>
           </app-notice>
         }
-        @if (unusableTranslateTargetBooks.length) {
-          <app-notice>
-            <transloco key="draft_generation_steps.unusable_target_books"></transloco>
-          </app-notice>
+        <h2>Reference Books</h2>
+        <p>{{ trainingSourceProjectName }}</p>
+        @if (selectableTrainingBooks.length === 0) {
+          <app-notice mode="basic" type="light"
+            >Training books will appear as you select books under Translated Books</app-notice
+          >
+        } @else {
+          <app-book-multi-select
+            [availableBooks]="selectableTrainingBooks"
+            [selectedBooks]="userSelectedSourceTrainingBooks"
+            [basicMode]="true"
+            (bookSelect)="onSourceTrainingBookSelect($event)"
+          ></app-book-multi-select>
+        }
+        @if (trainingAdditionalSourceProjectName != null) {
+          <p>{{ trainingAdditionalSourceProjectName }}</p>
+          @if (selectableAdditionalTrainingBooks.length === 0) {
+            <app-notice mode="basic" type="light"
+              >Training books will appear as you select books under Translated Books</app-notice
+            >
+          } @else {
+            <app-book-multi-select
+              [availableBooks]="selectableAdditionalTrainingBooks"
+              [selectedBooks]="userSelectedAdditionalSourceTrainingBooks"
+              [basicMode]="true"
+              (bookSelect)="onAdditionalSourceTrainingBookSelect($event)"
+            ></app-book-multi-select>
+          }
         }
         @if (showBookSelectionError) {
           <app-notice type="error">

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-generation-steps/draft-generation-steps.component.spec.ts

@@ -238,9 +238,11 @@ describe('DraftGenerationStepsComponent', () => {
       fixture.detectChanges();
 
       expect(component.done.emit).toHaveBeenCalledWith({
-        translationBooks,
-        trainingDataFiles,
         trainingBooks: trainingBooks.filter(book => !translationBooks.includes(book)),
+        trainingDataFiles,
+        trainingScriptureRanges: [],
+        translationBooks,
+        translationScriptureRanges: [],
         fastTraining: false
       } as DraftGenerationStepsResult);
       expect(component.isStepsCompleted).toBe(true);
@@ -338,7 +340,9 @@ describe('DraftGenerationStepsComponent', () => {
       expect(component.done.emit).toHaveBeenCalledWith({
         trainingBooks,
         trainingDataFiles,
+        trainingScriptureRanges: [],
         translationBooks,
+        translationScriptureRanges: [],
         fastTraining: true
       } as DraftGenerationStepsResult);
       expect(generateDraftButton['disabled']).toBe(true);