From 53ee1511b95d405ed6d251d412e4bcd2ad23e670 Mon Sep 17 00:00:00 2001
From: Joe Fleming <joe.fleming@gmail.com>
Date: Wed, 22 Mar 2017 11:12:40 -0700
Subject: [PATCH] add links to view and edit

---
 src/components/CustomerCard.vue | 10 ++++++----
 src/components/CustomerRow.vue  | 12 ++++++++----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/CustomerCard.vue b/src/components/CustomerCard.vue
index 4cd31fe..9a398f2 100644
--- a/src/components/CustomerCard.vue
+++ b/src/components/CustomerCard.vue
@@ -2,7 +2,9 @@
   <div class="card">
     <header class="card-header">
       <p class="card-header-title">
-        {{ this.name }}
+        <router-link :to="{ name: 'customer-view', params: { id: customer.id } }">
+          {{ this.name }}
+        </router-link>
       </p>
     </header>
     <div class="card-content">
@@ -13,12 +15,12 @@
       </div>
     </div>
     <footer class="card-footer">
-      <a class="card-footer-item">
+      <router-link class="card-footer-item" :to="{ name: 'customer-edit', params: { id: customer.id } }">
         <span class="icon is-small">
           <i class="fa fa-pencil"></i>
         </span>
-        <span>&nbsp;Edit</span>
-      </a>
+        &nbsp;Edit
+      </router-link>
       <a class="card-footer-item">
         <span class="icon is-small">
           <i class="fa fa-trash"></i>
diff --git a/src/components/CustomerRow.vue b/src/components/CustomerRow.vue
index 0158b5f..b3d43f6 100644
--- a/src/components/CustomerRow.vue
+++ b/src/components/CustomerRow.vue
@@ -1,17 +1,21 @@
 <template>
     <tr>
-      <td>{{ this.name }}</td>
+      <td>
+        <router-link :to="{ name: 'customer-view', params: { id: customer.id } }">
+          {{ this.name }}
+        </router-link>
+      </td>
       <td>{{ customer.email }}</td>
       <td>{{ customer.city }}, {{ customer.state }}</td>
       <td>XX</td>
       <td>
         <div class="control has-addons is-pulled-right">
-          <a class="button is-outlined is-primary">
+          <router-link class="button is-outlined is-primary" :to="{ name: 'customer-edit', params: { id: customer.id } }">
             <span class="icon is-small">
               <i class="fa fa-pencil"></i>
             </span>
-            <span>Edit</span>
-          </a>
+            &nbsp;Edit
+          </router-link>
           <a class="button is-outlined is-primary">
             <span class="icon is-small">
               <i class="fa fa-trash"></i>