materio-d8/web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue

<template v-slot="default">
  <div v-bind:id="blockid">
    <SearchForm
      v-if="displayform"
      v-bind:form="form"></SearchForm>
  </div>
</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'

export default {
  props: ['blockid', 'formhtml'],
  data(){
    return {
      form: null
    }
  },
  computed: {
    ...mapState({
      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')
      return this.canSearch && this.form
    }
  },
  beforeMount() {
    // console.log('SearchBlock beforeMount')
    this.form = this.formhtml
  },
  watch: {
    canSearch(new_value, old_value) {
      // console.log('canSearch changed, old: '+old_value+", new: "+new_value)
      if (new_value && !this.form) {
        this.getSearchForm()
      }
      if (!new_value && this.form) {
        this.form = null
      }
    }
  },
  methods: {
    getSearchForm(){
      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
        })
        .catch((error) => {
            console.warn('Issue with get searchform', error)
        })
    }
  },
  components: {
    SearchForm
  }
}
</script>

<style lang="scss" scoped>

</style>