Split settings in 'general' and 'comments'

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

+<div mat-dialog-content>
+  <h2>{{'room-page.comments' | translate }}</h2>
+  <mat-divider></mat-divider>
+  <div fxLayout="column">
+    <div fxLayout="row">
+      <h3>{{ 'room-page.threshold' | translate}}</h3>
+      <h3>{{commentThreshold | number}}</h3>
+    </div>
+    <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" class="submit">
+    <button mat-raised-button class="abort" (click)="dialogRef.close('abort')">
+      {{ 'room-page.abort' | translate }}
+    </button>
+    <button mat-raised-button class="update" (click)="dialogRef.close(commentThreshold)">
+      {{ 'room-page.update' | translate }}
+    </button>
+  </div>
+</div>

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

+#commentSlider {
+  width: 100%;
+}
+
+.delete {
+  margin-bottom: 20px;
+  min-width: 220px;
+  background-color: var(--red);
+  color: var(--on-secondary);
+}
+
+.export {
+  margin-bottom: 20px;
+  min-width: 220px;
+  background-color: var(--secondary);
+  color: var(--on-secondary);
+}
+
+button {
+  min-width: 105px;
+}
+
+mat-icon {
+  margin-right: 10px;
+}
+
+h2 {
+  margin: 10px 0 10px 0;
+  color: var(--on-surface);
+}
+
+h3 {
+  color: var(--on-surface);
+}
+
+mat-divider {
+  margin-bottom: 10px;
+  color: var(--on-surface) !important;
+}
+
+.abort {
+  background-color: var(--secondary);
+  color: var(--on-secondary);
+}
+
+.update {
+  background-color: var(--primary);
+  color: var(--on-primary);
+}
+
+.submit {
+  margin-top: 20px;
+}

