Add functionality to export data as csv

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

-<mat-list>
-
-  <mat-list-item>
-    <mat-radio-button>
-    </mat-radio-button>
-  </mat-list-item>
-
-  <mat-list-item>
-    <mat-radio-button>
-
-      <mat-list-item>
-        <mat-radio-button>
-        </mat-radio-button>
-      </mat-list-item>
-
-      <mat-list-item>
-        <mat-radio-button>
-        </mat-radio-button>
-      </mat-list-item>
-
-    </mat-radio-button>
-  </mat-list-item>
-</mat-list>
-<button mat-raised-button color="warn" (click)="dialogRef.close('delete')">Abort
+<mat-radio-group (change)="onChange($event)">
+  <mat-radio-button value="json" #json checked (click)="comma.checked=true">JSON</mat-radio-button>
+  <mat-divider></mat-divider>
+  <mat-radio-button #csv value="csv">CSV</mat-radio-button>
+</mat-radio-group>
+<div id="csvBlock">
+  <mat-hint>Please select a delimiter:</mat-hint>
+  <mat-radio-group (change)="onChange($event)" id="csvOptions">
+    <mat-radio-button value="comma" #comma checked>Comma</mat-radio-button>
+    <mat-radio-button value="semicolon" #semicolon>Semicolon</mat-radio-button>
+  </mat-radio-group>
+</div>
+<button mat-raised-button color="primary" (click)="onExport()">Export
 </button>
-<button mat-raised-button color="primary" (click)="onNoClick()">Export
+<button mat-raised-button color="warn" (click)="onNoClick()">Abort
 </button>
\ No newline at end of file

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

+mat-radio-button {
+   display: block;
+}
+
+mat-divider {
+   margin: 30px 0 30px 0;
+}
+
+* { 
+   margin-bottom: 10px;
+}
+
+button {
+   float:right !important;
+   margin: 0 0 0 10px;
+}
+
+#csvBlock {
+   margin: 10px 0 20px 30px;
+   visibility: hidden;
+   transform: scale(0.9);
+}
+
+#csvOptions mat-radio-button{
+   margin-top:10px;
+}
\ No newline at end of file

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

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+/** import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CommentExportComponent } from './comment-export.component';
 
@@ -22,4 +22,4 @@ describe('CommentExportComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-});
+}); */

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

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, EventEmitter } from '@angular/core';
+import { MatRadioChange, MatDialogRef } from '@angular/material';
+import { CommentCreatorPageComponent } from '../../comment-creator-page/comment-creator-page.component';
+import { CommentService } from '../../../../services/http/comment.service';
+import { Comment } from '../../../../models/comment';
 
 @Component({
   selector: 'app-comment-export',
@@ -6,10 +10,90 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./comment-export.component.scss']
 })
 export class CommentExportComponent implements OnInit {
+  change: EventEmitter<MatRadioChange>;
+  currentButton: string;
+  csvSelected: boolean;
+  comments: Comment[];
+  roomId: string;
 
-  constructor() { }
+  constructor(public dialogRef: MatDialogRef<CommentCreatorPageComponent>,
+    private commentService: CommentService,
+  ) { }
 
   ngOnInit() {
+    this.currentButton = '1';
+    this.roomId = localStorage.getItem(`roomId`);
+    this.getComments();
   }
 
+  getComments(): void {
+    this.commentService.getComments(this.roomId)
+      .subscribe(comments => {
+        this.comments = comments
+      });
+  }
+
+  onChange(change: MatRadioChange): string {
+    var csv = document.getElementById("csvBlock");
+    if (change.value == 'json') {
+      csv.style.visibility = "hidden";
+      this.csvSelected = false;
+    }
+    if (change.value == 'csv') {
+      csv.style.visibility = "visible";
+      this.csvSelected = true;
+    }
+    return this.currentButton = change.value;
+  }
+
+  onNoClick() {
+    this.dialogRef.close();
+  }
+
+  exportJson() {
+    var myBlob = new Blob([JSON.stringify(this.comments, null, 2)], { type: 'application/json' });
+    var link = document.createElement('a');
+    link.setAttribute('download', 'comments.json');
+    link.href = window.URL.createObjectURL(myBlob);;
+    link.click();
+  }
+
+  exportCsv(delimiter: string) {
+    if (this.comments.length == 0) {
+      return;
+    }
+    let csv: string;
+    let keyFields = Object.keys(this.comments[0]).map(i => `"${i}"`).join(delimiter) + '\n';
+    let valueFields = '';
+    this.comments.forEach(element => {
+      valueFields += Object.values(element).map(i => `"${i}"`).join(delimiter) + '\n';
+    });
+    csv = keyFields + valueFields;
+    var myBlob = new Blob([csv], { type: 'text/csv' });
+    var link = document.createElement('a');
+    link.setAttribute('download', 'comments.csv');
+    link.href = window.URL.createObjectURL(myBlob);;
+    link.click();
+  }
+
+  onExport() {
+    if (this.currentButton == 'json') {
+      this.exportJson();
+      this.onNoClick();
+    }
+    if (this.csvSelected) {
+      if (this.currentButton == 'comma') {
+        this.exportCsv(',');
+        this.onNoClick();
+      }
+      if (this.currentButton == 'semicolon') {
+        this.exportCsv(';');
+        this.onNoClick();
+      }
+      else {
+        this.exportCsv(',');
+        this.onNoClick();
+      }
+    }
+  }
 }

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

@@ -9,25 +9,27 @@ import { CommentExportComponent } from '../_dialogs/comment-export/comment-expor
   styleUrls: ['./comment-creator-page.component.scss']
 })
 export class CommentCreatorPageComponent implements OnInit {
-  statex: boolean;
+
   constructor(private commentService: CommentService,
     public dialog: MatDialog,
   ) { }
 
   ngOnInit() {
-    this.commentService.exportButton.subscribe(s => { 
-      if (s == true) this.onClick();
-  });
+    this.commentService.exportButton.subscribe(s => {
+      if (s === true) {
+        this.onClick();
+      }
+    });
   }
 
-  onClick(): void {  
+  onClick(): void {
     this.openSubmitDialog();
     this.commentService.setState(false);
   }
 
   openSubmitDialog(): void {
     const dialogRef = this.dialog.open(CommentExportComponent, {
-      width: '400px'
+      width: '400px', height: '300px'
     });
   }
-}
+}
\ No newline at end of file

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

-import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Comment } from '../../../models/comment';
 import { CommentService } from '../../../services/http/comment.service';
 import { TranslateService } from '@ngx-translate/core';
@@ -20,7 +20,7 @@ import { AuthenticationService } from '../../../services/http/authentication.ser
 export class CommentListComponent implements OnInit {
   @Input() user: User;
   @Input() roomId: string;
-  //@Output() exportClick = new EventEmitter<boolean>();
+  
   comments: Comment[];
   isLoading = true;
   hideCommentsList: boolean;
@@ -123,8 +123,7 @@ export class CommentListComponent implements OnInit {
     this.wsCommentService.add(comment);
   }
 
-  export(clicked: boolean): void { 
+  export(clicked: boolean): void {
     this.commentService.setState(clicked);
   }
-}
-
+}
\ No newline at end of file