Delete Logic and Card Design

src/app/core/component/cardrenderer/card-renderer.component.ts

@@ -6,11 +6,13 @@ import Pattern from '../../model/hal/pattern.model';
 import { HalLink } from '../../model/hal/hal-link.interface';
 import { PatternService } from '../../service/pattern.service';
 import { ToasterService } from 'angular2-toaster';
+import { MatDialog } from "@angular/material/dialog";
+import { DeleteConfirmationDialogComponent } from "../delete-confirmation-dialog/delete-confirmation-dialog.component";
 
 @Component({
   selector: 'pp-card-renderer',
   templateUrl: './card-renderer.component.html',
-  styleUrls: ['./card-renderer.component.scss']
+  styleUrls: [ './card-renderer.component.scss' ]
 })
 export class CardRendererComponent {
 
@@ -22,23 +24,37 @@ export class CardRendererComponent {
               private router: Router,
               private activatedRoute: ActivatedRoute,
               private patternService: PatternService,
-              private toasterService: ToasterService) {
+              private toasterService: ToasterService,
+              private dialog: MatDialog) {
   }
 
   navigate(pattern: UriEntity): void {
     this.zone.run(() => {
-      this.router.navigate([UriConverter.doubleEncodeUri(pattern.uri)], { relativeTo: this.activatedRoute });
+      this.router.navigate([ UriConverter.doubleEncodeUri(pattern.uri) ], { relativeTo: this.activatedRoute });
     });
   }
 
   delete(pattern: Pattern): void {
-    this.patternService.deletePattern(pattern._links.self.href)
-      .subscribe(
-        value => this.handlePatternDelete(pattern),
-        error => {
-          this.toasterService.pop('error', 'Could not delete pattern!');
-        }
-      );
+    this.dialog.open(DeleteConfirmationDialogComponent, {
+      data: {
+        name: pattern.name,
+      }
+    })
+      .afterClosed().subscribe(dialoganswer => {
+      if (dialoganswer) {
+        this.patternService.deletePattern(pattern._links.self.href)
+          .subscribe(
+            value => {
+              this.handlePatternDelete(pattern);
+              this.toasterService.pop('success', 'Pattern deleted!');
+            },
+            error => {
+              this.toasterService.pop('error', 'Could not delete pattern!', "A Pattern can only be deleted if it is not a part of any Pattern Views");
+            }
+          );
+      }
+    });
+
   }
 
   getLinkCount(directedEdges: HalLink[] | HalLink): number {
@@ -51,15 +67,15 @@ export class CardRendererComponent {
   private collectAllEdgesOfPattern(pattern: Pattern): HalLink[] {
     let collectedEdges: HalLink[] = [];
     if (pattern._links.outgoingDirectedEdges) {
-      Array.isArray(pattern._links.outgoingDirectedEdges) ? collectedEdges = [...collectedEdges, ...pattern._links.outgoingDirectedEdges] :
+      Array.isArray(pattern._links.outgoingDirectedEdges) ? collectedEdges = [ ...collectedEdges, ...pattern._links.outgoingDirectedEdges ] :
         collectedEdges.push(pattern._links.outgoingDirectedEdges);
     }
     if (pattern._links.ingoingDirectedEdges) {
-      Array.isArray(pattern._links.ingoingDirectedEdges) ? collectedEdges = [...collectedEdges, ...pattern._links.ingoingDirectedEdges] :
+      Array.isArray(pattern._links.ingoingDirectedEdges) ? collectedEdges = [ ...collectedEdges, ...pattern._links.ingoingDirectedEdges ] :
         collectedEdges.push(pattern._links.ingoingDirectedEdges);
     }
     if (pattern._links.undirectedEdges) {
-      Array.isArray(pattern._links.undirectedEdges) ? collectedEdges = [...collectedEdges, ...pattern._links.undirectedEdges] :
+      Array.isArray(pattern._links.undirectedEdges) ? collectedEdges = [ ...collectedEdges, ...pattern._links.undirectedEdges ] :
         collectedEdges.push(pattern._links.undirectedEdges);
     }
     return collectedEdges;

src/app/core/component/create-edit-pattern-language/create-edit-pattern-language.component.ts

@@ -90,11 +90,12 @@ export class CreateEditPatternLanguageComponent implements OnInit {
     if (this.patternLanguageForm.valid) {
 
       switch (this.componentDialogType) {
-        case CreateEditComponentDialogType.PATTERN_VIEW:
+        case CreateEditComponentDialogType.PATTERN_VIEW :  case CreateEditComponentDialogType.DESIGN_MODEL:
 
           this.saveClicked.emit({
             dialogResult: {
-              name: this.name.value
+              name: this.name.value,
+              logo:  this.iconUrl.value,
             }
           });
           this.dialogRef.close();
@@ -123,17 +124,6 @@ export class CreateEditPatternLanguageComponent implements OnInit {
           });
           this.dialogRef.close();
           break;
-
-        case CreateEditComponentDialogType.DESIGN_MODEL:
-
-          this.saveClicked.emit({
-            dialogResult: {
-              name: this.name.value,
-              logo: this.iconUrl.value
-            }
-          });
-          this.dialogRef.close();
-          break;
       }
     }
   }

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

@@ -1,7 +1,9 @@
-<h1 mat-dialog-title>Edit or Delete Relation</h1>
+<h1 mat-dialog-title *ngIf="data?.name">Do you really want to delete {{data.name}}?</h1>
+<h1 mat-dialog-title *ngIf="!data?.name">Do you really want to delete this item?</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">
+  <button [mat-dialog-close]="data" class="pattern-button"  style="margin-left: auto;
+          margin-right: 0;" mat-raised-button color="warn">
     <i class="material-icons">delete</i>
   </button>
 </div>

src/app/core/service/pattern-language.service.ts

@@ -107,4 +107,9 @@ export class PatternLanguageService implements GraphDataService {
   getEdgeTypes(): Observable<string[]> {
     return of();
   }
+
+  deletePatternLanguage(patternLanguageId: string){
+    const url =  this.repoEndpoint + '/patternLanguages/' + patternLanguageId;
+    return this.http.delete(url);
+  }
 }

src/app/core/service/pattern-view.service.ts

@@ -91,13 +91,13 @@ export class PatternViewService implements GraphDataService {
     return this.http.get<Embedded<UndirectedEdgesResponse>>(patternContainer._links.undirectedEdges.href);
   }
 
-  getDirectedEdgeById(patternViewId, edgeId: string) : Observable<DirectedEdgeModel>{
-    return this.http.get<DirectedEdgeModel>(this.repoEndpoint + /patternViews/+ patternViewId + /directedEdges/ + edgeId)
+  getDirectedEdgeById(patternViewId, edgeId: string): Observable<DirectedEdgeModel> {
+    return this.http.get<DirectedEdgeModel>(this.repoEndpoint + /patternViews/ + patternViewId + /directedEdges/ + edgeId)
   }
 
 
-  getUndirectedEdgeById(patternViewId, edgeId: string) : Observable<UndirectedEdgeModel>{
-    return this.http.get<UndirectedEdgeModel>(this.repoEndpoint + /patternViews/+ patternViewId + /undirectedEdges/ + edgeId)
+  getUndirectedEdgeById(patternViewId, edgeId: string): Observable<UndirectedEdgeModel> {
+    return this.http.get<UndirectedEdgeModel>(this.repoEndpoint + /patternViews/ + patternViewId + /undirectedEdges/ + edgeId)
   }
 
   deleteLink(patternLink: any): Observable<any> {
@@ -116,10 +116,14 @@ export class PatternViewService implements GraphDataService {
     return of();
   }
 
-  removeRelationFromView(patternContainer: PatternContainer, relation: any):void {
-    relation.markerStart === undefined?
-      this.http.delete(patternContainer._links.directedEdges.href + '/' + relation.id).subscribe():
+  removeRelationFromView(patternContainer: PatternContainer, relation: any): void {
+    relation.markerStart === undefined ?
+      this.http.delete(patternContainer._links.directedEdges.href + '/' + relation.id).subscribe() :
       this.http.delete(patternContainer._links.undirectedEdges.href + '/' + relation.id).subscribe();
   }
 
+  deletePatternView(patternViewId: PatternContainer) {
+    return this.http.delete(patternViewId._links.self.href);
+  }
+
 }

src/app/core/service/pattern.service.ts

@@ -68,8 +68,6 @@ export class PatternService {
   }
 
   getPatternById(patternLanguage: PatternLanguage, patternId: String): Observable<Pattern> {
-    console.log('patternid');
-    console.log(patternId);
     return this.http.get <Pattern>(this.repoEndpoint + '/patternLanguages/' + patternLanguage.id + '/patterns/' + patternId);
   }
 

src/app/design-model-module/component/design-model-management/design-model-management.component.html

@@ -6,23 +6,28 @@
 
 <div class="container">
   <mat-card *ngFor="let designModel of designModelResponse?._embedded?.designModels"
-            [routerLink]="[designModel.id]" class="landing-card">
-
+            class="landing-card">
     <mat-card-header>
-      <img mat-card-avatar [src]="designModel?.logo || '//via.placeholder.com/50x50'" alt=""/>
+      <img mat-card-avatar (click)="navigate(designModel)" [src]="designModel?.logo || '//via.placeholder.com/50x50'"
+           alt=""/>
 
-      <mat-card-title>
+      <mat-card-title (click)="navigate(designModel)">
         {{designModel.name}}
       </mat-card-title>
     </mat-card-header>
-
-    <img mat-card-image [src]="designModel?.logo || '//via.placeholder.com/200x300'" alt=""/>
+    <img mat-card-image (click)="navigate(designModel)" [src]="designModel?.logo || '//via.placeholder.com/200x300'"
+         alt=""/>
 
     <mat-card-actions>
-      <button mat-stroked-button color="primary">
-        <mat-icon>pageview</mat-icon>
-        View
-      </button>
+      <div style="text-align: center">
+        <button mat-stroked-button color="primary"
+                (click)="navigate(designModel)"><i class="material-icons">pageview</i> View
+        </button>
+        <button (click)="delete(designModel)" class="pattern-button" mat-stroked-button style="margin-left: 25px"
+                color="warn">
+          <i class="material-icons">delete</i>
+        </button>
+      </div>
     </mat-card-actions>
   </mat-card>
 </div>

src/app/design-model-module/component/design-model-management/design-model-management.component.scss

@@ -3,10 +3,16 @@
   word-break: break-word;
 }
 
-.mat-card-actions {
-  text-align: center;
+.mat-card-title {
+  width: 10rem;
+  word-break: break-word;
+  cursor: pointer;
+}
+
+.mat-card-image{
+  cursor: pointer;
 }
 
-.landing-card {
+.mat-card-avatar{
   cursor: pointer;
 }

src/app/design-model-module/component/design-model-management/design-model-management.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, NgZone, OnInit } from '@angular/core';
 import {
   CreateEditComponentDialogType,
   CreateEditPatternLanguageComponent
@@ -12,12 +12,15 @@ import { ToasterService } from 'angular2-toaster';
 import { Observable } from 'rxjs';
 import { DesignModelService } from '../../service/design-model.service';
 import { DesignModelResponse } from '../../model/hal/design-model-response';
+import { ActivatedRoute, Router } from "@angular/router";
+import { DesignModel } from "../../model/hal/design-model";
+import { DeleteConfirmationDialogComponent } from "../../../core/component/delete-confirmation-dialog/delete-confirmation-dialog.component";
 
 
 @Component({
   selector: 'pp-design-model-management',
   templateUrl: './design-model-management.component.html',
-  styleUrls: ['./design-model-management.component.scss']
+  styleUrls: [ './design-model-management.component.scss' ]
 })
 export class DesignModelManagementComponent implements OnInit {
 
@@ -27,7 +30,10 @@ export class DesignModelManagementComponent implements OnInit {
   constructor(private designModelService: DesignModelService,
               private dialog: MatDialog,
               private patternLanguageService: PatternLanguageService,
-              private toastService: ToasterService) {
+              private toastService: ToasterService,
+              private activatedRoute: ActivatedRoute,
+              private router: Router,
+              private zone: NgZone) {
   }
 
 
@@ -67,4 +73,29 @@ export class DesignModelManagementComponent implements OnInit {
         }
       );
   }
+
+  navigate(model: DesignModel): void {
+    this.zone.run(() => {
+      this.router.navigate([ model.id ], { relativeTo: this.activatedRoute });
+    })
+  }
+
+  delete(designModel: DesignModel) {
+    const dialogRef = this.dialog.open(DeleteConfirmationDialogComponent, {
+      data: {
+        name: designModel.name,
+      }
+    }).afterClosed().subscribe(dialogAnswer => {
+      if (dialogAnswer) {
+        this.designModelService.deleteDesignModel(designModel).subscribe((respone) => {
+          for (let i = 0; i < this.designModelResponse._embedded.designModels.length; i++) {
+            this.designModelResponse._embedded.designModels[i].id === designModel.id ? this.designModelResponse._embedded.designModels.splice(i, 1) : null;
+          }
+          this.toastService.pop('success', 'Design Model deleted!');
+        },(error) => {
+          this.toastService.pop('error', 'Design Model could not be deleted!');
+        });
+      }
+    })
+  }
 }

src/app/design-model-module/service/design-model.service.ts

@@ -232,4 +232,8 @@ export class DesignModelService implements GraphDataService, GraphDataSavePatter
 
     return of({ graph: graphNodes });
   }
+
+  deleteDesignModel(designModel: DesignModel){
+    return this.httpClient.delete(designModel._links.self.href);
+  }
 }

src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.html

@@ -17,11 +17,11 @@
 <div class="container">
   <mat-card class="landing-card" *ngFor="let patternLanguage of patternLanguages">
     <mat-card-header>
-      <img *ngIf="patternLanguage?.logo && patternLanguage?.logo !== ''; else noImageAvatar" mat-card-avatar
+      <img *ngIf="patternLanguage?.logo && patternLanguage?.logo !== ''; else noImageAvatar" mat-card-avatar  (click)="navigateToPL(patternLanguage)"
            [src]="patternLanguage.logo">
-      <ng-template #noImageAvatar><img mat-card-avatar [src]="'//via.placeholder.com/50x50'"></ng-template>
+      <ng-template #noImageAvatar><img mat-card-avatar [src]="'//via.placeholder.com/50x50'" (click)="navigateToPL(patternLanguage)"></ng-template>
 
-      <mat-card-title *ngIf="patternLanguage?.name && '' !== patternLanguage.name; else noPLName"
+      <mat-card-title *ngIf="patternLanguage?.name && '' !== patternLanguage.name; else noPLName" (click)="navigateToPL(patternLanguage)"
                       style="width: 10rem; word-break: break-word;">
         {{patternLanguage.name}}
       </mat-card-title>
@@ -31,13 +31,16 @@
         </mat-card-title>
       </ng-template>
     </mat-card-header>
-    <img mat-card-image *ngIf="patternLanguage?.logo && patternLanguage?.logo !== ''; else noImage"
+    <img mat-card-image (click)="navigateToPL(patternLanguage)" *ngIf="patternLanguage?.logo && patternLanguage?.logo !== ''; else noImage"
          [src]="patternLanguage.logo">
-    <ng-template #noImage><img mat-card-image [src]="'//via.placeholder.com/200x300'"></ng-template>
+    <ng-template #noImage><img mat-card-image (click)="navigateToPL(patternLanguage)" [src]="'//via.placeholder.com/200x300'"></ng-template>
     <mat-card-actions>
       <div style="text-align: center">
         <button matBadge="{{patternLanguage?.patternCount}}" mat-stroked-button color="primary"
-                (click)="navigateToPL(patternLanguage)"><i class="material-icons">pageview</i>View
+                (click)="navigateToPL(patternLanguage)"><i class="material-icons">pageview</i> View
+        </button>
+        <button (click)="delete(patternLanguage)" class="pattern-button" mat-stroked-button style="margin-left: 25px" color="warn">
+          <i class="material-icons">delete</i>
         </button>
       </div>
     </mat-card-actions>

src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.scss

@@ -22,3 +22,15 @@
   min-height: 20rem !important;
   min-width: 13rem !important;
 }
+
+.mat-card-title {
+  cursor: pointer;
+}
+
+.mat-card-image{
+  cursor: pointer;
+}
+
+.mat-card-avatar{
+  cursor: pointer;
+}