Move 'export-comments'-function to room-settings

src/app/components/creator/_dialogs/comment-export/comment-export.component.html

@@ -7,7 +7,7 @@
       </div>
     </mat-radio-group>
   <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="20px">
-  <button mat-raised-button color="warn" (click)="onNoClick()">{{'comment-page.abort' | translate}}</button>
+  <button mat-raised-button class="abort" (click)="onNoClick()">{{'comment-page.abort' | translate}}</button>
     <button mat-raised-button class="export"
             (click)="dialogRef.close(exportType)">{{'comment-page.export' | translate}}</button>
   </div>

src/app/components/creator/_dialogs/comment-export/comment-export.component.scss

@@ -11,6 +11,11 @@ h4 {
   margin: 15px 0 15px 0;
 }
 
+.abort {
+  background-color: var(--secondary);
+  color: var(--on-secondary);
+}
+
 .export {
   background-color: var(--primary);
   color: var(--on-primary);

src/app/components/creator/_dialogs/comment-export/comment-export.component.ts

 import { Component, OnInit } from '@angular/core';
 import { MatDialogRef } from '@angular/material';
-import { CommentPageComponent } from '../../../shared/comment-page/comment-page.component';
+import { RoomEditComponent } from '../room-edit/room-edit.component';
 
 @Component({
   selector: 'app-comment-export',
@@ -11,7 +11,7 @@ export class CommentExportComponent implements OnInit {
 
   exportType = 'comma';
 
-  constructor(public dialogRef: MatDialogRef<CommentPageComponent>) { }
+  constructor(public dialogRef: MatDialogRef<RoomEditComponent>) { }
 
   ngOnInit() {
   }

src/app/components/creator/_dialogs/room-edit/room-edit.component.html

@@ -28,13 +28,18 @@
     <mat-slider id="commentSlider" min="-50" max="50" step="1" value="0"
                 [(ngModel)]="commentThreshold" (input)="onSliderChange($event)"></mat-slider>
   </div>
+  <div fxLayoutAlign="center center">
+    <button mat-raised-button class="export" (click)="openExportDialog()">
+      <mat-icon>cloud_download</mat-icon>
+      {{ 'room-page.export-comments' | translate }}</button>
+  </div>
   <div fxLayoutAlign="center center">
   <button mat-raised-button class="delete" (click)="openDeleteCommentDialog()">
     <mat-icon>delete</mat-icon>
     {{ 'room-page.delete-all-comments' | translate }}</button>
   </div>
   <mat-divider></mat-divider>
-  <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
+  <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px" class="submit">
     <button mat-raised-button class="abort" (click)="dialogRef.close('abort')">
       {{ 'room-page.abort' | translate }}
     </button>

src/app/components/creator/_dialogs/room-edit/room-edit.component.scss

@@ -5,10 +5,16 @@
 .delete {
   margin-bottom: 20px;
   min-width: 220px;
-  width: 60%;
   background-color: var(--red);
 }
 
+.export {
+  margin-bottom: 20px;
+  min-width: 220px;
+  background-color: var(--secondary);
+  color: var(--on-secondary);
+}
+
 button {
   min-width: 105px;
 }
@@ -41,6 +47,10 @@ mat-divider {
   color: var(--on-primary);
 }
 
+.submit {
+  margin-top: 20px;
+}
+
 mat-form-field {
   color: var(--on-surface);
 }

src/app/components/creator/_dialogs/room-edit/room-edit.component.ts

@@ -9,6 +9,8 @@ import { Router } from '@angular/router';
 import { RoomCreatorPageComponent } from '../../room-creator-page/room-creator-page.component';
 import { DeleteCommentComponent } from '../delete-comment/delete-comment.component';
 import { CommentService } from '../../../../services/http/comment.service';
+import { CommentExportComponent } from '../comment-export/comment-export.component';
+import { Comment } from '../../../../models/comment';
 
 @Component({
   selector: 'app-room-edit',
@@ -17,6 +19,7 @@ import { CommentService } from '../../../../services/http/comment.service';
 })
 export class RoomEditComponent implements OnInit {
   editRoom: Room;
+  comments: Comment[];
   commentThreshold: number;
 
   constructor(public dialogRef: MatDialogRef<RoomCreatorPageComponent>,
@@ -35,6 +38,7 @@ export class RoomEditComponent implements OnInit {
     } else {
       this.commentThreshold = -10;
     }
+    console.log(this.editRoom);
   }
 
   onSliderChange(event: any) {
@@ -85,4 +89,45 @@ export class RoomEditComponent implements OnInit {
     });
     this.commentService.deleteCommentsByRoomId(this.editRoom.id).subscribe();
   }
+
+  exportCsv(delimiter: string, date: string): void {
+    const exportComments = JSON.parse(JSON.stringify(this.comments));
+    let csv: string;
+    let keyFields = '';
+    let valueFields = '';
+    keyFields = Object.keys(exportComments[0]).slice(3).join(delimiter) + '\r\n';
+    exportComments.forEach(element => {
+      element.body = '"' + element.body.replace(/[\r\n]/g, ' ').replace(/ +/g, ' ').replace(/"/g, '""') + '"';
+      valueFields += Object.values(element).slice(3).join(delimiter) + '\r\n';
+    });
+    csv = keyFields + valueFields;
+    const myBlob = new Blob([csv], { type: 'text/csv' });
+    const link = document.createElement('a');
+    const fileName = 'comments_' + date + '.csv';
+    link.setAttribute('download', fileName);
+    link.href = window.URL.createObjectURL(myBlob);
+    link.click();
+  }
+
+  onExport(exportType: string): void {
+    const date = new Date();
+    const dateString = date.getFullYear() + '_' + ('0' + (date.getMonth() + 1)).slice(-2) + '_' + ('0' + date.getDate()).slice(-2);
+    const timeString = ('0' + date.getHours()).slice(-2) + ('0' + date.getMinutes()).slice(-2) + ('0' + date.getSeconds()).slice(-2);
+    const timestamp = dateString + '_' + timeString;
+    if (exportType === 'comma') {
+      this.exportCsv(',', timestamp);
+    }
+    if (exportType === 'semicolon') {
+      this.exportCsv(';', timestamp);
+    }
+  }
+
+  openExportDialog(): void {
+    const dialogRef = this.dialog.open(CommentExportComponent, {
+      width: '400px'
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      this.onExport(result);
+    });
+  }
 }

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

@@ -10,6 +10,7 @@ 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 { CommentService } from '../../../services/http/comment.service';
 
 @Component({
   selector: 'app-room-creator-page',
@@ -29,7 +30,8 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
               protected location: Location,
               public dialog: MatDialog,
               private translateService: TranslateService,
-              protected langService: LanguageService) {
+              protected langService: LanguageService,
+              public commentService: CommentService) {
     super(roomService, route, location);
     langService.langEmitter.subscribe(lang => translateService.use(lang));
   }
@@ -66,6 +68,10 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
     });
     dialogRef.componentInstance.editRoom = this.updRoom;
     dialogRef.componentInstance.commentThreshold = this.updCommentThreshold;
+    this.commentService.getComments(this.room.id)
+      .subscribe(comments => {
+        dialogRef.componentInstance.comments = comments;
+      });
     dialogRef.afterClosed()
       .subscribe(result => {
         if (result === 'abort') {

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

@@ -12,11 +12,6 @@
   <span class="fill-remaining-space"></span>
 
   <div class="button-bar" fxLayoutAlign="center center">
-    <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && userRole === 1 && comments.length > 0"
-            matTooltip="{{ 'comment-list.export-comments' | translate }}" (click)="openExportDialog()">
-      <mat-icon class="searchBarIcon">cloud_download</mat-icon>
-    </button>
-
     <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && comments.length > 0"
             [matMenuTriggerFor]="filterMenu" matTooltip="{{ 'comment-list.filter-comments' | translate }}">
       <mat-icon class="searchBarIcon">filter_list</mat-icon>

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

@@ -12,8 +12,6 @@ import { UserRole } from '../../../models/user-roles.enum';
 import { AuthenticationService } from '../../../services/http/authentication.service';
 import { Room } from '../../../models/room';
 import { RoomService } from '../../../services/http/room.service';
-import { CommentExportComponent } from '../../creator/_dialogs/comment-export/comment-export.component';
-import { DeleteCommentComponent } from '../../creator/_dialogs/delete-comment/delete-comment.component';
 
 @Component({
   selector: 'app-comment-list',
@@ -50,7 +48,6 @@ export class CommentListComponent implements OnInit {
   ngOnInit() {
     this.roomId = localStorage.getItem(`roomId`);
     this.roomService.getRoom(this.roomId).subscribe( room => this.room = room);
-    this.comments = [];
     this.hideCommentsList = false;
     this.wsCommentService.getCommentStream(this.roomId).subscribe((message: Message) => {
       this.parseIncomingMessage(message);
@@ -163,48 +160,6 @@ export class CommentListComponent implements OnInit {
     this.wsCommentService.add(comment);
   }
 
-  exportCsv(delimiter: string, date: string): void {
-    const exportComments = JSON.parse(JSON.stringify(this.comments));
-    let csv: string;
-    let keyFields = '';
-    let valueFields = '';
-    keyFields = Object.keys(exportComments[0]).slice(3).join(delimiter) + '\r\n';
-    exportComments.forEach(element => {
-      element.body = '"' + element.body.replace(/[\r\n]/g, ' ').replace(/ +/g, ' ').replace(/"/g, '""') + '"';
-      valueFields += Object.values(element).slice(3).join(delimiter) + '\r\n';
-    });
-    csv = keyFields + valueFields;
-    const myBlob = new Blob([csv], { type: 'text/csv' });
-    const link = document.createElement('a');
-    const fileName = 'comments_' + date + '.csv';
-    link.setAttribute('download', fileName);
-    link.href = window.URL.createObjectURL(myBlob);
-    link.click();
-  }
-
-  onExport(exportType: string): void {
-    const date = new Date();
-    const dateString = date.getFullYear() + '_' + ('0' + (date.getMonth() + 1)).slice(-2) + '_' + ('0' + date.getDate()).slice(-2);
-    const timeString = ('0' + date.getHours()).slice(-2) + ('0' + date.getMinutes()).slice(-2) + ('0' + date.getSeconds()).slice(-2);
-    const timestamp = dateString + '_' + timeString;
-    if (exportType === 'comma') {
-      this.exportCsv(',', timestamp);
-    }
-    if (exportType === 'semicolon') {
-      this.exportCsv(';', timestamp);
-    }
-  }
-
-
-  openExportDialog(): void {
-    const dialogRef = this.dialog.open(CommentExportComponent, {
-      width: '400px'
-    });
-    dialogRef.afterClosed().subscribe(result => {
-      this.onExport(result);
-    });
-  }
-
   filterFavorite(): void {
     this.filteredComments = this.comments.filter(c => c.favorite);
   }

src/assets/i18n/creator/de.json

@@ -27,7 +27,8 @@
     "threshold": "Schwellenwert für sichtbare Kommentare: ",
     "delete-all-comments": "Alle Kommentare löschen",
     "really-delete-comments": "Wollen sie wirklich alle Kommentare dieser Session löschen?",
-    "comments-deleted": "Alle Kommentare wurden gelöscht."
+    "comments-deleted": "Alle Kommentare wurden gelöscht.",
+    "export-comments": "Kommentare exportieren"
   },
   "content": {
     "content": "Frage",
@@ -101,7 +102,6 @@
   },
   "comment-list": {
     "search": "Suchen",
-    "export-comments": "Kommentare exportieren",
     "filter-comments": "Kommentare filtern",
     "sort-comments": "Kommentare sortieren",
     "add-comment": "Kommentar erstellen"

src/assets/i18n/creator/en.json

@@ -27,8 +27,8 @@
     "threshold": "Threshold for visible comments: ",
     "delete-all-comments": "Delete all comments",
     "really-delete-comments": "Do you really want to delete all comments of this session?",
-    "comments-deleted": "All comments have been deleted."
-
+    "comments-deleted": "All comments have been deleted.",
+    "export-comments": "Export comments"
   },
   "content": {
     "content": "Content",
@@ -102,7 +102,6 @@
   },
   "comment-list": {
     "search": "Search",
-    "export-comments": "Export comments",
     "filter-comments": "Filter comments",
     "sort-comments": "Sort comments",
     "add-comment": "Create comment"