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/http/comment.service.ts b/src/app/services/http/comment.service.ts
index 7f82202e349636db5dd774fcfb375547e6c621d2..0de32cdb250f749bfedd56c086a2d6bce3b88eb5 100644
--- a/src/app/services/http/comment.service.ts
+++ b/src/app/services/http/comment.service.ts
@@ -87,7 +87,7 @@ export class CommentService extends BaseHttpService {
read: comment.read, creationTimestamp: comment.timestamp, tag: comment.tag,
keywordsFromSpacy: JSON.stringify(comment.keywordsFromSpacy),
keywordsFromQuestioner: JSON.stringify(comment.keywordsFromQuestioner),
- language: comment.language
+ language: comment.language, questionerName: comment.questionerName
}, httpOptions).pipe(
tap(_ => ''),
catchError(this.handleError<Comment>('addComment'))
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."
}
}