Implement questioner name

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>

src/app/components/shared/_dialogs/create-comment/create-comment.component.html

 <ars-row ars-flex-box>
   <app-write-comment [confirmLabel]="'send'"
+                     [isQuestionerNameEnabled]="true"
                      [onSubmit]="this.closeDialog.bind(this)"
                      [onClose]="this.onNoClick.bind(this)"
                      [isSpinning]="isSendingToSpacy"

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);
   }

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"

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>

src/app/components/shared/write-comment/write-comment.component.scss

+.questioner-name-input {
+  width: 100%;
+  max-width: 260px;
+  margin-top: -5px;
+
+  @media screen and (max-width: 500px) {
+    max-width: unset;
+  }
+}
+
 button {
   min-width: 80px;
 }

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);
       }
     };
   }

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 {

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, {

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."
   }
 }

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."
   }
 }

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."
   }
 }

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."
   }
 }