search_ui/components/search/forms/SearchSynonymSearch.vue

<template>
  <div>
    <div class="form-group form-row align-items-center">
      <!-- <label class="col-auto" for="name">عبارت جستجو: </label> -->
      <div class="col">
        <input
          type="search"
          class="form-control"
          id="name"
          placeholder="ابتدا عبارت جستجو را وارد کنید"
          v-model.trim="query"
          @keyup.enter="getSynonyms()"
        />
      </div>
      <div class="col-auto">
        <button
          @click.prevent="getSynonyms()"
          type="button"
          class="btn btn-secondary"
        >
          پیشنهاد مترادفات
          <!-- <svg class="icon icon-Component-198--1"> -->
          <!-- <use xlink:href="#icon-Component-198--1"></use> -->
          <!-- </svg> -->
        </button>
      </div>
    </div>
    <div class="synonyms firefox-scrollbar p-3">
      <div v-if="synonyms">
        <div
          class="form-group form-row"
          v-for="(syn, index, key) in synonyms"
          :key="key"
        >
          <label class="col-2" for="name">{{ index }} : </label>
          <input
            type="text"
            class="form-control col"
            id="name"
            placeholder="عبارت جستجو"
            v-model.trim="syn.value"
            :disabled="syn.isStopWord"
          />
        </div>
      </div>

      <no-data v-else></no-data>
    </div>
    <div
      v-if="synonyms"
      class="w-100 d-flex justify-content-between align-items-center"
    >
      <button
        @click.prevent="closeModal()"
        class="btn delete-btn btn-outline-secondary"
        type="button"
      >
        بستن
      </button>
      <button @click.prevent="search()" type="button" class="btn btn-primary">
        جستجو
      </button>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from "pinia";
import searchApi from "~/apis/searchApi";


export default {
  props: {
    activeTab: null,
    editCat: null,
    categories: {
      default() {
        return [];
      },
    },
  },
  beforeMount() {
    this.httpService = new HttpService(import.meta.env.VITE_BASE_URL);
  },
  mounted() {
    this.query = this.searchSynonymTitleGetter ?? null;
    this.synonyms = this.searchSynonymFormGetter ?? undefined;
    if(!this.synonyms){
      this.getSynonyms();
    }
  },

  data() {
    return {
      synonyms: undefined,

      query: null,
      httpService: undefined,
      loading: false,
      pagination: {
        pages: 0,
        total: 0,
        page: 1,
        offset: 0, // page * per_page
        limit: 10, //per_page
      },
    };
  },
  computed: {
    ...mapState({
      activeSchemaGetter: "activeSchemaGetter",
    }),
    ...mapState(useSearchStore, [
      "searchSynonymFormGetter",
      "searchSynonymTitleGetter",
    ]),
  },
  methods: {
    ...mapActions("search", [
      "searchSynonymFormSetter",
      "searchSynonymTitleSetter",
    ]),
    getSynonyms() {
      if(!this.query){
      //   this.mySwalConfirm({
      //   title: "خطا!!",
      //   html: `عبارت جستجو نباید خالی باشد`,
      //   icon: "",
      // })
        return;
      }

      let payload = {};
      let url = repoUrl() + searchApi.synonym.getSynonyms;

      payload = {
        query: this.query,
      };

      this.httpService.postRequest(url, payload).then((res) => {
        this.synonyms = res.data;
      });
    },
    closeModal() {
      this.$emit("close");
    },
    search() {
      this.searchSynonymFormSetter(this.synonyms);
      this.searchSynonymTitleSetter(this.query);

      this.$emit("search", this.synonyms);
    },
  },
};
</script>
<style lang="scss">
.synonyms {
  background: #eee;
  height: 21em;
  overflow-y: auto;
  margin-bottom: 1em;
}
</style>