Aurelia contact creation

Author: elanderson

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

@@ -8,7 +8,8 @@
     phone: string;
     email: string;
 
-    constructor(data) {
+    constructor(data?) {
+        if (data == null) return;
         Object.assign(this, data);
     }
 

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

@@ -1,7 +1,7 @@
 <template>
     <h1>Contact Details</h1>
     <hr />
-    <div if.bind="contact">
+    <div if.bind="hasContactId">
         <dl class="dl-horizontal">
             <dt>ID</dt>
             <dd>${contact.id}</dd>
@@ -15,9 +15,60 @@ <h1>Contact Details</h1>
             <dd>${contact.email}</dd>
         </dl>
     </div>
-    <h3 if.bind="!hasContactId">
-        Place holder for creating a new contact
-    </h3>
-    <a route-href="route: contactlist">Back to List</a>
+    <div if.bind="!hasContactId">
+        <div>
+            <form role="form" class="form-horizontal">
+                <div class="form-group">
+                    <label class="col-sm-2 control-label">Name</label>
+                    <div class="col-sm-10">
+                        <input type="text" placeholder="name" class="form-control" value.bind="contact.name" />
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label">Address</label>
+                    <div class="col-sm-10">
+                        <input type="text" placeholder="address" class="form-control" value.bind="contact.address" />
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label">City</label>
+                    <div class="col-sm-10">
+                        <input type="text" placeholder="city" class="form-control" value.bind="contact.city" />
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label">State</label>
+                    <div class="col-sm-10">
+                        <input type="text" placeholder="state" class="form-control" value.bind="contact.state" />
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label">Zip</label>
+                    <div class="col-sm-10">
+                        <input type="text" placeholder="zip" class="form-control" value.bind="contact.postalCode" />
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label">Phone</label>
+                    <div class="col-sm-10">
+                        <input type="text" placeholder="phone" class="form-control" value.bind="contact.phone" />
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label">Email</label>
+                    <div class="col-sm-10">
+                        <input type="email" placeholder="email" class="form-control" value.bind="contact.email" />
+                    </div>
+                </div>
+            </form>
+        </div>
+        <div class="text-center">
+            <button class="btn btn-success btn-lg" click.delegate="save()">Save</button>
+            <button class="btn btn-danger btn-lg" click.delegate="reset()">Reset</button>
+        </div>
+    </div>
+    <div>
+        <a route-href="route: contactlist">Back to List</a>
+    </div>
     <hr />
 </template>

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

@@ -4,7 +4,7 @@ import { ContactService } from './contactService';
 
 @inject(ContactService)
 export class ContactDetail {
-     contact: Contact;
+     contact: Contact = new Contact();
      hasContactId: boolean;
 
     constructor(private contactService: ContactService) { }
@@ -18,7 +18,16 @@ export class ContactDetail {
         }
 
         return null;
+    }
+
+    reset() {
+        this.contact = new Contact();
+    }
 
+    save() {
+        this.contactService.save(this.contact)
+            .then(contact => this.contact = contact)
+            .then(() => this.hasContactId = true);
     }
 
 }

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

@@ -1,4 +1,4 @@
-import { HttpClient } from 'aurelia-fetch-client';
+import { HttpClient, json } from 'aurelia-fetch-client';
 import { inject } from 'aurelia-framework';
 import { Contact } from './contact';
 
@@ -12,7 +12,7 @@ export class ContactService {
         });
     }
 
-    getAll() : Promise<Contact[]> {
+    getAll(): Promise<Contact[]> {
         return this.http.fetch('')
             .then(response => response.json())
             .then(contacts => Array.from(contacts, c => new Contact(c)))
@@ -26,4 +26,15 @@ export class ContactService {
             .catch(error => console.log(error));
     }
 
+    save(contact: Contact): Promise<Contact> {
+        return this.http.fetch('',
+            {
+                method: 'post',
+                body: json(contact)
+            })
+            .then(response => response.json())
+            .then(contact => new Contact(contact))
+            .catch(error => console.log(error));
+    }
+
 }