search results sorting #804, better transitions between succesive searches

src/components/Content/ResultItem.vue

@@ -35,9 +35,9 @@ export default {
       required: true
     }
   },
-  data: () => ({
-    preview: ''
-  }),
+  // data: () => ({
+  //   preview: ''
+  // }),
   computed: {
     ...mapState({
       editionsbyuuid: state => state.Corpus.editionsbyuuid
@@ -46,14 +46,14 @@ export default {
       return this.editionsbyuuid[this.result.textId].title
     }
   },
-  created () {
-    if (this.result.extract) {
-      const subString = this.result.extract.substr(0, 80)
-      this.preview = subString.substr(0, subString.lastIndexOf(' ')) + ' …'
-    } else {
-      console.warn(`No extract for ${this.result.textId}/${this.result.uuid}`)
-    }
-  },
+  // created () {
+  //   if (this.result.extract) {
+  //     const subString = this.result.extract.substr(0, 80)
+  //     this.preview = subString.substr(0, subString.lastIndexOf(' ')) + ' …'
+  //   } else {
+  //     console.warn(`No extract for ${this.result.textId}/${this.result.uuid}`)
+  //   }
+  // },
   methods: {
     ...mapActions({
       addHistoryItem: 'History/addItem'

src/components/nav/Results.vue

@@ -4,11 +4,22 @@
       v-if="opened"
       id="results"
       class="row"
+      :class="{ loading: isloading }"
     >
       <header class="col-1">
         <h2>Resultats</h2>
         <span class="search-keys">{{ keys }}</span><br>
         <span v-if="resultsQuantity" class="results-count">{{ resultsCount }}</span>
+        <v-select
+          id="sorting"
+          type="select"
+          placeholder="trier par"
+          append-to-body
+          :calculate-position="dropDownMenuPos"
+          :options="sortOptions"
+          :value="sorting"
+          @input="onSortingSelected"
+        />
       </header>
       <section class="col-10 results-list">
         <div class="wrapper">
@@ -19,6 +30,7 @@
             <infinite-loading
               v-if="offset < resultsQuantity.quantity"
               @infinite="nextResultsBatch"
+              :identifier="isloading"
             />
           </ul>
         </div>
@@ -37,24 +49,31 @@
 
 <script>
 
+import { createPopper } from '@popperjs/core'
+
 import ResultItem from '../Content/ResultItem'
-import { mapState, mapActions } from 'vuex'
+import { mapState, mapActions, mapMutations } from 'vuex'
 
 export default {
   name: 'Results',
   components: {
     ResultItem
   },
+  // data: () => ({
+  // }),
   computed: {
     opened: {
       get () { return this.$store.state.Search.opened },
       set (value) { this.$store.commit('Search/setOpened', value) }
     },
     ...mapState({
+      isloading: state => state.Search.isloading,
       keys: state => state.Search.keys,
       results: state => state.Search.results,
       resultsQuantity: state => state.Search.resultsQuantity,
-      offset: state => state.Search.offset
+      offset: state => state.Search.offset,
+      sortOptions: state => state.Search.sortOptions,
+      sorting: state => state.Search.sorting
     }),
     resultsCount () {
       return `${this.$store.state.Search.resultsQuantity.quantity} ${this.$store.state.Search.resultsQuantity.unit}`
@@ -65,9 +84,59 @@ export default {
       console.log('clicked on close results')
       this.opened = false
     },
+    ...mapMutations({
+      setSorting: 'Search/setSorting'
+    }),
     ...mapActions({
-      nextResultsBatch: 'Search/nextResultsBatch'
-    })
+      nextResultsBatch: 'Search/nextResultsBatch',
+      updateSearch: 'Search/updateSearch'
+    }),
+    dropDownMenuPos (dropdownList, component, { width }) {
+      /**
+       * We need to explicitly define the dropdown width since
+       * it is usually inherited from the parent with CSS.
+       */
+      dropdownList.style.width = width
+
+      /**
+       * Here we position the dropdownList relative to the $refs.toggle Element.
+       *
+       * The 'offset' modifier aligns the dropdown so that the $refs.toggle and
+       * the dropdownList overlap by 1 pixel.
+       *
+       * The 'toggleClass' modifier adds a 'drop-up' class to the Vue Select
+       * wrapper so that we can set some styles for when the dropdown is placed
+       * above.
+       */
+      const popper = createPopper(component.$refs.toggle, dropdownList, {
+        placement: 'top',
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, -1]
+            }
+          },
+          {
+            name: 'toggleClass',
+            enabled: true,
+            phase: 'write',
+            fn ({ state }) {
+              component.$el.classList.toggle('drop-up', state.placement === 'top')
+            }
+          }]
+      })
+
+      /**
+       * To prevent memory leaks Popper needs to be destroyed.
+       * If you return function, it will be called just before dropdown is removed from DOM.
+       */
+      return () => popper.destroy()
+    },
+    onSortingSelected (o) {
+      this.setSorting(o)
+      this.updateSearch()
+    }
   }
 }
 </script>

src/components/nav/Search.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="search" class="col-11">
-    <form v-if="corpusLoaded" class="search-form row">
+  <div id="search" class="col-11" :class="{ loading: isloading }">
+    <form class="search-form row">
       <fieldset class="search">
         <div>
           <label for="keys">Search</label>
@@ -84,7 +84,7 @@
 
 import { createPopper } from '@popperjs/core'
 
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapMutations, mapState } from 'vuex'
 
 export default {
   name: 'Search',
@@ -114,10 +114,13 @@ export default {
     }
   },
   methods: {
+    ...mapMutations({
+      setActiveFilters: 'Search/setActiveFilters'
+    }),
     ...mapActions({
       newSearch: 'Search/newSearch',
       setSearchTypeValue: 'Search/setSearchTypeValue',
-      setSearchActiveFilters: 'Search/setSearchActiveFilters'
+      updateSearch: 'Search/updateSearch'
     }),
     submit () {
       console.log('submited', this.keys)
@@ -171,15 +174,18 @@ export default {
     },
     onFiltersNominumSelected (e) {
       console.log('onFiltersNominumSelected', e)
-      this.setSearchActiveFilters({ index: 'persons', value: e })
+      this.setActiveFilters({ index: 'persons', value: e })
+      this.updateSearch()
     },
     onFiltersLocorumSelected (e) {
       console.log('onFiltersLocorumSelected', e)
-      this.setSearchActiveFilters({ index: 'places', value: e })
+      this.setActiveFilters({ index: 'places', value: e })
+      this.updateSearch()
     },
     onFiltersOperumSelected (e) {
       console.log('onFiltersOperumSelected', e)
-      this.setSearchActiveFilters({ index: 'objects', value: e })
+      this.setActiveFilters({ index: 'objects', value: e })
+      this.updateSearch()
     }
   }
 }