SearchBlock

Vue.component("searchblock", {
  props: ["initData", "searchText", "placeholder", "searchUrl"],
  data() {
    return {
      isInputFocus: false,
      showAutoComplete: false,
      userQuery: "",
      autoCompleteHits: [],
      loading: false,
      url: this.searchUrl,
      init: JSON.parse(JSON.stringify(this.initData)),
      ph: JSON.parse(JSON.stringify(this.placeholder))
    };
  },
  mounted() {
    console.log(JSON.parse(this.init));

  },
  watch: {
    userQuery: function (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.showAutoComplete = true;
        this.autocomplete(newVal)
      }
      if (newVal.length < 2) {
        this.showAutoComplete = false;
        this.autoCompleteHits = "";
      }
    }
  },
  methods: {
    hideAutoCompleteWindow() {
      if (this.showAutoComplete) {
        this.showAutoComplete = false;
        this.autoCompleteHits = "";
      }
    },
    async autocomplete(val) {
      if (typeof val === "string") {
        if (val.length >= 2 && this.url) {
          this.loading = true;
          try {
            let req = {
              query: {
                ...JSON.parse(this.init)
              }
            }
            req.query.querytext = val;
            console.log(req);

            let res = await axios.post(this.url, req);
            let data = res.data.d;

            console.log(data)
            if (data.SearchHits) {
              this.autoCompleteHits = data.SearchHits;
            }
            this.loading = false;
          } catch (error) {
            console.log(error);
          }
        } else {
          this.autoCompleteHits = "";
        }
      }
    }
  },
  template: `
    <div class="w-100 searchblock">
        <div class="w-100" v-if="this.searchText">
            <h4 class="heading-level-4">
              {{this.searchText}}
            </h4>
        </div>
        <div class="w-100 searchblock">
            <form autocomplete="off" @submit.prevent="autocomplete" :class="{'is--focused': isInputFocus}" class="search--input--container form-control" ref="search">
                <input type="text" name="name" v-model="userQuery" :placeholder="this.ph ? this.ph : 'Sök'"  @focus="isInputFocus = true" @blur="isInputFocus = false"/>
                <transition name="fade" mode="in-out">
                    <button  @click="this.autocomplete" type="submit" v-if="!isInputFocus "
                        class="d-flex align-items-center justify-content-center search--btn">
                        <span class="material-icons ">search</span>
                    </button>
                    <button  type="submit" @click="this.autocomplete" v-else
                        class="d-flex search--btn align-items-center active justify-content-center">
                        <span class="material-icons blue">search</span>
                    </button>
                </transition>
                <autocomplete-results @hideAutoComplete="this.hideAutoCompleteWindow" :isLoading="this.loading" :hits="this.autoCompleteHits"></autocomplete-results>
            </form>
        </div>
      </div>
    `
});

Vue.component("autocomplete-results", {
  props: ["isLoading", "hits"],
  methods: {
    hideAutoComplete() {
      this.$emit("hideAutoComplete")
    }
  },
  directives: {
    ClickOutside
  },
  template: `
<div class="autocomplete-results d-flex flex-column align-items-center" v-click-outside="this.hideAutoComplete">
        <vloading class="mt-3 mb-3" key="1" v-if="this.isLoading" :height="25" :width="25" :color="'#404040'" :is-full-page="false" :active.sync="this.isLoading"></vloading>
        <transition-group tag="ul" name="fade"  v-else-if="this.hits.length > 0" class="list-unstyled d-flex flex-column">
            <a class="d-flex flex-row align-items-center justify-content-between" v-for="(hit, index) in this.hits" :key="hit.Id" :href="hit.Url" v-if="hit.Title && hit.Url">{{hit.Title}}
              <small class="ml-4 anmalningskod" v-if="hit.MetaData && hit.MetaData.Anmalningskod && hit.MetaData.Anmalningskod.StringValue" v-html="hit.MetaData.Anmalningskod.StringValue"></small>
            </a>
        </transition-group>
</div>
    `
})