SF-3578 Add Import Questions from Paratext notes

src/RealtimeServer/scriptureforge/models/question.ts

@@ -30,4 +30,5 @@ export interface Question extends ProjectData {
   dateModified: string;
   dateCreated: string;
   transceleratorQuestionId?: string;
+  paratextNoteId?: string;
 }

src/RealtimeServer/scriptureforge/services/question-service.ts

@@ -189,6 +189,9 @@ export class QuestionService extends SFProjectDataService<Question> {
       },
       transceleratorQuestionId: {
         bsonType: 'string'
+      },
+      paratextNoteId: {
+        bsonType: 'string'
       }
     },
     additionalProperties: false

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,24 @@ <h2 mat-dialog-title class="dialog-icon-title">
           </div>
         }
 
+        @case ("paratext_tag_selection") {
+          <div class="paratext-tag-selection">
+            @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>
+              <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>
         }
@@ -136,62 +171,12 @@ <h2 mat-dialog-title class="dialog-icon-title">
           </div>
         }
 
-        @case ("filter") {
-          <form [formGroup]="filterForm" autocomplete="off">
-            <div class="filter-references">
-              <mat-form-field appearance="outline">
-                <mat-label>{{ t("reference_from") }}</mat-label>
-                <input matInput type="text" formControlName="from" />
-                <button mat-icon-button matSuffix #fromRef id="from-btn" (click)="openScriptureChooser(fromControl)">
-                  <mat-icon>expand_more</mat-icon>
-                </button>
-                @if (fromControl.invalid) {
-                  <mat-error>{{ t("must_be_valid_reference") }}</mat-error>
-                }
-              </mat-form-field>
-              <mat-form-field appearance="outline">
-                <mat-label>{{ t("reference_to") }}</mat-label>
-                <input matInput type="text" formControlName="to" />
-                <button mat-icon-button matSuffix (click)="openScriptureChooser(toControl)">
-                  <mat-icon>expand_more</mat-icon>
-                </button>
-                @if (toControl.invalid) {
-                  <mat-error>{{ t("must_be_valid_reference") }}</mat-error>
-                }
-              </mat-form-field>
-            </div>
-            <div colspan="2" class="filter-text">
-              <div>
-                <mat-form-field appearance="fill" subscriptSizing="dynamic">
-                  <input matInput type="text" formControlName="filter" [placeholder]="t('filter_questions')" />
-                </mat-form-field>
-                <button mat-button type="button" (click)="clearFilters()">{{ t("show_all") }}</button>
-              </div>
-            </div>
-            <table mat-table [dataSource]="questionsForDisplay" class="question-list">
-              <ng-container matColumnDef="verse">
-                <th mat-header-cell *matHeaderCellDef>
-                  <mat-checkbox #selectAllCheckbox (change)="selectAllChanged($event.checked)">{{
-                    t("select_all")
-                  }}</mat-checkbox>
-                </th>
-                <td mat-cell *matCellDef="let element">
-                  <mat-checkbox
-                    [(ngModel)]="element.checked"
-                    [ngModelOptions]="{ standalone: true }"
-                    (ngModelChange)="checkboxChanged(element)"
-                    >{{ referenceForDisplay(element.question) }}</mat-checkbox
-                  >
-                </td>
-              </ng-container>
-              <ng-container matColumnDef="question">
-                <th mat-header-cell *matHeaderCellDef>{{ t("question") }}</th>
-                <td mat-cell *matCellDef="let element">{{ element.question.text }}</td>
-              </ng-container>
-              <tr mat-header-row *matHeaderRowDef="['verse', 'question']"></tr>
-              <tr mat-row *matRowDef="let row; columns: ['verse', 'question']"></tr>
-            </table>
-          </form>
+        @case ("filter_questions") {
+          <ng-container *ngTemplateOutlet="filterImportTemplate"></ng-container>
+        }
+
+        @case ("filter_notes") {
+          <ng-container *ngTemplateOutlet="filterImportTemplate"></ng-container>
         }
 
         @case ("no_questions") {
@@ -210,6 +195,10 @@ <h2 mat-dialog-title class="dialog-icon-title">
           <div [innerHTML]="i18n.translateAndInsertTags('import_questions_dialog.missing_header_row')"></div>
         }
 
+        @case ("paratext_tag_load_error") {
+          <div class="paratext-tag-selection-message error">{{ t("import_from_paratext_tag_load_error") }}</div>
+        }
+
         @case ("progress") {
           <div>
             <mat-progress-bar mode="determinate" [value]="(importedCount / toImportCount) * 100"></mat-progress-bar>
@@ -218,7 +207,7 @@ <h2 mat-dialog-title class="dialog-icon-title">
       }
     </div>
 
