Fix/pattern navigation

src/app/core/component/action-button-bar/action-button-bar.component.html

@@ -1,6 +1,9 @@
 <mat-toolbar>
   <pp-navigate-back *ngIf="goBackButton"></pp-navigate-back>
 
+  <span></span>
+  <img class="image-with-margin" mat-card-image (click)=iconEditButtonClicked() *ngIf="iconUrl" [src]="iconUrl">
+
   <span class="action-button-with-margin"><b>{{this.displayText}}</b></span>
 
   <ng-content></ng-content>

src/app/core/component/action-button-bar/action-button-bar.component.scss

@@ -2,3 +2,15 @@
   margin-right: 10px;
   margin-left: 10px;
 }
+
+.mat-card-image {
+  width: auto;
+  height: 50px;
+  cursor: pointer;
+}
+
+.image-with-margin {
+  margin-right: 5px;
+  margin-left: 15px;
+}
+

src/app/core/component/action-button-bar/action-button-bar.component.ts

@@ -11,12 +11,15 @@ export class ActionButtonBarComponent implements OnInit {
   @Output() add2Clicked = new EventEmitter<void>();
   @Output() reloadClicked = new EventEmitter<void>();
   @Output() changedText = new EventEmitter<void>();
+  @Output() iconEditClicked = new EventEmitter<void>();
   @Input() addButtonText: string;
   @Input() reloadButton = false;
   @Input() goBackButton = true;
   @Input() secondAddButton: boolean;
   @Input() firstAddButton = true;
   @Input() secondAddButtonText: string;
+  @Input() iconEdit = false;
+  @Input() iconUrl: string;
 
   @Input() displayText: string;
 
@@ -38,4 +41,8 @@ export class ActionButtonBarComponent implements OnInit {
   secondAddButtonClicked() {
     this.add2Clicked.emit();
   }
+
+  iconEditButtonClicked() {
+    this.iconEditClicked.emit();
+  }
 }

src/app/core/component/create-pattern-relation/create-pattern-relation.component.html

@@ -1,9 +1,22 @@
-<h1 mat-dialog-title>Add a relation to another pattern</h1>
+<h1 *ngIf="isDelete" mat-dialog-title>Edit or Delete the selected Relation</h1>
+<h1 *ngIf="!isDelete" mat-dialog-title>Add a Relation to another Pattern</h1>
 <div mat-dialog-content [formGroup]="relationForm">
   <mat-form-field *ngIf="data.firstPattern; else chooseFirstPattern">
     <input type="text" matInput [value]="data.firstPattern.name" readonly/>
   </mat-form-field>
   <ng-template #chooseFirstPattern>
+    <mat-form-field *ngIf="relationForm.get('secondPattern').value != null; else chooseFirstPatternWithEmptyForm">
+      <mat-select formControlName="firstPattern">
+        <div *ngFor="let pattern of data.patterns">
+          <mat-option *ngIf="pattern.name != relationForm.get('secondPattern').value.name "
+                      [value]="pattern">
+            {{pattern.name}}
+          </mat-option>
+        </div>
+      </mat-select>
+    </mat-form-field>
+  </ng-template>
+  <ng-template #chooseFirstPatternWithEmptyForm>
     <mat-form-field>
       <mat-select formControlName="firstPattern">
         <mat-option *ngFor="let pattern of data.patterns"
@@ -42,6 +55,18 @@ <h1 mat-dialog-title>Add a relation to another pattern</h1>
     <input type="text" matInput [value]="data.secondPattern.name" readonly/>
   </mat-form-field>
   <ng-template #chooseSecondPattern>
+    <mat-form-field *ngIf="relationForm.get('firstPattern').value != null; else chooseSecondPatternWithEmptyForm">
+      <mat-select formControlName="secondPattern">
+        <div *ngFor="let pattern of data.patterns">
+          <mat-option *ngIf=" pattern.name != relationForm.get('firstPattern').value.name"
+                      [value]="pattern">
+            {{pattern.name}}
+          </mat-option>
+        </div>
+      </mat-select>
+    </mat-form-field>
+  </ng-template>
+  <ng-template #chooseSecondPatternWithEmptyForm>
     <mat-form-field>
       <mat-select formControlName="secondPattern">
         <mat-option *ngFor="let pattern of data.patterns"
@@ -56,8 +81,13 @@ <h1 mat-dialog-title>Add a relation to another pattern</h1>
   </mat-form-field>
 </div>
 <div mat-dialog-actions>
-  <button mat-button [mat-dialog-close]="null">Close</button>
-  <button mat-button [mat-dialog-close]="mapDialogDataToEdge(relationForm.value)" [disabled]="!relationForm?.valid">
-    Save
+  <button mat-raised-button [mat-dialog-close]="null">Close</button>
+  <button *ngIf="isDelete" (click)="deleteLink()" [mat-dialog-close]="data" class="pattern-button" mat-raised-button color="warn">
+    <i class="material-icons">delete</i> Delete
+  </button>
+
+  <button mat-raised-button style="margin-left: auto; margin-right: 0;" color="primary"
+          [mat-dialog-close]="mapDialogDataToEdge(relationForm.value)" [disabled]="!relationForm?.valid"><i
+    class="material-icons">save</i> Save
   </button>
 </div>

src/app/core/component/create-pattern-relation/create-pattern-relation.component.scss

@@ -5,3 +5,7 @@
 .mat-form-field {
   margin-left: 2.5rem !important;
 }
+
+.mat-input-element {
+  height: 1.125em;
+}

src/app/core/component/create-pattern-relation/create-pattern-relation.component.ts

@@ -15,12 +15,18 @@ import { Observable } from 'rxjs';
   styleUrls: ['./create-pattern-relation.component.scss']
 })
 
