Implemented answer-edit component to be used with content-choice-creator...

Implemented answer-edit component to be used with content-choice-creator component (template and logic)

src/app/app.module.ts

@@ -123,7 +123,8 @@ import { AnswerEditComponent } from './components/dialogs/answer-edit/answer-edi
     PasswordResetComponent,
     RoomCreateComponent,
     RoomDeleteComponent,
-    RoomEditComponent
+    RoomEditComponent,
+    AnswerEditComponent
   ],
   imports: [
     AppRoutingModule,

src/app/components/dialogs/answer-edit/answer-edit.component.html

-<p>
-  answer-edit works!
-</p>
+<div *ngIf="answer">
+  <mat-form-field class="input-block">
+    <input [(ngModel)]="answer.answerOption.label" #roomName matInput placeholder="Answer label" name="answer-label"/>
+  </mat-form-field>
+  <mat-form-field class="input-block">
+            <textarea [(ngModel)]="answer.answerOption.points" #roomDescription matInput matTextareaAutosize
+                      matAutosizeMinRows="2" matAutosizeMaxRows="5" placeholder="Points" name="points">
+            </textarea>
+  </mat-form-field>
+  <mat-checkbox [(ngModel)]="answer.correct" color="primary">Answer is {{answer.correct}}.</mat-checkbox>
+  <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
+    <button (click)="dialogRef.close()" mat-button color="primary">
+      Leave
+    </button>
+    <button (click)="dialogRef.close('edit')" mat-raised-button color="primary">
+      Update
+    </button>
+  </div>
+</div>

src/app/components/dialogs/answer-edit/answer-edit.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+import { ContentChoiceCreatorComponent, DisplayAnswer } from '../../fragments/content-choice-creator/content-choice-creator.component';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 
 @Component({
   selector: 'app-answer-edit',
@@ -6,10 +8,16 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./answer-edit.component.scss']
 })
 export class AnswerEditComponent implements OnInit {
+  answer: DisplayAnswer;
 
-  constructor() { }
+  constructor(public dialogRef: MatDialogRef<ContentChoiceCreatorComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: any) {
+  }
 
   ngOnInit() {
   }
 
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
 }

src/app/components/fragments/content-choice-creator/content-choice-creator.component.html

@@ -23,9 +23,10 @@
         <mat-cell *matCellDef="let answer">
           <!-- ToDo: Check ngModel -->
           <mat-checkbox color="primary" [(ngModel)]="answer.correct" [checked]="answer.correct"
-                        name="{{ answer.answerOption.label }}">{{ answer.answerOption.label }} is {{ answer.correct }}
+                        name="{{ answer.answerOption.label }}" disabled>{{ answer.answerOption.label }}
           </mat-checkbox>
-          <button mat-raised-button color="primary" (click)="deleteAnswer(answer.answerOption.label)">Delete</button>
+          <button mat-icon-button (click)="openAnswerModificationDialog(answer.answerOption.label, answer.answerOption.points, answer.correct)" color="primary"><mat-icon>edit</mat-icon></button>
+          <button mat-icon-button color="primary" (click)="deleteAnswer(answer.answerOption.label)"><mat-icon>delete</mat-icon></button>
         </mat-cell>
       </ng-container>
 

src/app/components/fragments/content-choice-creator/content-choice-creator.component.ts

@@ -3,6 +3,8 @@ import { AnswerOption } from '../../../models/answer-option';
 import { ContentChoice } from '../../../models/content-choice';
 import { ContentService } from '../../../services/http/content.service';
 import { NotificationService } from '../../../services/util/notification.service';
+import { MatDialog } from '@angular/material';
+import { AnswerEditComponent } from '../../dialogs/answer-edit/answer-edit.component';
 
 export class DisplayAnswer {
   answerOption: AnswerOption;
@@ -41,8 +43,12 @@ export class ContentChoiceCreatorComponent implements OnInit {
   newAnswerOptionLabel = '';
   newAnswerOptionPoints = '';
 
+  editDisplayAnswer: DisplayAnswer;
+  originalDisplayAnswer: DisplayAnswer;
+
   constructor(private contentService: ContentService,
-              private notificationService: NotificationService) {
+              private notificationService: NotificationService,
+              public dialog: MatDialog) {
   }
 
   ngOnInit() {
@@ -92,6 +98,50 @@ export class ContentChoiceCreatorComponent implements OnInit {
     this.submitContent();
   }
 
+  openAnswerModificationDialog(label: string, points: string, correct: boolean) {
+    this.editDisplayAnswer = new DisplayAnswer(new AnswerOption(label, points), correct);
+    this.originalDisplayAnswer = new DisplayAnswer(new AnswerOption(label, points), correct);
+    const dialogRef = this.dialog.open(AnswerEditComponent, {
+      width: '400px'
+    });
+    dialogRef.componentInstance.answer = this.editDisplayAnswer;
+    dialogRef.afterClosed()
+      .subscribe(result => {
+        if (result === 'edit') {
+          this.editCheckChanges();
+        }
+      });
+  }
+
+  editCheckChanges() {
+    for (let i = 0; i < this.content.options.length; i++) {
+      if (this.content.options[i].label === this.originalDisplayAnswer.answerOption.label) {
+
+        if (this.originalDisplayAnswer.answerOption.label !== this.editDisplayAnswer.answerOption.label) {
+          this.content.options[i].label = this.editDisplayAnswer.answerOption.label;
+        }
+        if (this.originalDisplayAnswer.answerOption.points !== this.editDisplayAnswer.answerOption.points) {
+          this.content.options[i].points = this.editDisplayAnswer.answerOption.points;
+        }
+        if (this.originalDisplayAnswer.correct !== this.editDisplayAnswer.correct) {
+          if (!this.editDisplayAnswer.correct) {
+            for (let j = 0; i < this.content.correctOptionIndexes.length; j++) {
+              console.log(this.content.correctOptionIndexes);
+              if (this.content.correctOptionIndexes[j] === i && !this.editDisplayAnswer.correct) {
+                this.content.correctOptionIndexes.splice(j, 1);
+                console.log(this.content.correctOptionIndexes);
+              }
+            }
+          }
+          if (this.editDisplayAnswer.correct) {
+            this.content.correctOptionIndexes.push(i);
+          }
+        }
+      }
+    }
+    this.fillCorrectAnswers();
+  }
+
   deleteAnswer(label: string) {
     console.log('deleteAnswer: ' + label);
     console.log('Antwortmöglichkeiten vorher:');
@@ -132,7 +182,7 @@ export class ContentChoiceCreatorComponent implements OnInit {
     if (this.lastDeletedDisplayAnswer.correct) {
       this.content.correctOptionIndexes.push(this.content.options.length - 1);
     }
-    this.notificationService.show('Answer "' + this.lastDeletedDisplayAnswer.answerOption.label + '" successfully recovered.')
+    this.notificationService.show('Answer "' + this.lastDeletedDisplayAnswer.answerOption.label + '" successfully recovered.');
     this.lastDeletedDisplayAnswer = null;
     this.fillCorrectAnswers();
   }
@@ -143,4 +193,4 @@ export class ContentChoiceCreatorComponent implements OnInit {
 }
 
 
-//TODO: nicht 2x die gleiche Antwort
+// TODO: nicht 2x die gleiche Antwort