Add timestamp to file name and improve design

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

@@ -50,7 +50,7 @@ export class CommentExportComponent implements OnInit {
     this.dialogRef.close();
   }
 
-  exportJson() {
+  exportJson(date: string) {
     const jsonComments = JSON.parse(JSON.stringify(this.comments));
     jsonComments.forEach(element => {
       delete element.id;
@@ -60,12 +60,13 @@ export class CommentExportComponent implements OnInit {
     });
     const myBlob = new Blob([JSON.stringify(jsonComments, null, 2)], { type: 'application/json' });
     const link = document.createElement('a');
-    link.setAttribute('download', 'comments.json');
+    const fileName = 'comments_' + date + '.json';
+    link.setAttribute('download', fileName);
     link.href = window.URL.createObjectURL(myBlob);
     link.click();
   }
 
-  exportCsv(delimiter: string) {
+  exportCsv(delimiter: string, date: string) {
     let csv: string;
     let keyFields = '';
     let valueFields = '';
@@ -77,26 +78,29 @@ export class CommentExportComponent implements OnInit {
     csv = keyFields + valueFields;
     const myBlob = new Blob([csv], { type: 'text/csv' });
     const link = document.createElement('a');
-    link.setAttribute('download', 'comments.csv');
+    const fileName = 'comments_' + date + '.csv';
+    link.setAttribute('download', fileName);
     link.href = window.URL.createObjectURL(myBlob);
     link.click();
   }
 
   onExport() {
+    const date = new Date();
+    const timestamp = date.getFullYear() + '_' + ('0' + (date.getMonth() + 1)).slice(-2) + '_' + ('0' + date.getDate()).slice(-2) + '_' + ('0' + date.getHours()).slice(-2) + ('0' + date.getMinutes()).slice(-2) + ('0' + date.getSeconds()).slice(-2);
     if (this.currentButton === 'json') {
-      this.exportJson();
+      this.exportJson(timestamp);
       this.onNoClick();
     }
     if (this.csvSelected) {
       if (this.currentButton === 'comma') {
-        this.exportCsv(',');
+        this.exportCsv(',', timestamp);
         this.onNoClick();
       }
       if (this.currentButton === 'semicolon') {
-        this.exportCsv(';');
+        this.exportCsv(';', timestamp);
         this.onNoClick();
       } else {
-        this.exportCsv(',');
+        this.exportCsv(',', timestamp);
         this.onNoClick();
       }
     }

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

@@ -17,15 +17,15 @@ export class CommentCreatorPageComponent implements OnInit {
   ngOnInit() {
     this.commentService.exportButton.subscribe(s => {
       if (s === true) {
-        this.onClick();
+        this.showExportDialog();
       }
     });
   }
 
-  onClick(): void {
+  showExportDialog(): void {
     this.commentService.setState(false);
     if (this.dialog.openDialogs.length === 0) {
-      const dialogRef = this.dialog.open(CommentExportComponent, {
+      this.dialog.open(CommentExportComponent, {
         width: '400px', height: '300px'
       });
     }

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

@@ -9,15 +9,15 @@
   </button>
   <button mat-button *ngIf="!searchBox.value && userRole == '1'" [disabled]="!comments.length > 0" color="accent"
     [matTooltip]="'Export comments'" (click)="export(true)">
-    <mat-icon class="add-icon">cloud_download</mat-icon>
+    <mat-icon class="add-icon" id="export-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>
 </div>
 <mat-card class="outer-card" *ngIf="hideCommentsList">
-  <app-comment *ngFor="let current of filteredComments" [comment]="current"> </app-comment>
+  <app-comment *ngFor="let current of filteredComments" [comment]="current"></app-comment>
 </mat-card>
 <mat-card class="outer-card" *ngIf="!hideCommentsList">
-  <app-comment *ngFor="let current of comments | orderBy: 'score'" [comment]="current"> </app-comment>
+  <app-comment *ngFor="let current of comments | orderBy: 'score'" [comment]="current"></app-comment>
 </mat-card>

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

@@ -44,3 +44,6 @@ input {
   padding: 10px;
 }
 
+#export-icon {
+  color: rgba(30,136,229,0.7)
+}