From a95c495fae5f5131c4c5b98a06332c8467c99005 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ole=20Volds=C3=A6ter?= <ole.voldsater@uib.no>
Date: Thu, 18 Mar 2021 11:03:34 +0100
Subject: [PATCH] re meta#300 forbedret navigasjon fra "stub" til full artikkel

---
 src/components/Article.vue        | 21 +++++++++++++++++----
 src/components/DictionaryView.vue | 26 ++++++++++++--------------
 src/components/SearchResults.vue  |  7 +++++--
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/components/Article.vue b/src/components/Article.vue
index 6afc4b16..25e5d69c 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -27,8 +27,8 @@
         </ul>
       </section>
       <div class="fade">
-        <router-link :to="link_to_self.ref" @click.native="article_link_click(link_to_self)">
-          Velg âž”
+        <router-link :to="link_to_self.ref" @click.native="details_click(link_to_self)">
+          Velg 🡢
         </router-link>
       </div>
     </div>
@@ -60,11 +60,17 @@ export default {
   props: {
     article: Object
   },
+  data: function() {
+    return {
+      source: null
+    }
+  },
   computed: {
     link_to_self: function() {
-      return {
+      return  {
         ref: '/' + this.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma),
-        article_id: this.article.article_id
+        article: this.article,
+        source: this.source
       }
     },
     dictionary: function() {
@@ -86,7 +92,14 @@ export default {
   methods: {
     article_link_click: function(item) {
       this.$emit('article-click', item)
+    },
+    details_click: function(item) {
+      this.$emit('details-click', item)
     }
+  },
+  created: function() {
+    // make non reactive
+    this.source = this.$route.path
   }
 }
 </script>
diff --git a/src/components/DictionaryView.vue b/src/components/DictionaryView.vue
index 0a7f6f41..51bf5a8d 100644
--- a/src/components/DictionaryView.vue
+++ b/src/components/DictionaryView.vue
@@ -1,8 +1,5 @@
 <template>
   <main>
-    <p class="description" :class="$vuetify.breakpoint.name" v-if="$vuetify.breakpoint.mdAndUp && ! $route.name">
-        Skrivemåte og bøying i tråd med norsk rettskriving
-    </p>
     <div class="search_container">
       <div class="lang_select_container">
         <v-radio-group row v-model="lang">
@@ -38,7 +35,11 @@
     <div id="spinner" v-if="waiting">
       <v-progress-circular indeterminate color="secondary" size="120"></v-progress-circular>
     </div>
-    <SearchResults :hits="search_results" :lang="lang" @article-click="article_link_click" v-if="search_results.length && ! waiting" />
+    <SearchResults :hits="search_results"
+                    :lang="lang"
+                    @article-click="article_link_click"
+                    @details-click="details_click"
+                    v-if="search_results.length && ! waiting" />
     <div id="single_article_container" v-if="article">
       <Article :key="article_key" :article="article" @article-click="article_link_click" />
     </div>
@@ -78,7 +79,7 @@ axios.interceptors.request.use(function (config) {
 function navigate_to_article(self, source) {
   axios.get(api_endpoint + '/' + self.$route.params.lang + '/article/' + self.$route.params.id)
   .then(function(response){
-    self.article = Object.assign(response.data, {'dictionary': self.$route.params.lang})
+    self.article = Object.assign(response.data, {'dictionary': self.$route.params.lang, source: source, results: self.search_results})
     self.search_results = []
     self.error = null
   })
@@ -201,6 +202,11 @@ export default {
         this.waiting_for_articles = true
         navigate_to_article(this, item.source)
       }
+    },
+    details_click: function(item) {
+      this.article = Object.assign(item.article, {source: item.source})
+      this.search_results = []
+      history.replaceState({article: this.article, search_results: [], lang: this.lang, error: null}, '')
     }
   },
   mounted: function(){
@@ -289,7 +295,7 @@ div.welcome {
   padding-bottom: 10px;
 }
 
-#search_results, #spinner, #single_article_container, div.welcome, div.search_container, p.description, .error {
+#search_results, #spinner, #single_article_container, div.welcome, div.search_container, .error {
   padding-left: calc((100vw - 1000px) / 2);
   padding-right: calc((100vw - 1000px) / 2);
 }
@@ -298,14 +304,6 @@ div.welcome {
   padding-top: 40px;
 }
 
-p.description {
-  font-size: 36px;
-  color: var(--v-primary-base);
-  background-color: var(--v-tertiary-base);
-  padding-top: 40px;
-  padding-bottom: 10px;
-}
-
 div.monthly {
   padding: 20px;
   border-radius: 10px;
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 84cc1c37..330c7678 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -3,13 +3,13 @@
     <div class="flex-container" :class="$vuetify.breakpoint.name">
       <ul class="hits" v-if="results_bob.length">
         <li  class="article_container" v-for="(result, index) in results_bob" :key="index + results_hash">
-          <Article  :article="result" @article-click="article_link_click">
+          <Article  :article="result" @article-click="article_link_click"  @details-click="details_click">
           </Article>
         </li>
       </ul>
       <ul class="hits" v-if="results_nob.length">
         <li class="article_container" v-for="(result, index) in results_nob" :key="index + results_hash">
-          <Article :article="result" @article-click="article_link_click">
+          <Article :article="result" @article-click="article_link_click" @details-click="details_click">
           </Article>
         </li>
       </ul>
@@ -40,6 +40,9 @@ export default {
   methods: {
     article_link_click: function(item) {
       this.$emit('article-click', item)
+    },
+    details_click: function(item) {
+      this.$emit('details-click', Object.assign(item, {results: this.hits}))
     }
   },
   components: {
-- 
GitLab