search filters ok, to be improved on results pertinance

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -16,6 +16,7 @@ export default {
       template: null,
       typed: null,
       autocomplete: null,
+      slimFilters: [],
       $input: null
       // basePath: drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix
     }
@@ -23,7 +24,8 @@ export default {
   computed: {
     ...mapState({
       keys: state => state.Search.keys,
-      term: state => state.Search.term
+      term: state => state.Search.term,
+      filters: state => state.Search.filters
     })
   },
   methods: {
@@ -32,7 +34,21 @@ export default {
       // unfocus the text input to hide the keyboard on mobile device
       this.$input.blur()
       // New search is triggered by Base.vue with router (which will also fill the store)
-      this.$router.push({name:'base', query:{keys:this.typed,term:this.autocomplete}})
+      // cleaning slimfilters
+      let filters = []
+      this.slimFilters.forEach((filter, index) => {
+        console.log('foreach filters', filter)
+        if(filter){
+          filters.push(filter)
+        }
+      })
+      console.log('Cleaning filters',this.slimFilters, filters)
+      // push router
+      this.$router.push({name:'base', query:{
+        keys:this.typed,
+        term:this.autocomplete,
+        filters:filters.join(',')
+      }})
       // this.$router.push({
       //   path:`${this.basePath}/base`,
       //   query:{keys:this.typed,term:this.autocomplete}
@@ -51,6 +67,10 @@ export default {
         }
       }.bind(this), 1)
 
+    },
+    onSelectFiltersChange(index, info){
+      console.log('onSelectFiltersChange', index, info, this.filters)
+      this.slimFilters[index] = info.value
     }
   },
   directives: {
@@ -99,18 +119,19 @@ export default {
     this.$input = this.$el.querySelector('#edit-search')
     // // focus on input
     // $input.focus()
+
     // Catch the jquery ui events for autocmplete widget
     jQuery(this.$input).on('autocompleteselect', this.onAutoCompleteSelect);
+
     // customize the select filters
     // http://slimselectjs.com/options
     const selects = this.$el.querySelectorAll('select')
-    selects.forEach((selectElement) => {
+    selects.forEach((selectElement, index) => {
+      // get the first option to make the placeholder then empty it
       const placeholder_option = selectElement.querySelector('option:first-child')
-      console.log('placeholder_option', placeholder_option);
+      // console.log('placeholder_option', placeholder_option);
       const placeholder = placeholder_option.innerText
       placeholder_option.removeAttribute("value")
-      // let attr = document.createAttribute('data-placeholder')
-      // attr.value = true
       placeholder_option.setAttribute("data-placeholder", true)
       placeholder_option.innerHTML = ''
       new SlimSelect({
@@ -119,9 +140,9 @@ export default {
         // allowDeselect: true
         allowDeselectOption: true,
         showSearch: false,
-        closeOnSelect: false,
+        closeOnSelect: true,
         onChange: (info) => {
-          console.log(info)
+          this.onSelectFiltersChange(index, info)
         }
       })
     })

web/themes/custom/materiotheme/vuejs/components/Pages/Base.vue

@@ -65,24 +65,34 @@ export default {
     // at first page load or first route entering launch a search if params exists in url query
     console.log('Base created() location',window.location)
     let params = new URLSearchParams(window.location.search)
-    if (params.has('keys') || params.has('term')) {
+    if (params.has('keys')) {
       this.$store.commit('Search/setKeys', params.get('keys'))
-      this.$store.commit('Search/setTerm', params.get('term'))
       this.pagetitle = params.get('keys')
-      this.newSearch()
     } else {
-      // load default base page
       this.$store.commit('Search/setKeys', '')
-      this.$store.commit('Search/setTerm', '')
       this.pagetitle = 'Base'
-      this.newSearch()
     }
+
+    if (params.has('term')) {
+      this.$store.commit('Search/setTerm', params.get('term'))
+    } else {
+      this.$store.commit('Search/setTerm', '')
+    }
+
+    if (params.has('filters')) {
+      this.$store.commit('Search/setFilters', params.get('filters').split(','))
+    } else {
+      this.$store.commit('Search/setFilters', [])
+    }
+
+    this.newSearch()
   },
   beforeRouteUpdate (to, from, next) {
     // when query change launch a new search
     console.log('Base beforeRouteUpdate', to, from, next)
     this.$store.commit('Search/setKeys', to.query.keys)
     this.$store.commit('Search/setTerm', to.query.term)
+    this.$store.commit('Search/setFilters', to.query.filters)
     this.pagetitle = to.query.keys
     this.newSearch()
     next()

web/themes/custom/materiotheme/vuejs/components/cardMixins.js

@@ -46,7 +46,7 @@ export default {
     // if (this.$options.name ==! 'ModalCard') {
     this.$el.addEventListener('mouseover', function (event) {
       const imgs = this.querySelectorAll('.images figure img.lazy')
-      console.log('mousemove', this, imgs)
+      // console.log('mousemove', this, imgs)
       imgs.forEach((img) => {
         // console.log('forEach img',img)
         img.setAttribute('src', img.getAttribute('data-src'))
@@ -62,7 +62,7 @@ export default {
 
       this.$el.addEventListener('mousemove', function (event) {
         const imgs = this.querySelectorAll('.images figure img.lazy')
-        console.log('mousemove', this, imgs)
+        // console.log('mousemove', this, imgs)
         imgs.forEach((img) => {
           // console.log('forEach img',img)
           img.setAttribute('src', img.getAttribute('data-src'))

web/themes/custom/materiotheme/vuejs/store/modules/search.js

@@ -17,6 +17,7 @@ export default {
   state: {
     keys: '',
     term: '',
+    filters: [],
     uuids: [],
     items: [],
     offset: 0,
@@ -66,6 +67,10 @@ export default {
     setTerm (state, term) {
       state.term = term
     },
+    setFilters (state, filters) {
+      console.log('store search setFilters', filters)
+      state.filters = filters
+    },
     setInfos (state, infos) {
       state.infos = infos
     },
@@ -121,6 +126,10 @@ export default {
         offset: state.offset,
         limit: state.limit
       }
+      if (state.filters) {
+        console.log('getResults filters', state.filters)
+        params.filters = state.filters
+      }
       // console.log('Search getResults params', params)
       const q = qs.stringify(params)
       return MA.get('/materio_sapi/getresults?' + q)