-
+/**
+ * This dialog is getting used to
+ *    1. Create new relations
+ *    2. Edit existing relations (isDelete = true)
+ *    3. Delete existing relations (isDelete = true)
+ */
 export class CreatePatternRelationComponent implements OnInit {
 
   constructor(public dialogRef: MatDialogRef<CreatePatternRelationComponent>, @Inject(MAT_DIALOG_DATA) public data: DialogData, private fb: FormBuilder) {
   }
 
+  isDelete: boolean;
   directionEnum = PatternRelationDescriptorDirection;
   patterns: Pattern[];
   directionTypes = [
@@ -54,14 +60,17 @@ export class CreatePatternRelationComponent implements OnInit {
     } catch (e) {
     }
 
+    if(this.data.description === undefined){
+      this.data.description = '';
+    }
+    this.isDelete =this.data.isDelete; // set view to delete/edit instead of create
     this.relationForm = this.fb.group({
       firstPattern: [this.data.firstPattern, [Validators.required]],
       secondPattern: [this.data.secondPattern, [Validators.required]],
       direction: [preselectedEdgeDirection, [Validators.required]],
-      relationType: ['', [Validators.required]],
-      description: ['', []],
+      relationType: [this.data.relationType, [Validators.required]],
+      description: [this.data.description, []],
     });
-
     if (this.data.relationTypes) {
       this.subscriptionRefs.push(this.data.relationTypes.subscribe(relationTypes => this.relationTypes = relationTypes));
     }
@@ -94,16 +103,26 @@ export class CreatePatternRelationComponent implements OnInit {
 
   }
 
+  /**
+   * called when delete button is pressed --> delete Link
+   */
+  deleteLink() {
+    this.data.deleteLink = true;
+  }
 }
 
 export interface DialogData {
+  relationType: string;
+  description: string;
   firstPattern?: Pattern;
   secondPattern?: Pattern;
   preselectedEdgeDirection?: PatternRelationDescriptorDirection;
   patterns: Pattern[];
   patternLanguage: PatternLanguage;
   patternContainer: PatternContainer;
   relationTypes?: Observable<string[]>;
+  isDelete: boolean;   // delete button toggle
+  deleteLink: boolean; // set true if delete button pressed
 }
 
 export interface PatternRelationDirection {

src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.html

@@ -0,0 +1,7 @@
+<h1 mat-dialog-title>Edit or Delete Relation</h1>
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">Cancle</button>
+  <button [mat-dialog-close]="data" class="pattern-button" mat-raised-button color="warn">
+    <i class="material-icons">delete</i>
+  </button>
+</div>

src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeleteConfirmationDialogComponent } from './delete-confirmation-dialog.component';
+
+describe('DeleteConfirmationDialogComponent', () => {
+  let component: DeleteConfirmationDialogComponent;
+  let fixture: ComponentFixture<DeleteConfirmationDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeleteConfirmationDialogComponent ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeleteConfirmationDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.ts

@@ -0,0 +1,19 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'pp-delete-confirmation-dialog',
+  templateUrl: './delete-confirmation-dialog.component.html',
+  styleUrls: ['./delete-confirmation-dialog.component.scss']
+})
+export class DeleteConfirmationDialogComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<DeleteConfirmationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data) {
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+}

