feat(autocomplete) add component

scopalaffairs · Apr 28, 2019 · 9aa7326 · 9aa7326
1 parent 890a46b
commit 9aa7326
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 2 deletions.
diff --git a/frontend/app/package.json b/frontend/app/package.json
@@ -26,6 +26,7 @@
         "tiptap-editor": "^1.1.4",
         "tiptap-extensions": "^1.14.0",
         "truncate": "^2.0.1",
+        "v-autocomplete": "^1.8.2",
         "vue": "^2.6.10",
         "vue-axios": "^2.1.4",
         "vue-carousel": "^0.18.0",

diff --git a/frontend/app/src/views/templates/blog/ItemTemplate.vue b/frontend/app/src/views/templates/blog/ItemTemplate.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <b>#{{item.id}}</b>
+    <span>{{ item.name }}</span>
+    <abbr>{{item.description}}</abbr>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    item: { required: true },
+    searchText: { required: true }
+  }
+}
+</script>
diff --git a/frontend/app/src/views/templates/blog/blog-list.vue b/frontend/app/src/views/templates/blog/blog-list.vue
@@ -3,13 +3,18 @@
         <fetch-json url="http://localhost:5000/api/v1/blogposts">
             <div class="" slot-scope="{ response: posts, loading }">
                 <h1 class=""></h1>
+                <template>
+                    <v-autocomplete :items="posts" v-model="post" :get-label="getLabel" :component-item='template'
+                                    @update-items="updateItems">
+                    </v-autocomplete>
+                </template>
                 <div v-if="loading" class="text-grey-darker">
                     Loading...
                 </div>
                 <div v-else>
                     <div class="post__card" v-for="post in posts" v-bind:key="post.id">
                         <div class="post__card--image">
-                                <img :src="post.header_img"/>
+                            <img :src="post.header_img"/>
                         </div>
                         <div class="post__card--category">{{ post.category }}</div>
                         <div class="post__card--title">{{ post.title }}</div>
@@ -47,11 +52,14 @@
     import axios from 'axios'
     import moment from 'moment'
     import Truncate from 'truncate'
+    import ItemTemplate from './ItemTemplate.vue'
+    import VAutocomplete from 'v-autocomplete'
 
 
     export default {
         components: {
-            FetchJson
+            FetchJson,
+            VAutocomplete
         },
         data() {
             return {posts: []}
@@ -62,6 +70,14 @@
             })
         },
         methods: {
+            getLabel(post) {
+                return post.name
+            },
+            updateItems(text) {
+                yourGetItemsMethod(text).then((response) => {
+                    this.post = response
+                })
+            },
             truncate: function (description) {
                 return Truncate(description, 140)
             },