Commit 8b89d9cb authored by Alexander Philipp Nowosad's avatar Alexander Philipp Nowosad
Browse files

Add better formatting to instance list

parent 575bbf6f
Pipeline #139851 passed with stages
in 8 minutes and 45 seconds
......@@ -133,8 +133,8 @@
formTitle="Add Pattern Instance"
listTitle="Pattern Instances"
[instances]="getPatternInstances()"
[viewInstanceLink]="viewPattern"
(addInstance)="addInstance($event, getPatternInstanceType())"
(viewInstance)="viewPattern($event)"
(deleteInstance)="deleteInstance($event)"
></app-instance-list>
......@@ -143,8 +143,8 @@
formTitle="Add Example Instance"
listTitle="Example Instances"
[instances]="getExampleInstances()"
[viewInstanceLink]="viewExample"
(addInstance)="addInstance($event)"
(viewInstance)="viewExample($event)"
(deleteInstance)="deleteInstance($event)"
></app-instance-list>
</main>
import { Component } from '@angular/core';
import { ExpertModelService } from '../../../canvas-meta-model/expert-model.service';
import { Router } from '@angular/router';
import { ImportExportService } from '../../feature-model/import-export.service';
import { Instance, InstanceType } from '../../../canvas-meta-model/instance';
import { FormGroup } from '@angular/forms';
......@@ -17,8 +16,7 @@ export class ExpertModelComponent {
constructor(
private expertModelLoaderService: ExpertModelLoaderService,
private expertModelService: ExpertModelService,
private importExportService: ImportExportService,
private router: Router
private importExportService: ImportExportService
) {}
async exportModel() {
......@@ -53,30 +51,34 @@ export class ExpertModelComponent {
/**
* Navigate to a single business model.
*
* @param businessModelId id of the business model
* @param instance the pattern instance
* @return the navigation link
*/
async viewExample(businessModelId: number): Promise<void> {
await this.router.navigate([
viewExample = (instance: Instance): string[] => {
return [
'/',
'expertModels',
this.expertModel._id,
'examples',
businessModelId,
]);
}
instance.id.toString(),
];
};
/**
* Navigate to a component to view the pattern
*
* @param patternId the id of the pattern
* @param instance the pattern instance
* @return the navigation link
*/
async viewPattern(patternId: number): Promise<void> {
await this.router.navigate([
viewPattern = (instance: Instance): string[] => {
return [
'/',
'expertModels',
this.expertModel._id,
'patterns',
patternId,
]);
}
instance.id.toString(),
];
};
/**
* Delete an instance by id.
......
......@@ -3,32 +3,18 @@
<h6 class="border-bottom border-gray pb-2 mb-0">{{ listTitle }}</h6>
<ul class="list-group inner" style="margin: 5px">
<li
*ngFor="let instance of instances"
class="d-flex list-group-item justify-content-between align-items-center"
>
<span
>{{ instance.name }}
<small class="text-muted" *ngIf="instance.description">{{
instance.description
}}</small></span
<li *ngFor="let instance of instances" class="list-group-item">
<app-results-list-item
[viewLink]="viewInstanceLink(instance)"
(delete)="deleteInstance.emit(instance.id)"
>
<div>
<button
(click)="viewInstance.emit(instance.id)"
type="button"
class="btn btn-dark btn-xs"
>
View</button
>&nbsp;
<button
(click)="deleteInstance.emit(instance.id)"
type="button"
class="btn btn-danger btn-xs"
>
Delete
</button>
</div>
<ng-container itemTitle>
{{ instance.name }}
</ng-container>
<ng-container itemDescription>
{{ instance.description }}
</ng-container>
</app-results-list-item>
</li>
</ul>
</div>
......
......@@ -12,8 +12,9 @@ export class InstanceListComponent implements OnInit {
@Input() listTitle: string;
@Input() instances: Instance[];
@Input() viewInstanceLink: (instance: Instance) => string[];
@Output() addInstance = new EventEmitter<FormGroup>();
@Output() viewInstance = new EventEmitter<number>();
@Output() deleteInstance = new EventEmitter<number>();
instanceForm: FormGroup;
......
Markdown is supported
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