From 2280d2f2707ba12e2e11d5049fbc2528e0c0d540 Mon Sep 17 00:00:00 2001
From: Lee Richmond <lrichmond1@bloomberg.net>
Date: Fri, 16 Feb 2018 11:00:54 -0500
Subject: [PATCH] Add basic data grid

---
 src/main.vue                  |  7 +++++-
 src/views/employee-search.vue | 45 +++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 src/views/employee-search.vue

diff --git a/src/main.vue b/src/main.vue
index e5a714d..2a56f9d 100644
--- a/src/main.vue
+++ b/src/main.vue
@@ -1,12 +1,17 @@
 <template>
   <div id="app">
+    <employee-search />
   </div>
 </template>
 
 <script lang="ts">
-import Vue, { VueConstructor } from 'vue'
+import Vue, { VueConstructor } from "vue"
+import EmployeeSearch from "@/views/employee-search.vue"
 
 export default Vue.extend({
+  components: {
+    EmployeeSearch
+  },
   data() {
     return { }
   }
diff --git a/src/views/employee-search.vue b/src/views/employee-search.vue
new file mode 100644
index 0000000..b6391ae
--- /dev/null
+++ b/src/views/employee-search.vue
@@ -0,0 +1,45 @@
+<template>
+    <div class="card search">
+      <h1>Employee Directory</h1>
+
+      <table class="table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Age</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr v-for="employee in employees" :key="employee.id">
+            <td>{{ employee.firstName }} {{ employee.lastName }}</td>
+            <td>{{ employee.age }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue"
+import { Employee } from "@/models"
+
+export default Vue.extend({
+  data() {
+    return {
+      employees: [] as Employee[]
+    }
+  },
+  created() {
+    this.search()
+  },
+  methods: {
+    async search() {
+      this.employees = (await Employee.all()).data
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file