feat(CommentCardComponent): Comment shows the tags of the vote

While showingthe comments related to a vote, if the vote has tags such tags are shown together with
the comment

src/app/modules/shared/comment-trees/comment-trees/comment-card.component.ts

@@ -1,4 +1,6 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Comment } from 'src/app/models/comment';
+import { Vote } from 'src/app/models/vote';
 
 @Component({
   selector: 'byor-comment-card',
@@ -7,6 +9,11 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
       <mat-card-title>{{ title }}</mat-card-title>
       <mat-card-subtitle>{{ timestamp }}</mat-card-subtitle>
       <mat-card-content>{{ text }}</mat-card-content>
+      <mat-card-subtitle *ngIf="showTags()">
+        <mat-chip-list #tagsList>
+          <mat-chip *ngFor="let tag of vote.tags"> {{ tag }} </mat-chip>
+        </mat-chip-list>
+      </mat-card-subtitle>
       <mat-card-actions *ngIf="showAddReplyButton">
         <button mat-icon-button (click)="addNewItem()"><mat-icon>add</mat-icon></button>
       </mat-card-actions>
@@ -19,10 +26,15 @@ export class CommentCardComponent {
   @Input() title: string;
   @Input() timestamp: string;
   @Input() text: string;
+  @Input() vote: Vote;
   @Input() showAddReplyButton: boolean;
   @Output() addNewItemClicked = new EventEmitter<any>();
 
   addNewItem() {
     this.addNewItemClicked.next();
   }
+
+  showTags() {
+    return this.vote && this.vote.tags;
+  }
 }

src/app/modules/shared/comment-trees/comment-trees/comment-trees.component.html

@@ -6,7 +6,7 @@
   <mat-tree-node *matTreeNodeDef="let node; when: !hasChild" matTreeNodeToggle matTreeNodePadding>
     <button mat-icon-button disabled></button>
     <byor-comment-card class="comment" [title]="getTitle(node)" [timestamp]="getTimestamp(node)" 
-      [showAddReplyButton]="showAddReplyButton()" [text]="node.text" (addNewItemClicked)="addNewItem(node)">
+      [showAddReplyButton]="showAddReplyButton()" [text]="node.text" [vote]="node.vote" (addNewItemClicked)="addNewItem(node)">
     </byor-comment-card>
   </mat-tree-node>
 
@@ -19,7 +19,7 @@
       </mat-icon>
     </button>
     <byor-comment-card class="comment" [title]="getTitle(node)" [timestamp]="getTimestamp(node)" 
-      [showAddReplyButton]="showAddReplyButton()" [text]="node.text" (addNewItemClicked)="addNewItem(node)">
+      [showAddReplyButton]="showAddReplyButton()" [text]="node.text" [vote]="node.vote" (addNewItemClicked)="addNewItem(node)">
     </byor-comment-card>
   </mat-tree-node>
 

src/app/modules/shared/comment-trees/comment-trees/comment-trees.component.ts

@@ -16,14 +16,12 @@ export class CommentFlatNode {
   level: number;
   expandable: boolean;
   commentId: string;
-  voteId: string;
-  voteRing: string;
+  vote?: Vote;
   author: string;
   timestamp: string;
 }
 export interface CommentWithVoteIdNode extends Comment {
-  voteId?: string;
-  voteRing?: string;
+  vote?: Vote;
   parentCommentId?: string;
 }
 
@@ -69,7 +67,7 @@ export class CommentTreesComponent implements OnDestroy {
           const commentsEnriched = votes.map((vote) => {
             const cmt: CommentWithVoteIdNode = vote.comment;
             this.setAdditionalInfoInReplies(cmt, vote);
-            cmt.voteRing = vote.ring;
+            cmt.vote = vote;
             return cmt;
           });
           return { comments: commentsEnriched, flatNode };
@@ -127,8 +125,7 @@ export class CommentTreesComponent implements OnDestroy {
     if (cmt.replies) {
       cmt.replies = cmt.replies.map((rep) => this.setAdditionalInfoInReplies(rep, vote));
     }
-    cmt.voteId = vote._id;
-    cmt.voteRing = vote.ring;
+    cmt.vote = vote;
     return cmt;
   }
 
@@ -159,8 +156,7 @@ export class CommentTreesComponent implements OnDestroy {
     flatNode.level = level;
     flatNode.expandable = !!node.replies;
     flatNode.commentId = node.id;
-    flatNode.voteId = node.voteId;
-    flatNode.voteRing = node.voteRing;
+    flatNode.vote = node.vote;
     flatNode.author = node.author;
     flatNode.timestamp = node.timestamp;
     this.flatNodeMap.set(flatNode, node);
@@ -175,8 +171,7 @@ export class CommentTreesComponent implements OnDestroy {
     parentNode.replies = parentNode.replies ? parentNode.replies : [];
     const newComment: CommentWithVoteIdNode = {
       text: '',
-      voteId: parentNode.voteId,
-      voteRing: parentNode.voteRing,
+      vote: parentNode.vote,
       parentCommentId: parentNode.id
     };
     parentNode.replies.unshift(newComment);
@@ -196,7 +191,7 @@ export class CommentTreesComponent implements OnDestroy {
     const nestedNode = this.flatNodeMap.get(node);
     const author = this.authService.user;
     this.backEnd
-      .addReplyToVoteComment(node.voteId, { text, author }, nestedNode.parentCommentId)
+      .addReplyToVoteComment(node.vote._id, { text, author }, nestedNode.parentCommentId)
       .pipe(
         tap(() => this.triggerCommentRetrieval.next(node)),
         tap(() => (this._showAddReplyButton = true))
@@ -209,9 +204,9 @@ export class CommentTreesComponent implements OnDestroy {
   }
 
   getTitle(node: CommentFlatNode) {
-    let title = node.level > 0 ? `${node.author}   -  ${node.voteRing}` : node.author;
+    let title = node.level > 0 ? `${node.author}   -  ${node.vote.ring}` : node.author;
     if (node.level === 0) {
-      title = `${node.author}   -  ${node.voteRing}`;
+      title = `${node.author}   -  ${node.vote.ring}`;
     } else {
       title = node.author;
     }

src/app/modules/shared/technology-voting-results/technology-voting-result/technology-voting-result.component.ts

@@ -19,7 +19,34 @@ export class TechnologyVotingResultComponent implements OnInit {
   ngOnInit() {}
 
   nameAndRing() {
-    return `<span> ${this.appSession.getSelectedTechnology().name} </span> ${this.numberOfVotesAndComments()}`;
+    return `<span> ${
+      this.appSession.getSelectedTechnology().name
+    } </span> <span>${this.mostVotedRings()}</span> <span>${this.numberOfVotesAndComments()}</span>`;
+  }
+  mostVotedRings() {
+    let ret: string;
+    const selectedTech = this.appSession.getSelectedTechnology();
+    if (selectedTech.votingResult) {
+      const votes = selectedTech.votingResult.votesForRing;
+      let max = 0;
+      const maxVotes = votes.reduce((ringsWithMaxVotes, ring) => {
+        if (max < ring.count) {
+          ringsWithMaxVotes = [ring];
+          max = ring.count;
+        } else if (max === ring.count) {
+          ringsWithMaxVotes.push(ring);
+        }
+        return ringsWithMaxVotes;
+      }, []);
+      if (maxVotes.length === 1) {
+        ret = `<span>Ring most voted is ${maxVotes[0].ring}</span>`;
+      } else if (maxVotes.length > 1) {
+        ret = `<span>The rings most voted are`;
+        maxVotes.forEach((v) => (ret = ret + `<span>${v.ring}</span>`));
+        ret = ret + `</span>`;
+      }
+    }
+    return ret;
   }
   numberOfVotesAndComments() {
     let ret: string;