src/app/components/creator/_dialogs/comment-settings/comment-settings.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommentSettingsComponent } from './comment-settings.component';
+
+describe('CommentSettingsComponent', () => {
+  let component: CommentSettingsComponent;
+  let fixture: ComponentFixture<CommentSettingsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommentSettingsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CommentSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, Inject, OnInit } from '@angular/core';
+import { Comment } from '../../../../models/comment';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material';
+import { RoomCreatorPageComponent } from '../../room-creator-page/room-creator-page.component';
+import { NotificationService } from '../../../../services/util/notification.service';
+import { TranslateService } from '@ngx-translate/core';
+import { RoomService } from '../../../../services/http/room.service';
+import { Router } from '@angular/router';
+import { CommentService } from '../../../../services/http/comment.service';
+import { EventService } from '../../../../services/util/event.service';
+import { DeleteCommentComponent } from '../delete-comment/delete-comment.component';
+import { CommentExportComponent } from '../comment-export/comment-export.component';
+
+@Component({
+  selector: 'app-comment-settings',
+  templateUrl: './comment-settings.component.html',
+  styleUrls: ['./comment-settings.component.scss']
+})
+export class CommentSettingsComponent implements OnInit {
+
+  roomId: string;
+  comments: Comment[];
+  commentThreshold: number;
+
+  constructor(public dialogRef: MatDialogRef<RoomCreatorPageComponent>,
+              public dialog: MatDialog,
+              public notificationService: NotificationService,
+              public translationService: TranslateService,
+              protected roomService: RoomService,
+              public router: Router,
+              public commentService: CommentService,
+              public eventService: EventService,
+              @Inject(MAT_DIALOG_DATA) public data: any) {
+  }
+
+  ngOnInit() {
+  }
+
+  onSliderChange(event: any) {
+    if (event.value) {
+      this.commentThreshold = event.value;
+    } else {
+      this.commentThreshold = 0;
+    }
+  }
+
+
+  openDeleteCommentDialog(): void {
+    const dialogRef = this.dialog.open(DeleteCommentComponent, {
+      width: '400px'
+    });
+    dialogRef.afterClosed()
+      .subscribe(result => {
+        if (result === 'delete') {
+          this.deleteComments();
+        }
+      });
+  }
+
+  deleteComments(): void {
+    this.translationService.get('room-page.comments-deleted').subscribe(msg => {
+      this.notificationService.show(msg);
+    });
+    this.commentService.deleteCommentsByRoomId(this.roomId).subscribe();
+  }
+
+  exportCsv(delimiter: string, date: string): void {
+    this.commentService.getComments(this.roomId)
+      .subscribe(comments => {
+        this.comments = comments;
+        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);
+    } else 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/_dialogs/room-edit/room-edit.component.html

@@ -18,32 +18,12 @@
         {{ 'room-page.delete-room' | translate }}</button>
     </div>
   </div>
-  <h2>{{'room-page.comments' | translate }}</h2>
-  <mat-divider></mat-divider>
-  <div fxLayout="column">
-    <div fxLayout="row">
-      <h3>{{ 'room-page.threshold' | translate}}</h3>
-      <h3>{{commentThreshold | number}}</h3>
-    </div>
-    <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" class="submit">
     <button mat-raised-button class="abort" (click)="dialogRef.close('abort')">
       {{ 'room-page.abort' | translate }}
     </button>
-    <button mat-raised-button class="update" (click)="dialogRef.close(commentThreshold)">
+    <button mat-raised-button class="update" (click)="dialogRef.close('update')">
       {{ 'room-page.update' | translate }}
     </button>
   </div>

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

@@ -7,10 +7,8 @@ import { TranslateService } from '@ngx-translate/core';
 import { RoomService } from '../../../../services/http/room.service';
 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 { EventService } from '../../../../services/util/event.service';
-import { CommentExportComponent } from '../comment-export/comment-export.component';
 import { Comment } from '../../../../models/comment';
 import { RoomDeleted } from '../../../../models/messages/room-deleted';
 
@@ -21,8 +19,6 @@ import { RoomDeleted } from '../../../../models/messages/room-deleted';
 })
 export class RoomEditComponent implements OnInit {
   editRoom: Room;
-  comments: Comment[];
-  commentThreshold: number;
 
   constructor(public dialogRef: MatDialogRef<RoomCreatorPageComponent>,
               public dialog: MatDialog,
@@ -30,29 +26,11 @@ export class RoomEditComponent implements OnInit {
               public translationService: TranslateService,
               protected roomService: RoomService,
               public router: Router,
-              public commentService: CommentService,
               public eventService: EventService,
               @Inject(MAT_DIALOG_DATA) public data: any) {
   }
 
   ngOnInit() {
-    if (
-      this.editRoom.extensions &&
-      this.editRoom.extensions['comments'] &&
-      this.editRoom.extensions['comments'].commentThreshold != null
-    ) {
-      this.commentThreshold = this.editRoom.extensions['comments'].commentThreshold;
-    } else {
-      this.commentThreshold = -10;
-    }
-  }
-
-  onSliderChange(event: any) {
-    if (event.value) {
-      this.commentThreshold = event.value;
-    } else {
-      this.commentThreshold = 0;
-    }
   }
 
   openDeleteRoomDialog(): void {
@@ -79,67 +57,4 @@ export class RoomEditComponent implements OnInit {
     this.dialogRef.close('delete');
     this.router.navigate([`/creator`]);
   }
-
-  openDeleteCommentDialog(): void {
-    const dialogRef = this.dialog.open(DeleteCommentComponent, {
-      width: '400px'
-    });
-    dialogRef.afterClosed()
-      .subscribe(result => {
-        if (result === 'delete') {
-          this.deleteComments();
-        }
-      });
-  }
-
-  deleteComments(): void {
-    this.translationService.get('room-page.comments-deleted').subscribe(msg => {
-      this.notificationService.show(msg);
-    });
-    this.commentService.deleteCommentsByRoomId(this.editRoom.id).subscribe();
-  }
-
-  exportCsv(delimiter: string, date: string): void {
-    this.commentService.getComments(this.editRoom.id)
-      .subscribe(comments => {
-        this.comments = comments;
-        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);
-    } else 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/creator.module.ts

@@ -23,6 +23,7 @@ import { ContentEditComponent } from './_dialogs/content-edit/content-edit.compo
 import { ContentPresentationComponent } from './content-presentation/content-presentation.component';
 import { CommentExportComponent } from './_dialogs/comment-export/comment-export.component';
 import { ModeratorsComponent } from './_dialogs/moderators/moderators.component';
+import { CommentSettingsComponent } from './_dialogs/comment-settings/comment-settings.component';
 
 @NgModule({
   imports: [
@@ -54,7 +55,8 @@ import { ModeratorsComponent } from './_dialogs/moderators/moderators.component'
     ContentEditComponent,
     ContentPresentationComponent,
     CommentExportComponent,
-    ModeratorsComponent
+    ModeratorsComponent,
+    CommentSettingsComponent
   ],
   entryComponents: [
     RoomDeleteComponent,
@@ -67,7 +69,8 @@ import { ModeratorsComponent } from './_dialogs/moderators/moderators.component'
     ContentYesNoCreatorComponent,
     ContentEditComponent,
     CommentExportComponent,
-    ModeratorsComponent
+    ModeratorsComponent,
+    CommentSettingsComponent
   ]
 })
 export class CreatorModule {

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

@@ -20,7 +20,7 @@
             <mat-icon>build</mat-icon>
             {{ 'room-page.general' | translate}}
           </button>
-          <button mat-menu-item>
+          <button mat-menu-item (click)="showCommentsDialog()">
             <mat-icon>insert_comment</mat-icon>
             {{ 'room-page.comments' | translate}}
           </button>

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

@@ -13,6 +13,7 @@ import { TSMap } from 'typescript-map';
 import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
 import { CommentService } from '../../../services/http/comment.service';
 import { ModeratorsComponent } from '../_dialogs/moderators/moderators.component';
+import { CommentSettingsComponent } from '../_dialogs/comment-settings/comment-settings.component';
 
 @Component({
   selector: 'app-room-creator-page',
@@ -47,15 +48,23 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
     });
   }
 
-  updateRoom(threshold: number): void {
+  updateGeneralSettings() {
     this.room.name = this.updRoom.name;
     this.room.description = this.updRoom.description;
+    this.saveChanges();
+  }
+
+  updateCommentSettings(threshold: number) {
     if (threshold > -50) {
       const commentExtension: TSMap<string, any> = new TSMap();
       commentExtension.set('commentThreshold', threshold);
       this.room.extensions = new TSMap();
       this.room.extensions.set('comments', commentExtension);
     }
+    this.saveChanges();
+  }
+
+  saveChanges() {
     this.roomService.updateRoom(this.room)
       .subscribe(() => {
         this.translateService.get('room-page.changes-successful').subscribe(msg => {
@@ -70,13 +79,12 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
       width: '400px'
     });
     dialogRef.componentInstance.editRoom = this.updRoom;
-    dialogRef.componentInstance.commentThreshold = this.updCommentThreshold;
     dialogRef.afterClosed()
       .subscribe(result => {
         if (result === 'abort') {
           return;
         } else if (result !== 'delete') {
-          this.updateRoom(+result);
+          this.updateGeneralSettings();
         }
       });
     dialogRef.backdropClick().subscribe( res => {
@@ -84,6 +92,25 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
     });
   }
 
+  showCommentsDialog(): void {
+    const dialogRef = this.dialog.open(CommentSettingsComponent, {
+      width: '400px'
+    });
+    dialogRef.componentInstance.roomId = this.room.id;
+    dialogRef.componentInstance.commentThreshold = this.updCommentThreshold;
+    dialogRef.afterClosed()
+      .subscribe(result => {
+        if (result === 'abort') {
+          return;
+        } else if (result !== 'delete') {
+          this.updateCommentSettings(+result);
+        }
+      });
+    dialogRef.backdropClick().subscribe( res => {
+      dialogRef.close('abort');
+    });
+  }
+
   showModeratorsDialog(): void {
     const dialogRef = this.dialog.open(ModeratorsComponent, {
       width: '400px'