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)
         }
       })
     })