src/app/core/component/delete-pattern-relation/delete-pattern-relation.component.html

@@ -1,5 +1,7 @@
 <button class="close" mat-button (click)="close()">X</button>
-<h1 mat-dialog-title>Delete a relation</h1>
+<h1 mat-dialog-title *ngIf="this.data.type == 'ingoing'" >View incoming Edges</h1>
+<h1 mat-dialog-title *ngIf="this.data.type == 'outgoing'" >View outgoing Edges</h1>
+<h1 mat-dialog-title *ngIf="this.data.type !== 'ingoing' && this.data.type !== 'outgoing'" >View undirected Edges</h1>
 <div mat-dialog-content>
     <div *ngIf="this.data.type == 'ingoing' || this.data.type == 'outgoing'; then directedEdgeModel else undirectedEdgeModel"></div>
     <ng-template #directedEdgeModel>
@@ -14,12 +16,9 @@ <h1 mat-dialog-title>Delete a relation</h1>
                     <b>Source Pattern:</b> {{edge.edge.sourcePatternName}}<br/>
                     <b>Relation Type:</b> {{edge.edge.type}} <br/>
                     <b>Target Pattern:</b> {{edge.edge.targetPatternName}}
-                    <div *ngIf="edge.description"><b>Description:</b> {{edge.description}}</div>
+                    <div *ngIf="edge.edge.description"><b>Description:</b> {{edge.edge.description}}</div>
                     <br/>
                 </div>
-                <button class="delete-icon" mat-button (click)="deleteEdge(edge)">
-                    <mat-icon (click)="deleteEdge(edge)" [inline]="true">delete</mat-icon>
-                </button>
             </mat-expansion-panel>
         </mat-accordion>
     </ng-template>
@@ -35,12 +34,9 @@ <h1 mat-dialog-title>Delete a relation</h1>
                     <b>Pattern 1:</b> {{edge.edge.pattern1Name}}<br/>
                     <b>Relation Type:</b> {{edge.edge.type}} <br/>
                     <b>Pattern 2:</b> {{edge.edge.pattern2Name}}
-                    <div *ngIf="edge.description"><b>Description:</b> {{edge.description}}</div>
+                    <div *ngIf="edge.edge.description"><b>Description:</b> {{edge.edge.description}}</div>
                     <br/>
                 </div>
-                    <button class="delete-icon" mat-button (click)="deleteEdge(edge)">
-                        <mat-icon (click)="deleteEdge(edge)" [inline]="true">delete</mat-icon>
-                    </button>
             </mat-expansion-panel>
         </mat-accordion>
     </ng-template>

src/app/core/component/delete-pattern-relation/delete-pattern-relation.component.ts

