SF-3578 Add Import Questions from Paratext

src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.html

@@ -97,6 +97,23 @@ <h2 mat-dialog-title class="dialog-icon-title">
                   <a mat-button [href]="urls.csvImportHelpPage" target="_blank">{{ t("learn_more") }}</a>
                 </mat-card-actions>
               </mat-card>
+              <mat-card>
+                <mat-card-title>{{ t("import_from_paratext") }}</mat-card-title>
+                <mat-card-content>
+                  <p>{{ t("import_from_paratext_description") }}</p>
+                  <ol>
+                    @for (line of paratextInstructions; track line) {
+                      <li [innerHTML]="line"></li>
+                    }
+                  </ol>
+                </mat-card-content>
+                <mat-card-actions>
+                  <button mat-flat-button color="primary" (click)="importFromParatext()">
+                    {{ t("import_from_paratext") }}
+                  </button>
+                  <a mat-button [href]="urls.transceleratorImportHelpPage" target="_blank">{{ t("learn_more") }}</a>
+                </mat-card-actions>
+              </mat-card>
             </div>
             <div class="support-message">
               @for (i of helpInstructions | async; track i) {
@@ -112,6 +129,33 @@ <h2 mat-dialog-title class="dialog-icon-title">
           </div>
         }
 
+        @case ("paratext_tag_selection") {
+          <div class="paratext-tag-selection">
+            @if (loadingParatextTags) {
+              <mat-spinner></mat-spinner>
+            } @else if (paratextTagLoadError) {
+              <div class="paratext-tag-selection-message error">{{ t("import_from_paratext_tag_load_error") }}</div>
+            } @else if (paratextTagOptions.length === 0) {
+              <div class="paratext-tag-selection-message">{{ t("import_from_paratext_no_tags_available") }}</div>
+            } @else {
+              <p class="paratext-tag-selection-message">{{ t("import_from_paratext_select_tag_instructions") }}</p>
+              @if (paratextTagConversionError) {
+                <div class="paratext-tag-selection-message error">
+                  {{ t("import_from_paratext_tag_conversion_error") }}
+                </div>
+              }
+              <mat-form-field appearance="fill">
+                <mat-label>{{ t("import_from_paratext_select_tag") }}</mat-label>
+                <mat-select [(ngModel)]="selectedParatextTagId" [ngModelOptions]="{ standalone: true }">
+                  @for (tag of paratextTagOptions; track tag.id) {
+                    <mat-option [value]="tag.id">{{ tag.name }}</mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            }
+          </div>
+        }
+
         @case ("loading") {
           <div class="loading"><mat-spinner></mat-spinner></div>
         }
@@ -235,6 +279,11 @@ <h2 mat-dialog-title class="dialog-icon-title">
             {{ t("csv_questions_duplicates") }}
           </div>
         }
+        @if (showDuplicateImportNote && questionSource === "paratext") {
+          <div>
+            {{ t("import_from_paratext_duplicate") }}
+          </div>
+        }
       </div>
     } @else if (status === "progress") {
       <div class="dialog-content-footer">
@@ -247,6 +296,19 @@ <h2 mat-dialog-title class="dialog-icon-title">
   </mat-dialog-content>
   @if (questionSource != null && importCanceled === false) {
     <mat-dialog-actions align="end">
+      @if (status === "paratext_tag_selection") {
+        <button mat-button (click)="cancelParatextTagSelection()">
+          {{ t("back") }}
+        </button>
+        <button
+          mat-flat-button
+          color="primary"
+          (click)="confirmParatextTagSelection()"
+          [disabled]="loadingParatextTags"
+        >
+          {{ t("import_from_paratext_next") }}
+        </button>
+      }
       @if (status === "filter" || status === "file_import_errors") {
         <button mat-button mat-dialog-close>
           {{ t("cancel") }}

src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.scss

@@ -38,7 +38,7 @@
   display: flex;
   column-gap: 1em;
 
-  @include breakpoints.media-breakpoint-only(xs) {
+  @include breakpoints.media-breakpoint-down(md) {
     flex-direction: column;
     row-gap: 1em;
   }
@@ -47,6 +47,7 @@
 .mat-mdc-card {
   display: flex;
   flex-direction: column;
+  flex: 1 1 0;
 
   mat-card-title {
     padding: 16px 16px 0 16px;
@@ -131,6 +132,30 @@
   }
 }
 
+.paratext-tag-selection {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5em;
+  align-items: stretch;
+
+  mat-form-field {
+    width: 100%;
+  }
+
+  mat-spinner {
+    align-self: center;
+  }
+}
+
+.paratext-tag-selection-message {
+  margin: 0;
+  text-align: left;
+
+  &.error {
+    color: var(--mdc-theme-error, #b00020);
+  }
+}
+
 // below is to make denser
 :host ::ng-deep {
   mat-form-field.mat-mdc-form-field.mat-form-field-appearance-outline {