Add dialogs for likert and likert-rows

projects/editor/src/app/dialog.service.ts

@@ -2,6 +2,9 @@
 import { Component, Inject, Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { AnswerOption } from '../../../common/models/uI-element';
+import { FileService } from '../../../common/file.service';
+import { LikertElementRow } from '../../../common/models/compound-elements/likert-element-row';
 
 @Injectable({
   providedIn: 'root'
@@ -48,6 +51,30 @@ export class DialogService {
     });
     return dialogRef.afterClosed();
   }
+
+  showLikertAnswerEditDialog(answer: AnswerOption): Observable<AnswerOption> {
+    const dialogRef = this.dialog.open(LikertAnswerEditDialog, {
+      width: '300px',
+      height: '550px',
+      data: {
+        answer: answer
+      },
+      autoFocus: false
+    });
+    return dialogRef.afterClosed();
+  }
+
+  showLikertQuestionEditDialog(question: LikertElementRow): Observable<LikertElementRow> {
+    const dialogRef = this.dialog.open(LikertQuestionEditDialog, {
+      width: '300px',
+      height: '550px',
+      data: {
+        question: question
+      },
+      autoFocus: false
+    });
+    return dialogRef.afterClosed();
+  }
 }
 
 @Component({
@@ -120,3 +147,71 @@ export class MultilineTextEditDialog {
 export class RichTextEditDialog {
   constructor(@Inject(MAT_DIALOG_DATA) public data: { text: string }) { }
 }
+
+@Component({
+  selector: 'app-likert-answer-edit-dialog',
+  template: `
+    <mat-dialog-content fxLayout="column">
+      <mat-form-field>
+        <mat-label>Text</mat-label>
+        <input #textInput matInput type="text" [value]="data.answer.text">
+      </mat-form-field>
+      <input #imageUpload type="file" hidden (click)="loadImage()">
+      <button mat-raised-button (click)="imageUpload.click()">Bild laden</button>
+      <button mat-raised-button (click)="data.answer.imgSrc = null">Bild entfernen</button>
+      <img [src]="data.answer.imgSrc"
+           [style.object-fit]="'scale-down'"
+           [width]="200">
+      <mat-form-field appearance="fill">
+        <mat-label>Position</mat-label>
+        <mat-select [value]="data.answer.position"
+                    (selectionChange)="this.data.answer.position = $event.value">
+          <mat-option *ngFor="let option of [{displayValue: 'oben', value: 'above'},
+                                               {displayValue: 'unten', value: 'below'}]"
+                      [value]="option.value">
+            {{option.displayValue}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </mat-dialog-content>
+    <mat-dialog-actions>
+      <button mat-button [mat-dialog-close]="{
+                         text: textInput.value,
+                         imgSrc: data.answer.imgSrc,
+                         position: data.answer.position }">
+        Speichern
+      </button>
+      <button mat-button mat-dialog-close>Abbrechen</button>
+    </mat-dialog-actions>
+  `
+})
+export class LikertAnswerEditDialog {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: { answer: AnswerOption }) { }
+
+  async loadImage(): Promise<void> {
+    this.data.answer.imgSrc = await FileService.loadImage();
+  }
+}
+
+@Component({
+  selector: 'app-likert-question-edit-dialog',
+  template: `
+    <mat-dialog-content fxLayout="column">
+      <mat-form-field>
+        <mat-label>Text</mat-label>
+        <input #textField matInput type="text" [value]="data.question.text">
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>ID</mat-label>
+        <input #idField matInput type="text" [value]="data.question.id">
+      </mat-form-field>
+    </mat-dialog-content>
+    <mat-dialog-actions>
+      <button mat-button [mat-dialog-close]="{ text: textField.value, id: idField.value }">Speichern</button>
+      <button mat-button mat-dialog-close>Abbrechen</button>
+    </mat-dialog-actions>
+  `
+})
+export class LikertQuestionEditDialog {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: { question: LikertElementRow }) { }
+}