Add export-GUI

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

+<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
+ 
+  <div fxLayout="row" fxLayoutAlign="center">
+    <button mat-raised-button color="warn"
+            (click)="onNoClick()">{{ 'comment-page.abort' | translate}}</button>
+    <button mat-raised-button color="accent"
+            (click)="closeDialog(commentBody.value)">{{ 'comment-page.send' | translate}}</button>
+  </div>
+</div>
+

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

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

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-comment-export',
+  templateUrl: './comment-export.component.html',
+  styleUrls: ['./comment-export.component.scss']
+})
+export class CommentExportComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

 import { Component, OnInit } from '@angular/core';
+import { CommentService } from '../../../services/http/comment.service';
+import { MatDialog } from '@angular/material';
+import { CommentExportComponent } from '../_dialogs/comment-export/comment-export.component';
 
 @Component({
   selector: 'app-comment-creator-page',
@@ -6,10 +9,25 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./comment-creator-page.component.scss']
 })
 export class CommentCreatorPageComponent implements OnInit {
-
-  constructor() { }
+  statex: boolean;
+  constructor(private commentService: CommentService,
+    public dialog: MatDialog,
+  ) { }
 
   ngOnInit() {
+    this.commentService.exportButton.subscribe(s => { 
+      if (s == true) this.onClick();
+  });
+  }
+
+  onClick(): void {  
+    this.openSubmitDialog();
+    this.commentService.setState(false);
   }
 
+  openSubmitDialog(): void {
+    const dialogRef = this.dialog.open(CommentExportComponent, {
+      width: '400px'
+    });
+  }
 }

src/app/components/creator/creator.module.ts

@@ -22,6 +22,7 @@ import { ContentListComponent } from './content-list/content-list.component';
 import { ContentEditComponent } from './_dialogs/content-edit/content-edit.component';
 import { ContentPresentationComponent } from './content-presentation/content-presentation.component';
 import { CommentCreatorPageComponent } from './comment-creator-page/comment-creator-page.component';
+import { CommentExportComponent } from './_dialogs/comment-export/comment-export.component';
 
 @NgModule({
   imports: [
@@ -52,7 +53,8 @@ import { CommentCreatorPageComponent } from './comment-creator-page/comment-crea
     ContentListComponent,
     ContentEditComponent,
     ContentPresentationComponent,
-    CommentCreatorPageComponent
+    CommentCreatorPageComponent,
+    CommentExportComponent
   ],
   entryComponents: [
     RoomDeleteComponent,
@@ -63,7 +65,8 @@ import { CommentCreatorPageComponent } from './comment-creator-page/comment-crea
     ContentLikertCreatorComponent,
     ContentTextCreatorComponent,
     ContentYesNoCreatorComponent,
-    ContentEditComponent
+    ContentEditComponent,
+    CommentExportComponent
   ]
 })
 export class CreatorModule {

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

@@ -7,6 +7,11 @@
   <button mat-button *ngIf="searchBox.value" (click)="hideCommentsList=false; searchBox.value=''">
     <mat-icon>close</mat-icon>
   </button>
+
+  <button mat-button *ngIf="!searchBox.value && userRole == '1'" color="accent" [matTooltip]="'Export comments'" (click)="export(true)">
+    <mat-icon class="add-icon">cloud_download</mat-icon>
+  </button>
+
   <button mat-button *ngIf="!searchBox.value" color="accent" (click)="openSubmitDialog()">
     <mat-icon class="add-icon">add_circle</mat-icon>
   </button>

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

-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
 import { Comment } from '../../../models/comment';
 import { CommentService } from '../../../services/http/comment.service';
 import { TranslateService } from '@ngx-translate/core';
@@ -9,6 +9,8 @@ import { SubmitCommentComponent } from '../_dialogs/submit-comment/submit-commen
 import { MatDialog } from '@angular/material';
 import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
 import { User } from '../../../models/user';
+import { UserRole } from '../../../models/user-roles.enum';
+import { AuthenticationService } from '../../../services/http/authentication.service';
 
 @Component({
   selector: 'app-comment-list',
@@ -18,17 +20,20 @@ import { User } from '../../../models/user';
 export class CommentListComponent implements OnInit {
   @Input() user: User;
   @Input() roomId: string;
+  //@Output() exportClick = new EventEmitter<boolean>();
   comments: Comment[];
   isLoading = true;
   hideCommentsList: boolean;
   filteredComments: Comment[];
+  userRole: UserRole;
 
   constructor(private commentService: CommentService,
-              private translateService: TranslateService,
-              public dialog: MatDialog,
-              protected langService: LanguageService,
-              private rxStompService: RxStompService,
-              private wsCommentService: WsCommentServiceService) {
+    private translateService: TranslateService,
+    public dialog: MatDialog,
+    protected langService: LanguageService,
+    private rxStompService: RxStompService,
+    private wsCommentService: WsCommentServiceService,
+    private authenticationService: AuthenticationService) {
     langService.langEmitter.subscribe(lang => translateService.use(lang));
   }
 
@@ -41,6 +46,8 @@ export class CommentListComponent implements OnInit {
     });
     this.getComments();
     this.translateService.use(localStorage.getItem('currentLang'));
+    this.userRole = this.authenticationService.getRole();
+
   }
 
   getComments(): void {
@@ -80,13 +87,13 @@ export class CommentListComponent implements OnInit {
                 case 'read':
                   this.comments[i].read = <boolean>value;
                   break;
-                case 'correct' :
+                case 'correct':
                   this.comments[i].correct = <boolean>value;
                   break;
-                case 'favorite' :
+                case 'favorite':
                   this.comments[i].favorite = <boolean>value;
                   break;
-                case 'score' :
+                case 'score':
                   this.comments[i].score = <number>value;
                   break;
               }
@@ -115,5 +122,9 @@ export class CommentListComponent implements OnInit {
   send(comment: Comment): void {
     this.wsCommentService.add(comment);
   }
+
+  export(clicked: boolean): void { 
+    this.commentService.setState(clicked);
+  }
 }
 

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

 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { Observable, BehaviorSubject, Subject } from 'rxjs';
 import { Comment } from '../../models/comment';
 import { catchError, tap } from 'rxjs/operators';
 import { BaseHttpService } from './base-http.service';
@@ -17,6 +17,8 @@ export class CommentService extends BaseHttpService {
     find: '/find'
   };
 
+  exportButton = new Subject<boolean>();
+
   constructor(private http: HttpClient) {
     super();
   }
@@ -66,4 +68,8 @@ export class CommentService extends BaseHttpService {
       catchError(this.handleError<any>('updateComment'))
     );
   }
+
+  setState(state: boolean) {
+    this.exportButton.next(state);
+  }
 }