Merge branch 'pos-search-meta#469' of...

Merge branch 'pos-search-meta#469' of git.app.uib.no:spraksamlingane/beta.ordbok.uib.no into top-bar

src/components/Autocomplete.vue

@@ -35,7 +35,27 @@
         <v-btn plain depressed active-class="none" v-bind="attrs" v-on="on" color = "primary" text>Alle ordklasser<v-icon right>more_vert</v-icon></v-btn>
         </template>
         <template v-slot:default="dialog">
-          <v-card> Test<v-btn @click="dialog.value = false">Lukk</v-btn></v-card>
+          <v-card> Test
+        <div class="pos_select_container">
+          <v-select @change="update_pos"
+            dense
+            rounded
+            disable-lookup
+            flat
+            return-object
+            item-text="label"
+            outlined
+            color="var(--v-primary-base)"
+            filled
+            hide-details=""
+            :menu-props="{maxHeight: $vuetify.breakpoint.name === 'xs' ? 190 : 500, transition: 'fade-transition', allowOverflow: true}"
+            v-model="pos_selected"
+            :items="pos"
+            label="Avgrens etter ordklasse"
+          ></v-select>
+        </div>
+            
+            <v-btn @click="dialog.value = false">Lukk</v-btn></v-card>
         </template>
          </v-dialog>
       </template>
@@ -112,7 +132,7 @@
           this.items.push({q: q, label: q, time: time, search: search})
         }
         let self = this