@@ -9,61 +9,50 @@ import { HalLink } from '../../model/hal/hal-link.interface';
 @Component({
   selector: 'pp-delete-pattern-relation',
   templateUrl: './delete-pattern-relation.component.html',
-  styleUrls: ['./delete-pattern-relation.component.scss']
+  styleUrls: [ './delete-pattern-relation.component.scss' ]
 })
 export class DeletePatternRelationComponent implements OnInit {
 
-    currentEdges: Array<EdgeWithType> = [];
+  currentEdges: Array<EdgeWithType> = [];
 
-    constructor(public dialogRef: MatDialogRef<CreatePatternRelationComponent>,
-                @Inject(MAT_DIALOG_DATA) public data: DeleteRelationDialogData,
-                private patternRelationDescriptorService: PatternRelationDescriptorService,
-                private patternViewService: PatternViewService, private toasterService: ToasterService) {
-      this.getEdgesForPattern();
-    }
+  constructor(public dialogRef: MatDialogRef<CreatePatternRelationComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: DeleteRelationDialogData,
+              private patternRelationDescriptorService: PatternRelationDescriptorService,
+              private patternViewService: PatternViewService, private toasterService: ToasterService) {
+    this.getEdgesForPattern();
+  }
 
-    ngOnInit() {
-    }
+  ngOnInit() {
+  }
+
+  close(): void {
+    this.dialogRef.close();
+  }
 
-    close(): void {
-      this.dialogRef.close();
-    }
 
-    deleteEdge(edge: EdgeWithType): void {
-      console.log(edge);
-      this.patternViewService.deleteLink(edge.edge._links.self.href).subscribe(
-        (res) => {
-          this.currentEdges = this.currentEdges.filter(item => item.edge.id !== edge.edge.id);
-          this.toasterService.pop('success', 'Relation removed');
-          if (this.currentEdges.length === 0) {
-            this.dialogRef.close();
-          }
+  private getEdgesForPattern(): void {
+    let links = [];
+    if (!this.data.edges.length) {
+      links[0] = this.data.edges;
+    } else {
+      links = this.data.edges;
+    }
+    for (const link of links) {
+      this.patternRelationDescriptorService.getUndirectedEdgeByUrl(link.href).subscribe(
+        data => {
+          const edgeWithType: EdgeWithType = new EdgeWithType();
+          edgeWithType.edge = data;
+          edgeWithType.type = data.type;
+          this.currentEdges.push(edgeWithType);
         }
       );
     }
-
-    private getEdgesForPattern(): void {
-      let links = [];
-      if (!this.data.edges.length) {
-        links[0] = this.data.edges;
-      } else {
-        links = this.data.edges;
-      }
-      for (const link of links) {
-        this.patternRelationDescriptorService.getUndirectedEdgeByUrl(link.href).subscribe(
-          data => {
-            const edgeWithType: EdgeWithType = new EdgeWithType();
-            edgeWithType.edge = data;
-            edgeWithType.type = data.type;
-            this.currentEdges.push(edgeWithType);
-          }
-        );
-      }
-    }
+  }
 
 }
 
 export interface DeleteRelationDialogData {
-    edges: HalLink[];
-    type: string;
+  deleteEdge: EdgeWithType;
+  edges: HalLink[];
+  type: string;
 }

src/app/core/component/edit-url-dialog/edit-url-dialog.component.html

@@ -0,0 +1,15 @@
+<h1 mat-dialog-title>Edit Title or Icon for {{data.pattern.name}}</h1>
+<div mat-dialog-content>
+  <mat-form-field>
+    <mat-label>Adjust Pattern Name</mat-label>
+    <input matInput placeholder={{data.pattern.name}} [(ngModel)]="data.name" >
+  </mat-form-field>
+  <mat-form-field>
+    <mat-label>Adjust Icon URL</mat-label>
+    <input matInput placeholder={{data.pattern.iconUrl}} [(ngModel)]="data.icon" >
+  </mat-form-field>
+</div>
+<mat-dialog-actions align="end">
+  <button mat-button (click)="onNoClick()">Cancle</button>
+  <button mat-button [mat-dialog-close]="data" cdkFocusInitial>Ok</button>
+</mat-dialog-actions>

src/app/core/component/edit-url-dialog/edit-url-dialog.component.scss

@@ -0,0 +1,3 @@
+.mat-form-field{
+  width: 100%;
+}