From 5bf0aa24a085934f5429f5c36828a625d547f873 Mon Sep 17 00:00:00 2001
From: Joe Fleming <joe.fleming@gmail.com>
Date: Mon, 20 Feb 2017 14:09:29 -0700
Subject: [PATCH] add customer table and row components

---
 src/App.vue                      |  1 +
 src/components/CustomerRow.vue   | 36 ++++++++++++++++++++++++++++++++
 src/components/CustomerTable.vue | 23 ++++++++++++++++++++
 3 files changed, 60 insertions(+)
 create mode 100644 src/components/CustomerRow.vue
 create mode 100644 src/components/CustomerTable.vue

diff --git a/src/App.vue b/src/App.vue
index 4d55eb9..c37d2d6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -69,6 +69,7 @@
   @import '~bulma/sass/components/card'
   @import '~bulma/sass/elements/button'
   @import '~bulma/sass/elements/form'
+  @import '~bulma/sass/elements/table'
   @import '~bulma/sass/elements/icon'
   @import '~bulma/sass/elements/notification'
   @import '~bulma/sass/elements/other'
diff --git a/src/components/CustomerRow.vue b/src/components/CustomerRow.vue
new file mode 100644
index 0000000..7e42c91
--- /dev/null
+++ b/src/components/CustomerRow.vue
@@ -0,0 +1,36 @@
+<template>
+    <tr>
+      <td>{{ this.name }}</td>
+      <td>{{ customer.email }}</td>
+      <td>{{ customer.city }}, {{ customer.state }}</td>
+      <td></td>
+    </tr>
+</template>
+
+<script>
+  export default {
+    name: 'customer-row',
+    props: {
+      customer: {
+        type: Object,
+        required: true,
+        validator(value) {
+          const props = [
+            'firstname',
+            'lastname',
+            'email',
+            'city',
+            'state',
+          ];
+
+          return props.every(prop => !!value[prop]);
+        }
+      }
+    },
+    computed: {
+      name() {
+        return `${this.customer.firstname} ${this.customer.lastname}`;
+      },
+    },
+  }
+</script>
\ No newline at end of file
diff --git a/src/components/CustomerTable.vue b/src/components/CustomerTable.vue
new file mode 100644
index 0000000..98c8eff
--- /dev/null
+++ b/src/components/CustomerTable.vue
@@ -0,0 +1,23 @@
+<template>
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Email</th>
+        <th>City</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <slot>
+        <td rowspan="4">No Customers</td>
+      </slot>
+    </tbody>
+  </table>
+</template>
+
+<script>
+  export default {
+    name: 'customer-table',
+  }
+</script>
\ No newline at end of file