-        self.api.get('suggest?', {params: {q: q, dict: self.get_lang(), n: 80, scope: 'w', dform: 'int', meta: 'n'}})
+        self.api.get('suggest?', {params: {q: q, dict: self.get_lang(), n: 80, scope: 'w', dform: 'int', meta: 'n', wc: self.$parent.pos_selected.tag}})
             .then(async (response) => {
                         if (self.$refs.autocomplete.searchInput == q & self.suggesting) {
                           let suggestions = response.data.a.w.map(item => ({q: q, match: item[0], label: item[0], time: time, lang: [item[1]]}))

src/components/DictionaryView.vue

 <template>
   <main>
     <div class="search_container">
+      <div class="top_bar" fluid>
       <div class="lang_select_container">
         <v-radio-group row v-model="lang" @change="update_lang_form">
           <template v-slot:label tabindex="1">
@@ -29,6 +30,7 @@
           </v-radio>
         </v-radio-group>
       </div>
+      </div>
       <Autocomplete v-on:submit="select_result" :api="get_search_endpoint">
       </Autocomplete>
     </div>
@@ -95,6 +97,32 @@ const api = setup({
 })
 
 
+const posTags = {
+  noun: 1,
+  pron: 2,
+  det: 3,
+  adj: 4,
+  cconj: 5,
+  sconj: 6,
+  adv: 7,
+  adp: 8,
+  verb: 9,
+  intj: 10
+}
+
+const posOptions = [
+  {label: "Alle ordklasser"},
+  {label: "substantiv", tag: "NOUN"},
+  {label: "pronomen", tag: "PRON"},
+  {label: "determinativ", tag: "DET"},
+  {label: "adjektiv", tag: "ADJ"},
+  {label: "konjunksjon", tag: "CCONJ"},
+  {label: "subjunksjon", tag: "SCONJ"},
+  {label: "adverb", tag: "ADV"},
+  {label: "preposisjon", tag: "ADP"},
+  {label: "verb", tag: "VERB"},
+  {label: "interjeksjon", tag: "INTJ"},
+]
 
 
 
@@ -165,7 +193,7 @@ function navigate_to_query(self, word) {
   let  query = self.event ? self.event : {q: word} 
   
   // Get article IDs
-  api.get('articles?', {params: {w: query.match || query.q, dict: self.lang, scope: "w", meta: 'n'}}).then((response) => {
+  api.get('articles?', {params: {w: query.match || query.q, dict: self.lang, scope: "w", meta: 'n', wc: self.pos_selected.tag}}).then((response) => {
             let article_ids = response.data
             let unwrapped = []
             for (const d in article_ids) {
@@ -234,6 +262,8 @@ export default {
       article_key: 0,
       search_results: [],
       lang: 'bm,nn',
+      pos_selected: posOptions[0],
+      pos: posOptions,
       waiting_for_articles: true,
       waiting_for_metadata: true,
       article: null,
@@ -273,7 +303,7 @@ export default {
     select_result: function (event) {
         this.event = event
         let name = event.search ? 'search' : 'w'
-        let route = `/${this.lang}/${name}/${event.match || event.q}`
+        let route = `/${this.lang}/${name}/${event.match || event.q}${this.pos_param()}`
         this.$router.push(route)
         navigate_to_query(this)
          
@@ -284,6 +314,10 @@ export default {
           props: track_props
         })
       },
+      pos_param: function() {
+        if (this.pos_selected.tag) return '/'+this.pos_selected.tag.toLowerCase()
+        return ''
+      },
       update_lang_form: function (lang) {
         this.lang = lang
         let name = null
@@ -291,16 +325,34 @@ export default {
         if(this.$route.name == 'word') {
             name = "w"
             query = this.$route.params.word
-            this.$router.push(`/${this.lang}/${name}/${query}`)
+            this.$router.push(`/${this.lang}/${name}/${query+this.pos_param()}`)
             navigate_to_query(this, query)
         }
         else if (this.$route.name == 'search') {
            name = "search"
            query = this.$route.params.query
-           this.$router.push(`/${this.lang}/${name}/${query}`)
+           this.$router.push(`/${this.lang}/${name}/${query+this.pos_param()}`)
            navigate_to_query(this, query)
         }
       },
+      update_pos: function (pos) {
+        this.pos_selected = pos
+        let name = null
+        let query = null
+        if(this.$route.name == 'word') {
+            name = "w"
+            query = this.$route.params.word
+            this.$router.push(`/${this.lang}/${name}/${query+this.pos_param()}`)
+            navigate_to_query(this, query)
+        }
+        else if (this.$route.name == 'search') {
+          name = "search"
+          query = this.$route.params.query
+          this.$router.push(`/${this.lang}/${name}/${query+this.pos_param()}`)
+          navigate_to_query(this, query)
+        }
+        
+      },
     article_link_click: function(item) {
       if (this.article && this.article.article_id == item.article_id){
         this.article_key++
@@ -337,6 +389,9 @@ export default {
       })
     ]).then(function(_) {
       self.waiting_for_metadata = false
+      if (self.$route.params.pos) {
+        self.pos_selected = posOptions[posTags[self.$route.params.pos]]
+      }
       if(self.$route.name == 'search') {
         self.lang = self.$route.params.lang
         navigate_to_query(self, self.$route.params.query)
@@ -455,10 +510,26 @@ div.monthly details, div.monthly h3 {
   color: var(--v-primary-base);
 }
 
+.top_bar {
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+  flex-direction: row;
+  flex-wrap: wrap;
+  vertical-align: bottom !important;
+  padding-bottom: 10px;
+}
+
 .lang_select_container {
   padding-left: 10px;
 }
 
+.pos_select_container {
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom: 0px;
+  padding-top: 10px;
+}
+
 li.suggestion {
   font-weight: bold;
   padding-left: 20px;

src/main.js

@@ -38,7 +38,7 @@ const router = new VueRouter({
               children: [
                 {
                   name: 'word',
-                  path: 'w/:word'
+                  path: 'w/:word/:pos?'
                 },
                 {
                   name: 'lookup',
@@ -46,7 +46,7 @@ const router = new VueRouter({
                 },
                 {
                   name: 'search',
-                  path: 'search/:query'
+                  path: 'search/:query/:pos?'
                 }
               ]
             },