From e7b42a14d0027e85c8a041829accc8f0dcdf8d7e Mon Sep 17 00:00:00 2001
From: Joe Fleming <joe.fleming@gmail.com>
Date: Tue, 31 Jan 2017 20:27:39 -0700
Subject: [PATCH] customer list cards view

---
 src/App.vue                     |  2 ++
 src/components/CustomerCard.vue | 50 +++++++++++++++++++++++++++++++++
 src/containers/Customers.vue    | 35 +++++++++++++++++++++--
 3 files changed, 84 insertions(+), 3 deletions(-)
 create mode 100644 src/components/CustomerCard.vue

diff --git a/src/App.vue b/src/App.vue
index e500b08..8e3b1c3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -69,8 +69,10 @@
   @import '~bulma/sass/base/_all'
   @import '~bulma/sass/layout/section'
   @import '~bulma/sass/components/nav'
+  @import '~bulma/sass/components/card'
   @import '~bulma/sass/elements/button'
   @import '~bulma/sass/elements/other'
+  @import '~bulma/sass/grid/columns'
 
   @import '~font-awesome/css/font-awesome.css';
 </style>
diff --git a/src/components/CustomerCard.vue b/src/components/CustomerCard.vue
new file mode 100644
index 0000000..14099dd
--- /dev/null
+++ b/src/components/CustomerCard.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="card">
+    <header class="card-header">
+      <p class="card-header-title">
+        {{ this.name }}
+      </p>
+    </header>
+    <div class="card-content">
+      <div class="content">
+        <div>XX orders</div>
+        <div><a href="" target="_blank">{{ customer.email }}</a></div>
+        <small>{{ customer.city }}, {{ customer.state }}</small>
+      </div>
+    </div>
+    <footer class="card-footer">
+      <a class="card-footer-item">Save</a>
+      <a class="card-footer-item">Edit</a>
+      <a class="card-footer-item">Delete</a>
+    </footer>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'CustomerCard',
+    props: {
+      customer: {
+        type: Object,
+        required: true,
+        validator(value) {
+          const props = [
+            'firstname',
+            'lastname',
+            'city',
+            'state',
+            'email',
+          ];
+
+          return props.every(prop => !!value[prop]);
+        }
+      }
+    },
+    computed: {
+      name() {
+        console.og
+        return `${this.customer.firstname} ${this.customer.lastname}`;
+      },
+    },
+  }
+</script>
\ No newline at end of file
diff --git a/src/containers/Customers.vue b/src/containers/Customers.vue
index 370af57..f4755f8 100644
--- a/src/containers/Customers.vue
+++ b/src/containers/Customers.vue
@@ -1,15 +1,44 @@
 <template>
   <section class="section">
     <div class="container">
-      <div class="notification">
-        Customer list will go here
+      <h1>Customers</h1>
+
+      <div class="columns is-multiline">
+        <div class="column is-one-third" v-for="customer in customers">
+          <CustomerCard :customer="customer">
+        </div>
       </div>
+
     </div>
   </section>
 </template>
 
 <script>
-  export default {
+  import CustomerCard from '../components/CustomerCard.vue';
 
+  export default {
+    name: 'Customer',
+    components: {
+      CustomerCard
+    },
+    data() {
+      const mockCustomer = (num) => ({
+        firstname: 'John',
+        lastname: `Doe${num}`,
+        city: 'cityton',
+        state: 'AZ',
+        email: 'john@email.com',
+      });
+
+      return {
+        customers: [
+          mockCustomer(1),
+          mockCustomer(2),
+          mockCustomer(3),
+          mockCustomer(4),
+          mockCustomer(5),
+        ],
+      }
+    },
   }
 </script>
\ No newline at end of file