Add show pattern description

src/app/canvas/api/refine-canvas/refine-canvas.component.html

@@ -176,7 +176,7 @@
               <h6>Used Patterns</h6>
               <ul>
                 <li *ngFor="let pattern of conformance.usedPatterns">
-                  {{ pattern.name }}
+                  <app-pattern-view [pattern]="pattern"></app-pattern-view>
                 </li>
               </ul>
             </div>

src/app/canvas/canvas.module.ts

@@ -61,6 +61,8 @@ import { ApiNavigationComponent } from './api/api-navigation/api-navigation.comp
 import { CanvasDefinitionRelationshipsFormComponent } from './canvas-definition/canvas-definition-relationships-form/canvas-definition-relationships-form.component';
 import { CanvasElementsComponent } from './elements/canvas-elements/canvas-elements.component';
 import { CanvasDefinitionOverviewComponent } from './canvas-definition/canvas-definition-overview/canvas-definition-overview.component';
+import { PatternDescriptionModalComponent } from './instances/pattern-description-modal/pattern-description-modal.component';
+import { PatternViewComponent } from './instances/pattern-view/pattern-view.component';
 
 @NgModule({
   providers: [
@@ -138,6 +140,8 @@ import { CanvasDefinitionOverviewComponent } from './canvas-definition/canvas-de
     InstanceListComponent,
     InstanceSelectPatternFormComponent,
     PatternComponent,
+    PatternDescriptionModalComponent,
+    PatternViewComponent,
 
     // merge
     MergeExpertModelsComponent,

src/app/canvas/instances/example/example.component.html

@@ -236,7 +236,7 @@
               <h6>Used Patterns</h6>
               <ul>
                 <li *ngFor="let pattern of conformance.usedPatterns">
-                  {{ pattern.name }}
+                  <app-pattern-view [pattern]="pattern"></app-pattern-view>
                 </li>
               </ul>
             </div>
@@ -270,7 +270,9 @@
       <div *ngIf="usedPatterns" style="margin-top: 20px">
         <h6>Used Patterns</h6>
         <ul>
-          <li *ngFor="let pattern of usedPatterns">{{ pattern.name }}</li>
+          <li *ngFor="let pattern of usedPatterns">
+            <app-pattern-view [pattern]="pattern"></app-pattern-view>
+          </li>
         </ul>
       </div>
     </div>

src/app/canvas/instances/pattern-description-modal/pattern-description-modal.component.html

+<div class="modal-header">
+  <h4 class="modal-title">Description of pattern {{ pattern.name }}</h4>
+  <button type="button" class="close" aria-label="Close" (click)="dismiss()">
+    <span aria-hidden="true">&times;</span>
+    <span class="sr-only">Close Window</span>
+  </button>
+</div>
+<div class="modal-body">
+  {{ pattern.description }}
+</div>
+<div class="modal-footer d-flex">
+  <button type="button" class="btn btn-dark ml-auto" (click)="dismiss()">
+    Close
+  </button>
+</div>

src/app/canvas/instances/pattern-description-modal/pattern-description-modal.component.ts

+import { Component, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { Instance } from '../../../canvas-meta-model/instance';
+
+@Component({
+  selector: 'app-pattern-description-modal',
+  templateUrl: './pattern-description-modal.component.html',
+  styleUrls: ['./pattern-description-modal.component.css'],
+})
+export class PatternDescriptionModalComponent {
+  @Input() pattern: Instance;
+
+  constructor(private activeModal: NgbActiveModal) {}
+
+  dismiss(): void {
+    this.activeModal.dismiss();
+  }
+}

src/app/canvas/instances/pattern-view/pattern-view.component.html

+<span class="btn btn-link p-0 border-0" (click)="openDescription()">{{
+  pattern.name
+}}</span>

src/app/canvas/instances/pattern-view/pattern-view.component.ts

+import { Component, Input } from '@angular/core';
+import { Instance } from '../../../canvas-meta-model/instance';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { PatternDescriptionModalComponent } from '../pattern-description-modal/pattern-description-modal.component';
+
+@Component({
+  selector: 'app-pattern-view',
+  templateUrl: './pattern-view.component.html',
+  styleUrls: ['./pattern-view.component.css'],
+})
+export class PatternViewComponent {
+  @Input() pattern: Instance;
+
+  constructor(private modalService: NgbModal) {}
+
+  openDescription(): void {
+    const modal = this.modalService.open(PatternDescriptionModalComponent, {
+      size: 'lg',
+    });
+    modal.componentInstance.pattern = this.pattern;
+  }
+}