diff --git a/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.html b/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.html index 69cc542282ba7b4167869f1eed357595c014bdfb..ea4d850ee3a6a7ea312bd751d601e1562fc3c03d 100644 --- a/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.html +++ b/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.html @@ -26,3 +26,7 @@ [cancelButtonClickAction]="buildCloseDialogActionCallback()" [confirmButtonClickAction]="buildConfirmDialogActionCallback()" ></app-dialog-action-buttons> + +<div class="visually-hidden"> + <div id="room-name">{{ 'room-page.a11y-room-name' | translate }}</div> +</div> diff --git a/src/app/components/shared/_dialogs/create-comment/create-comment.component.html b/src/app/components/shared/_dialogs/create-comment/create-comment.component.html index 25933dfdbd6d57e587884afc93afaeef630e203d..1c18a3975852a912ab416a1d8154b56b0d16cd4e 100644 --- a/src/app/components/shared/_dialogs/create-comment/create-comment.component.html +++ b/src/app/components/shared/_dialogs/create-comment/create-comment.component.html @@ -1,5 +1,6 @@ <ars-row ars-flex-box> <app-write-comment [confirmLabel]="'send'" + [isQuestionerNameEnabled]="true" [onSubmit]="this.closeDialog.bind(this)" [onClose]="this.onNoClick.bind(this)" [isSpinning]="isSendingToSpacy" diff --git a/src/app/components/shared/_dialogs/create-comment/create-comment.component.ts b/src/app/components/shared/_dialogs/create-comment/create-comment.component.ts index ae82095d8dc651122c10971f5caa690691a23002..20b6adde434892a865b4408c9e40b63dccb44c52 100644 --- a/src/app/components/shared/_dialogs/create-comment/create-comment.component.ts +++ b/src/app/components/shared/_dialogs/create-comment/create-comment.component.ts @@ -43,13 +43,14 @@ export class CreateCommentComponent implements OnInit { this.dialogRef.close(); } - closeDialog(body: string, text: string, tag: string) { + closeDialog(body: string, text: string, tag: string, name: string) { const comment = new Comment(); comment.roomId = localStorage.getItem(`roomId`); comment.body = body; comment.creatorId = this.user.id; comment.createdFromLecturer = this.user.role > 0; comment.tag = tag; + comment.questionerName = name; this.isSendingToSpacy = true; this.openSpacyDialog(comment, text); } diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html index 66274a4ca5851830ed99c5b0011ec19cd01f8e79..6f0064d39f96a7155acac3e778e81df4831e0374 100644 --- a/src/app/components/shared/comment/comment.component.html +++ b/src/app/components/shared/comment/comment.component.html @@ -376,6 +376,15 @@ </div> <span class="fill-remaining-space"></span> + <div fxLayoutAlign="center center" + matTooltip="{{ 'comment-page.questioner-name' | translate }}" + *ngIf="comment.questionerName" + class="comment-tags"> + <mat-icon>account_circle</mat-icon> + <span> + {{comment.questionerName}} + </span> + </div> <button mat-icon-button class="moderate-button" *ngIf="(isCreator || isModerator) && !inAnswerView" diff --git a/src/app/components/shared/write-comment/write-comment.component.html b/src/app/components/shared/write-comment/write-comment.component.html index 6caa9719121e6d2fad59369cb4236b9549ea7c8e..d1abcac2386e2d8ed03b23c3e8969ce5de40ef3a 100644 --- a/src/app/components/shared/write-comment/write-comment.component.html +++ b/src/app/components/shared/write-comment/write-comment.component.html @@ -50,7 +50,23 @@ [isEditor]="true" [maxTextCharacters]="maxTextCharacters" [maxDataCharacters]="maxDataCharacters" - [placeHolderText]="placeholder"></app-view-comment-data> + [placeHolderText]="placeholder"> +</app-view-comment-data> +<mat-form-field class="questioner-name-input" *ngIf="isQuestionerNameEnabled && enabled"> + <input (focus)="eventService.makeFocusOnInputTrue()" + (blur)="eventService.makeFocusOnInputFalse()" + matInput + [formControl]="questionerNameFormControl" + name="questioner-name" + maxlength="20" + aria-labelledby="questioner-name"/> + <mat-placeholder class="placeholder">{{ 'write-comment.questioner-name' | translate }}</mat-placeholder> + <mat-hint align="end"><span aria-hidden="true">{{ questionerNameFormControl.value.length }} / 20</span></mat-hint> + <mat-error *ngIf="questionerNameFormControl.hasError('minlength') || + questionerNameFormControl.hasError('maxlength')"> + {{ 'write-comment.name-length-error' | translate }} + </mat-error> +</mat-form-field> <ars-row ars-flex-box *ngIf="enabled" class="spellcheck"> <ars-col> <button @@ -77,3 +93,7 @@ ></app-dialog-action-buttons> </ars-col> </ars-row> + +<div class="visually-hidden"> + <div id="questioner-name">{{ 'write-comment.a11y-questioner-name' | translate }}</div> +</div> diff --git a/src/app/components/shared/write-comment/write-comment.component.scss b/src/app/components/shared/write-comment/write-comment.component.scss index cdbad181324268284e32a7c01f457f3a67271e5d..62b32e6119654c50f9c81db250b7c7834e141202 100644 --- a/src/app/components/shared/write-comment/write-comment.component.scss +++ b/src/app/components/shared/write-comment/write-comment.component.scss @@ -1,3 +1,13 @@ +.questioner-name-input { + width: 100%; + max-width: 260px; + margin-top: -5px; + + @media screen and (max-width: 500px) { + max-width: unset; + } +} + button { min-width: 80px; } diff --git a/src/app/components/shared/write-comment/write-comment.component.ts b/src/app/components/shared/write-comment/write-comment.component.ts index c9d7b8d945b3b87d6517a8a6214ddc6ffa45d048..3ae4550189c15ddc68b8e346ee77b6dfd5c44f62 100644 --- a/src/app/components/shared/write-comment/write-comment.component.ts +++ b/src/app/components/shared/write-comment/write-comment.component.ts @@ -9,6 +9,7 @@ import { ViewCommentDataComponent } from '../view-comment-data/view-comment-data import { DeepLService, SourceLang, TargetLang } from '../../../services/http/deep-l.service'; import { DeepLDialogComponent } from '../_dialogs/deep-ldialog/deep-ldialog.component'; import { MatDialog } from '@angular/material/dialog'; +import { FormControl, Validators } from '@angular/forms'; @Component({ selector: 'app-write-comment', @@ -22,7 +23,7 @@ export class WriteCommentComponent implements OnInit { @Input() isModerator = false; @Input() tags: string[]; @Input() onClose: () => any; - @Input() onSubmit: (commentData: string, commentText: string, selectedTag: string) => any; + @Input() onSubmit: (commentData: string, commentText: string, selectedTag: string, name?: string) => any; @Input() isSpinning = false; @Input() disableCancelButton = false; @Input() confirmLabel = 'save'; @@ -32,6 +33,7 @@ export class WriteCommentComponent implements OnInit { @Input() isCommentAnswer = false; @Input() placeholder = 'comment-page.enter-comment'; @Input() i18nSection = 'comment-page'; + @Input() isQuestionerNameEnabled = false; comment: Comment; selectedTag: string; maxTextCharacters = 500; @@ -42,6 +44,9 @@ export class WriteCommentComponent implements OnInit { isSpellchecking = false; hasSpellcheckConfidence = true; newLang = 'auto'; + questionerNameFormControl = new FormControl('', [ + Validators.minLength(2), Validators.maxLength(20) + ]); constructor(private notification: NotificationService, private languageService: LanguageService, @@ -77,9 +82,15 @@ export class WriteCommentComponent implements OnInit { return undefined; } return () => { + let allowed = true; + if (this.isQuestionerNameEnabled) { + this.questionerNameFormControl.setValue((this.questionerNameFormControl.value || '').trim()); + allowed = !this.questionerNameFormControl.hasError('minlength') && + !this.questionerNameFormControl.hasError('maxlength'); + } if (ViewCommentDataComponent.checkInputData(this.commentData.currentData, this.commentData.currentText, - this.translateService, this.notification, this.maxTextCharacters, this.maxDataCharacters)) { - this.onSubmit(this.commentData.currentData, this.commentData.currentText, this.selectedTag); + this.translateService, this.notification, this.maxTextCharacters, this.maxDataCharacters) && allowed) { + this.onSubmit(this.commentData.currentData, this.commentData.currentText, this.selectedTag, this.questionerNameFormControl.value); } }; } diff --git a/src/app/models/comment.ts b/src/app/models/comment.ts index 18b77b83d0c11f57a30cf254c2cf7d80337b62db..26c3ba2d7b2f00d19c854db8a2b2a30ca7a93661 100644 --- a/src/app/models/comment.ts +++ b/src/app/models/comment.ts @@ -26,6 +26,7 @@ export class Comment { upvotes: number; downvotes: number; language: Language; + questionerName: string; createdBy; constructor(roomId: string = '', @@ -48,6 +49,7 @@ export class Comment { upvotes = 0, downvotes = 0, language = Language.auto, + questionerName: string = null, createdBy?: any) { this.id = ''; this.roomId = roomId; @@ -72,6 +74,7 @@ export class Comment { this.downvotes = downvotes; this.language = language; this.createdBy = createdBy; + this.questionerName = questionerName; } static mapModelToLanguage(model: Model): Language { diff --git a/src/app/services/util/room-data.service.ts b/src/app/services/util/room-data.service.ts index c1802e7b8659a3093af0cb70a69dcdeb0a16bac2..12e7f984cc3acd9ff3879722fb2c0dff6e75df4c 100644 --- a/src/app/services/util/room-data.service.ts +++ b/src/app/services/util/room-data.service.ts @@ -184,11 +184,11 @@ export class RoomDataService { } getUnFilteredBody(id: string): string { - return this._savedCommentsBeforeFilter.get(id)[0]; + return this._savedCommentsBeforeFilter.get(id).body; } getFilteredBody(id: string): string { - return this._savedCommentsAfterFilter.get(id)[0]; + return this._savedCommentsAfterFilter.get(id).body; } getCensoredInformation(comment: Comment): CommentFilterData { @@ -314,6 +314,7 @@ export class RoomDataService { c.userNumber = this.commentService.hashCode(c.creatorId); c.keywordsFromQuestioner = JSON.parse(payload.keywordsFromQuestioner); c.language = payload.language; + c.questionerName = payload.questionerName; this._fastCommentAccess[c.id] = c; this._currentComments.push(c); this.triggerUpdate(UpdateType.commentStream, { diff --git a/src/assets/i18n/creator/de.json b/src/assets/i18n/creator/de.json index 42b35de3843309a51aa52f5abadc75de6e85db90..6e66af2854d1ead50cd1959b89a2c00add3f2ca7 100644 --- a/src/assets/i18n/creator/de.json +++ b/src/assets/i18n/creator/de.json @@ -195,7 +195,8 @@ "show-comment-with-filter": "Vulgäre Wörter ausixen", "show-comment-without-filter": "Vulgäre Wörter anzeigen", "upvote": "positiv:", - "downvote": "negativ:" + "downvote": "negativ:", + "questioner-name": "Name des Fragenstellers" }, "content": { "abort": "Abbrechen", @@ -591,5 +592,10 @@ "bad-spelled" : "Zu schlechte Rechtschreibung", "failed" : "Fehler aufgetreten", "inline-header": "Laufende Stichwort-Aktualisierungen" + }, + "write-comment": { + "questioner-name": "Dein Name, wenn du willst ...", + "a11y-questioner-name": "Hier kannst du, wenn du willst, deinen Namen eingeben. Dieser ist für alle an diesem Kommentar sichtbar.", + "name-length-error": "Der Name muss zwischen 2 und 20 Zeichen lang sein." } } diff --git a/src/assets/i18n/creator/en.json b/src/assets/i18n/creator/en.json index 2a3d3e1cecdabb814bdca303217f123aa26fd16e..a25a7ace2e3b698425631b28664be168d7ad09eb 100644 --- a/src/assets/i18n/creator/en.json +++ b/src/assets/i18n/creator/en.json @@ -196,7 +196,8 @@ "show-comment-with-filter": "Hide vulgar words", "show-comment-without-filter": "Show vulgar words", "upvote": "upvotes:", - "downvote": "downvotes:" + "downvote": "downvotes:", + "questioner-name": "Name of the questioner" }, "content": { "abort": "Abort", @@ -589,5 +590,10 @@ "bad-spelled": "Spelling too bad", "failed": "Error occurred", "inline-header": "Ongoing keyword updates" + }, + "write-comment": { + "questioner-name": "Your name, if you want ...", + "a11y-questioner-name": "Here you can enter your name if you want. This is visible for everyone at this comment.", + "name-length-error": "The name must be between 2 and 20 characters." } } diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json index d95b0400dd922c3e8159acc9d943ff85a3b84423..0588fb0eb0256fc4e9bf606e64fb17918b5ffb59 100644 --- a/src/assets/i18n/participant/de.json +++ b/src/assets/i18n/participant/de.json @@ -162,7 +162,8 @@ "sure": "Bist du sicher?", "grammar-check": "Text prüfen", "upvote": "positiv:", - "downvote": "negativ:" + "downvote": "negativ:", + "questioner-name": "Name des Fragenstellers" }, "deepl": { "header": "Text prüfen", @@ -473,5 +474,10 @@ "cancel": "Schließen", "cancel-description": "Schließe die Einführung und gehe zurück zur Anmeldung.", "title": "Einführung" + }, + "write-comment": { + "questioner-name": "Dein Name, wenn du willst ...", + "a11y-questioner-name": "Hier kannst du, wenn du willst, deinen Namen eingeben. Dieser ist für alle an diesem Kommentar sichtbar.", + "name-length-error": "Der Name muss zwischen 2 und 20 Zeichen lang sein." } } diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json index 876f4dcee45448937ee31fb2b859ae5c285c65a4..e1d208e6533fa5fa2ca5ef6af21f2eec356465ef 100644 --- a/src/assets/i18n/participant/en.json +++ b/src/assets/i18n/participant/en.json @@ -171,7 +171,8 @@ "delete": "Delete question", "grammar-check": "Check text", "upvote": "upvotes:", - "downvote": "downvotes:" + "downvote": "downvotes:", + "questioner-name": "Name of the questioner" }, "deepl": { "header": "Check text", @@ -479,5 +480,10 @@ "cancel": "Close", "cancel-description": "Close introduction.", "title": "Introduction" + }, + "write-comment": { + "questioner-name": "Your name, if you want ...", + "a11y-questioner-name": "Here you can enter your name if you want. This is visible for everyone at this comment.", + "name-length-error": "The name must be between 2 and 20 characters." } }