fixed dialog problems and added notifications

src/app/components/shared/header/header.component.html

@@ -11,7 +11,7 @@
     <button id="back-button"
     mat-icon-button
     aria-labelledby="cloud"
-    *ngIf="router.url !== '/home'"
+    *ngIf="router.url !== '/user' && router.url !== '/home'"
     (click)="openCloudDialog()">
 <mat-icon class="header-icons">cloud</mat-icon>
 </button>

src/app/components/shared/header/header.component.ts

@@ -47,10 +47,8 @@ export class HeaderComponent implements OnInit {
               public eventService: EventService,
               private bonusTokenService: BonusTokenService,
               private _r: Renderer2,
-              private motdService: MotdService,
-              public cloudDialog: MatDialog
-  ) {
-  }
+              private motdService: MotdService
+  ) {}
 
   ngOnInit() {
     this.eventService.on('userLogin').subscribe(e => {
@@ -135,11 +133,7 @@ export class HeaderComponent implements OnInit {
   }
 
   openCloudDialog() {
-    const cloudDialogRef = this.cloudDialog.open(TopicCloudDialogComponent);
-
-    cloudDialogRef.afterClosed().subscribe(result => {
-      console.log(`Dialog result: ${result}`);
-    });
+    this.dialog.open(TopicCloudDialogComponent);
   }
 
   showMotdDialog() {

src/app/components/shared/topic-cloud-dialog/topic-cloud-dialog.component.html

@@ -11,21 +11,43 @@
             {{keyword.questions.length}} Questions
           </mat-panel-description>
         </mat-expansion-panel-header>
-        <p *ngFor="let question of keyword.questions">{{question}}</p>
+          <p *ngFor="let question of keyword.questions">{{question}}</p>
 
-        <mat-divider></mat-divider>
+          <mat-divider></mat-divider>
 
-        <!-- TODO: show buttons only to creator and moderators -->
-        <button mat-icon-button style="align-self:flex-end;"
-                (click)="editKeyword(keyword.keywordID)">
-          <mat-icon class="primary">edit</mat-icon>
-        </button>
+          <!-- TODO: show buttons only to creator and moderators -->
+
+              <!-- Only visible when not editing -->
+              <div *ngIf="!edit">
+                <button mat-icon-button style="align-self:flex-end;"
+                        (click)="editKeyword()">
+                  <mat-icon class="primary">edit</mat-icon>
+                </button>
+
+                <button mat-icon-button style="align-self:flex-end;"
+                        (click)="deleteKeyword(keyword.keywordID); openConfirmDialog()">
+                  <mat-icon class="warn">delete</mat-icon>
+                </button>
+              </div>
+
+              <!-- Only visible when editing -->
+              <div *ngIf="edit">
+                <mat-form-field>
+                  <mat-label>New Keyword</mat-label>
+                  <input matInput [(ngModel)]="newKeyword">
+                </mat-form-field>
+
+                <button mat-icon-button (click)="confirmEdit(keyword.keywordID)">
+                  <mat-icon>check</mat-icon>
+                </button>
+                <button mat-icon-button (click)="cancelEdit()">
+                  <mat-icon>cancel</mat-icon>
+                </button>
+              </div>
+          <!-- TODO: add automatic translation -->
 
-        <button mat-icon-button style="align-self:flex-end;"
-                (click)="deleteKeyword(keyword.keywordID)">
-          <mat-icon class="warn">delete</mat-icon>
-        </button>
-        <!-- TODO: add automatic translation -->
       </mat-expansion-panel>
   </mat-accordion>
+    <!--<h1 *ngIf="keywords.length == 0">there are no keywords</h1> -->
+  
 </mat-dialog-content>

src/app/components/shared/topic-cloud-dialog/topic-cloud-dialog.component.ts

 import { Component, OnInit } from '@angular/core';
 import {Keyword} from './keyword';
+import { MatDialogRef } from '@angular/material/dialog';
+import { HeaderComponent } from '../header/header.component';
+import { NotificationService } from '../../../services/util/notification.service';
 
 @Component({
   selector: 'app-topic-cloud-dialog',
@@ -8,48 +11,18 @@ import {Keyword} from './keyword';
 })
 export class TopicCloudDialogComponent implements OnInit {
   public panelOpenState = false;
-  /* public keywords = [
-    {
-      keywordID: 1,
-      keyword: "Cloud",
-      questions: [
-        "Wie genau ist die Cloud aufgebaut?",
-        "Wieviel speicherplatz steht mir in der Cloud zur verfuegung?",
-        "Sollen wir die Tag Cloud implementieren?"
-      ]
-    },
-    {
-      keywordID: 2,
-      keyword: "SWT",
-      questions: [
-        "Muss man fuer das Modul SWT bestanden haben?"
-      ]
-    },
-    {
-      keywordID: 3,
-      keyword: "Frage",
-      questions: [
-        "Das ist eine Lange Frage mit dem Thema 'frage'",
-        "Ich habe eine Frage, sind Fragen zum thema 'Frage' auch erlaubt?",
-        "Ich wollte Fragen ob sie gerne Sachen gefragt werden",
-        "Langsam geht mir die Fragerei mit den ganzen Fragen auf den Geist"
-      ]
-    },
-    {
-      keywordID: 4,
-      keyword: "Klausur",
-      questions: [
-        "Darf man in der Klausur hilfmittel verwenden?",
-        "An welchem Termin findet die Klausur statt?"
-      ]
-    }
-  ];
-*/
-  constructor() { }
-
+  newKeyword: string = '';
+  edit: boolean = false;
   keywords: Keyword[] = [];
 
+  constructor(public matdialogRef: MatDialogRef<HeaderComponent>,
+              private notificationService: NotificationService) { }
+
   ngOnInit(): void {
+    if (this.keywords.length > 0){
+        this.notificationService.show("there are no keywords");
+        this.matdialogRef.close();
+    }
     let questions = ["Wie genau ist die Cloud aufgebaut?",
     "Wieviel speicherplatz steht mir in der Cloud zur verfuegung?",
     "Sollen wir die Tag Cloud implementieren?"];
@@ -67,20 +40,42 @@ export class TopicCloudDialogComponent implements OnInit {
 
   pushToArray(id: number, key: string, questions: string[]){
       let _keyword = {
-          keywordID: 1,
-          keyword: "test",
+          keywordID: id,
+          keyword: key,
           questions: questions
       }
-
       this.keywords.push(_keyword);
   }
 
-  editKeyword(id: number): void{
-      console.log("keyword with ID "+id+" has been edited");
+  editKeyword(): void {
+      this.edit = true;
   }
 
   deleteKeyword(id: number): void{
+    this.keywords.map(keyword => {
+      if (keyword.keywordID == id)
+          this.keywords.splice(this.keywords.indexOf(keyword, 0), 1);
+    });
+    if (this.keywords.length == 0)
+      this.matdialogRef.close();
+  }
+
+  cancelEdit(): void {
+    console.log("edit canceled");
+    this.edit = false;
+  }
+
+  confirmEdit(id: number): void {
+    console.log("edit confirmed "+id);
+    this.keywords.map(keyword => {
+      if (keyword.keywordID == id)
+          keyword.keyword = this.newKeyword;
+    });
+    this.edit = false;
+    this.newKeyword = '';
+  }
 
-      console.log("keyword with ID "+id+" has been deleted");
+  openConfirmDialog(): void {
+    console.log("are u sure?");
   }
 }