Add tag to comment

Add select menu on creating a comment
Add small section in comment mat card for displaying the comments

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

 <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
-  <mat-form-field class="input-block">
+  <mat-form-field>
     <textarea (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()" matInput #commentBody matTextareaAutosize matAutosizeMinRows=5 matAutosizeMaxRows=10  maxlength="250"
               [formControl]="bodyForm" aria-labelledby="ask-question-description"></textarea>
-    <mat-placeholder class="placeholder">{{ 'comment-page.enter-comment' | translate}}</mat-placeholder>
+    <mat-placeholder class="placeholder">{{ 'comment-page.enter-comment' | translate }}</mat-placeholder>
     <mat-hint align="end"><span aria-hidden="true">{{commentBody.value.length}} / 250</span></mat-hint>
+
+  </mat-form-field>
+  <mat-form-field *ngIf="tags !== null">
+
+    <mat-label>{{ 'comment-page.tag' || translate }}</mat-label>
+    <mat-select [(ngModel)]="selectedTag" class="comment-tag">
+      <mat-option *ngFor="let tag of tags" value="{{tag}}">{{tag}}</mat-option>
+    </mat-select>
+
   </mat-form-field>
 </div>
 <app-dialog-action-buttons

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

@@ -29,6 +29,11 @@ mat-hint {
   color: var(--on-surface) !important;
 }
 
+.mat-select-value-text {
+  color: var(--on-surface);
+  caret-color: var(--on-surface);
+}
+
 .placeholder {
   color: var(--on-surface);
 }

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

@@ -19,6 +19,8 @@ export class CreateCommentComponent implements OnInit {
 
   user: User;
   roomId: string;
+  tags: string[];
+  selectedTag: string;
 
   bodyForm = new FormControl('', [Validators.required]);
 
@@ -58,6 +60,11 @@ export class CreateCommentComponent implements OnInit {
       comment.body = body;
       comment.creatorId = this.user.id;
       comment.createdFromLecturer = this.user.role === 1;
+      if (this.selectedTag !== null) {
+        console.log("FUCK YOU");
+        console.log(this.selectedTag);
+        comment.tag = this.selectedTag;
+      }
       this.dialogRef.close(comment);
     }
   }

src/app/components/shared/comment-list/comment-list.component.ts

@@ -247,6 +247,7 @@ export class CommentListComponent implements OnInit {
     });
     dialogRef.componentInstance.user = this.user;
     dialogRef.componentInstance.roomId = this.roomId;
+    dialogRef.componentInstance.tags = this.room.extensions['tags'].tags;
     dialogRef.afterClosed()
       .subscribe(result => {
         if (result) {

src/app/components/shared/comment/comment.component.html

@@ -79,9 +79,18 @@
           <mat-icon class="voting-icon" [ngClass]="{'downVoted' : hasVoted === -1}">keyboard_arrow_down</mat-icon>
         </button>
       </div>
-    <div *ngIf="!isStudent" fxLayout="column" fxLayoutAlign="center">
-      <span class="scoreCreator">{{comment.score}}</span>
+      <div *ngIf="!isStudent" fxLayout="column" fxLayoutAlign="center">
+        <span class="scoreCreator">{{comment.score}}</span>
+      </div>
+
     </div>
+    <div *ngIf="comment.tag !== null && comment.tag !== ''" class="comment-tags">
+      <span class="comment-tag-icon">
+        <mat-icon svgIcon="comment_tag"></mat-icon>
+      </span>
+      <span class="comment-tag">
+        {{comment.tag}}
+      </span>
     </div>
   </div>
 </mat-card>

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

@@ -107,3 +107,11 @@ user.role
 .moderator {
   background-color: var(--moderator)!important;
 }
+
+.comment-tags {
+  margin-top: 1rem;
+}
+
+.comment-tag {
+  vertical-align: 5px;
+}

src/app/services/websockets/ws-comment-service.service.ts

@@ -20,7 +20,7 @@ export class WsCommentServiceService {
   constructor(private wsConnector: WsConnectorService) { }
 
   add(comment: Comment): void {
-    const message = new CreateComment(comment.roomId, comment.creatorId, comment.body);
+    const message = new CreateComment(comment.roomId, comment.creatorId, comment.body, comment.tag);
     this.wsConnector.send(`/queue/comment.command.create`, JSON.stringify(message));
   }
 

src/assets/i18n/creator/de.json

@@ -95,6 +95,7 @@
     "semicolon": "CSV-Format",
     "send": "Senden",
     "send-description": "Frage abschicken",
+    "tag": "Kategorie",
     "vote-down": "Frage abwerten",
     "vote-up": "Frage aufwerten"
   },

src/assets/i18n/creator/en.json

@@ -96,6 +96,7 @@
     "semicolon": "CSV format",
     "send": "Send",
     "send-description": "Send question",
+    "tag": "Tag",
     "vote-down": "Vote down",
     "vote-up": "Vote up"
   },

src/assets/i18n/participant/de.json

@@ -85,6 +85,7 @@
     "search-box-input-description": "Hier kannst du nach Fragen suchen.",
     "send": "Senden",
     "send-description": "Frage abschicken",
+    "tag": "Kategorie",
     "vote-down": "Frage abwerten",
     "vote-up": "Frage aufwerten"
   },

src/assets/i18n/participant/en.json

@@ -85,6 +85,7 @@
     "search-box-input-description": "Here you can search for questions.",
     "send": "Send",
     "send-description": "Send question",
+    "tag": "Tag",
     "vote-down": "Vote down",
     "vote-up": "Vote up"
   },