From b4bde60ecc6c77c13b642c64d748625e00704542 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ole=20Volds=C3=A6ter?= <ole.voldsater@uib.no> Date: Wed, 30 Sep 2020 15:05:58 +0200 Subject: [PATCH] refs meta#150 mer refaktorering + fikset valg av artikkel fra dropdown --- src/App.vue | 67 +++++++++++++++----------------- src/components/SearchResults.vue | 1 - 2 files changed, 31 insertions(+), 37 deletions(-) diff --git a/src/App.vue b/src/App.vue index 95b1848..7304c4b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,4 +1,4 @@ -<template> +this<template> <main id="app"> <header> <h1>Søk i Ordbøkene</h1> @@ -23,7 +23,7 @@ <label for="radio_norsk">Norsk Ordbok</label> </header> <img id="spinner" :class="waiting ? 'show' : 'hide'" src="./assets/spinner.gif" alt="Venter på innhold" /> - <SearchResults :hits="search_results" :lang="lang" @search-hit-click="search_hit_click" /> + <SearchResults :hits="search_results" :lang="lang" @search-hit-click="search_hit_click" v-show="! waiting" /> <Article :key="article_key" :article="article" @article-click="article_link_click" /> <div class="welcome" v-show="! (article.lemmas.length || search_results.length || waiting)"> <p>Bør ordet <em>crew</em> inn i dei norske standardordbøkene? Korleis definerar vi <em>c-kjendis</em>, og korleis @@ -77,6 +77,24 @@ window.onpopstate = function (event) { } } +function navigate_to_article(self, article_id) { + axios.get(self.api_pref + '' + article_id) + .then(function(response){ + self.article = response.data._source + self.waiting = false + history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '') + }) +} + +function navigate_to_search(self, query) { + axios.get(self.api_pref + 'search?q=' + query) + .then(function(response){ + self.search_results = response.data + self.waiting = false + history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '') + }) +} + export default { name: 'app', data: function() { @@ -117,37 +135,25 @@ export default { this.$refs.search.value = '' document.activeElement.blur() if(event.body){ - this.$router.push('/' + event._index + '/' + event._id) + this.$router.push('/' + event.dictionary + '/' + event.article_id) this.search_results = [] this.article = event history.replaceState({article: this.article, search_results: this.search_results, lang: this.lang}, '') }else{ - var self = this - self.waiting = true - self.article = {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}} - axios.get(self.api_pref + 'search?q=' + event.q) - .then(function(response){ - self.$router.push('/' + `/search?q=${event.q}&lang=${self.lang}`) - self.search_results = response.data - self.waiting = false - history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '') - }) + this.waiting = true + this.article = {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}} + this.$router.push(`/search?q=${event.q}&lang=${this.lang}`) + navigate_to_search(this, event.q) } }, article_link_click: function(item) { - var self = this if (this.article.article_id == item.article_id){ this.article_key++ history.replaceState({article: this.article, search_results: this.search_results, lang: this.lang}, '') }else{ - self.article = {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}} - self.waiting = true - axios.get(self.api_pref + '' + item.article_id) - .then(function(response){ - self.article = response.data._source - self.waiting = false - history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '') - }) + this.article = {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}} + this.waiting = true + navigate_to_article(this, item.article_id) } }, search_hit_click: function(article){ @@ -158,26 +164,15 @@ export default { }, mounted: function(){ this.lang = this.$route.params.lang || this.$route.query.lang || 'bob,nob' - var self = this; if(this.$route.query.q) { - axios.get(self.api_pref + 'search?q=' + self.$route.query.q) - .then(function(response){ - self.search_results = response.data - self.waiting = false - history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '') - }) + navigate_to_search(this, this.$route.query.q) } else if(this.$route.params.id){ - axios.get(self.api_pref + '' + self.$route.params.id) - .then(function(response){ - self.article = response.data._source - self.waiting = false - history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '') - }) + navigate_to_article(this, this.$route.params.id) } else { this.waiting = false - history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '') + history.replaceState({article: this.article, search_results: this.search_results, lang: this.lang}, '') } }, watch: { diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue index 6daf7aa..31aa2ce 100644 --- a/src/components/SearchResults.vue +++ b/src/components/SearchResults.vue @@ -22,7 +22,6 @@ </template> <script> -import helpers from '../utils/helpers.js' import Preview from './Preview.vue' export default { -- GitLab