Merge branch 'room-page-comment-counter' into 'master'

Room page comment counter

Closes #289

See merge request !268

src/app/components/creator/room-creator-page/room-creator-page.component.html

@@ -29,7 +29,7 @@
         <mat-grid-tile>
           <button mat-icon-button
                   routerLink="/creator/room/{{ room.shortId }}/comments">
-            <mat-icon>question_answer</mat-icon>
+            <mat-icon matBadge="{{commentCounter}}" matBadgeColor="primary">question_answer</mat-icon>
             <h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.comments' | translate}}</h3>
             <h4 *ngIf="deviceType === 'mobile'">{{ 'room-page.comments' | translate}}</h4>
           </button>

src/app/components/creator/room-creator-page/room-creator-page.component.ts

@@ -10,6 +10,8 @@ import { RoomEditComponent } from '../_dialogs/room-edit/room-edit.component';
 import { TranslateService } from '@ngx-translate/core';
 import { LanguageService } from '../../../services/util/language.service';
 import { TSMap } from 'typescript-map';
+import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
+import { CommentService } from '../../../services/http/comment.service';
 
 @Component({
   selector: 'app-room-creator-page',
@@ -29,8 +31,10 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
               protected location: Location,
               public dialog: MatDialog,
               private translateService: TranslateService,
-              protected langService: LanguageService) {
-    super(roomService, route, location);
+              protected langService: LanguageService,
+              protected wsCommentService: WsCommentServiceService,
+              protected commentService: CommentService) {
+    super(roomService, route, location, wsCommentService, commentService);
     langService.langEmitter.subscribe(lang => translateService.use(lang));
   }
 
@@ -38,7 +42,7 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
     window.scroll(0, 0);
     this.translateService.use(localStorage.getItem('currentLang'));
     this.route.params.subscribe(params => {
-      this.getRoom(params['roomId']);
+      this.initializeRoom(params['roomId']);
     });
   }
 

src/app/components/participant/room-participant-page/room-participant-page.component.html

@@ -17,7 +17,7 @@
       <mat-grid-list cols="1" rowHeight="2:1">
         <mat-grid-tile>
           <button mat-icon-button routerLink="/participant/room/{{ room.shortId }}/comments">
-            <mat-icon>question_answer</mat-icon>
+            <mat-icon matBadge="{{commentCounter}}" matBadgeColor="primary">question_answer</mat-icon>
             <h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.create-comment' | translate}}</h3>
             <h4 *ngIf="deviceType === 'mobile'">{{ 'room-page.create-comment' | translate}}</h4>
           </button>

src/app/components/participant/room-participant-page/room-participant-page.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Room } from '../../../models/room';
+import { RoomPageComponent } from '../../shared/room-page/room-page.component';
 import { Location } from '@angular/common';
 import { RoomService } from '../../../services/http/room.service';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { LanguageService } from '../../../services/util/language.service';
+import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
+import { CommentService } from '../../../services/http/comment.service';
 
 @Component({
   selector: 'app-room-participant-page',
   templateUrl: './room-participant-page.component.html',
   styleUrls: ['./room-participant-page.component.scss']
 })
-export class RoomParticipantPageComponent implements OnInit {
+export class RoomParticipantPageComponent extends RoomPageComponent implements OnInit {
 
   room: Room;
   isLoading = true;
   deviceType = localStorage.getItem('deviceType');
 
 
-  constructor(private location: Location,
-              private roomService: RoomService,
-              private route: ActivatedRoute,
+  constructor(protected location: Location,
+              protected roomService: RoomService,
+              protected route: ActivatedRoute,
               private translateService: TranslateService,
-              protected langService: LanguageService) {
+              protected langService: LanguageService,
+              protected wsCommentService: WsCommentServiceService,
+              protected commentService: CommentService) {
+    super(roomService, route, location, wsCommentService, commentService);
     langService.langEmitter.subscribe(lang => translateService.use(lang));
   }
 
   ngOnInit() {
     window.scroll(0, 0);
     this.route.params.subscribe(params => {
-      this.getRoom(params['roomId']);
+      this.initializeRoom(params['roomId']);
     });
     this.translateService.use(localStorage.getItem('currentLang'));
   }
-
-  getRoom(id: string): void {
-    this.roomService.getRoomByShortId(id)
-      .subscribe(room => {
-        this.room = room;
-        this.isLoading = false;
-      });
-  }
 }

src/app/components/shared/room-page/room-page.component.ts

@@ -3,6 +3,9 @@ import { Room } from '../../../models/room';
 import { RoomService } from '../../../services/http/room.service';
 import { ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
+import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
+import { CommentService } from '../../../services/http/comment.service';
+import { Message } from '@stomp/stompjs';
 
 @Component({
   selector: 'app-room-page',
@@ -12,22 +15,39 @@ import { Location } from '@angular/common';
 export class RoomPageComponent implements OnInit {
   room: Room = null;
   isLoading = true;
+  commentCounter: number;
 
   constructor(protected roomService: RoomService,
               protected route: ActivatedRoute,
-              protected location: Location) {
+              protected location: Location,
+              protected wsCommentService: WsCommentServiceService,
+              protected commentService: CommentService
+  ) {
   }
 
   ngOnInit() {
     this.route.params.subscribe(params => {
-      this.getRoom(params['roomId']);
+      this.initializeRoom(params['roomId']);
     });
   }
 
-  getRoom(id: string): void {
+  initializeRoom(id: string): void {
     this.roomService.getRoomByShortId(id).subscribe(room => {
       this.room = room;
       this.isLoading = false;
+      this.commentService.countByRoomId(this.room.id)
+        .subscribe(commentCounter => {
+          this.commentCounter = commentCounter;
+        });
+      this.wsCommentService.getCommentStream(this.room.id).subscribe((message: Message) => {
+        const msg = JSON.parse(message.body);
+        const payload = msg.payload;
+        if (msg.type === 'CommentCreated') {
+          this.commentCounter = this.commentCounter + 1;
+        } else if (msg.type === 'CommentDeleted') {
+          this.commentCounter = this.commentCounter - 1;
+        }
+      });
     });
   }
 

src/app/services/http/comment.service.ts

@@ -14,7 +14,8 @@ export class CommentService extends BaseHttpService {
   private apiUrl = {
     base: '/api',
     comment: '/comment',
-    find: '/find'
+    find: '/find',
+    count: '/count'
   };
 
   constructor(private http: HttpClient) {
@@ -74,4 +75,15 @@ export class CommentService extends BaseHttpService {
       catchError(this.handleError<Comment>('deleteComment'))
     );
   }
+
+  countByRoomId(roomId: string): Observable<number> {
+    const connectionUrl = this.apiUrl.base + this.apiUrl.comment + this.apiUrl.find + this.apiUrl.count;
+    return this.http.post<number>(connectionUrl, {
+      properties: { roomId: roomId },
+      externalFilters: {}
+    }, httpOptions).pipe(
+      tap(_ => ''),
+      catchError(this.handleError<number>('countByRoomId', 0))
+    );
+  }
 }