populating search form filters value from url query params

web/modules/custom/materio_sapi/src/Form/MaterioSapiSearchForm.php

@@ -24,6 +24,18 @@ class MaterioSapiSearchForm extends FormBase {
   public function buildForm(array $form, FormStateInterface $form_state) {
     $lang =  \Drupal::languageManager()->getCurrentLanguage()->getId();
 
+    $keys = \Drupal::request()->get('keys');
+    $term = \Drupal::request()->get('term');
+    $filters = \Drupal::request()->get('filters');
+
+    $form['#cache'] = array(
+      'contexts' => array(
+        'url.query_args:keys',
+        'url.query_args:term',
+        'url.query_args:filters',
+      ),
+    );
+
     $form['search'] = [
       '#type' => 'textfield',
       // '#title' => $this->t('Search'),
@@ -48,12 +60,21 @@ class MaterioSapiSearchForm extends FormBase {
       ],
     ];
 
+    // $filters_array = [];
+    $filters_classes = [];
+    if($filters){
+      $filters_array = explode(',',$filters);
+      $filters_classes[] = 'open';
+    }
     $form['filters'] = [
       '#type' => 'fieldset',
       '#title' => t('filters'),
       '#legend_attributes' => [
         "class" => ["test-attribute"],
         '@click.prevent' => "onClickFilters",
+      ],
+      '#attributes' => [
+        "class" => $filters_classes
       ]
     ];
 
@@ -73,18 +94,23 @@ class MaterioSapiSearchForm extends FormBase {
       }
       $options = array($term->getName());
       $childs = $term->get('field_terms')->getValue();
+      $selected = null;
       foreach ($childs as $child) {
         $child_term = \Drupal\taxonomy\Entity\Term::load($child['target_id']);
         if($child_term->hasTranslation($lang)){
           $child_term = \Drupal::service('entity.repository')->getTranslationFromContext($child_term, $lang);
         }
         $options[$child_term->id()] = $child_term->getName();
+        if (isset($filters_array) && in_array($child_term->id(), $filters_array)) {
+          $selected = $child_term->id();
+        }
       }
       $form['filters']['filter-'.$tid] = array(
         '#type' => 'select',
         // '#title' => $term->getName(),
         // '#multiple' => true,
-        '#options' => $options
+        '#options' => $options,
+        '#value' => $selected
       );
     }
 

web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue

@@ -7,6 +7,8 @@
 </template>
 
 <script>
+import qs from 'querystring-es3'
+
 import SearchForm from 'vuejs/components/Form/SearchForm'
 import { mapState, mapActions } from 'vuex'
 import MA from 'vuejs/api/ma-axios'
@@ -20,7 +22,10 @@ export default {
   },
   computed: {
     ...mapState({
-      canSearch: state => state.User.canSearch
+      canSearch: state => state.User.canSearch,
+      keys: state => state.Search.keys,
+      term: state => state.Search.term,
+      filters: state => state.Search.filters
     }),
     displayform(){
       // console.log('computed displayform')
@@ -44,7 +49,17 @@ export default {
   },
   methods: {
     getSearchForm(){
-      MA.get(`/materio_sapi/search_form`)
+      console.log('getSearchForm')
+      // var urlParams = new URLSearchParams(window.location.search);
+      // var urlParamsKeys = urlParams.keys() 
+      const params = {
+        keys: this.keys,
+        term: this.term,
+        filters: this.filters
+      }
+      console.log('Search getSearchForm params', params)
+      const q = qs.stringify(params)
+      MA.get(`/materio_sapi/search_form?`+q)
         .then(({data}) => {
           // console.log('getSearchForm')
           this.form = data.rendered