Contact details in Aurelia

Create a contact detail page in Aurelia. Includes using the router to create links as well as routing with a parameter.

Author: elanderson

ASP.NET Core Basics/src/Angular/wwwroot/dist/main-client.js

@@ -35,6 +35,13 @@ export class App {
             moduleId: '../contacts/contactList',
             nav: true,
             title: 'Contact List'
+        },
+        {
+            route: 'contact-detail/:id',
+            name: 'contactdetail',
+            moduleId: '../contacts/contactDetail',
+            nav: false,
+            title: 'Contact Detail'
         }]);
 
         this.router = router;

ASP.NET Core Basics/src/Angular/wwwroot/dist/main-client.js.map

@@ -0,0 +1,20 @@
+<template>
+    <h1>Contact Details</h1>
+    <hr />
+    <div if.bind="contact">
+        <dl class="dl-horizontal">
+            <dt>ID</dt>
+            <dd>${contact.id}</dd>
+            <dt>Name</dt>
+            <dd>${contact.name}</dd>
+            <dt>Address</dt>
+            <dd>${contact.getAddress()}</dd>
+            <dt>Phone</dt>
+            <dd>${contact.phone}</dd>
+            <dt>Email</dt>
+            <dd>${contact.email}</dd>
+        </dl>
+    </div>
+    <a route-href="route: contactlist">Back to List</a>
+    <hr />
+</template>

ASP.NET Core Basics/src/Aurelia/ClientApp/app/components/app/app.ts

@@ -0,0 +1,16 @@
+import { inject } from 'aurelia-framework';
+import { Contact } from './contact';
+import { ContactService } from './contactService';
+
+@inject(ContactService)
+export class ContactDetail {
+     contact: Contact;
+
+    constructor(private contactService: ContactService) { }
+
+    activate(parms, routeConfig) {
+        return this.contactService.getById(parms.id)
+            .then(contact => this.contact = contact);
+    }
+
+}

ASP.NET Core Basics/src/Aurelia/ClientApp/app/components/contacts/contactDetail.html

@@ -1,26 +1,23 @@
-<template>  
+<template>
     <h1>Contact List</h1>
 
     <p if.bind="!contacts"><em>Loading...</em></p>
 
     <table class="table" if.bind="contacts">
         <thead>
-            <tr>
-                <th>ID</th>
-                <th>Name</th>
-                <th>Address</th>
-                <th>Phone</th>
-                <th>Email</th>
-            </tr>
+        <tr>
+            <th>IDs</th>
+            <th>Name</th>
+            <th></th>
+        </tr>
         </thead>
         <tbody>
-            <tr repeat.for="contact of contacts">
-                <td>${contact.id}</td>
-                <td>${contact.name}</td>
-                <td>${contact.getAddress()}</td>
-                <td>${contact.phone}</td>
-                <td>${contact.email}</td>
-            </tr>
+        <tr repeat.for="contact of contacts" class="${contact.id === selectedContactId ? 'active' : ''" }>
+            <td>${contact.id}</td>
+            <td>${contact.name}</td>
+            <td><a route-href="route: contactdetail; params.bind: {id:contact.id}" click.delegate="select($contact)">Details</a></td>
+        </tr>
         </tbody>
     </table>
+    <hr />
 </template>

ASP.NET Core Basics/src/Aurelia/ClientApp/app/components/contacts/contactDetail.ts

@@ -5,11 +5,16 @@ import { ContactService } from './contactService';
 @inject(ContactService)
 export class ContactList {
     contacts: Contact[];
+    selectedContactId: number = null;
 
     constructor(private contactService: ContactService) {}
 
     created() {
         this.contactService.getAll()
             .then(contacts => this.contacts = contacts);
     }
+
+    select(contact) {
+        this.selectedContactId = contact.id;
+    }
 }

ASP.NET Core Basics/src/Aurelia/ClientApp/app/components/contacts/contactList.html

@@ -19,4 +19,11 @@ export class ContactService {
             .catch(error => console.log(error));
     }
 
+    getById(id: string): Promise<Contact> {
+        return this.http.fetch(id)
+            .then(response => response.json())
+            .then(contact => new Contact(contact))
+            .catch(error => console.log(error));
+    }
+
 }