Add better formatting to instance list

src/app/canvas/expert-model/expert-model/expert-model.component.html

@@ -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>

src/app/canvas/expert-model/expert-model/expert-model.component.ts

 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.

src/app/canvas/instances/instance-list/instance-list.component.html

@@ -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>

src/app/canvas/instances/instance-list/instance-list.component.ts

@@ -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;