diff --git a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts index 854f7595a5f0ec417b4cb034b2964583ac93b828..b062e1ea34d777f5dcfbd7785adb485c5c9bd8d9 100644 --- a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts +++ b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts @@ -19,7 +19,6 @@ import { ModeratorsComponent } from '../../creator/_dialogs/moderators/moderator import { TagsComponent } from '../../creator/_dialogs/tags/tags.component'; import { DeleteCommentsComponent } from '../../creator/_dialogs/delete-comments/delete-comments.component'; import { Export } from '../../../models/export'; -import { CreateCommentComponent } from '../../shared/_dialogs/create-comment/create-comment.component'; import { NotificationService } from '../../../services/util/notification.service'; import { BonusTokenService } from '../../../services/http/bonus-token.service'; import { CommentFilter, Period } from '../../../utils/filter-options'; diff --git a/src/app/components/shared/_dialogs/create-comment/create-comment.component.ts b/src/app/components/shared/_dialogs/create-comment/create-comment.component.ts index 00d57e8ff6115ec5d362d3ef3163b564edbd5b06..6d2293ef26933cb45f39916938efdf56e5fa54ba 100644 --- a/src/app/components/shared/_dialogs/create-comment/create-comment.component.ts +++ b/src/app/components/shared/_dialogs/create-comment/create-comment.component.ts @@ -4,12 +4,13 @@ import { NotificationService } from '../../../../services/util/notification.serv import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; import { TranslateService } from '@ngx-translate/core'; import { User } from '../../../../models/user'; -import { CommentListComponent } from '../../comment-list/comment-list.component'; import { EventService } from '../../../../services/util/event.service'; import { SpacyDialogComponent } from '../spacy-dialog/spacy-dialog.component'; import { LanguagetoolService, Language } from '../../../../services/http/languagetool.service'; import { CreateCommentKeywords } from '../../../../utils/create-comment-keywords'; import { WriteCommentComponent } from '../../write-comment/write-comment.component'; +import { DeepLDialogComponent } from '../deep-ldialog/deep-ldialog.component'; +import { DeepLService } from '../../../../services/http/deep-l.service'; @Component({ selector: 'app-submit-comment', @@ -19,7 +20,6 @@ import { WriteCommentComponent } from '../../write-comment/write-comment.compone export class CreateCommentComponent implements OnInit { @ViewChild(WriteCommentComponent) commentComponent: WriteCommentComponent; - comment: Comment; user: User; roomId: string; tags: string[]; @@ -27,11 +27,12 @@ export class CreateCommentComponent implements OnInit { constructor( private notification: NotificationService, - public dialogRef: MatDialogRef<CommentListComponent>, + public dialogRef: MatDialogRef<CreateCommentComponent>, private translateService: TranslateService, public dialog: MatDialog, public languagetoolService: LanguagetoolService, public eventService: EventService, + private deeplService: DeepLService, @Inject(MAT_DIALOG_DATA) public data: any) { } @@ -51,7 +52,32 @@ export class CreateCommentComponent implements OnInit { comment.createdFromLecturer = this.user.role > 0; comment.tag = tag; this.isSendingToSpacy = true; - this.openSpacyDialog(comment, text); + this.openDeeplDialog(body, text, (newBody: string, newText: string) => { + comment.body = newBody; + this.openSpacyDialog(comment, newText); + }); + } + + openDeeplDialog(body: string, text: string, onClose: (data: string, text: string) => void) { + this.deeplService.improveTextStyle(text).subscribe(improvedText => { + this.isSendingToSpacy = false; + this.dialog.open(DeepLDialogComponent, { + width: '900px', + maxWidth: '100%', + data: { + body, + text, + improvedText + } + }).afterClosed().subscribe((res) => { + if (res) { + onClose(res.body, res.text); + } + }); + }, (_) => { + this.isSendingToSpacy = false; + onClose(body, text); + }); } openSpacyDialog(comment: Comment, rawText: string): void { diff --git a/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.html b/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.html new file mode 100644 index 0000000000000000000000000000000000000000..56e44687aefdc4b495dc8df440c6163d21fe2b3d --- /dev/null +++ b/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.html @@ -0,0 +1,25 @@ +<h2>{{'deepl.header' | translate}}</h2> +<div mat-dialog-content> + <label id="deepl-radio-group-label">{{'deepl.label' | translate}}</label> + <br> + <mat-radio-group + aria-labelledby="deepl-radio-group-label" + [(ngModel)]="radioButtonValue"> + <mat-radio-button [value]="normalValue"> + <strong>{{'deepl.option-normal' | translate}}</strong> + <app-view-comment-data [currentData]="normalValue.body"></app-view-comment-data> + </mat-radio-button> + <br> + <mat-radio-button [value]="improvedValue"> + <strong>{{'deepl.option-improved' | translate}}</strong> + <app-view-comment-data [currentData]="improvedValue.body"></app-view-comment-data> + </mat-radio-button> + </mat-radio-group> +</div> + +<app-dialog-action-buttons + [buttonsLabelSection]="'comment-page'" + [confirmButtonLabel]="'continue'" + [cancelButtonClickAction]="buildCloseDialogActionCallback()" + [confirmButtonClickAction]="buildSubmitBodyActionCallback()"> +</app-dialog-action-buttons> diff --git a/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.scss b/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..a667f841e767403a0ef2706b9ec756474a0afdde --- /dev/null +++ b/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.scss @@ -0,0 +1,20 @@ +::ng-deep { + + mat-radio-button { + width: 100%; + } + + .mat-radio-label { + width: calc(100% - 16px) !important; + } + + .mat-radio-label-content { + width: 100%; + } + + app-view-comment-data > div { + background: var(--surface); + border-radius: 10px; + padding: 7px; + } +} diff --git a/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.spec.ts b/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..4b6a83115767f3ee8f5269d603c269f4a6ed2218 --- /dev/null +++ b/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.spec.ts @@ -0,0 +1,26 @@ +/*import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DeepLDialogComponent } from './deep-ldialog.component'; + +describe('DeepLDialogComponent', () => { + let component: DeepLDialogComponent; + let fixture: ComponentFixture<DeepLDialogComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DeepLDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DeepLDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); + */ diff --git a/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.ts b/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..9a835d9ec84cb57fee7ac368541910baf775652b --- /dev/null +++ b/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.ts @@ -0,0 +1,90 @@ +import { Component, Inject, OnInit } from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { ViewCommentDataComponent } from '../../view-comment-data/view-comment-data.component'; + +interface ResultValue { + body: string; + text: string; +} + +@Component({ + selector: 'app-deep-ldialog', + templateUrl: './deep-ldialog.component.html', + styleUrls: ['./deep-ldialog.component.scss'] +}) +export class DeepLDialogComponent implements OnInit { + + radioButtonValue: ResultValue; + normalValue: ResultValue; + improvedValue: ResultValue; + + constructor( + private dialogRef: MatDialogRef<DeepLDialogComponent>, + @Inject(MAT_DIALOG_DATA) public data: any) { + } + + ngOnInit(): void { + this.normalValue = { + body: this.data.body, + text: this.data.text + }; + const sentences = this.data.improvedText.split('\n').filter(sent => sent.length > 0); + const delta = ViewCommentDataComponent.getDeltaFromData(this.data.body); + if (delta === null) { + setTimeout(() => this.dialogRef.close(this.normalValue)); + return; + } + const ops = delta.ops; + let i = 0; + let sentenceIndex = 0; + let lastFoundIndex = -1; + for (; i < ops.length && sentenceIndex < sentences.length; i++) { + const data = ops[i]['insert']; + if (typeof data !== 'string') { + continue; + } + if (data === '\n') { + continue; + } + const endsNewline = data.endsWith('\n'); + const mod = (endsNewline ? -1 : 0) + (data.startsWith('\n') ? -1 : 0); + const occurrence = data.split('\n').length + mod; + ops[i]['insert'] = sentences.slice(sentenceIndex, sentenceIndex + occurrence).join('\n') + + (endsNewline ? '\n' : ''); + sentenceIndex += occurrence; + lastFoundIndex = i; + } + for (let j = ops.length - 1; j >= i; j--) { + const data = ops[i]['insert']; + if (data === 'string' && data.trim().length) { + ops.splice(j, 1); + } + } + if (sentenceIndex < sentences.length) { + if (lastFoundIndex < 0) { + setTimeout(() => this.dialogRef.close(this.normalValue)); + return; + } + let data = ops[i]['insert']; + const endsNewline = data.endsWith('\n'); + if (endsNewline) { + data = data.substring(0, data.length - 1); + } + ops[i]['insert'] = data + sentences.slice(sentenceIndex).join('\n') + (endsNewline ? '\n' : ''); + } + this.improvedValue = { + body: ViewCommentDataComponent.getDataFromDelta(delta), + text: this.data.improvedText + }; + this.radioButtonValue = this.normalValue; + } + + buildCloseDialogActionCallback(): () => void { + return () => this.dialogRef.close(); + } + + buildSubmitBodyActionCallback(): () => void { + return () => this.dialogRef.close(this.radioButtonValue); + } + +} diff --git a/src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.ts b/src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.ts index dd6c33c9308826aa764fcdae8a24ba0b1ebf5dd1..c2bb0e10937c821b378f7f4e0956b0a264424dec 100644 --- a/src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.ts +++ b/src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.ts @@ -1,7 +1,5 @@ import { AfterContentInit, Component, Inject, OnInit, ViewChild } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; - -import { CreateCommentComponent } from '../create-comment/create-comment.component'; import { SpacyService, SpacyKeyword } from '../../../../services/http/spacy.service'; import { LanguagetoolService } from '../../../../services/http/languagetool.service'; import { Comment } from '../../../../models/comment'; @@ -39,7 +37,7 @@ export class SpacyDialogComponent implements OnInit, AfterContentInit { constructor( protected langService: LanguagetoolService, private spacyService: SpacyService, - public dialogRef: MatDialogRef<CreateCommentComponent>, + public dialogRef: MatDialogRef<SpacyDialogComponent>, @Inject(MAT_DIALOG_DATA) public data) { } diff --git a/src/app/components/shared/shared.module.ts b/src/app/components/shared/shared.module.ts index 87b4f5a8e5f54b40e16237949a6fd9be7586b9d8..75057040a34d0062331612f014eddd78c0d7fdd7 100644 --- a/src/app/components/shared/shared.module.ts +++ b/src/app/components/shared/shared.module.ts @@ -51,6 +51,7 @@ import { CustomMarkdownComponent } from './custom-markdown/custom-markdown.compo import { ScrollIntoViewDirective } from '../../directives/scroll-into-view.directive'; import { QuillModule } from 'ngx-quill'; import { ViewCommentDataComponent } from './view-comment-data/view-comment-data.component'; +import { DeepLDialogComponent } from './_dialogs/deep-ldialog/deep-ldialog.component'; @NgModule({ imports: [ @@ -107,7 +108,8 @@ import { ViewCommentDataComponent } from './view-comment-data/view-comment-data. WriteCommentComponent, CustomMarkdownComponent, ScrollIntoViewDirective, - ViewCommentDataComponent + ViewCommentDataComponent, + DeepLDialogComponent ], exports: [ RoomJoinComponent, diff --git a/src/app/components/shared/view-comment-data/view-comment-data.component.ts b/src/app/components/shared/view-comment-data/view-comment-data.component.ts index 6f28e5e7b7e9b0462a5cde1b23d6f642e3cef68e..ccf7af27b688a1fec6c6c847d6317e249445ed3c 100644 --- a/src/app/components/shared/view-comment-data/view-comment-data.component.ts +++ b/src/app/components/shared/view-comment-data/view-comment-data.component.ts @@ -42,7 +42,7 @@ export class ViewCommentDataComponent implements OnInit, AfterViewInit { } get currentData(): string { - return this._currentData; + return this._currentData || ''; } @Input() maxTextCharacters = 500; @@ -66,7 +66,7 @@ export class ViewCommentDataComponent implements OnInit, AfterViewInit { } } }; - private _currentData = ''; + private _currentData = null; constructor(private languageService: LanguageService, private translateService: TranslateService, @@ -79,7 +79,7 @@ export class ViewCommentDataComponent implements OnInit, AfterViewInit { }); } - private static getDataFromDelta(contentDelta) { + public static getDataFromDelta(contentDelta) { return JSON.stringify(contentDelta.ops.map(op => { let hasOnlyInsert = true; for (const key in op) { @@ -92,7 +92,7 @@ export class ViewCommentDataComponent implements OnInit, AfterViewInit { })); } - private static getDeltaFromData(jsonData: string) { + public static getDeltaFromData(jsonData: string) { return { ops: JSON.parse(jsonData).map(elem => { if (!elem['insert']) { @@ -135,7 +135,9 @@ export class ViewCommentDataComponent implements OnInit, AfterViewInit { if (this.markEvents && this.markEvents.onCreate) { this.markEvents.onCreate(this.editorErrorLayer.nativeElement, this.tooltipContainer.nativeElement, this.editor); } - this.set(this._currentData); + if (this._currentData) { + this.set(this._currentData); + } (this.editor.editorElem.firstElementChild as HTMLElement).focus(); this.syncErrorLayer(); setTimeout(() => this.syncErrorLayer(), 200); // animations? diff --git a/src/app/components/shared/write-comment/write-comment.component.ts b/src/app/components/shared/write-comment/write-comment.component.ts index a39b0b731799c7911c32002b2cb0e4f8b517de04..324be593f6953fb88b24dec562dd298a7351e268 100644 --- a/src/app/components/shared/write-comment/write-comment.component.ts +++ b/src/app/components/shared/write-comment/write-comment.component.ts @@ -93,9 +93,6 @@ export class WriteCommentComponent implements OnInit { } checkGrammar() { - this.deepl.improveTextStyle(this.commentData.currentText).subscribe(str => { - console.log(str); - }); this.grammarCheck(this.commentData.currentText, this.langSelect && this.langSelect.nativeElement); } diff --git a/src/app/utils/create-comment-wrapper.ts b/src/app/utils/create-comment-wrapper.ts index 1408a49eb836e58216a0f531ab6d8b73a1b50c97..93706c1c24af01e487edafb5001e92062636c172 100644 --- a/src/app/utils/create-comment-wrapper.ts +++ b/src/app/utils/create-comment-wrapper.ts @@ -22,8 +22,8 @@ export class CreateCommentWrapper { openCreateDialog(user: User): Observable<Comment> { const dialogRef = this.dialog.open(CreateCommentComponent, { width: '900px', - maxWidth: 'calc( 100% - 50px )', - maxHeight: 'calc( 100vh - 50px )', + maxWidth: '100%', + maxHeight: 'calc( 100vh - 20px )', autoFocus: false, }); dialogRef.componentInstance.user = user; diff --git a/src/assets/i18n/creator/de.json b/src/assets/i18n/creator/de.json index 161e2d1849f2bb4d184b15a90744ee784a0a29a0..ef9be59cd22afa5367efbb3f284d8e218fb05b4f 100644 --- a/src/assets/i18n/creator/de.json +++ b/src/assets/i18n/creator/de.json @@ -125,6 +125,7 @@ "answer": "Frage kommentieren", "save-answer": "Speichern", "comment-answered": "Antwort wurde gespeichert.", + "continue": "Weiter", "edit-answer": "Bearbeiten", "delete-answer": "Löschen", "really-delete-answer": "Willst du deine Antwort wirklich löschen?", @@ -235,6 +236,12 @@ "undo": "Rückgängig", "yes": "Ja" }, + "deepl": { + "header": "DeepL Unterstützung", + "label": "Wähle einen Text", + "option-normal": "Eingegebener Text", + "option-improved": "Stilistisch verbesserter Text" + }, "home-page": { "create-session": "Neue Sitzung", "created-1": "Die Sitzung »", diff --git a/src/assets/i18n/creator/en.json b/src/assets/i18n/creator/en.json index 751372cd27931d658ee5e4906d880bd6bca93de3..1a1be02ce03aa8a2291a080535237a29e5424424 100644 --- a/src/assets/i18n/creator/en.json +++ b/src/assets/i18n/creator/en.json @@ -125,6 +125,7 @@ "answer": "Comment this question", "save-answer": "Save", "comment-answered": "Answer has been sent.", + "continue": "Continue", "edit-answer": "Edit", "delete-answer": "Delete", "really-delete-answer": "Do you really want to delete this answer?", @@ -236,6 +237,12 @@ "undo": "Undo", "yes": "Yes" }, + "deepl": { + "header": "DeepL Support", + "label": "Choose a text", + "option-normal": "Entered text", + "option-improved": "Stylistically improved text" + }, "home-page": { "create-session": "New session", "created-1": "Session »", diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json index e6ba2fec8b2ae87ad0154803aa7713360b0b204c..d034aa1e28e93ae734ae8def57635f9f4a5af79b 100644 --- a/src/assets/i18n/participant/de.json +++ b/src/assets/i18n/participant/de.json @@ -119,6 +119,7 @@ "abort": "Abbrechen", "ask-question-description": "Gib hier deine Frage ein!", "save-answer": "Speichern", + "continue": "Weiter", "delete-answer": "Löschen", "cancel": "Abbrechen", "cancel-description": "Abbrechen", @@ -163,6 +164,12 @@ "upvote": "positiv", "downvote": "negativ" }, + "deepl": { + "header": "DeepL Unterstützung", + "label": "Wähle einen Text", + "option-normal": "Eingegebener Text", + "option-improved": "Stilistisch verbesserter Text" + }, "home-page": { "exactly-8": "Ein Raum-Code hat genau 8 Ziffern.", "no-room-found": "Es wurde kein Raum mit diesem Raum-Code gefunden.", diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json index 2a1328180bd0d83f98ed87c99422ca0d05b39501..613bb84bd1f2f616b307a4f2dddb696d98ece70c 100644 --- a/src/assets/i18n/participant/en.json +++ b/src/assets/i18n/participant/en.json @@ -129,6 +129,7 @@ "abort": "Cancel", "ask-question-description": "Enter your question …", "save-answer": "Save", + "continue": "Continue", "delete-answer": "Delete", "cancel": "Cancel", "cancel-description": "Cancel", @@ -172,6 +173,12 @@ "upvote": "upvotes", "downvote": "downvotes" }, + "deepl": { + "header": "DeepL Support", + "label": "Choose a text", + "option-normal": "Entered text", + "option-improved": "Stylistically improved text" + }, "home-page": { "exactly-8": "A key is a combination of 8 digits.", "no-room-found": "No session found with this key",