diff --git a/src/app/components/creator/_dialogs/comment-export/comment-export.component.html b/src/app/components/creator/_dialogs/comment-export/comment-export.component.html
index a09413055f3429983cd01e71ff72a4efb5d7515e..29c5e5b78b517356c5e60c4cd3bb29116a16c1b4 100644
--- a/src/app/components/creator/_dialogs/comment-export/comment-export.component.html
+++ b/src/app/components/creator/_dialogs/comment-export/comment-export.component.html
@@ -1,14 +1,14 @@
-<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>{{'comment-page.delimiter' | translate}}</mat-hint>
- <mat-radio-group (change)="onChange($event)" id="csvOptions">
- <mat-radio-button value="comma" #comma checked>{{'comment-page.comma' | translate}}</mat-radio-button>
- <mat-radio-button value="semicolon" #semicolon>{{'comment-page.semicolon' | translate}}</mat-radio-button>
- </mat-radio-group>
+<div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="35px">
+ <h3>{{'comment-page.delimiter' | translate}}</h3>
+ <mat-radio-group [(ngModel)]="exportType">
+ <div fxLayout="column">
+ <mat-radio-button value="comma" checked><h4>{{'comment-page.comma' | translate}}</h4></mat-radio-button>
+ <mat-radio-button value="semicolon"><h4>{{'comment-page.semicolon' | translate}}</h4></mat-radio-button>
+ </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 color="primary"
+ (click)="onExport(exportType)">{{'comment-page.export' | translate}}</button>
+ </div>
</div>
-<button mat-raised-button color="primary" (click)="onExport()">{{'comment-page.export' | translate}}</button>
-<button mat-raised-button color="warn" (click)="onNoClick()">{{'comment-page.abort' | translate}}</button>
diff --git a/src/app/components/creator/_dialogs/comment-export/comment-export.component.scss b/src/app/components/creator/_dialogs/comment-export/comment-export.component.scss
index 43f4092051cd4a58789b613933a6cf49df12a190..abe40e414eb4880fc99fe8157869a450bb5b089d 100644
--- a/src/app/components/creator/_dialogs/comment-export/comment-export.component.scss
+++ b/src/app/components/creator/_dialogs/comment-export/comment-export.component.scss
@@ -1,26 +1,12 @@
-mat-radio-button {
- display: block;
-}
-
-mat-divider {
- margin: 30px 0 30px 0;
-}
-
-* {
- margin-bottom: 10px;
-}
-
button {
- float:right !important;
- margin: 0 0 0 10px;
+ min-width: 100px;
}
-#csvBlock {
- margin: 10px 0 20px 30px;
- visibility: hidden;
- transform: scale(0.9);
+h3 {
+ font-size: large;
+ color: var(--text-2);
}
-#csvOptions mat-radio-button{
- margin-top:10px;
-}
\ No newline at end of file
+h4 {
+ margin: 15px 0 15px 0;
+}
diff --git a/src/app/components/creator/_dialogs/comment-export/comment-export.component.ts b/src/app/components/creator/_dialogs/comment-export/comment-export.component.ts
index 3cc2197f13d609c964cb93eb2624b1a36cc1ac81..468f3ce70874f21c831854bcf80d07e2bef13868 100644
--- a/src/app/components/creator/_dialogs/comment-export/comment-export.component.ts
+++ b/src/app/components/creator/_dialogs/comment-export/comment-export.component.ts
@@ -1,7 +1,6 @@
-import { Component, OnInit, EventEmitter } from '@angular/core';
-import { MatRadioChange, MatDialogRef } from '@angular/material';
+import { Component, OnInit } from '@angular/core';
+import { 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({
@@ -10,61 +9,18 @@ import { Comment } from '../../../../models/comment';
styleUrls: ['./comment-export.component.scss']
})
export class CommentExportComponent implements OnInit {
- change: EventEmitter<MatRadioChange>;
- currentButton: string;
- csvSelected: boolean;
comments: Comment[];
- roomId: string;
+ exportType = 'comma';
- constructor(public dialogRef: MatDialogRef<CommentCreatorPageComponent>,
- private commentService: CommentService) { }
+ constructor(public dialogRef: MatDialogRef<CommentCreatorPageComponent>) { }
ngOnInit() {
- this.currentButton = 'json';
- this.roomId = localStorage.getItem(`roomId`);
- this.getComments();
- }
-
- getComments(): void {
- this.commentService.getComments(this.roomId)
- .subscribe(comments => {
- this.comments = comments;
- });
- }
-
- onChange(change: MatRadioChange): string {
- const 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(): void {
this.dialogRef.close();
}
- exportJson(date: string): void {
- const jsonComments = JSON.parse(JSON.stringify(this.comments));
- jsonComments.forEach(element => {
- delete element.id;
- delete element.roomId;
- delete element.creatorId;
- element.body = element.body.replace(/[\r\n]/g, ' ').replace(/ +/g, ' ');
- });
- const myBlob = new Blob([JSON.stringify(jsonComments, null, 2)], { type: 'application/json' });
- const link = document.createElement('a');
- const fileName = 'comments_' + date + '.json';
- link.setAttribute('download', fileName);
- link.href = window.URL.createObjectURL(myBlob);
- link.click();
- }
-
exportCsv(delimiter: string, date: string): void {
let csv: string;
let keyFields = '';
@@ -83,27 +39,18 @@ export class CommentExportComponent implements OnInit {
link.click();
}
- onExport(): void {
+ 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 (this.currentButton === 'json') {
- this.exportJson(timestamp);
- this.onNoClick();
- }
- if (this.csvSelected) {
- if (this.currentButton === 'comma') {
+ if (exportType === 'comma') {
this.exportCsv(',', timestamp);
this.onNoClick();
}
- if (this.currentButton === 'semicolon') {
+ if (exportType === 'semicolon') {
this.exportCsv(';', timestamp);
this.onNoClick();
- } else {
- this.exportCsv(',', timestamp);
- this.onNoClick();
}
- }
}
}
diff --git a/src/app/components/creator/comment-creator-page/comment-creator-page.component.ts b/src/app/components/creator/comment-creator-page/comment-creator-page.component.ts
index cdd887fc0273b06dc866ae8158bfacc0cfdba422..c971df4b4cd2023e25c5ecdf17eab19b848b2146 100644
--- a/src/app/components/creator/comment-creator-page/comment-creator-page.component.ts
+++ b/src/app/components/creator/comment-creator-page/comment-creator-page.component.ts
@@ -1,7 +1,4 @@
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',
@@ -10,24 +7,8 @@ import { CommentExportComponent } from '../_dialogs/comment-export/comment-expor
})
export class CommentCreatorPageComponent implements OnInit {
- constructor(private commentService: CommentService,
- public dialog: MatDialog,
- ) { }
+ constructor() { }
ngOnInit() {
- this.commentService.exportButton.subscribe(s => {
- if (s === true) {
- this.showExportDialog();
- }
- });
- }
-
- showExportDialog(): void {
- this.commentService.exportButtonClicked(false);
- if (this.dialog.openDialogs.length === 0) {
- this.dialog.open(CommentExportComponent, {
- width: '400px', height: '300px', restoreFocus: false
- });
- }
}
}
diff --git a/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.html b/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.html
index 30d97bd2f7a80353b1ec6a4f833fb1a15d1cbedb..7eae850eaed7c04d88ccb0b1b6d5cdd61e7fc077 100644
--- a/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.html
+++ b/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.html
@@ -4,7 +4,7 @@
matAutosizeMinRows=2 matAutosizeMaxRows=5 maxlength="255" [formControl]="bodyForm"></textarea>
<mat-hint align="end">{{commentBody.value.length}} / 255</mat-hint>
</mat-form-field>
- <div fxLayout="row" fxLayoutAlign="center">
+ <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
<button mat-raised-button color="warn"
(click)="onNoClick()">{{ 'comment-page.abort' | translate}}</button>
<button mat-raised-button color="accent"
diff --git a/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.scss b/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.scss
index 64d37795cb2553d976925ff104209d2908273552..78777d0a839395d1f7c866668df3246e9357287b 100644
--- a/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.scss
+++ b/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.scss
@@ -1,5 +1,4 @@
button {
- margin-right: 20px;
min-width: 80px;
}
@@ -15,11 +14,6 @@ app-comment-list {
max-width: 800px;
}
-button {
- float: right;
- min-width: 80px;
-}
-
textarea {
line-height: 120%;
}
diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html
index ef28a4f1eb5a85c1e58fc0ff77c3f0587f806851..67389651dd653103118019fbaf8963f31a365c7e 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -10,7 +10,7 @@
</button>
<span class="fill-remaining-space"></span>
<button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && userRole === 1 && comments.length > 0 && !isIconHide"
- [matTooltip]="'Export comments'" (click)="export(true)">
+ [matTooltip]="'Export comments'" (click)="openExportDialog()">
<mat-icon class="searchBarIcon" color="accent">cloud_download</mat-icon>
</button>
diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts
index 4ace76365f68993952e154bd673cf5d0f35f2a17..96ba333323c06c461709a1805f051810eada05e7 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -12,6 +12,7 @@ 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';
@Component({
selector: 'app-comment-list',
@@ -162,8 +163,11 @@ export class CommentListComponent implements OnInit {
this.wsCommentService.add(comment);
}
- export(clicked: boolean): void {
- this.commentService.exportButtonClicked(clicked);
+ openExportDialog(): void {
+ const dialogRef = this.dialog.open(CommentExportComponent, {
+ width: '400px'
+ });
+ dialogRef.componentInstance.comments = this.comments;
}
filterFavorite(): void {
diff --git a/src/app/services/http/comment.service.ts b/src/app/services/http/comment.service.ts
index f658bc23e6d4759567efb2ea2f37d6c89ffc0094..c3179ad69aad8f1c8811b5bdd8254d3294e47f31 100644
--- a/src/app/services/http/comment.service.ts
+++ b/src/app/services/http/comment.service.ts
@@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Observable, Subject } from 'rxjs';
+import { Observable } from 'rxjs';
import { Comment } from '../../models/comment';
import { catchError, tap } from 'rxjs/operators';
import { BaseHttpService } from './base-http.service';
@@ -17,8 +17,6 @@ export class CommentService extends BaseHttpService {
find: '/find'
};
- exportButton = new Subject<boolean>();
-
constructor(private http: HttpClient) {
super();
}
@@ -68,8 +66,4 @@ export class CommentService extends BaseHttpService {
catchError(this.handleError<any>('updateComment'))
);
}
-
- exportButtonClicked(state: boolean): void {
- this.exportButton.next(state);
- }
}
diff --git a/src/assets/i18n/creator/de.json b/src/assets/i18n/creator/de.json
index e2aed28d1ca30b14a628b45b0869ead86c0979ca..33ff55162314538d6e44f3c5c537f38b0bbf12b9 100644
--- a/src/assets/i18n/creator/de.json
+++ b/src/assets/i18n/creator/de.json
@@ -87,9 +87,9 @@
"error-comment": "Bitte geben Sie einen Kommentar ein.",
"error-title": "Bitte geben Sie einen Titel ein.",
"error-both-fields": "Bitte füllen Sie alle Felder aus.",
- "delimiter": "Bitte wählen Sie ein Trennzeichen:",
- "comma": "Komma",
- "semicolon": "Semikolon",
+ "delimiter": "Bitte wählen Sie ein Format!",
+ "comma": "Microsoft Excel",
+ "semicolon": "Standard CSV",
"export": "Exportieren"
},
"comment-list-page": {
diff --git a/src/assets/i18n/creator/en.json b/src/assets/i18n/creator/en.json
index c23dfe04f8e701bfc2e65016e0f334b9ab529c95..cc25158a4f28fd20ad4a0c2ffbed41a6aa8dbacb 100644
--- a/src/assets/i18n/creator/en.json
+++ b/src/assets/i18n/creator/en.json
@@ -87,9 +87,9 @@
"error-title": "Please enter a title.",
"error-comment": "Please enter a comment.",
"error-both-fields": "Please fill in all fields.",
- "delimiter": "Please select a delimiter:",
- "comma": "Comma",
- "semicolon": "Semicolon",
+ "delimiter": "Please choose a format!",
+ "comma": "Microsoft Excel",
+ "semicolon": "Standard CSV",
"export": "Export"
},
"comment-list-page": {