search filters ok, to be improved on results pertinance

web/modules/custom/materio_sapi/src/Controller/Base.php

@@ -86,6 +86,18 @@ class Base extends ControllerBase {
       $this->query->setOption('termid', $this->term);
     }
 
+    // filter the search
+    if ($this->filters) {
+      $filters_conditions = $this->query->createConditionGroup('OR');
+      foreach ($this->filters as $filter) {
+        $filter = (int) $filter;
+        foreach (['tag_tid', 'thesaurus_tid'] as $field) {
+          $filters_conditions->addCondition($field, $filter);
+        }
+      }
+      $this->query->addConditionGroup($filters_conditions);
+    }
+
     // Restrict the search to specific languages.
     $lang = \Drupal::languageManager()->getCurrentLanguage()->getId();
     $this->query->setLanguages([$lang]);
@@ -137,7 +149,14 @@ class Base extends ControllerBase {
       // $this->keys = Tags::explode($this->keys);
       \Drupal::logger('materio_sapi')->notice($this->keys);
     }
+    // get the exacte term id in case of autocomplete
     $this->term = $request->query->get('term');
+    // get the filters of advanced search
+    $f = $request->query->get('filters');
+    $this->filters = strlen($f) ? explode(',', $f) : null;
+    // $this->allparams = $request->query->all();
+    // $request->attributes->get('_raw_variables')->get('filters')
+    //
     $this->offset = $request->query->get('offset') ?? $this->offset;
     $this->limit = $request->query->get('limit') ?? $this->limit;
   }

web/themes/custom/materiotheme/assets/dist/main.css

@@ -19759,10 +19759,21 @@ header[role="banner"] {
       border-radius: 14px;
       padding: 0.3em;
       color: #666; }
-    header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main .ss-single-selected {
+    header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main {
-      border-radius: 15px; }
+      font-size: 0.756em; }
-    header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main .ss-content {
+      header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main .ss-single-selected {
-      width: auto; }
+        border-radius: 0.7em;
+        height: 1.5em;
+        border: none;
+        padding: 0 0.5em;
+        background-color: #e2e2e2; }
+        header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main .ss-single-selected span.placeholder {
+          color: #1A1A1A;
+          line-height: 1; }
+          header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main .ss-single-selected span.placeholder span.ss-disabled {
+            color: #616161; }
+      header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form #edit-filters .ss-main .ss-content {
+        width: auto; }
     header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form .button.form-submit {
       border: 0;
       text-indent: 50px;

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -589,8 +589,20 @@ header[role="banner"]{
 
 			#edit-filters{
 				.ss-main{
+					font-size: 0.756em;
 					.ss-single-selected{
-						border-radius: 15px;
+						border-radius: 0.7em;
+						height:1.5em;
+						border: none;
+						padding: 0 0.5em;
+						background-color: #e2e2e2;
+						span.placeholder{
+							color: $color-main-text;
+							line-height: 1;
+							span.ss-disabled{
+								color: #616161;
+							}
+						}
 					}
 					.ss-content{
 						width:auto;

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)