fullstendig søk

src/App.vue

@@ -4,13 +4,15 @@
     <div class="">
       <autocomplete :search="search" :get-result-value="result_view" @submit="select_result" placeholder="søk..."></autocomplete>
     </div>
+    <SearchResults :hits="search_results" />
     <Article :article="article" />
   </div>
 </template>
 
 <script>
-import axios from "axios";
+import axios from "axios"
 import Article from './components/Article.vue'
+import SearchResults from './components/SearchResults.vue'
 import Autocomplete from '@trevoreyre/autocomplete-vue'
 import '@trevoreyre/autocomplete-vue/dist/style.css'
 
@@ -28,6 +30,8 @@ export default {
   data: function() {
     return {
       article_id: parseInt(window.location.href.split("/").pop()),
+      search_query: window.location.href.split("?q=")[1],
+      search_results: [],
       article: {lemmas: []},
       search: function(q) {
         return new Promise(resolve => {
@@ -41,32 +45,53 @@ export default {
                                     }
                                   }
                                 }
-                              }).then(response => resolve(response.data.suggest.suggest[0].options))
+                              }).then(function(response) {
+                                let hits = response.data.suggest.suggest[0].options
+                                if(q.length) hits = hits.concat({q: q})
+                                resolve(hits)
+                              })
         })
       },
       result_view: function(result) {
-        return result._source.lemmas.map(x => x.word).join(', ')
+        if (result._source)
+          return result._source.lemmas.map(x => x.word).join(', ')
+        else
+          return 'Alle søkeresultater...'
       }
     }
   },
   components: {
     Article,
-    Autocomplete
+    Autocomplete,
+    SearchResults
   },
   methods: {
     select_result: function(event) {
-      this.article = event._source
-      history.pushState(this.article, this.article.lemmas.map(x => x.word).join(', '), event._id)
+      if(event._source){
+        this.search_results = []
+        this.article = event._source
+        history.pushState(this.article, this.article.lemmas.map(x => x.word).join(', '), event._id)
+      }else{
+        window.location.href="search?q=" + event.q
+      }
     }
   },
   mounted: function(){
     var self = this;
-    axios.get('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_doc/' + self.article_id)
+    if(this.search_query) {
+      axios.get('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_search?q=' + self.search_query)
+      .then(function(response){
+        self.search_results = response.data.hits.hits
+      })
+    }
+    else
+    {
+      axios.get('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_doc/' + self.article_id)
       .then(function(response){
         self.article = response.data._source
         history.replaceState(self.article, self.article.lemmas.map(x => x.word).join(', '))
       })
-
+    }
   }
 }
 </script>
@@ -79,6 +104,7 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
   margin-left: 30%;
+  margin-right: 10%;
 }
 
 .autocomplete {

src/components/Article.vue

 <template>
-  <div class="article">
+  <div class="article" v-show="article.lemmas.length">
     <Header :lemmas="article.lemmas" />
-    <div class="">
+    <div class="" v-if="article.etymology">
       <h3>Etymologi</h3>
         <ul>
           <DefElement v-for="(element, index) in article.etymology" :key="index" :body='element' v-if="element.content" />

src/components/Header.vue

@@ -19,9 +19,10 @@
 </template>
 
 <script>
-import VueTooltipster from './vue-tooltipster.vue';
-import jQuery from 'jquery';
-window.jQuery = jQuery;
+import helpers from '../utils/helpers.js'
+import VueTooltipster from './vue-tooltipster.vue'
+import jQuery from 'jquery'
+window.jQuery = jQuery
 
 export default {
   name: 'Header',
@@ -37,13 +38,7 @@ export default {
       ).join(', ')
     },
     group_list: function() {
-      var grp_collection = new Set()
-      this.lemmas.forEach(function(lemma){
-        lemma.inflection_groups.forEach(function(grp){
-          grp_collection.add(grp.group_designation)
-        })
-      })
-      return Array.from(grp_collection).join(';')
+      return helpers.group_list(this.lemmas)
     }
   },
   components: {

src/components/SearchResults.vue

+<template>
+  <div class="">
+    <h2 v-if="hits.length">Søkeresultater</h2>
+    <ul>
+      <li v-for="result in extended_results">
+        <a :href="result.id">{{result.label}}</a> ({{result.classification}})
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import helpers from '../utils/helpers.js'
+export default {
+  name: 'SearchResults',
+  props: {
+    hits: Array
+  },
+  computed: {
+    extended_results: function(){
+      return this.hits.map(
+        function(hit){
+          return {
+              id: hit._id,
+              label: hit._source.lemmas.map(x => x.word).join(', '),
+              article: hit._source,
+              classification: helpers.group_list(hit._source.lemmas)
+          }
+      })
+    }
+  }
+}
+
+</script>

src/utils/helpers.js

+var group_list = function(grps) {
+  var grp_collection = new Set()
+  grps.forEach(function(lemma){
+    lemma.inflection_groups.forEach(function(grp){
+      grp_collection.add(grp.group_designation)
+    })
+  })
+  return Array.from(grp_collection).join(';')
+}
+
+export default { group_list}