Commit 2a08f235 authored by Alexander Philipp Nowosad's avatar Alexander Philipp Nowosad
Browse files

Add show pattern description

parent 3af2450d
...@@ -176,7 +176,7 @@ ...@@ -176,7 +176,7 @@
<h6>Used Patterns</h6> <h6>Used Patterns</h6>
<ul> <ul>
<li *ngFor="let pattern of conformance.usedPatterns"> <li *ngFor="let pattern of conformance.usedPatterns">
{{ pattern.name }} <app-pattern-view [pattern]="pattern"></app-pattern-view>
</li> </li>
</ul> </ul>
</div> </div>
......
...@@ -61,6 +61,8 @@ import { ApiNavigationComponent } from './api/api-navigation/api-navigation.comp ...@@ -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 { CanvasDefinitionRelationshipsFormComponent } from './canvas-definition/canvas-definition-relationships-form/canvas-definition-relationships-form.component';
import { CanvasElementsComponent } from './elements/canvas-elements/canvas-elements.component'; import { CanvasElementsComponent } from './elements/canvas-elements/canvas-elements.component';
import { CanvasDefinitionOverviewComponent } from './canvas-definition/canvas-definition-overview/canvas-definition-overview.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({ @NgModule({
providers: [ providers: [
...@@ -138,6 +140,8 @@ import { CanvasDefinitionOverviewComponent } from './canvas-definition/canvas-de ...@@ -138,6 +140,8 @@ import { CanvasDefinitionOverviewComponent } from './canvas-definition/canvas-de
InstanceListComponent, InstanceListComponent,
InstanceSelectPatternFormComponent, InstanceSelectPatternFormComponent,
PatternComponent, PatternComponent,
PatternDescriptionModalComponent,
PatternViewComponent,
// merge // merge
MergeExpertModelsComponent, MergeExpertModelsComponent,
......
...@@ -236,7 +236,7 @@ ...@@ -236,7 +236,7 @@
<h6>Used Patterns</h6> <h6>Used Patterns</h6>
<ul> <ul>
<li *ngFor="let pattern of conformance.usedPatterns"> <li *ngFor="let pattern of conformance.usedPatterns">
{{ pattern.name }} <app-pattern-view [pattern]="pattern"></app-pattern-view>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -270,7 +270,9 @@ ...@@ -270,7 +270,9 @@
<div *ngIf="usedPatterns" style="margin-top: 20px"> <div *ngIf="usedPatterns" style="margin-top: 20px">
<h6>Used Patterns</h6> <h6>Used Patterns</h6>
<ul> <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> </ul>
</div> </div>
</div> </div>
......
<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>
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();
}
}
<span class="btn btn-link p-0 border-0" (click)="openDescription()">{{
pattern.name
}}</span>
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;
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment