Add events to add characters and achievements to progress table

client/src/components/Achievement.vue

@@ -10,11 +10,12 @@
             <typeahead placeholder="Search achievement..."
                       :async="apiEndpoint + '/search/'"
                       :template="template"
-                      :on-hit="callback">
+                      :on-hit="callback"
+                      v-model="selectText">
             </typeahead>
           </div>
         </div>
-        <button class="btn btn-block btn-primary">Add</button>
+        <button @click="addAchievement" class="btn btn-block btn-primary">Add</button>
       </form>
     </div>
   </div>
@@ -28,18 +29,23 @@ export default {
   data () {
     return {
       achievements: [],
+      selected: {},
+      selectText: '',
       asynchronous: '{{item.title}}',
       template: '<img :src=\'"http://media.blizzard.com/wow/icons/18/" + item.icon + ".jpg"\' /> <span>{{item.title}}</span>'
     }
   },
   methods: {
     callback: function (item) {
+      this.selected = item
       return item.title
+    },
+    addAchievement: function () {
+      this.$emit('add-achievement', this.selected)
+      this.selected = {}
+      this.selectText = ''
     }
   },
-  mounted: function () {
-    this.getAchievements()
-  },
   components: {
     typeahead
   }

client/src/components/Character.vue

@@ -29,7 +29,7 @@
         <div class="form-group">
           <input class="form-control" placeholder="Character name" v-model="name" autofocus="" type="text">
         </div>
-        <button class="btn btn-block btn-primary">Add <i class="fa fa-plus"></i></button>
+        <button @click="addCharacter" class="btn btn-block btn-primary">Add <i class="fa fa-plus"></i></button>
       </form>
     </div>
   </div>
@@ -68,6 +68,14 @@ export default {
         }, response => {
           console.error(response)
         })
+    },
+    addCharacter: function () {
+      this.$http.get([this.apiEndpoint, 'character', this.region.value, this.realm.value, this.name].join('/'))
+        .then(response => {
+          this.$emit('add-character', response.body)
+        }, response => {
+          console.error(response)
+        })
     }
   },
   watch: {

client/src/components/Main.vue

@@ -2,15 +2,18 @@
   <div class="container">
     <div class="row">
       <div class="col-md-4 col-md-offset-2">
-        <character></character>
+        <character @add-character="addCharacter"></character>
       </div>
       <div class="col-md-4">
-        <achievement></achievement>
+        <achievement @add-achievement="addAchievement"></achievement>
       </div>
     </div>
     <div class="row">
       <div class="col-md-12">
-        <progress-table></progress-table>
+        <progress-table
+            :characters="characters"
+            :achievements="achievements"
+        ></progress-table>
       </div>
     </div>
   </div>
@@ -25,6 +28,16 @@ export default {
   name: 'main',
   data () {
     return {
+      characters: [],
+      achievements: []
+    }
+  },
+  methods: {
+    addCharacter: function (character) {
+      this.characters.push(character)
+    },
+    addAchievement: function (achievement) {
+      this.achievements.push(achievement)
     }
   },
   components: {

client/src/components/ProgressTable.vue

@@ -5,17 +5,17 @@
         <th>
           Character
         </th>
-        <th>
-          Progress
+        <th v-for="achievement in achievements">
+          {{achievement.title}}
         </th>
       </tr>
     </thead>
     <tbody>
-      <tr>
+      <tr v-for="character in characters">
         <td>
-          Example
+          {{character.name}}
         </td>
-        <td>
+        <td v-for="achievement in achievements">
           <progressbar now=10 label type="success"></progressbar>
         </td>
       </tr>
@@ -28,12 +28,7 @@ import { progressbar } from 'vue-strap'
 
 export default {
   name: 'progress-table',
-  data () {
-    return {
-      characters: [],
-      achievements: []
-    }
-  },
+  props: ['characters', 'achievements'],
   components: {
     progressbar
   }