-    @if (status === "filter") {
+    @if (status === "filter_questions" || status === "filter_notes") {
       <div class="dialog-content-footer">
         @if (importClicked && selectedCount < 1) {
           <mat-error>
@@ -235,6 +224,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">
@@ -245,11 +239,86 @@ <h2 mat-dialog-title class="dialog-icon-title">
       </div>
     }
   </mat-dialog-content>
+  <ng-template #filterImportTemplate>
+    <form [formGroup]="filterForm" autocomplete="off">
+      <div class="filter-references">
+        <mat-form-field appearance="outline">
+          <mat-label>{{ t("reference_from") }}</mat-label>
+          <input matInput type="text" formControlName="from" />
+          <button mat-icon-button matSuffix #fromRef id="from-btn" (click)="openScriptureChooser(fromControl)">
+            <mat-icon>expand_more</mat-icon>
+          </button>
+          @if (fromControl.invalid) {
+            <mat-error>{{ t("must_be_valid_reference") }}</mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field appearance="outline">
+          <mat-label>{{ t("reference_to") }}</mat-label>
+          <input matInput type="text" formControlName="to" />
+          <button mat-icon-button matSuffix (click)="openScriptureChooser(toControl)">
+            <mat-icon>expand_more</mat-icon>
+          </button>
+          @if (toControl.invalid) {
+            <mat-error>{{ t("must_be_valid_reference") }}</mat-error>
+          }
+        </mat-form-field>
+      </div>
+      <div colspan="2" class="filter-text">
+        <div>
+          <mat-form-field appearance="fill" subscriptSizing="dynamic">
+            <input matInput type="text" formControlName="filter" [placeholder]="t('filter_questions')" />
+          </mat-form-field>
+          <button mat-button type="button" (click)="clearFilters()">{{ t("show_all") }}</button>
+        </div>
+      </div>
+      <table mat-table [dataSource]="questionsForDisplay" class="question-list">
+        <ng-container matColumnDef="verse">
+          <th mat-header-cell *matHeaderCellDef>
+            <mat-checkbox #selectAllCheckbox (change)="selectAllChanged($event.checked)">{{
+              t("select_all")
+            }}</mat-checkbox>
+          </th>
+          <td mat-cell *matCellDef="let element">
+            <mat-checkbox
+              [(ngModel)]="element.checked"
+              [ngModelOptions]="{ standalone: true }"
+              (ngModelChange)="checkboxChanged(element)"
+              >{{ referenceForDisplay(element.question) }}</mat-checkbox
+            >
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="question">
+          <th mat-header-cell *matHeaderCellDef>{{ t("question") }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.question.text }}</td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="['verse', 'question']"></tr>
+        <tr mat-row *matRowDef="let row; columns: ['verse', 'question']"></tr>
+      </table>
+    </form>
+  </ng-template>
   @if (questionSource != null && importCanceled === false) {
     <mat-dialog-actions align="end">
-      @if (status === "filter" || status === "file_import_errors") {
-        <button mat-button mat-dialog-close>
-          {{ t("cancel") }}
+      @if (status === "paratext_tag_selection" || errorState === "paratext_tag_load_error") {
+        <button mat-button (click)="reset()">
+          {{ t("back") }}
+        </button>
+        <button
+          mat-flat-button
+          color="primary"
+          (click)="confirmParatextTagSelection()"
+          [disabled]="errorState === 'paratext_tag_load_error'"
+        >
+          {{ t("next") }}
+        </button>
+      }
+      @if (status === "filter_questions" || status === "file_import_errors") {
+        <button mat-button (click)="reset()">
+          {{ t("back") }}
+        </button>
+      }
+      @if (status === "filter_notes") {
+        <button mat-button (click)="importFromParatext()">
+          {{ t("back") }}
         </button>
       }
       @if (status === "no_questions" || status === "update_transcelerator" || status === "missing_header_row") {
@@ -262,7 +331,7 @@ <h2 mat-dialog-title class="dialog-icon-title">
           {{ t("continue_import") }}
         </button>
       }
-      @if (status === "filter") {
+      @if (status === "filter_questions" || status === "filter_notes") {
         <button id="import-button" mat-flat-button color="primary" (click)="importQuestions()">
           <span class="hide-lt-sm">{{ t("import_count_questions", { count: selectedCount }) }}</span>
           <span class="hide-gt-sm">{{ t("import") }}</span>

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 {