From b6e280233132a90da1f25f0d91ea09393ab339da Mon Sep 17 00:00:00 2001 From: Raymond Luong Date: Wed, 9 Oct 2024 16:12:16 -0600 Subject: [PATCH 01/10] SF-3007 Add audio comments --- .../scriptureforge/models/answer.ts | 2 - .../scriptureforge/models/comment.ts | 1 + .../services/question-service.ts | 7 +- .../checking-answers.component.html | 1 + .../checking-answers.component.ts | 3 +- .../checking-comment-form.component.html | 27 ++++--- .../checking-comment-form.component.scss | 11 ++- .../checking-comment-form.component.ts | 52 ++++++------ .../checking-comments.component.html | 19 ++++- .../checking-comments.component.scss | 6 +- .../checking-comments.component.ts | 9 ++- .../checking/checking.component.spec.ts | 80 ++++++++++++++++++- .../checking/checking/checking.component.ts | 70 +++++++++------- src/SIL.XForge.Scripture/Models/Answer.cs | 1 - src/SIL.XForge.Scripture/Models/Comment.cs | 1 + .../Services/ParatextNotesMapperTests.cs | 8 +- 16 files changed, 204 insertions(+), 94 deletions(-) diff --git a/src/RealtimeServer/scriptureforge/models/answer.ts b/src/RealtimeServer/scriptureforge/models/answer.ts index 70130c9220..5fe67b2b51 100644 --- a/src/RealtimeServer/scriptureforge/models/answer.ts +++ b/src/RealtimeServer/scriptureforge/models/answer.ts @@ -13,8 +13,6 @@ export interface Answer extends Comment { scriptureText?: string; selectionStartClipped?: boolean; selectionEndClipped?: boolean; - audioUrl?: string; - text?: string; likes: Like[]; comments: Comment[]; status?: AnswerStatus; diff --git a/src/RealtimeServer/scriptureforge/models/comment.ts b/src/RealtimeServer/scriptureforge/models/comment.ts index 4f9d168051..7d19b3c046 100644 --- a/src/RealtimeServer/scriptureforge/models/comment.ts +++ b/src/RealtimeServer/scriptureforge/models/comment.ts @@ -5,6 +5,7 @@ export interface Comment extends OwnedData { deleted: boolean; syncUserRef?: string; text?: string; + audioUrl?: string; dateModified: string; dateCreated: string; } diff --git a/src/RealtimeServer/scriptureforge/services/question-service.ts b/src/RealtimeServer/scriptureforge/services/question-service.ts index 75b0e1e922..be11f00849 100644 --- a/src/RealtimeServer/scriptureforge/services/question-service.ts +++ b/src/RealtimeServer/scriptureforge/services/question-service.ts @@ -6,7 +6,7 @@ import { ANY_INDEX } from '../../common/utils/obj-path'; import { createFetchQuery, docSubmitJson0Op } from '../../common/utils/sharedb-utils'; import { Answer } from '../models/answer'; import { Comment } from '../models/comment'; -import { Question, QUESTIONS_COLLECTION, QUESTION_INDEX_PATHS } from '../models/question'; +import { QUESTIONS_COLLECTION, QUESTION_INDEX_PATHS, Question } from '../models/question'; import { SFProjectDomain } from '../models/sf-project-rights'; import { SFProjectUserConfig, SF_PROJECT_USER_CONFIGS_COLLECTION } from '../models/sf-project-user-config'; import { QUESTION_MIGRATIONS } from './question-migrations'; @@ -100,7 +100,10 @@ export class QuestionService extends SFProjectDataService { bsonType: 'string' }, text: { - bsonType: ['null', 'string'] + bsonType: 'string' + }, + audioUrl: { + bsonType: 'string' }, dateModified: { bsonType: 'string' diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html index 5704d6c2e1..433e71314e 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html @@ -209,6 +209,7 @@

-
- - {{ t("your_comment") }} - - @if (showValidationError) { - {{ t("comment_cannot_be_blank") }} - } - + +
- - + +
+ + +
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.scss index 50aa12bfe9..25cddc38ce 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.scss +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.scss @@ -1,9 +1,12 @@ .form-actions { + padding-top: 8px; display: flex; - justify-content: flex-end; - gap: 10px; + justify-content: space-between; + .button-actions { + gap: 10px; + } } -.mat-mdc-form-field { - width: 100%; +.comment-input ::ng-deep textarea { + height: 24px; } diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.ts index 487ab2bdf1..6ccaed42c1 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.ts @@ -1,6 +1,9 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { FormControl, FormGroup, Validators } from '@angular/forms'; -import { XFValidators } from 'xforge-common/xfvalidators'; +import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'; +import { translate } from '@ngneat/transloco'; +import { Comment } from 'realtime-server/lib/esm/scriptureforge/models/comment'; +import { NoticeService } from 'xforge-common/notice.service'; +import { TextAndAudioComponent } from '../../../../text-and-audio/text-and-audio.component'; +import { AudioAttachment } from '../../../checking-audio-recorder/checking-audio-recorder.component'; @Component({ selector: 'app-checking-comment-form', @@ -8,36 +11,33 @@ import { XFValidators } from 'xforge-common/xfvalidators'; styleUrls: ['./checking-comment-form.component.scss'] }) export class CheckingCommentFormComponent { - @Input() set text(value: string | undefined) { - if (value != null) { - this.commentForm.controls.commentText.setValue(value); - } - } - - @Output() save: EventEmitter = new EventEmitter(); + @Input() comment?: Comment; + @Output() save: EventEmitter<{ text?: string; audio?: AudioAttachment }> = new EventEmitter<{ + text?: string; + audio?: AudioAttachment; + }>(); @Output() cancel: EventEmitter = new EventEmitter(); + @ViewChild(TextAndAudioComponent) textAndAudio?: TextAndAudioComponent; - commentForm = new FormGroup({ - commentText: new FormControl('', [Validators.required, XFValidators.someNonWhitespace]) - }); - - constructor() {} + constructor(private readonly noticeService: NoticeService) {} - submit(): void { - const commentText = this.commentForm.controls.commentText.value; - if (this.commentForm.valid && typeof commentText === 'string') { - this.save.emit(commentText); - this.commentForm.reset(); + async submit(): Promise { + if (this.textAndAudio != null) { + this.textAndAudio.suppressErrors = false; + if (this.textAndAudio.audioComponent?.isRecording) { + await this.textAndAudio.audioComponent.stopRecording(); + this.noticeService.show(translate('checking_answers.recording_automatically_stopped')); + } } + if (!this.textAndAudio?.hasTextOrAudio()) { + this.textAndAudio?.text.setErrors({ invalid: true }); + return; + } + const comment = { text: this.textAndAudio?.text.value, audio: this.textAndAudio?.audioAttachment }; + this.save.emit(comment); } submitCancel(): void { - this.commentForm.reset(); this.cancel.emit(); } - - get showValidationError(): boolean { - const control = this.commentForm.controls.commentText; - return control.invalid && control.touched; - } } diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html index a3fda1efbd..ca0474a5ef 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html @@ -6,8 +6,21 @@ (i + 1 < maxCommentsToShow || commentCount === maxCommentsToShow || showAllComments) ) {
- {{ comment.text }} - - + @if (comment.audioUrl != null) { + + {{ audio.playing ? "stop" : "play_arrow" }} + + } + {{ comment.text }} +
+ - + +
@if (canEditComment(comment)) {
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.scss index d53c16d746..c9d9f9fb9a 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.scss +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.scss @@ -3,6 +3,8 @@ .comment { display: flex; flex-wrap: wrap; + align-items: center; + column-gap: 8px; border-bottom: 1px solid $borderColor; padding: 10px 0; @@ -21,8 +23,8 @@ } } - .divider { - padding: 0 10px; + .comment-text { + flex: 1 0 50%; } .actions { diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.ts index 6595fdd97a..a97f5dbaf8 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.ts @@ -13,12 +13,14 @@ import { SubscriptionDisposable } from 'xforge-common/subscription-disposable'; import { UserService } from 'xforge-common/user.service'; import { QuestionDoc } from '../../../../core/models/question-doc'; import { SFProjectUserConfigDoc } from '../../../../core/models/sf-project-user-config-doc'; +import { AudioAttachment } from '../../checking-audio-recorder/checking-audio-recorder.component'; export interface CommentAction { action: 'delete' | 'save' | 'show-form' | 'hide-form' | 'show-comments'; comment?: Comment; answer?: Answer; text?: string; + audio?: AudioAttachment; } @Component({ @@ -189,12 +191,13 @@ export class CheckingCommentsComponent extends SubscriptionDisposable implements }); } - submit(text: string): void { + submit(comment: { text?: string; audio?: AudioAttachment }): void { this.action.emit({ action: 'save', answer: this.answer, - text, - comment: this.activeComment + text: comment.text, + comment: this.activeComment, + audio: comment?.audio }); this.hideCommentForm(); this.showAllComments = true; diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts index e1088d7f66..db10e0fcd0 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts @@ -1725,6 +1725,7 @@ describe('CheckingComponent', () => { env.selectQuestion(1); env.answerQuestion('Answer question to be commented on'); env.commentOnAnswer(0, 'Response to answer'); + env.waitForSliderUpdate(); expect(env.getAnswerComments(0).length).toBe(1); flush(); })); @@ -1735,9 +1736,11 @@ describe('CheckingComponent', () => { env.selectQuestion(14); env.answerQuestion('Answer question to be commented on'); env.commentOnAnswer(0, 'Response to answer'); + env.waitForSliderUpdate(); env.commentOnAnswer(0, 'Second comment to answer'); + env.waitForSliderUpdate(); env.clickButton(env.getEditCommentButton(0, 0)); - expect(env.commentFormTextFields.length).toEqual(1); + expect(env.getYourCommentField(0)).not.toBeNull(); env.setTextFieldValue(env.getYourCommentField(0), 'Edited comment'); env.clickButton(env.getSaveCommentButton(0)); env.waitForSliderUpdate(); @@ -1752,6 +1755,7 @@ describe('CheckingComponent', () => { env.selectQuestion(1); env.answerQuestion('Answer question to be commented on'); env.commentOnAnswer(0, 'Response to answer'); + env.waitForSliderUpdate(); expect(env.getAnswerComments(0).length).toBe(1); env.clickButton(env.getDeleteCommentButton(0, 0)); env.waitForSliderUpdate(); @@ -1759,16 +1763,72 @@ describe('CheckingComponent', () => { flush(); })); + it('can record audio for a comment', fakeAsync(() => { + const env = new TestEnvironment({ user: CHECKER_USER }); + env.selectQuestion(1); + env.answerQuestion('Answer question to be commented on'); + const resolveUpload$: Subject = env.resolveFileUploadSubject('blob://audio'); + env.commentOnAnswer(0, 'comment with audio', 'audioFile.mp3'); + resolveUpload$.next(); + env.waitForSliderUpdate(); + expect(env.component.answersPanel!.answers[0].comments[0].audioUrl).toEqual('blob://audio'); + env.waitForSliderUpdate(); + expect(env.getAnswerCommentAudio(0, 0)).not.toBeNull(); + })); + + it('can remove audio from a comment', fakeAsync(() => { + const env = new TestEnvironment({ user: CHECKER_USER }); + env.selectQuestion(1); + env.answerQuestion('Answer question to be commented on'); + const resolveUpload$: Subject = env.resolveFileUploadSubject('blob://audio'); + env.commentOnAnswer(0, 'comment with audio', 'audioFile.mp3'); + resolveUpload$.next(); + env.waitForSliderUpdate(); + expect(env.component.answersPanel!.answers[0].comments[0].audioUrl).toEqual('blob://audio'); + env.waitForSliderUpdate(); + expect(env.getAnswerCommentAudio(0, 0)).not.toBeNull(); + env.clickButton(env.getEditCommentButton(0, 0)); + env.clickButton(env.removeAudioButton); + env.clickButton(env.getSaveCommentButton(0)); + env.waitForSliderUpdate(); + verify( + mockedFileService.deleteFile(FileType.Audio, 'project01', QuestionDoc.COLLECTION, anything(), anything()) + ).once(); + })); + + it('will delete comment audio when comment is deleted', fakeAsync(() => { + const env = new TestEnvironment({ user: CHECKER_USER }); + env.selectQuestion(1); + const resolveUpload$: Subject = env.resolveFileUploadSubject('blob://audio'); + env.answerQuestion('Answer question to be commented on'); + env.commentOnAnswer(0, 'comment with audio', 'audioFile.mp3'); + resolveUpload$.next(); + env.waitForSliderUpdate(); + expect(env.component.answersPanel!.answers[0].comments[0].audioUrl).toEqual('blob://audio'); + env.waitForSliderUpdate(); + expect(env.getAnswerComments(0).length).toBe(1); + expect(env.getAnswerCommentAudio(0, 0)).not.toBeNull(); + env.clickButton(env.getDeleteCommentButton(0, 0)); + env.waitForSliderUpdate(); + expect(env.getAnswerComments(0).length).toBe(0); + verify( + mockedFileService.deleteFile(FileType.Audio, 'project01', QuestionDoc.COLLECTION, anything(), anything()) + ).once(); + flush(); + })); + it('comments only appear on the relevant answer', fakeAsync(() => { const env = new TestEnvironment({ user: CHECKER_USER }); env.selectQuestion(1); env.answerQuestion('Answer question to be commented on'); env.commentOnAnswer(0, 'First comment'); env.commentOnAnswer(0, 'Second comment'); + env.waitForSliderUpdate(); expect(env.getAnswerComments(0).length).toBe(2); env.selectQuestion(2); env.answerQuestion('Second answer question to be commented on'); env.commentOnAnswer(0, 'Third comment'); + env.waitForSliderUpdate(); expect(env.getAnswerComments(0).length).toBe(1); expect(env.getAnswerCommentText(0, 0)).toBe('Third comment'); env.selectQuestion(1); @@ -2845,10 +2905,17 @@ class TestEnvironment { tick(); } - commentOnAnswer(answerIndex: number, comment: string): void { + commentOnAnswer(answerIndex: number, comment: string, audioFilename?: string): void { this.clickButton(this.getAddCommentButton(answerIndex)); + if (this.getYourCommentField(answerIndex) == null) return; this.setTextFieldValue(this.getYourCommentField(answerIndex), comment); - this.clickButton(this.getSaveCommentButton(answerIndex)); + let commentAudio: AudioAttachment | undefined; + if (audioFilename != null) { + commentAudio = { status: 'processed', blob: getAudioBlob(), fileName: audioFilename }; + } + const commentsComponent = this.fixture.debugElement.query(By.css('#answer-comments'))! + .componentInstance as CheckingCommentsComponent; + commentsComponent.submit({ text: comment, audio: commentAudio }); this.waitForSliderUpdate(); } @@ -2909,6 +2976,11 @@ class TestEnvironment { return commentText.query(By.css('.comment-text')).nativeElement.textContent; } + getAnswerCommentAudio(answerIndex: number, commentIndex: number): DebugElement { + const comment = this.getAnswerComment(answerIndex, commentIndex); + return comment.query(By.css('.comment-audio')).nativeElement; + } + getDeleteCommentButton(answerIndex: number, commentIndex: number): DebugElement { return this.getAnswerComments(answerIndex)[commentIndex].query(By.css('.comment-delete')); } @@ -2935,7 +3007,7 @@ class TestEnvironment { } getYourCommentField(answerIndex: number): DebugElement { - return this.getAnswer(answerIndex).query(By.css('[formControlName="commentText"]')); + return this.getAnswer(answerIndex).query(By.css('textarea[formControlName="text"]')); } selectQuestion(/** indexed starting at 1 */ questionNumber: number, includeReadTimer: boolean = true): DebugElement { diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.ts index d2c0734b72..de6a76dd05 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.ts @@ -11,12 +11,12 @@ import { AudioTiming } from 'realtime-server/lib/esm/scriptureforge/models/audio import { Comment } from 'realtime-server/lib/esm/scriptureforge/models/comment'; import { Question } from 'realtime-server/lib/esm/scriptureforge/models/question'; import { SFProjectProfile } from 'realtime-server/lib/esm/scriptureforge/models/sf-project'; -import { SF_PROJECT_RIGHTS, SFProjectDomain } from 'realtime-server/lib/esm/scriptureforge/models/sf-project-rights'; +import { SFProjectDomain, SF_PROJECT_RIGHTS } from 'realtime-server/lib/esm/scriptureforge/models/sf-project-rights'; import { SFProjectRole } from 'realtime-server/lib/esm/scriptureforge/models/sf-project-role'; import { getTextAudioId } from 'realtime-server/lib/esm/scriptureforge/models/text-audio'; import { TextInfo } from 'realtime-server/lib/esm/scriptureforge/models/text-info'; -import { toVerseRef, VerseRefData } from 'realtime-server/lib/esm/scriptureforge/models/verse-ref-data'; -import { asyncScheduler, combineLatest, merge, Subscription } from 'rxjs'; +import { VerseRefData, toVerseRef } from 'realtime-server/lib/esm/scriptureforge/models/verse-ref-data'; +import { Subscription, asyncScheduler, combineLatest, merge } from 'rxjs'; import { distinctUntilChanged, filter, map, startWith, throttleTime } from 'rxjs/operators'; import { DataLoadingComponent } from 'xforge-common/data-loading-component'; import { I18nService } from 'xforge-common/i18n.service'; @@ -39,11 +39,12 @@ import { SFProjectService } from '../../core/sf-project.service'; import { getVerseStrFromSegmentRef } from '../../shared/utils'; import { ChapterAudioDialogData } from '../chapter-audio-dialog/chapter-audio-dialog.component'; import { ChapterAudioDialogService } from '../chapter-audio-dialog/chapter-audio-dialog.service'; -import { BookChapter, CheckingUtils, isQuestionScope, QuestionScope } from '../checking.utils'; +import { BookChapter, CheckingUtils, QuestionScope, isQuestionScope } from '../checking.utils'; import { QuestionDialogData } from '../question-dialog/question-dialog.component'; import { QuestionDialogService } from '../question-dialog/question-dialog.service'; import { AnswerAction, CheckingAnswersComponent } from './checking-answers/checking-answers.component'; import { CommentAction } from './checking-answers/checking-comments/checking-comments.component'; +import { AudioAttachment } from './checking-audio-recorder/checking-audio-recorder.component'; import { CheckingQuestionsService, PreCreationQuestionData, QuestionFilter } from './checking-questions.service'; import { CheckingQuestionsComponent, QuestionChangedEvent } from './checking-questions/checking-questions.component'; import { CheckingScriptureAudioPlayerComponent } from './checking-scripture-audio-player/checking-scripture-audio-player.component'; @@ -753,29 +754,13 @@ export class CheckingComponent extends DataLoadingComponent implements OnInit, A answer.selectionStartClipped = answerAction.selectionStartClipped; answer.selectionEndClipped = answerAction.selectionEndClipped; answer.dateModified = dateNow; - if (answerAction.audio != null) { - if (answerAction.audio.fileName != null && answerAction.audio.blob != null) { - if (answerAction.questionDoc != null) { - // Get the amended filename and save it against the answer - const urlResult = await answerAction.questionDoc.uploadFile( - FileType.Audio, - answer.dataId, - answerAction.audio.blob, - answerAction.audio.fileName - ); - if (urlResult == null) { - break; - } - answer.audioUrl = urlResult; - } - } else if (answerAction.audio.status === 'reset') { - answer.audioUrl = undefined; + // add the audio url + if (await this.addAudioUrl(answer, answerAction.questionDoc, answerAction.audio)) { + this.saveAnswer(answer, answerAction.questionDoc); + if (answerAction.savedCallback != null) { + answerAction.savedCallback(); } } - this.saveAnswer(answer, answerAction.questionDoc); - if (answerAction.savedCallback != null) { - answerAction.savedCallback(); - } break; case 'delete': if (answerAction.answer != null) { @@ -818,11 +803,10 @@ export class CheckingComponent extends DataLoadingComponent implements OnInit, A this.isQuestionsOverlayVisible = visible; } - commentAction(commentAction: CommentAction): void { + async commentAction(commentAction: CommentAction): Promise { if (this.questionsList == null) { return; } - switch (commentAction.action) { case 'save': if (commentAction.answer != null) { @@ -840,7 +824,9 @@ export class CheckingComponent extends DataLoadingComponent implements OnInit, A } comment.text = commentAction.text; comment.dateModified = dateNow; - this.saveComment(commentAction.answer, comment); + if (await this.addAudioUrl(comment, this.questionsList.activeQuestionDoc!, commentAction.audio)) { + this.saveComment(commentAction.answer, comment); + } } break; case 'show-comments': @@ -1241,6 +1227,23 @@ export class CheckingComponent extends DataLoadingComponent implements OnInit, A this.setQuestionFilter(QuestionFilter.None); } + /** Upload the attached audio and updates the url on the comment if one exists. */ + private async addAudioUrl(comment: Comment, questionDoc?: QuestionDoc, audio?: AudioAttachment): Promise { + if (audio != null) { + if (audio.fileName != null && audio.blob != null) { + if (questionDoc != null) { + // Get the amended filename and save it against the answer + const urlResult = await questionDoc.uploadFile(FileType.Audio, comment.dataId, audio.blob, audio.fileName); + if (urlResult == null) return false; + comment.audioUrl = urlResult; + } + } else if (audio.status === 'reset') { + comment.audioUrl = undefined; + } + } + return true; + } + private saveAnswer(answer: Answer, questionDoc: QuestionDoc | undefined): void { if (this.questionsList == null || questionDoc?.data == null) { return; @@ -1294,11 +1297,16 @@ export class CheckingComponent extends DataLoadingComponent implements OnInit, A const answerIndex = this.getAnswerIndex(answer); const commentIndex = answer.comments.findIndex(c => c.dataId === comment.dataId); if (commentIndex >= 0) { - activeQuestionDoc.submitJson0Op(op => + const deleteAudio: boolean = answer.comments[commentIndex].audioUrl != null && answer.audioUrl == null; + const submitPromise: Promise = activeQuestionDoc.submitJson0Op(op => op .set(q => q.answers[answerIndex].comments[commentIndex].text, comment.text) + .set(q => q.answers[answerIndex].comments[commentIndex].audioUrl, comment.audioUrl) .set(q => q.answers[answerIndex].comments[commentIndex].dateModified, comment.dateModified) ); + if (deleteAudio) { + submitPromise.then(() => activeQuestionDoc.deleteFile(FileType.Audio, comment.dataId, comment.ownerRef)); + } } else { activeQuestionDoc.submitJson0Op(op => op.insert(q => q.answers[answerIndex].comments, 0, comment)); } @@ -1316,7 +1324,9 @@ export class CheckingComponent extends DataLoadingComponent implements OnInit, A const answerIndex = this.getAnswerIndex(answer); const commentIndex = answer.comments.findIndex(c => c.dataId === comment.dataId); if (commentIndex >= 0) { - activeQuestionDoc.submitJson0Op(op => op.set(q => q.answers[answerIndex].comments[commentIndex].deleted, true)); + activeQuestionDoc + .submitJson0Op(op => op.set(q => q.answers[answerIndex].comments[commentIndex].deleted, true)) + .then(() => activeQuestionDoc.deleteFile(FileType.Audio, comment.dataId, comment.ownerRef)); } } diff --git a/src/SIL.XForge.Scripture/Models/Answer.cs b/src/SIL.XForge.Scripture/Models/Answer.cs index 131efced06..b67d2b4276 100644 --- a/src/SIL.XForge.Scripture/Models/Answer.cs +++ b/src/SIL.XForge.Scripture/Models/Answer.cs @@ -6,7 +6,6 @@ public class Answer : Comment { public VerseRefData? VerseRef { get; set; } public string? ScriptureText { get; set; } - public string? AudioUrl { get; set; } public List Likes { get; set; } = new List(); public List Comments { get; set; } = new List(); public string Status { get; set; } = AnswerStatus.None; diff --git a/src/SIL.XForge.Scripture/Models/Comment.cs b/src/SIL.XForge.Scripture/Models/Comment.cs index 02f4bb769e..a80957d1d3 100644 --- a/src/SIL.XForge.Scripture/Models/Comment.cs +++ b/src/SIL.XForge.Scripture/Models/Comment.cs @@ -14,6 +14,7 @@ public class Comment : IOwnedData /// public string? SyncUserRef { get; set; } public string? Text { get; set; } + public string? AudioUrl { get; set; } public DateTime DateModified { get; set; } public DateTime DateCreated { get; set; } diff --git a/test/SIL.XForge.Scripture.Tests/Services/ParatextNotesMapperTests.cs b/test/SIL.XForge.Scripture.Tests/Services/ParatextNotesMapperTests.cs index 0deb8ea3cb..6a098a09d7 100644 --- a/test/SIL.XForge.Scripture.Tests/Services/ParatextNotesMapperTests.cs +++ b/test/SIL.XForge.Scripture.Tests/Services/ParatextNotesMapperTests.cs @@ -269,7 +269,7 @@ await TestEnvironment.GetQuestionDocsAsync(conn), 3 - Test comment 1. + - xForge audio-only response - @@ -1017,7 +1017,7 @@ public void AddData( Id = "project01:question01", DataId = "question01", VerseRef = new VerseRefData(40, 1, 1), - Text = useAudioResponses ? "" : "Test question?", + Text = useAudioResponses ? null : "Test question?", Answers = { new Answer @@ -1026,7 +1026,7 @@ public void AddData( OwnerRef = "user02", SyncUserRef = answerSyncUserId1, DateCreated = new DateTime(2019, 1, 1, 8, 0, 0, DateTimeKind.Utc), - Text = useAudioResponses ? "" : "Test answer 1.", + Text = useAudioResponses ? null : "Test answer 1.", Comments = { new Comment @@ -1035,7 +1035,7 @@ public void AddData( OwnerRef = "user03", SyncUserRef = commentSyncUserId1, DateCreated = new DateTime(2019, 1, 1, 9, 0, 0, DateTimeKind.Utc), - Text = "Test comment 1.", + Text = useAudioResponses ? null : "Test comment 1.", }, }, }, From 5967ba774097c348ffe786ab5703dcf8105e11ab Mon Sep 17 00:00:00 2001 From: Raymond Luong Date: Thu, 17 Oct 2024 16:40:12 -0600 Subject: [PATCH 02/10] Fix stories --- .../checking-comment-form.stories.ts | 24 +++++++++++++++---- .../src/assets/i18n/checking_en.json | 1 - 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.stories.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.stories.ts index 734eaccc73..514201bc3f 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.stories.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.stories.ts @@ -4,12 +4,20 @@ import { expect } from '@storybook/jest'; import { userEvent, within } from '@storybook/testing-library'; import { I18nStoryModule } from 'xforge-common/i18n-story.module'; import { UICommonModule } from 'xforge-common/ui-common.module'; +import { AttachAudioComponent } from '../../../../attach-audio/attach-audio.component'; +import { TextAndAudioComponent } from '../../../../text-and-audio/text-and-audio.component'; +import { CheckingAudioRecorderComponent } from '../../../checking-audio-recorder/checking-audio-recorder.component'; import { CheckingCommentFormComponent } from './checking-comment-form.component'; const meta: Meta = { title: 'Checking/Comments/Comment Form', component: CheckingCommentFormComponent, - decorators: [moduleMetadata({ imports: [CommonModule, UICommonModule, I18nStoryModule] })] + decorators: [ + moduleMetadata({ + imports: [CommonModule, UICommonModule, I18nStoryModule], + declarations: [TextAndAudioComponent, AttachAudioComponent, CheckingAudioRecorderComponent] + }) + ] }; export default meta; @@ -24,7 +32,16 @@ export const NewForm: Story = { }; export const EditForm: Story = { - args: { text: 'This is a comment' }, + args: { + comment: { + dataId: 'c01', + ownerRef: 'user01', + text: 'This is a comment', + deleted: false, + dateCreated: '', + dateModified: '' + } + }, parameters: { // Disabled for the same reason the story above chromatic: { disableSnapshot: true } @@ -32,14 +49,13 @@ export const EditForm: Story = { }; export const InvalidForm: Story = { - args: { text: '' }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); // Only necessary because the autofocus directive has to use setTimeout await new Promise(resolve => setTimeout(resolve, 0)); const saveButton: HTMLElement = canvas.getByRole('button', { name: /Save/i }); await userEvent.click(saveButton); - const error: HTMLElement = canvas.getByText(/You need to enter your comment before saving/i); + const error: HTMLElement = canvas.getByText(/Provide text or audio before saving/i); expect(error).toBeInTheDocument(); } }; diff --git a/src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json b/src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json index cd551a65cc..05e25a6fe7 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json +++ b/src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json @@ -266,7 +266,6 @@ }, "checking_comment_form": { "cancel": "Cancel", - "comment_cannot_be_blank": "You need to enter your comment before saving", "save_comment": "Save comment", "your_comment": "Your comment" }, From 22a8d208b8aeb48b15e046584a54244dc9229e0c Mon Sep 17 00:00:00 2001 From: Raymond Luong Date: Fri, 18 Oct 2024 12:19:22 -0600 Subject: [PATCH 03/10] Add text placeholder if comment text missing --- .../checking-comments/checking-comments.component.html | 2 +- .../src/app/checking/checking/checking.component.spec.ts | 4 +++- .../ClientApp/src/assets/i18n/checking_en.json | 1 + 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html index ca0474a5ef..3e5496da78 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html @@ -16,7 +16,7 @@ {{ audio.playing ? "stop" : "play_arrow" }} } - {{ comment.text }} + {{ comment.text ? comment.text : "- " + t("audio_comment") + " -" }}
- diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts index db10e0fcd0..831c6730c4 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts @@ -1768,12 +1768,13 @@ describe('CheckingComponent', () => { env.selectQuestion(1); env.answerQuestion('Answer question to be commented on'); const resolveUpload$: Subject = env.resolveFileUploadSubject('blob://audio'); - env.commentOnAnswer(0, 'comment with audio', 'audioFile.mp3'); + env.commentOnAnswer(0, '', 'audioFile.mp3'); resolveUpload$.next(); env.waitForSliderUpdate(); expect(env.component.answersPanel!.answers[0].comments[0].audioUrl).toEqual('blob://audio'); env.waitForSliderUpdate(); expect(env.getAnswerCommentAudio(0, 0)).not.toBeNull(); + expect(env.getAnswerCommentText(0, 0)).toContain('Audio comment'); })); it('can remove audio from a comment', fakeAsync(() => { @@ -1786,6 +1787,7 @@ describe('CheckingComponent', () => { env.waitForSliderUpdate(); expect(env.component.answersPanel!.answers[0].comments[0].audioUrl).toEqual('blob://audio'); env.waitForSliderUpdate(); + expect(env.getAnswerCommentText(0, 0)).toContain('comment with audio'); expect(env.getAnswerCommentAudio(0, 0)).not.toBeNull(); env.clickButton(env.getEditCommentButton(0, 0)); env.clickButton(env.removeAudioButton); diff --git a/src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json b/src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json index 05e25a6fe7..fe6a7c214c 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json +++ b/src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json @@ -271,6 +271,7 @@ }, "checking_comments": { "add_a_comment": "Add a comment", + "audio_comment": "Audio comment", "delete": "Delete", "confirm_delete": "Are you sure you want to delete this comment?", "edit": "Edit", From a8e4ddb5c004af93706b889374cf77baa3d9a408 Mon Sep 17 00:00:00 2001 From: Raymond Luong Date: Fri, 18 Oct 2024 12:59:51 -0600 Subject: [PATCH 04/10] Wait for button to appear --- .../audio-recorder-dialog.component.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/shared/audio-recorder-dialog/audio-recorder-dialog.component.spec.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/shared/audio-recorder-dialog/audio-recorder-dialog.component.spec.ts index 953083860d..626a5b7221 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/shared/audio-recorder-dialog/audio-recorder-dialog.component.spec.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/shared/audio-recorder-dialog/audio-recorder-dialog.component.spec.ts @@ -61,6 +61,7 @@ describe('AudioRecorderDialogComponent', () => { it('can record', async () => { const env = new TestEnvironment(); + env.waitForRecorder(300); expect(env.recordButton).toBeTruthy(); expect(env.stopRecordingButton).toBeFalsy(); expect(env.recordingIndicator).toBeNull(); From 9097e289a0d028f5f2977e3dc60ca916a722d9c6 Mon Sep 17 00:00:00 2001 From: Raymond Luong Date: Mon, 21 Oct 2024 14:22:26 -0600 Subject: [PATCH 05/10] Convert button text to icons --- .../checking-answers.component.html | 54 ++++++++------- .../checking-answers.component.scss | 16 ++--- .../checking-comments.component.html | 66 ++++++++++++------- .../checking-comments.component.scss | 24 ++++--- .../single-button-audio-player.component.ts | 8 +++ 5 files changed, 101 insertions(+), 67 deletions(-) diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html index 433e71314e..33baad1254 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html @@ -159,12 +159,6 @@

}
-
@if (canChangeAnswerStatus(answer)) { } - @if (canEditAnswer(answer)) { - - } - @if (canDeleteAnswer(answer)) { -
|
- - } +
+
+
+ @if (canEditAnswer(answer)) { + + } + @if (canDeleteAnswer(answer)) { + + } +
+
- @if (comment.audioUrl != null) { - - {{ audio.playing ? "stop" : "play_arrow" }} - - } - {{ comment.text ? comment.text : "- " + t("audio_comment") + " -" }} -
- - - -
-
- @if (canEditComment(comment)) { - +
+ @if (comment.audioUrl != null) { + + {{ audio.playing ? "stop" : "play_arrow" }} + } - @if (canDeleteComment(comment)) { - + @if (comment.text != null) { + {{ comment.text }} }
+
+
+ @if (canEditComment(comment)) { + + } + @if (canDeleteComment(comment)) { + + } +
+
+ +
+
} @if (commentFormVisible && activeComment?.dataId === comment.dataId) { @@ -55,6 +72,7 @@ @if (!commentFormVisible && (commentCount <= maxCommentsToShow || showAllComments) && canAddComment) { } diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.scss index c9d9f9fb9a..a41b426e72 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.scss +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.scss @@ -23,22 +23,20 @@ } } - .comment-text { - flex: 1 0 50%; + .comment-content { + display: flex; + align-items: center; + column-gap: 8px; } - .actions { - flex: 1; + .comment-footer { display: flex; - justify-content: flex-end; - - button { - height: auto; - } + justify-content: space-between; + flex-grow: 1; + } - .mat-mdc-button { - line-height: unset; - padding: 0 8px; - } + .owner { + display: flex; + align-items: center; } } diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/single-button-audio-player/single-button-audio-player.component.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/single-button-audio-player/single-button-audio-player.component.ts index c1acc57014..200ebcea9c 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/single-button-audio-player/single-button-audio-player.component.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/single-button-audio-player/single-button-audio-player.component.ts @@ -49,6 +49,14 @@ export class SingleButtonAudioPlayerComponent extends AudioPlayerBaseComponent i this.audio?.stop(); } + togglePlay(): void { + if (this.audio?.isPlaying) { + this.stop(); + } else { + this.play(); + } + } + ngOnChanges(): void { this.isAudioAvailable$.next(false); this.hasFinishedPlayingOnce$.next(false); From 25c98704dde99262f477c1266168f6ed0522c812 Mon Sep 17 00:00:00 2001 From: Raymond Luong Date: Mon, 21 Oct 2024 14:49:03 -0600 Subject: [PATCH 06/10] Fix tests --- .../checking-comments.component.html | 2 ++ .../checking-comments/checking-comments.stories.ts | 12 ++++++------ .../app/checking/checking/checking.component.spec.ts | 2 +- .../ClientApp/src/assets/i18n/checking_en.json | 1 - 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html index 7bc2d4f06f..8cf52dfa33 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html @@ -29,6 +29,7 @@ type="button" (click)="editComment(comment)" class="comment-edit" + data-testid="comment-edit" [matTooltip]="t('edit')" > edit @@ -40,6 +41,7 @@ type="button" (click)="deleteCommentClicked(comment)" class="comment-delete" + data-testid="answer-delete" [matTooltip]="t('delete')" > delete diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.stories.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.stories.ts index 3b5f0338c9..0d892d2492 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.stories.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.stories.ts @@ -91,10 +91,10 @@ export const OwnComments: Story = { play: async ({ canvasElement }) => { const root = within(canvasElement); - const editButtons = root.getAllByRole('button', { name: /Edit/i }); + const editButtons = root.getAllByTestId('comment-edit'); expect(editButtons.length).toBe(3); - const deleteButtons = root.getAllByRole('button', { name: /Delete/i }); + const deleteButtons = root.getAllByTestId('comment-delete'); expect(deleteButtons.length).toBe(3); } }; @@ -109,10 +109,10 @@ export const OthersComments: Story = { play: async ({ canvasElement }) => { const root = within(canvasElement); - const editButtons = root.queryAllByRole('button', { name: /Edit/i }); + const editButtons = root.queryAllByTestId('comment-edit'); expect(editButtons.length).toBe(0); - const deleteButtons = root.queryAllByRole('button', { name: /Delete/i }); + const deleteButtons = root.queryAllByTestId('comment-delete'); expect(deleteButtons.length).toBe(0); } }; @@ -133,10 +133,10 @@ export const Admin: Story = { play: async ({ canvasElement }) => { const root = within(canvasElement); - const editButtons = root.getAllByRole('button', { name: /Edit/i }); + const editButtons = root.getAllByTestId('comment-edit'); expect(editButtons.length).toBe(1); - const deleteButtons = root.getAllByRole('button', { name: /Delete/i }); + const deleteButtons = root.getAllByTestId('comment-delete'); expect(deleteButtons.length).toBe(3); } }; diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts index 831c6730c4..8de69afb96 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts @@ -1774,7 +1774,7 @@ describe('CheckingComponent', () => { expect(env.component.answersPanel!.answers[0].comments[0].audioUrl).toEqual('blob://audio'); env.waitForSliderUpdate(); expect(env.getAnswerCommentAudio(0, 0)).not.toBeNull(); - expect(env.getAnswerCommentText(0, 0)).toContain('Audio comment'); + expect(env.getAnswerCommentText(0, 0)).toBe(''); })); it('can remove audio from a comment', fakeAsync(() => { diff --git a/src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json b/src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json index fe6a7c214c..05e25a6fe7 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json +++ b/src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json @@ -271,7 +271,6 @@ }, "checking_comments": { "add_a_comment": "Add a comment", - "audio_comment": "Audio comment", "delete": "Delete", "confirm_delete": "Are you sure you want to delete this comment?", "edit": "Edit", From b8343929684dfbd8c37bcd116dff9b444c625af7 Mon Sep 17 00:00:00 2001 From: Raymond Luong Date: Mon, 21 Oct 2024 15:04:32 -0600 Subject: [PATCH 07/10] Fix storybook tests --- .../checking-comments/checking-comments.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html index 8cf52dfa33..4f8f16f08f 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html @@ -41,7 +41,7 @@ type="button" (click)="deleteCommentClicked(comment)" class="comment-delete" - data-testid="answer-delete" + data-testid="comment-delete" [matTooltip]="t('delete')" > delete From 28be54aa62133de79cd4c6399a7038c0f7664ac0 Mon Sep 17 00:00:00 2001 From: Raymond Luong Date: Tue, 22 Oct 2024 15:02:39 -0600 Subject: [PATCH 08/10] Improve comment layout --- .../checking-comments.component.html | 30 +++++++++---------- .../checking-comments.component.scss | 22 ++++++++++---- .../checking/checking-global-vars.scss | 1 + .../xforge-common/owner/owner.component.scss | 1 + 4 files changed, 32 insertions(+), 22 deletions(-) diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html index 4f8f16f08f..aa89efb57e 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.html @@ -5,22 +5,20 @@ (activeComment == null || (commentFormVisible && activeComment.dataId !== comment.dataId)) && (i + 1 < maxCommentsToShow || commentCount === maxCommentsToShow || showAllComments) ) { -
-
- @if (comment.audioUrl != null) { - - {{ audio.playing ? "stop" : "play_arrow" }} - - } - @if (comment.text != null) { - {{ comment.text }} - } -
+
+ @if (comment.audioUrl != null) { + + {{ audio.playing ? "stop" : "play_arrow" }} + + } + @if (comment.text != null) { + {{ comment.text }} + }
@if (canEditComment(comment)) { diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.scss index a41b426e72..508a994cfb 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.scss +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.component.scss @@ -4,9 +4,8 @@ display: flex; flex-wrap: wrap; align-items: center; - column-gap: 8px; - border-bottom: 1px solid $borderColor; - padding: 10px 0; + gap: 4px; + padding: 8px 4px; &.comment-unread { animation-name: comment-unread; @@ -23,16 +22,23 @@ } } - .comment-content { + &.shaded { + background-color: $shadedBackgroundColor; + } + + .comment-text { display: flex; - align-items: center; - column-gap: 8px; + flex: 1 0 90%; } .comment-footer { display: flex; justify-content: space-between; flex-grow: 1; + + .mat-icon { + transform: scale(0.8); + } } .owner { @@ -40,3 +46,7 @@ align-items: center; } } + +.add-comment { + margin-top: 4px; +} diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-global-vars.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-global-vars.scss index 5b118aba6b..67c6289948 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-global-vars.scss +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-global-vars.scss @@ -12,3 +12,4 @@ $answerExportable: $purpleLight; $commentUnread: $attention; $borderColor: rgba(0, 0, 0, 0.1); $notifyUser: $errorColor; +$shadedBackgroundColor: $borderColor; diff --git a/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/owner/owner.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/owner/owner.component.scss index 0abb488bb9..1c0cbe2a8a 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/owner/owner.component.scss +++ b/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/owner/owner.component.scss @@ -4,6 +4,7 @@ &.layout-inline { > div { display: flex; + flex-direction: column; img { width: 1em; height: 1em; From befe14cbec1e0b07f9113abda1852b0d2ddfd490 Mon Sep 17 00:00:00 2001 From: Raymond Luong Date: Wed, 23 Oct 2024 14:20:19 -0600 Subject: [PATCH 09/10] Refactor checking comment form --- .../src/app/checking/checking.utils.ts | 12 +- .../checking-answers.component.html | 71 ++-------- .../checking-answers.component.scss | 26 ---- .../checking-answers.component.ts | 90 +++---------- .../checking-comment-form.component.html | 46 ++++++- .../checking-comment-form.component.scss | 16 +++ .../checking-comment-form.component.ts | 121 ++++++++++++++++-- .../src/assets/i18n/checking_en.json | 4 +- 8 files changed, 207 insertions(+), 179 deletions(-) diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking.utils.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking.utils.ts index 29dd2820e0..4a9e0a3bc6 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking.utils.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking.utils.ts @@ -1,7 +1,9 @@ +import { VerseRef } from '@sillsdev/scripture'; import { AudioTiming } from 'realtime-server/lib/esm/scriptureforge/models/audio-timing'; import { Question } from 'realtime-server/lib/esm/scriptureforge/models/question'; import { SFProjectUserConfig } from 'realtime-server/lib/esm/scriptureforge/models/sf-project-user-config'; -import { VerseRefData } from 'realtime-server/lib/esm/scriptureforge/models/verse-ref-data'; +import { VerseRefData, toVerseRef } from 'realtime-server/lib/esm/scriptureforge/models/verse-ref-data'; +import { I18nService } from 'xforge-common/i18n.service'; /** * Detects if a string is in a format that can be used to parse audio timing for a verse of Scripture. @@ -112,4 +114,12 @@ export class CheckingUtils { let iteration: number = timingData.filter(t => t.to <= currentAudioTiming.to && t.textRef === ref).length; return { label: match[1], iteration }; } + + static scriptureTextVerseRef(verse: VerseRef | VerseRefData | undefined, i18n: I18nService): string { + if (verse == null) { + return ''; + } + const verseRef = verse instanceof VerseRef ? verse : toVerseRef(verse); + return `${i18n.localizeReference(verseRef)}`; + } } diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html index 33baad1254..6e15d54a3f 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html @@ -50,68 +50,15 @@ } @else {
- -
-
- - @if (!selectedText) { - - } @else { -
- {{ scriptureTextVerseRef(verseRef) }} - -
- } -
- @if (isScreenSmall) { -
- - -
- } - @if (!isScreenSmall) { -
- - -
- } -
+
} diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.scss index da5638a691..02e0b6aba5 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.scss +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.scss @@ -27,32 +27,6 @@ } } -#answer-form { - display: flex; - flex-direction: column; - row-gap: 2px; - .attach-icon { - rotate: 45deg; - } - .bottom-row { - display: flex; - justify-content: space-between; - } - .attachments { - display: flex; - flex-direction: row; - .clear, - .answer-scripture-clear { - padding: 6px; - } - } - .large-form-action-buttons { - display: flex; - align-items: center; - column-gap: 8px; - } -} - .answers-container { .answer { display: flex; diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.ts index fbd411e6f4..286efc95ba 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.ts @@ -1,5 +1,5 @@ -import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; -import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; +import { BreakpointObserver } from '@angular/cdk/layout'; +import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; import { MatDialogRef } from '@angular/material/dialog'; import { translate } from '@ngneat/transloco'; import { VerseRef } from '@sillsdev/scripture'; @@ -13,7 +13,7 @@ import { Subscription, firstValueFrom } from 'rxjs'; import { DialogService } from 'xforge-common/dialog.service'; import { FileService } from 'xforge-common/file.service'; import { I18nService } from 'xforge-common/i18n.service'; -import { Breakpoint, MediaBreakpointService } from 'xforge-common/media-breakpoints/media-breakpoint.service'; +import { MediaBreakpointService } from 'xforge-common/media-breakpoints/media-breakpoint.service'; import { FileType } from 'xforge-common/models/file-offline-data'; import { NoticeService } from 'xforge-common/notice.service'; import { OnlineStatusService } from 'xforge-common/online-status.service'; @@ -29,16 +29,13 @@ import { AudioRecorderDialogData, AudioRecorderDialogResult } from '../../../shared/audio-recorder-dialog/audio-recorder-dialog.component'; -import { - TextChooserDialogComponent, - TextChooserDialogData, - TextSelection -} from '../../../text-chooser-dialog/text-chooser-dialog.component'; +import { CheckingUtils } from '../../checking.utils'; import { QuestionDialogData } from '../../question-dialog/question-dialog.component'; import { QuestionDialogService } from '../../question-dialog/question-dialog.service'; import { TextAndAudioComponent } from '../../text-and-audio/text-and-audio.component'; import { AudioAttachment } from '../checking-audio-recorder/checking-audio-recorder.component'; import { CheckingTextComponent } from '../checking-text/checking-text.component'; +import { CheckingResponse } from './checking-comments/checking-comment-form/checking-comment-form.component'; import { CommentAction } from './checking-comments/checking-comments.component'; import { CheckingQuestionComponent } from './checking-question/checking-question.component'; @@ -86,7 +83,7 @@ enum LikeAnswerResponse { templateUrl: './checking-answers.component.html', styleUrls: ['./checking-answers.component.scss'] }) -export class CheckingAnswersComponent extends SubscriptionDisposable implements OnInit, AfterViewInit { +export class CheckingAnswersComponent extends SubscriptionDisposable implements OnInit { @ViewChild(TextAndAudioComponent) textAndAudio?: TextAndAudioComponent; @ViewChild(CheckingQuestionComponent) questionComponent?: CheckingQuestionComponent; @Input() projectUserConfigDoc?: SFProjectUserConfigDoc; @@ -133,15 +130,6 @@ export class CheckingAnswersComponent extends SubscriptionDisposable implements super(); } - ngAfterViewInit(): void { - this.subscribe( - this.breakpointObserver.observe(this.mediaBreakpointService.width('<', Breakpoint.MD)), - (state: BreakpointState) => { - this.isScreenSmall = state.matches; - } - ); - } - get project(): SFProjectProfile | undefined { return this._projectProfileDoc?.data; } @@ -305,13 +293,6 @@ export class CheckingAnswersComponent extends SubscriptionDisposable implements this.subscribe(this.fileService.fileSyncComplete$, () => this.updateQuestionDocAudioUrls()); } - clearSelection(): void { - this.selectedText = ''; - this.verseRef = undefined; - this.selectionStartClipped = undefined; - this.selectionEndClipped = undefined; - } - async archiveQuestion(): Promise { await this._questionDoc!.submitJson0Op(op => { op.set(qd => qd.isArchived, true); @@ -409,29 +390,6 @@ export class CheckingAnswersComponent extends SubscriptionDisposable implements } } - selectScripture(): void { - const verseRef = this._questionDoc!.data!.verseRef; - const dialogData: TextChooserDialogData = { - bookNum: (this.verseRef && this.verseRef.bookNum) || verseRef.bookNum, - chapterNum: (this.verseRef && this.verseRef.chapterNum) || verseRef.chapterNum, - textsByBookId: this.textsByBookId!, - projectId: this.projectId!, - isRightToLeft: this.project?.isRightToLeft, - selectedText: this.selectedText || '', - selectedVerses: this.verseRef - }; - const dialogRef = this.dialogService.openMatDialog(TextChooserDialogComponent, { data: dialogData }); - dialogRef.afterClosed().subscribe(result => { - if (result != null && result !== 'close') { - const selection = result as TextSelection; - this.verseRef = toVerseRef(selection.verses); - this.selectedText = selection.text; - this.selectionStartClipped = selection.startClipped; - this.selectionEndClipped = selection.endClipped; - } - }); - } - canChangeAnswerStatus(answer: Answer): boolean { const userId = this.userService.currentUserId; return ( @@ -462,7 +420,6 @@ export class CheckingAnswersComponent extends SubscriptionDisposable implements hideAnswerForm(): void { this.activeAnswer = undefined; - this.clearSelection(); if (this.answerFormVisible) { this.answerFormVisible = false; this.action.emit({ action: 'hide-form' }); @@ -504,12 +461,8 @@ export class CheckingAnswersComponent extends SubscriptionDisposable implements return answer.likes.some(like => like.ownerRef === this.userService.currentUserId); } - scriptureTextVerseRef(verse: VerseRef | VerseRefData | undefined): string { - if (verse == null) { - return ''; - } - const verseRef = verse instanceof VerseRef ? verse : toVerseRef(verse); - return `${this.i18n.localizeReference(verseRef)}`; + scriptureTextVerseRef(verseRef: VerseRefData | VerseRef | undefined): string { + return CheckingUtils.scriptureTextVerseRef(verseRef, this.i18n); } showAnswerForm(): void { @@ -523,24 +476,13 @@ export class CheckingAnswersComponent extends SubscriptionDisposable implements this.action.emit({ action: 'play-audio' }); } - async submit(): Promise { - if (this.textAndAudio != null) { - this.textAndAudio.suppressErrors = false; - if (this.textAndAudio.audioComponent?.isRecording) { - await this.textAndAudio.audioComponent.stopRecording(); - this.noticeService.show(translate('checking_answers.recording_automatically_stopped')); - } - } - if (!this.textAndAudio?.hasTextOrAudio()) { - this.textAndAudio?.text.setErrors({ invalid: true }); - return; - } + async submit(response: CheckingResponse): Promise { this.submittingAnswer = true; const userDoc = await this.userService.getCurrentUser(); if (this.onlineStatusService.isOnline && userDoc.data?.isDisplayNameConfirmed !== true) { await this.userService.editDisplayName(true); } - this.emitAnswerToSave(); + this.emitAnswerToSave(response); } /** If a given answer should have attention drawn to it in the UI. */ @@ -622,15 +564,15 @@ export class CheckingAnswersComponent extends SubscriptionDisposable implements }); } - private emitAnswerToSave(): void { + private emitAnswerToSave(response: CheckingResponse): void { this.action.emit({ action: 'save', - text: this.textAndAudio?.text.value, + text: response.text, answer: this.activeAnswer, - audio: this.textAndAudio?.audioAttachment, - scriptureText: this.selectedText || undefined, - selectionStartClipped: this.selectionStartClipped, - selectionEndClipped: this.selectionEndClipped, + audio: response.audio, + scriptureText: response.scripture, + selectionStartClipped: response.scriptureStartClipped, + selectionEndClipped: response.scriptureEndClipped, verseRef: this.verseRef == null ? undefined : fromVerseRef(this.verseRef), questionDoc: this.questionDoc, savedCallback: () => { diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.html index 5d1432e4f6..30ce08f030 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.html +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.html @@ -8,12 +8,48 @@ class="comment-input" >
-
- - + + + + @if (textSelectionEnabled) { + @if (!selectedText) { + + } @else { +
+ {{ scriptureTextVerseRef(verseRef) }} + +
+ } + } +
+
+ @if (isScreenSmall) { +
+ + +
+ } + @if (!isScreenSmall) { +
+ + +
+ }
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.scss index 25cddc38ce..a784f240eb 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.scss +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.scss @@ -2,9 +2,25 @@ padding-top: 8px; display: flex; justify-content: space-between; + align-items: center; + .button-actions { gap: 10px; } + .attach-icon { + rotate: 45deg; + } + + .clear, + .answer-scripture-clear { + padding: 6px; + } + + .large-form-action-buttons { + display: flex; + align-items: center; + column-gap: 8px; + } } .comment-input ::ng-deep textarea { diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.ts index 6ccaed42c1..5b922a2ac3 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.ts @@ -1,25 +1,120 @@ -import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'; +import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; +import { AfterViewInit, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'; import { translate } from '@ngneat/transloco'; +import { VerseRef } from '@sillsdev/scripture'; import { Comment } from 'realtime-server/lib/esm/scriptureforge/models/comment'; +import { SFProjectProfile } from 'realtime-server/lib/esm/scriptureforge/models/sf-project'; +import { VerseRefData, toVerseRef } from 'realtime-server/lib/esm/scriptureforge/models/verse-ref-data'; +import { DialogService } from 'xforge-common/dialog.service'; +import { I18nService } from 'xforge-common/i18n.service'; +import { Breakpoint, MediaBreakpointService } from 'xforge-common/media-breakpoints/media-breakpoint.service'; import { NoticeService } from 'xforge-common/notice.service'; +import { SubscriptionDisposable } from 'xforge-common/subscription-disposable'; +import { QuestionDoc } from '../../../../../core/models/question-doc'; +import { TextsByBookId } from '../../../../../core/models/texts-by-book-id'; +import { + TextChooserDialogComponent, + TextChooserDialogData, + TextSelection +} from '../../../../../text-chooser-dialog/text-chooser-dialog.component'; +import { CheckingUtils } from '../../../../checking.utils'; import { TextAndAudioComponent } from '../../../../text-and-audio/text-and-audio.component'; import { AudioAttachment } from '../../../checking-audio-recorder/checking-audio-recorder.component'; +export interface CheckingResponse { + text?: string; + audio?: AudioAttachment; + scripture?: string; + scriptureStartClipped?: boolean; + scriptureEndClipped?: boolean; +} + @Component({ selector: 'app-checking-comment-form', templateUrl: './checking-comment-form.component.html', styleUrls: ['./checking-comment-form.component.scss'] }) -export class CheckingCommentFormComponent { +export class CheckingCommentFormComponent extends SubscriptionDisposable implements AfterViewInit { @Input() comment?: Comment; - @Output() save: EventEmitter<{ text?: string; audio?: AudioAttachment }> = new EventEmitter<{ - text?: string; - audio?: AudioAttachment; - }>(); + @Input() project?: SFProjectProfile; + @Input() textSelectionEnabled: boolean = false; + @Input() textsByBookId?: TextsByBookId; + @Input() verseRef?: VerseRefData; + @Output() save: EventEmitter = new EventEmitter(); @Output() cancel: EventEmitter = new EventEmitter(); @ViewChild(TextAndAudioComponent) textAndAudio?: TextAndAudioComponent; - constructor(private readonly noticeService: NoticeService) {} + selectedText?: string; + _verseRef?: VerseRefData; + isScreenSmall: boolean = false; + submittingResponse: boolean = false; + + private selectionStartClipped?: boolean = false; + private selectionEndClipped?: boolean = false; + private _questionDoc?: QuestionDoc; + + constructor( + readonly noticeService: NoticeService, + private readonly dialogService: DialogService, + private readonly i18n: I18nService, + private readonly breakpointObserver: BreakpointObserver, + private readonly mediaBreakpointService: MediaBreakpointService + ) { + super(); + } + + @Input() set questionDoc(value: QuestionDoc | undefined) { + this._questionDoc = value; + } + + get projectId(): string | undefined { + return this.questionDoc?.data?.projectRef; + } + + ngAfterViewInit(): void { + this.subscribe( + this.breakpointObserver.observe(this.mediaBreakpointService.width('<', Breakpoint.MD)), + (state: BreakpointState) => { + this.isScreenSmall = state.matches; + } + ); + } + + selectScripture(): void { + if (this.textsByBookId == null) return; + const verseRef = this._questionDoc!.data!.verseRef; + + const dialogData: TextChooserDialogData = { + bookNum: (this.verseRef && this.verseRef.bookNum) || verseRef!.bookNum, + chapterNum: (this.verseRef && this.verseRef.chapterNum) || verseRef!.chapterNum, + textsByBookId: this.textsByBookId, + projectId: this.projectId!, + isRightToLeft: this.project?.isRightToLeft, + selectedText: this.selectedText || '', + selectedVerses: this.verseRef + }; + const dialogRef = this.dialogService.openMatDialog(TextChooserDialogComponent, { data: dialogData }); + dialogRef.afterClosed().subscribe(result => { + if (result != null && result !== 'close') { + const selection = result as TextSelection; + this.verseRef = toVerseRef(selection.verses); + this.selectedText = selection.text; + this.selectionStartClipped = selection.startClipped; + this.selectionEndClipped = selection.endClipped; + } + }); + } + + clearSelection(): void { + this.selectedText = ''; + this.verseRef = undefined; + this.selectionStartClipped = undefined; + this.selectionEndClipped = undefined; + } + + scriptureTextVerseRef(verseRef: VerseRefData | VerseRef | undefined): string { + return CheckingUtils.scriptureTextVerseRef(verseRef, this.i18n); + } async submit(): Promise { if (this.textAndAudio != null) { @@ -33,11 +128,19 @@ export class CheckingCommentFormComponent { this.textAndAudio?.text.setErrors({ invalid: true }); return; } - const comment = { text: this.textAndAudio?.text.value, audio: this.textAndAudio?.audioAttachment }; - this.save.emit(comment); + this.submittingResponse = true; + const response: CheckingResponse = { + text: this.textAndAudio.text.value, + audio: this.textAndAudio.audioAttachment, + scripture: this.selectedText, + scriptureStartClipped: this.selectionStartClipped, + scriptureEndClipped: this.selectionEndClipped + }; + this.save.emit(response); } submitCancel(): void { + this.clearSelection(); this.cancel.emit(); } } diff --git a/src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json b/src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json index 05e25a6fe7..79b29b85f2 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json +++ b/src/SIL.XForge.Scripture/ClientApp/src/assets/i18n/checking_en.json @@ -219,7 +219,6 @@ "save_answer": "Save", "select_verses": "Select verses", "show_more_unread": "Show {{ count }} more unread answers", - "tooltip_attach": "Attach scripture", "tooltip_status_export": "Export to Paratext if configured in Settings", "tooltip_status_resolve": "Mark answer as resolved", "your_answer": "Your answer" @@ -265,8 +264,9 @@ "stop_recording": "Stop Recording" }, "checking_comment_form": { + "attach": "Attach Scripture", "cancel": "Cancel", - "save_comment": "Save comment", + "save": "Save", "your_comment": "Your comment" }, "checking_comments": { From 8ec1e4138f82d108892c52072e53cb99487d979a Mon Sep 17 00:00:00 2001 From: Raymond Luong Date: Thu, 24 Oct 2024 16:02:27 -0600 Subject: [PATCH 10/10] Fix checking component unit tests --- .../src/app/checking/checking.module.ts | 2 +- .../checking-answers.component.html | 22 +++---- .../checking-answers.component.scss | 1 - .../checking-answers.component.ts | 20 +++--- .../checking-comment-form.component.html | 25 +++++--- .../checking-comment-form.component.scss | 47 ++++++++++++++ .../checking-comment-form.component.ts | 54 +++++++++------- .../checking-comment-form.stories.ts | 11 ++-- .../checking-comment-form.component.scss | 28 --------- .../checking-comments.stories.ts | 2 +- .../checking/checking.component.spec.ts | 63 ++++++------------- 11 files changed, 141 insertions(+), 134 deletions(-) rename src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/{checking-comments => }/checking-comment-form/checking-comment-form.component.html (76%) create mode 100644 src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comment-form/checking-comment-form.component.scss rename src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/{checking-comments => }/checking-comment-form/checking-comment-form.component.ts (74%) rename src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/{checking-comments => }/checking-comment-form/checking-comment-form.stories.ts (82%) delete mode 100644 src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.scss diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking.module.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking.module.ts index 3fd925e754..f4cad7c5af 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking.module.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking.module.ts @@ -14,7 +14,7 @@ import { ChapterAudioDialogComponent } from './chapter-audio-dialog/chapter-audi import { CheckingOverviewComponent } from './checking-overview/checking-overview.component'; import { CheckingRoutingModule } from './checking-routing.module'; import { CheckingAnswersComponent } from './checking/checking-answers/checking-answers.component'; -import { CheckingCommentFormComponent } from './checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component'; +import { CheckingCommentFormComponent } from './checking/checking-answers/checking-comment-form/checking-comment-form.component'; import { CheckingCommentsComponent } from './checking/checking-answers/checking-comments/checking-comments.component'; import { CheckingAudioPlayerComponent } from './checking/checking-audio-player/checking-audio-player.component'; import { CheckingAudioRecorderComponent } from './checking/checking-audio-recorder/checking-audio-recorder.component'; diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html index 6e15d54a3f..ece1213227 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html @@ -48,18 +48,16 @@ }
} @else { -
-
- -
+
+
} @if (shouldShowAnswers) { diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.scss index 02e0b6aba5..04cbee8d3f 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.scss +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.scss @@ -149,7 +149,6 @@ padding-block: 6px; } -.answer-scripture-clear, .clear { width: 36px; height: 36px; diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.ts index 286efc95ba..355c769ddd 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.ts @@ -1,4 +1,3 @@ -import { BreakpointObserver } from '@angular/cdk/layout'; import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; import { MatDialogRef } from '@angular/material/dialog'; import { translate } from '@ngneat/transloco'; @@ -8,12 +7,11 @@ import { Operation } from 'realtime-server/lib/esm/common/models/project-rights' import { Answer, AnswerStatus } from 'realtime-server/lib/esm/scriptureforge/models/answer'; import { SFProjectProfile } from 'realtime-server/lib/esm/scriptureforge/models/sf-project'; import { SFProjectDomain, SF_PROJECT_RIGHTS } from 'realtime-server/lib/esm/scriptureforge/models/sf-project-rights'; -import { VerseRefData, fromVerseRef, toVerseRef } from 'realtime-server/lib/esm/scriptureforge/models/verse-ref-data'; +import { VerseRefData, toVerseRef } from 'realtime-server/lib/esm/scriptureforge/models/verse-ref-data'; import { Subscription, firstValueFrom } from 'rxjs'; import { DialogService } from 'xforge-common/dialog.service'; import { FileService } from 'xforge-common/file.service'; import { I18nService } from 'xforge-common/i18n.service'; -import { MediaBreakpointService } from 'xforge-common/media-breakpoints/media-breakpoint.service'; import { FileType } from 'xforge-common/models/file-offline-data'; import { NoticeService } from 'xforge-common/notice.service'; import { OnlineStatusService } from 'xforge-common/online-status.service'; @@ -32,10 +30,9 @@ import { import { CheckingUtils } from '../../checking.utils'; import { QuestionDialogData } from '../../question-dialog/question-dialog.component'; import { QuestionDialogService } from '../../question-dialog/question-dialog.service'; -import { TextAndAudioComponent } from '../../text-and-audio/text-and-audio.component'; import { AudioAttachment } from '../checking-audio-recorder/checking-audio-recorder.component'; import { CheckingTextComponent } from '../checking-text/checking-text.component'; -import { CheckingResponse } from './checking-comments/checking-comment-form/checking-comment-form.component'; +import { CheckingResponse } from './checking-comment-form/checking-comment-form.component'; import { CommentAction } from './checking-comments/checking-comments.component'; import { CheckingQuestionComponent } from './checking-question/checking-question.component'; @@ -84,7 +81,6 @@ enum LikeAnswerResponse { styleUrls: ['./checking-answers.component.scss'] }) export class CheckingAnswersComponent extends SubscriptionDisposable implements OnInit { - @ViewChild(TextAndAudioComponent) textAndAudio?: TextAndAudioComponent; @ViewChild(CheckingQuestionComponent) questionComponent?: CheckingQuestionComponent; @Input() projectUserConfigDoc?: SFProjectUserConfigDoc; @Input() textsByBookId?: TextsByBookId; @@ -123,9 +119,7 @@ export class CheckingAnswersComponent extends SubscriptionDisposable implements private readonly i18n: I18nService, private readonly fileService: FileService, private readonly onlineStatusService: OnlineStatusService, - private readonly projectService: SFProjectService, - private readonly breakpointObserver: BreakpointObserver, - private readonly mediaBreakpointService: MediaBreakpointService + private readonly projectService: SFProjectService ) { super(); } @@ -570,10 +564,10 @@ export class CheckingAnswersComponent extends SubscriptionDisposable implements text: response.text, answer: this.activeAnswer, audio: response.audio, - scriptureText: response.scripture, - selectionStartClipped: response.scriptureStartClipped, - selectionEndClipped: response.scriptureEndClipped, - verseRef: this.verseRef == null ? undefined : fromVerseRef(this.verseRef), + scriptureText: response.selectedText, + selectionStartClipped: response.selectionStartClipped, + selectionEndClipped: response.selectionEndClipped, + verseRef: response.verseRef == null ? undefined : response.verseRef, questionDoc: this.questionDoc, savedCallback: () => { this.hideAnswerForm(); diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comment-form/checking-comment-form.component.html similarity index 76% rename from src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.html rename to src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comment-form/checking-comment-form.component.html index 30ce08f030..0204d29184 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.html +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comment-form/checking-comment-form.component.html @@ -3,15 +3,14 @@
- - @if (textSelectionEnabled) { @if (!selectedText) { -
} @if (!isScreenSmall) {
- - diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comment-form/checking-comment-form.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comment-form/checking-comment-form.component.scss new file mode 100644 index 0000000000..a76ea30771 --- /dev/null +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comment-form/checking-comment-form.component.scss @@ -0,0 +1,47 @@ +.form-actions { + padding-top: 8px; + display: flex; + justify-content: space-between; + align-items: center; + + .button-actions { + gap: 10px; + } + .attach-icon { + rotate: 45deg; + } + + .large-form-action-buttons { + display: flex; + align-items: center; + column-gap: 8px; + } + + .answer-scripture, + .scripture-text { + display: flex; + align-items: center; + background: rgba(0, 0, 0, 0.05); + padding-inline-start: 6px; + border-radius: 4px; + } + + .answer-scripture-clear { + width: 36px; + height: 36px; + line-height: 24px; + padding: 6px; + } + + .answer-scripture-verse { + font-size: 0.75em; + font-style: italic; + padding-inline: 6px; + } +} + +.comment-input { + &.compact ::ng-deep textarea { + height: 24px; + } +} diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comment-form/checking-comment-form.component.ts similarity index 74% rename from src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.ts rename to src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comment-form/checking-comment-form.component.ts index 5b922a2ac3..4ef6d63b73 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comment-form/checking-comment-form.component.ts @@ -2,31 +2,33 @@ import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; import { AfterViewInit, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'; import { translate } from '@ngneat/transloco'; import { VerseRef } from '@sillsdev/scripture'; +import { Answer } from 'realtime-server/lib/esm/scriptureforge/models/answer'; import { Comment } from 'realtime-server/lib/esm/scriptureforge/models/comment'; import { SFProjectProfile } from 'realtime-server/lib/esm/scriptureforge/models/sf-project'; -import { VerseRefData, toVerseRef } from 'realtime-server/lib/esm/scriptureforge/models/verse-ref-data'; +import { VerseRefData } from 'realtime-server/lib/esm/scriptureforge/models/verse-ref-data'; import { DialogService } from 'xforge-common/dialog.service'; import { I18nService } from 'xforge-common/i18n.service'; import { Breakpoint, MediaBreakpointService } from 'xforge-common/media-breakpoints/media-breakpoint.service'; import { NoticeService } from 'xforge-common/notice.service'; import { SubscriptionDisposable } from 'xforge-common/subscription-disposable'; -import { QuestionDoc } from '../../../../../core/models/question-doc'; -import { TextsByBookId } from '../../../../../core/models/texts-by-book-id'; +import { QuestionDoc } from '../../../../core/models/question-doc'; +import { TextsByBookId } from '../../../../core/models/texts-by-book-id'; import { TextChooserDialogComponent, TextChooserDialogData, TextSelection -} from '../../../../../text-chooser-dialog/text-chooser-dialog.component'; -import { CheckingUtils } from '../../../../checking.utils'; -import { TextAndAudioComponent } from '../../../../text-and-audio/text-and-audio.component'; -import { AudioAttachment } from '../../../checking-audio-recorder/checking-audio-recorder.component'; +} from '../../../../text-chooser-dialog/text-chooser-dialog.component'; +import { CheckingUtils } from '../../../checking.utils'; +import { TextAndAudioComponent } from '../../../text-and-audio/text-and-audio.component'; +import { AudioAttachment } from '../../checking-audio-recorder/checking-audio-recorder.component'; export interface CheckingResponse { text?: string; audio?: AudioAttachment; - scripture?: string; - scriptureStartClipped?: boolean; - scriptureEndClipped?: boolean; + selectedText?: string; + selectionStartClipped?: boolean; + selectionEndClipped?: boolean; + verseRef?: VerseRefData; } @Component({ @@ -35,19 +37,19 @@ export interface CheckingResponse { styleUrls: ['./checking-comment-form.component.scss'] }) export class CheckingCommentFormComponent extends SubscriptionDisposable implements AfterViewInit { - @Input() comment?: Comment; @Input() project?: SFProjectProfile; @Input() textSelectionEnabled: boolean = false; @Input() textsByBookId?: TextsByBookId; - @Input() verseRef?: VerseRefData; @Output() save: EventEmitter = new EventEmitter(); @Output() cancel: EventEmitter = new EventEmitter(); @ViewChild(TextAndAudioComponent) textAndAudio?: TextAndAudioComponent; selectedText?: string; - _verseRef?: VerseRefData; isScreenSmall: boolean = false; submittingResponse: boolean = false; + verseRef?: VerseRefData; + textAndAudioInput?: { text?: string; audioUrl?: string }; + compact: boolean = true; private selectionStartClipped?: boolean = false; private selectionEndClipped?: boolean = false; @@ -67,8 +69,15 @@ export class CheckingCommentFormComponent extends SubscriptionDisposable impleme this._questionDoc = value; } - get projectId(): string | undefined { - return this.questionDoc?.data?.projectRef; + @Input() set answer(value: Answer | undefined) { + this.selectedText = value?.scriptureText; + this.verseRef = value?.verseRef; + this.compact = false; + this.textAndAudioInput = value; + } + + @Input() set comment(value: Comment | undefined) { + this.textAndAudioInput = value; } ngAfterViewInit(): void { @@ -81,14 +90,14 @@ export class CheckingCommentFormComponent extends SubscriptionDisposable impleme } selectScripture(): void { - if (this.textsByBookId == null) return; - const verseRef = this._questionDoc!.data!.verseRef; + if (this.textsByBookId == null || this._questionDoc?.data == null) return; + const verseRef = this._questionDoc.data.verseRef; const dialogData: TextChooserDialogData = { bookNum: (this.verseRef && this.verseRef.bookNum) || verseRef!.bookNum, chapterNum: (this.verseRef && this.verseRef.chapterNum) || verseRef!.chapterNum, textsByBookId: this.textsByBookId, - projectId: this.projectId!, + projectId: this._questionDoc.data.projectRef, isRightToLeft: this.project?.isRightToLeft, selectedText: this.selectedText || '', selectedVerses: this.verseRef @@ -97,7 +106,7 @@ export class CheckingCommentFormComponent extends SubscriptionDisposable impleme dialogRef.afterClosed().subscribe(result => { if (result != null && result !== 'close') { const selection = result as TextSelection; - this.verseRef = toVerseRef(selection.verses); + this.verseRef = selection.verses; this.selectedText = selection.text; this.selectionStartClipped = selection.startClipped; this.selectionEndClipped = selection.endClipped; @@ -132,9 +141,10 @@ export class CheckingCommentFormComponent extends SubscriptionDisposable impleme const response: CheckingResponse = { text: this.textAndAudio.text.value, audio: this.textAndAudio.audioAttachment, - scripture: this.selectedText, - scriptureStartClipped: this.selectionStartClipped, - scriptureEndClipped: this.selectionEndClipped + selectedText: this.selectedText, + selectionStartClipped: this.selectionStartClipped, + selectionEndClipped: this.selectionEndClipped, + verseRef: this.verseRef }; this.save.emit(response); } diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.stories.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comment-form/checking-comment-form.stories.ts similarity index 82% rename from src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.stories.ts rename to src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comment-form/checking-comment-form.stories.ts index 514201bc3f..98c67f3337 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.stories.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comment-form/checking-comment-form.stories.ts @@ -2,11 +2,12 @@ import { CommonModule } from '@angular/common'; import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { expect } from '@storybook/jest'; import { userEvent, within } from '@storybook/testing-library'; +import { Answer } from 'realtime-server/lib/esm/scriptureforge/models/answer'; import { I18nStoryModule } from 'xforge-common/i18n-story.module'; import { UICommonModule } from 'xforge-common/ui-common.module'; -import { AttachAudioComponent } from '../../../../attach-audio/attach-audio.component'; -import { TextAndAudioComponent } from '../../../../text-and-audio/text-and-audio.component'; -import { CheckingAudioRecorderComponent } from '../../../checking-audio-recorder/checking-audio-recorder.component'; +import { AttachAudioComponent } from '../../../attach-audio/attach-audio.component'; +import { TextAndAudioComponent } from '../../../text-and-audio/text-and-audio.component'; +import { CheckingAudioRecorderComponent } from '../../checking-audio-recorder/checking-audio-recorder.component'; import { CheckingCommentFormComponent } from './checking-comment-form.component'; const meta: Meta = { @@ -33,14 +34,14 @@ export const NewForm: Story = { export const EditForm: Story = { args: { - comment: { + answer: { dataId: 'c01', ownerRef: 'user01', text: 'This is a comment', deleted: false, dateCreated: '', dateModified: '' - } + } as Answer }, parameters: { // Disabled for the same reason the story above diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.scss deleted file mode 100644 index a784f240eb..0000000000 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comment-form/checking-comment-form.component.scss +++ /dev/null @@ -1,28 +0,0 @@ -.form-actions { - padding-top: 8px; - display: flex; - justify-content: space-between; - align-items: center; - - .button-actions { - gap: 10px; - } - .attach-icon { - rotate: 45deg; - } - - .clear, - .answer-scripture-clear { - padding: 6px; - } - - .large-form-action-buttons { - display: flex; - align-items: center; - column-gap: 8px; - } -} - -.comment-input ::ng-deep textarea { - height: 24px; -} diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.stories.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.stories.ts index 0d892d2492..d682207656 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.stories.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-comments/checking-comments.stories.ts @@ -12,7 +12,7 @@ import { UserProfileDoc } from 'xforge-common/models/user-profile-doc'; import { OwnerComponent } from 'xforge-common/owner/owner.component'; import { UICommonModule } from 'xforge-common/ui-common.module'; import { UserService } from 'xforge-common/user.service'; -import { CheckingCommentFormComponent } from './checking-comment-form/checking-comment-form.component'; +import { CheckingCommentFormComponent } from '../checking-comment-form/checking-comment-form.component'; import { CheckingCommentsComponent } from './checking-comments.component'; const mockedDialogService = mock(DialogService); diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts index 8de69afb96..37aa643dc1 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts @@ -43,6 +43,7 @@ import { AvatarComponent } from 'xforge-common/avatar/avatar.component'; import { BugsnagService } from 'xforge-common/bugsnag.service'; import { DialogService } from 'xforge-common/dialog.service'; import { FileService } from 'xforge-common/file.service'; +import { MediaBreakpointService } from 'xforge-common/media-breakpoints/media-breakpoint.service'; import { FileOfflineData, FileType, createStorageFileData } from 'xforge-common/models/file-offline-data'; import { RealtimeQuery } from 'xforge-common/models/realtime-query'; import { Snapshot } from 'xforge-common/models/snapshot'; @@ -81,7 +82,10 @@ import { QuestionDialogData } from '../question-dialog/question-dialog.component import { QuestionDialogService } from '../question-dialog/question-dialog.service'; import { TextAndAudioComponent } from '../text-and-audio/text-and-audio.component'; import { AnswerAction, CheckingAnswersComponent } from './checking-answers/checking-answers.component'; -import { CheckingCommentFormComponent } from './checking-answers/checking-comments/checking-comment-form/checking-comment-form.component'; +import { + CheckingCommentFormComponent, + CheckingResponse +} from './checking-answers/checking-comment-form/checking-comment-form.component'; import { CheckingCommentsComponent } from './checking-answers/checking-comments/checking-comments.component'; import { CheckingAudioPlayerComponent } from './checking-audio-player/checking-audio-player.component'; import { @@ -105,6 +109,7 @@ const mockedDialogService = mock(DialogService); const mockedTextChooserDialogComponent = mock(TextChooserDialogComponent); const mockedQuestionDialogService = mock(QuestionDialogService); const mockedChapterAudioDialogService = mock(ChapterAudioDialogService); +const mockedMediaBreakpointService = mock(MediaBreakpointService); const mockedBugsnagService = mock(BugsnagService); const mockedCookieService = mock(CookieService); const mockedFileService = mock(FileService); @@ -181,6 +186,7 @@ describe('CheckingComponent', () => { { provide: TextChooserDialogComponent, useMock: mockedTextChooserDialogComponent }, { provide: QuestionDialogService, useMock: mockedQuestionDialogService }, { provide: ChapterAudioDialogService, useMock: mockedChapterAudioDialogService }, + { provide: MediaBreakpointService, useMock: mockedMediaBreakpointService }, { provide: BugsnagService, useMock: mockedBugsnagService }, { provide: CookieService, useMock: mockedCookieService }, { provide: FileService, useMock: mockedFileService }, @@ -1258,7 +1264,6 @@ describe('CheckingComponent', () => { expect(env.answers.length).toEqual(0); const question = env.getQuestionDoc('q1Id'); expect(env.saveAnswerButton).not.toBeNull(); - expect(env.saveAnswerButton.nativeElement.disabled).toBe(true); env.selectQuestion(2); resolveUpload$.next(); env.waitForSliderUpdate(); @@ -1421,11 +1426,9 @@ describe('CheckingComponent', () => { env.selectQuestion(6); expect(env.getAnswerScriptureText(0)).toBe('Quoted scripture(John 1:1)'); env.clickButton(env.getAnswerEditButton(0)); - // env.clickButton(env.selectTextTab); env.waitForSliderUpdate(); env.clickButton(env.clearScriptureButton); - env.clickButton(env.saveAnswerButton); - expect(env.getAnswerScripture(0)).toBeFalsy(); + expect(env.selectVersesButton).not.toBeNull(); flush(); discardPeriodicTasks(); })); @@ -1445,24 +1448,6 @@ describe('CheckingComponent', () => { expect(env.getAnswerEditButton(0)).not.toBeNull(); })); - it('error about "answer or recording required" goes away after add recording', fakeAsync(() => { - const env = new TestEnvironment({ user: CHECKER_USER }); - env.selectQuestion(1); - env.clickButton(env.addAnswerButton); - env.clickButton(env.saveAnswerButton); - // Have not given any answer yet, so clicking Save should show a validation error. - expect(env.component.answersPanel!.textAndAudio?.form.invalid).withContext('setup').toBe(true); - expect(env.answerFormErrors.length).withContext('setup').toEqual(1); - expect(env.answerFormErrors[0].nativeElement.textContent).withContext('setup').toContain('before saving'); - env.waitForSliderUpdate(); - - // SUT - env.simulateAudioRecordingFinishedProcessing(); - - // We made a recording, so we should not be showing a validation error. - expect(env.component.answersPanel!.textAndAudio?.form.valid).toBe(true); - })); - it('new remote answers from other users are not displayed until requested', fakeAsync(() => { const env = new TestEnvironment({ user: CHECKER_USER }); @@ -2524,6 +2509,8 @@ class TestEnvironment { when(doc.data).thenReturn(instance(textAudio)); when(query.docs).thenReturn([instance(doc)]); when(mockedProjectService.queryAudioText('project01')).thenResolve(instance(query)); + when(mockedMediaBreakpointService.width(anything(), anything())).thenReturn('(width < 576px)'); + when(mockedMediaBreakpointService.width(anything(), anything(), anything())).thenReturn('(width > 576px)'); this.fixture = TestBed.createComponent(CheckingComponent); this.component = this.fixture.componentInstance; @@ -2598,7 +2585,7 @@ class TestEnvironment { } get cancelAnswerButton(): DebugElement { - return this.fixture.debugElement.query(By.css('#cancel-answer')); + return this.fixture.debugElement.query(By.css('#cancel-response')); } async getCurrentBookAndChapter(): Promise { @@ -2695,10 +2682,6 @@ class TestEnvironment { return this.fixture.debugElement.nativeElement.querySelectorAll('usx-para'); } - get recordButton(): DebugElement { - return this.fixture.debugElement.query(By.css('#answer-form button.record')); - } - get recordQuestionButton(): DebugElement { return this.answerPanel.query(By.css('.record-question-button')); } @@ -2708,7 +2691,7 @@ class TestEnvironment { } get saveAnswerButton(): DebugElement { - return this.fixture.debugElement.query(By.css('#save-answer')); + return this.fixture.debugElement.query(By.css('#save-response')); } get yourAnswerContainer(): DebugElement { @@ -2878,12 +2861,14 @@ class TestEnvironment { answerQuestion(answer: string, audioFilename?: string): void { this.clickButton(this.addAnswerButton); - this.setTextFieldValue(this.yourAnswerField, answer); + const response: CheckingResponse = { text: answer }; + const audio: AudioAttachment = { status: 'processed', blob: getAudioBlob(), fileName: audioFilename }; if (audioFilename != null) { - const audio: AudioAttachment = { status: 'processed', blob: getAudioBlob(), fileName: audioFilename }; - this.component.answersPanel?.textAndAudio?.audio.setValue(audio); + response.audio = audio; } - this.clickButton(this.saveAnswerButton); + this.component.answersPanel?.submit(response); + tick(); + this.fixture.detectChanges(); this.waitForSliderUpdate(); } @@ -3000,7 +2985,7 @@ class TestEnvironment { } getSaveCommentButton(answerIndex: number): DebugElement { - return this.getAnswer(answerIndex).query(By.css('.save-comment')); + return this.getAnswer(answerIndex).query(By.css('#save-response')); } getUnread(question: DebugElement): number { @@ -3097,16 +3082,6 @@ class TestEnvironment { this.realtimeService.updateAllSubscribeQueries(); } - /** To use if the Stop Recording button isn't showing up in the test DOM. */ - simulateAudioRecordingFinishedProcessing(): void { - this.component.answersPanel!.textAndAudio!.audioComponent!.audio = { - status: 'processed', - url: 'test-audio-short.mp3' - }; - flush(); - this.fixture.detectChanges(); - } - resolveFileUploadSubject(fileUrl: string): Subject { const resolveUpload$ = new Subject(); when(