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