refs meta#30 Støtter API-en og artikkelformatet utenom bøyninger. Mangler søkeknapp

src/App.vue

@@ -2,7 +2,9 @@
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
     <div class="">
-      <autocomplete auto-select="true" :search="search" :get-result-value="result_view" @submit="select_result" placeholder="søk..."></autocomplete>
+      <form class="" action="search" method="get">
+        <input placeholder="Søk..." name="q" />
+      </form>
     </div>
     <SearchResults :hits="search_results" />
     <Article :article="article" />
@@ -13,17 +15,10 @@
 import axios from "axios"
 import Article from './components/Article.vue'
 import SearchResults from './components/SearchResults.vue'
-import Autocomplete from '@trevoreyre/autocomplete-vue'
+//import Autocomplete from '@trevoreyre/autocomplete-vue'
 import '@trevoreyre/autocomplete-vue/dist/style.css'
 
-window.onpopstate = function (event) {
-  if (event.state) {
-    console.log(event)
-    app.__vue__._data.article = event.state
-  } else {
-    console.log(event)
-  }
-}
+var api_endpoint = 'https://ordbok-dev.aws.uib.no/api/dict/nob/article'
 
 export default {
   name: 'app',
@@ -32,10 +27,10 @@ export default {
       article_id: parseInt(window.location.href.split("/").pop()),
       search_query: window.location.href.split("?q=")[1],
       search_results: [],
-      article: {lemmas: []},
+      article: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}},
       search: function(q) {
         return new Promise(resolve => {
-          return axios.post('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_search/',
+          return axios.post(api_endpoint + '_search/',
                             {
                                 "suggest": {
                                   "suggest" : {
@@ -62,7 +57,7 @@ export default {
   },
   components: {
     Article,
-    Autocomplete,
+    //Autocomplete,
     SearchResults
   },
   methods: {
@@ -70,7 +65,6 @@ export default {
       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
       }
@@ -79,17 +73,16 @@ export default {
   mounted: function(){
     var self = this;
     if(this.search_query) {
-      axios.get('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_search?q=' + self.search_query)
+      axios.get(api_endpoint + '?expand_lemmas=true&lemma_text=' + self.search_query)
       .then(function(response){
-        self.search_results = response.data.hits.hits
+        self.search_results = response.data
       })
     }
     else
     {
-      axios.get('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_doc/' + self.article_id)
+      axios.get(api_endpoint + '/' + self.article_id + '?expand_lemmas=true&expand_refs=true')
       .then(function(response){
-        self.article = response.data._source
-        history.replaceState(self.article, self.article.lemmas.map(x => x.word).join(', '))
+        self.article = response.data
       })
     }
   }

src/components/Article.vue

 <template>
   <div class="article" v-show="article.lemmas.length">
     <Header :lemmas="article.lemmas" />
-    <div class="" v-if="article.pronounciation.length">
+    <div class="" v-if="article.body.pronunciation.length">
       <h3>Uttale</h3>
         <ul>
-          <DefElement v-for="(element, index) in article.pronounciation" :key="index" :body='element' v-if="element.content" />
+          <DefElement v-for="(element, index) in article.body.pronunciation" :key="index" :body='element' v-if="element.content" />
         </ul>
     </div>
-    <div class="" v-if="article.etymology">
+    <div class="" v-if="article.body.etymology">
       <h3>Etymologi</h3>
         <ul>
-          <DefElement v-for="(element, index) in article.etymology" :key="index" :body='element' v-if="element.content" />
+          <DefElement v-for="(element, index) in article.body.etymology" :key="index" :body='element' v-if="element.content" />
         </ul>
     </div>
     <div class="">
       <h3>Definisjoner</h3>
       <ol>
-        <Definition v-for="(definition, index) in article.definitions" :key="index" :body='definition' />
+        <Definition v-for="(definition, index) in definitions" :key="index" :body='definition' />
       </ol>
     </div>
   </div>
@@ -37,6 +37,18 @@ export default {
     DefElement,
     Definition,
     Header
+  },
+  computed: {
+    definitions: function() {
+      let defs = this.article.body.definitions
+      if (defs.length == 1) {
+        let types = defs[0].elements.reduce((acc, toAdd)=>acc.add(toAdd.type_), new Set())
+        if (types.size == 1 && types.has('definition')) {
+          return defs[0].elements
+        }
+      }
+      return defs
+    }
   }
 }
 </script>

src/components/CompoundList.vue

+<template>
+  <li class="compound_list">
+    <ul>
+      <DefElement :body="body.intro" v-if="body.intro" />
+      <li :key="index" v-for="(item, index) in body.elements">
+        <a :href="item.article_id + (item.definition_id ? '#def'+item.definition_id : '')"> {{item.lemmas.join(',')}};</a>
+      </li>
+    </ul>
+  </li>
+</template>
+
+<script>
+import DefElement from './DefElement.vue'
+
+export default {
+  name: 'CompoundList',
+  props: {
+    body: Object
+  },
+  components: {
+    DefElement
+  }
+}
+</script>
+<style scoped>
+  li.compound_list ul li {
+    display: inline;
+  }
+</style>

src/components/DefElement.vue

 <template>
-  <li :class="body.type">
-    <span v-for="item in assemble_text" :class="item.type" v-html="item.html"></span>
+  <li :class="body.type_">
+    <span v-for="(item, index) in assemble_text" :class="item.type_" :key="index" v-html="item.html"></span>
   </li>
 </template>
 
@@ -17,11 +17,11 @@ export default {
     unparsed: function(){
       return this.body.items.map(
         function(item){
-          if      (item.type == 'usage') return {type: item.type, html: item.text}
-          else if (item.type == 'article_ref') return {type: item.type, html: `<a href="${item.article_id}${item.definition_id ? '#def'+item.definition_id : ''}">${item.lemmas.join(',')}</a>`}
-          else if (item.type == 'pronounciation') return {type: item.type, html: item.string}
-          else if (item.id) return {type: item.type, html: entities[item.id] || languages[item.id] || item.id}
-          else return {type: item.type || 'plain', html: item}
+          if      (item.type_ == 'usage') return {type: item.type_, html: item.text}
+          else if (item.type_ == 'article_ref') return {type: item.type_, html: `<a href="${item.article_id}${item.definition_id ? '#def'+item.definition_id : ''}">${item.lemmas.join(',')}</a>`}
+          else if (item.type_ == 'pronunciation') return {type: item.type_, html: item.string}
+          else if (item.id) return {type: item.type_, html: entities[item.id] || languages[item.id] || item.id}
+          else return {type: item.type_ || 'plain', html: item}
         }
       )
     },
@@ -44,7 +44,7 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-span.usage, span.pronounciation {
+span.usage, span.pronunciation {
   font-style: italic;
 }
 

src/components/Definition.vue

@@ -10,6 +10,7 @@
 import DefElement from './DefElement.vue'
 import Example from './Example.vue'
 import SubArticle from './SubArticle.vue'
+import CompoundList from './CompoundList.vue'
 
 var Definition = {
   name: 'Definition',
@@ -20,7 +21,8 @@ var Definition = {
     DefElement,
     Definition,
     Example,
-    SubArticle
+    SubArticle,
+    CompoundList
   },
   computed: {
     template_name_added: function(){
@@ -31,8 +33,9 @@ var Definition = {
                 'explanation': 'DefElement',
                 'definition': 'Definition',
                 'example': 'Example',
-                'sub_article': 'SubArticle'
-              }[element.type] || 'li',
+                'sub_article': 'SubArticle',
+                'compound_list': 'CompoundList'
+              }[element.type_] || 'li',
               'element': element
           }
       })

src/components/Header.vue

@@ -33,7 +33,7 @@ export default {
     header_text: function() {
       return this.lemmas.map(
         function(item){
-          return item.word
+          return item.lemma
         }
       ).join(', ')
     },

src/components/SearchResults.vue

@@ -21,10 +21,9 @@ export default {
       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)
+              id: hit.article_id,
+              label: hit.lemmas.map(x => x.lemma).join(', '),
+              classification: helpers.group_list(hit.lemmas)
           }
       })
     }

src/components/SubArticle.vue

 <template>
   <li class="sub_article">
-    <span class="sub_article_header"><a :href="body.article_id">{{article.lemmas[0]['word']}}</a></span>
+    <span class="sub_article_header"><a :href="body.article_id">{{body.lemmas[0]}}</a></span>
     <ul>
       <DefElement :body="body.intro" v-if="body.intro" />
-      <Definition :body="article.definitions[0]" />
+      <Definition :body="body.article.body.definitions[0]" />
     </ul>
   </li>
 </template>
 
 <script>
-import axios from "axios";
 import DefElement from './DefElement.vue'
 
 export default {
@@ -17,21 +16,8 @@ export default {
   props: {
     body: Object
   },
-  data: function(){
-    return {
-      article: {
-        lemmas: [{word: ''}],
-        definitions: [{
-          elements: []
-        }]
-      }
-    }
-  },
-  components: {DefElement},
-  mounted: function(){
-    var self = this;
-    axios.get('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_doc/' + self.body.article_id)
-      .then(response => self.article = response.data._source)
+  components: {
+    DefElement
   },
   beforeCreate: function () {
     this.$options.components.Definition = require('./Definition.vue').default

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)
+    lemma.standardisations.forEach(function(grp){
+      grp_collection.add(grp.tags[0] == 'subst' ? grp.tags[0] + ',' + grp.tags[1] : grp.tags[0])
     })
   })
-  return Array.from(grp_collection).join(';')
+  return Array.from(grp_collection).join('; ')
 }
 
 export default { group_list}