[ICIJ/datashare#406] Always display a document s title

ICIJ · Mar 24, 2020 · cb32a44 · cb32a44
1 parent dd65f19
commit cb32a44
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 11 deletions.
diff --git a/src/components/SearchDocumentNavbar.vue b/src/components/SearchDocumentNavbar.vue
@@ -1,9 +1,21 @@
 <template>
   <div class="search-document-navbar px-3 py-2 bg-dark text-white text-nowrap">
-    <router-link :to="{ name: 'search', query }" class="search-document-navbar__back flex-grow-1 text-truncate pr-1" v-shortkey="getKeys('backToSearchResults')" @shortkey.native="getAction('backToSearchResults')">
+    <router-link
+      :to="{ name: 'search', query }"
+      class="search-document-navbar__back text-truncate pr-1"
+      :class="{ 'flex-grow-1': !isShrinked }"
+      v-shortkey="getKeys('backToSearchResults')"
+      @shortkey.native="getAction('backToSearchResults')">
       <fa icon="chevron-circle-left" class="mr-1" />
-      {{ $t('search.back') }}
+      <span v-if="!isShrinked">
+        {{ $t('search.back') }}
+      </span>
     </router-link>
+    <div v-if="isShrinked" class="flex-grow-1 pr-1">
+      <b-btn href="#" class="text-white p-0" @click="scrollToTop" variant="link">
+        {{ currentDocument.title }}
+      </b-btn>
+    </div>
     <div v-if="currentDocument" class="ml-auto">
       <span class="search-document-navbar__nav" v-if="currentDocumentIndex > -1">
         <button @click="goToPreviousDocument" v-shortkey="getKeys('goToPreviousDocument')" @shortkey="getAction('goToPreviousDocument')" :disabled="!hasPreviousDocument" class="btn btn-sm btn-link text-white py-0" id="previous-document-button">
@@ -68,6 +80,11 @@ export default {
   components: {
     DocumentActions
   },
+  props: {
+    isShrinked: {
+      type: Boolean
+    }
+  },
   computed: {
     ...mapState('search', ['response', 'isDownloadAllowed']),
     ...mapState('document', { currentDocument: 'doc', readBy: 'readBy' }),
@@ -159,6 +176,9 @@ export default {
     },
     toggleAsRead () {
       this.$store.dispatch('document/toggleAsRead', { documents: [this.currentDocument] })
+    },
+    scrollToTop () {
+      document.getElementById('search__body__document__wrapper').scrollTop = 0
     }
   }
 }

diff --git a/src/pages/Search.vue b/src/pages/Search.vue
@@ -5,7 +5,9 @@
       <button class="search__show-filters align-self-center ml-3 btn btn-link px-0" @click="clickOnShowFilters()" v-if="!showFilters" :title="$t('search.showFilters')" v-b-tooltip.right>
         <fa icon="arrow-right" />
         <span class="sr-only">{{ $t('search.showFilters') }}</span>
-        <b-badge pill variant="warning" class="search__show-filters__counter" v-if="activeFilters">{{ activeFilters }}</b-badge>
+        <b-badge pill variant="warning" class="search__show-filters__counter" v-if="activeFilters">
+          {{ activeFilters }}
+        </b-badge>
       </button>
       <app-nav class="flex-grow-1" />
     </div>
@@ -24,9 +26,9 @@
       </component>
       <transition name="slide-right">
         <div class="search__body__document" v-if="showDocument">
-          <search-document-navbar class="search__body__document__navbar"  />
+          <search-document-navbar class="search__body__document__navbar" :is-shrinked="isShrinked"/>
           <div class="search__body__document__wrapper">
-            <div class="overflow-auto">
+            <div id="search__body__document__wrapper" class="overflow-auto" @scroll="handleScroll">
               <router-view class="search__body__document__wrapper__view" />
             </div>
           </div>
@@ -68,7 +70,8 @@ export default {
         NoConnections: 'search.errors.noConnections',
         NotFound: 'search.errors.notFound',
         ServiceUnavailable: 'search.errors.serviceUnavailable'
-      }
+      },
+      isShrinked: false
     }
   },
   computed: {
@@ -139,6 +142,13 @@ export default {
     }
   },
   methods: {
+    handleScroll (e) {
+      if (e.target.scrollTop > 40) {
+        this.$set(this, 'isShrinked', true)
+      } else {
+        this.$set(this, 'isShrinked', false)
+      }
+    },
     async search (queryOrParams) {
       try {
         return this.$store.dispatch('search/query', queryOrParams)

diff --git a/tests/unit/specs/components/SearchDocumentNavbar.spec.js b/tests/unit/specs/components/SearchDocumentNavbar.spec.js
@@ -1,13 +1,13 @@
 import toLower from 'lodash/toLower'
+import axios from 'axios'
 import { createLocalVue, shallowMount } from '@vue/test-utils'
 
+import Api from '@/api'
+import SearchDocumentNavbar from '@/components/SearchDocumentNavbar'
 import { Core } from '@/core'
 import { getShortkeyOS } from '@/utils/utils'
-import SearchDocumentNavbar from '@/components/SearchDocumentNavbar'
 import { IndexedDocument, letData } from 'tests/unit/es_utils'
 import esConnectionHelper from 'tests/unit/specs/utils/esConnectionHelper'
-import axios from 'axios'
-import Api from '@/api'
 
 jest.mock('@/utils/utils')
 
@@ -80,4 +80,14 @@ describe('SearchDocumentNavbar.vue', () => {
 
     expect(wrapper.find('.search-document-navbar__numberOfReadBy').exists()).toBeTruthy()
   })
+
+  it('should display document title if shrinked', async () => {
+    await letData(es).have(new IndexedDocument('doc_01', index)).commit()
+    await store.dispatch('document/get', { id: 'doc_01', index })
+
+    await wrapper.setProps({ isShrinked: true })
+
+    expect(wrapper.find('.search-document-navbar > div.flex-grow-1 > b-btn-stub').exists()).toBeTruthy()
+    expect(wrapper.find('.search-document-navbar > div.flex-grow-1 > b-btn-stub').text()).toBe('doc_01')
+  })
 })
diff --git a/tests/unit/specs/pages/Search.spec.js b/tests/unit/specs/pages/Search.spec.js
@@ -46,8 +46,7 @@ describe('Search.vue', () => {
 
   it('should redirect to the complete query', async () => {
     const query = 'this is a query'
-    store.commit('search/query', query)
-    await wrapper.vm.$nextTick()
+    await store.commit('search/query', query)
 
     expect(wrapper.find('.search__body__backdrop').props('to')).toMatchObject({ name: 'search', query: { q: query } })
   })