Merge pull request #83 from PatternAtlas/fix/pattern-navigation

Fix/pattern navigation

Author: manuwei

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.scss

@@ -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.spec.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();
+  }
+}