search_ui/components/entity/components/EntitiyModalCompareVersionQa.vue

<template>
  <div>
    <div class="my-modal mb-3 d-flex justify-content-around">
      <div class="me-2 d-block align-items-center">
        <label class="multiselect-lable ms-1" for="">نسخه اول:</label>
        <multiselect
          :width="'auto'"
          :searchable="true"
          :close-on-select="true"
          :show-labels="false"
          label="title"
          track-by="key"
          placeholder="انتخاب کنید"
          v-model="versionOne"
          :options="filteredVersionOneOptions"
          @select="comboChange"
          :hide-selected="false"
          :max-height="250"
          openDirection="rtl"
          class="multiselect"
        >
          <span slot="noResult">موردی پیدا نشد.</span>
        </multiselect>
      </div>
      <div class="me-2 d-block align-items-center">
        <label class="multiselect-lable ms-1" for="">نسخه دوم:</label>
        <multiselect
          :width="'auto'"
          :searchable="true"
          :close-on-select="true"
          :show-labels="false"
          label="title"
          track-by="key"
          placeholder="انتخاب کنید"
          v-model="versionTwo"
          :options="filteredVersionTwoOptions"
          @select="comboChange"
          :hide-selected="false"
          :max-height="250"
          openDirection="rtl"
          class="multiselect"
        >
          <span slot="noResult">موردی پیدا نشد.</span>
        </multiselect>
      </div>
    </div>
    <div class="d-flex justify-content-center mt-5">
      <div>
        <button-component
          classes="popUp-tab__submit button"
          @click="compareVersionsQanon"
          buttonText="شروع مقایسه"
          data-dismiss="modal"
          id="button-component"
          :disabled="!versionOne || !versionTwo"
        ></button-component>
      </div>
      <div>
        <button-component
          classes="popUp-tab__submit button me-2"
          @click="closeModal"
          buttonText="انصراف"
          data-dismiss="modal"
          id="button-component"
        ></button-component>
      </div>
    </div>
  </div>
</template>

<script>
import entityApi from "@apis/entityApi";
import { mapState } from "pinia";
import Multiselect from "vue-multiselect";
import { useEntityStore } from "@search/stores/entityStore";

export default {
  props: {
    listItemsCompare: {
      default() {
        return {};
      },
    },
  },

  emits: ["close-modal"],
  beforeMount() {
    this.httpService = useNuxtApp()["$http"];
  },
  mounted() {},
  data() {
    return {
      httpService: undefined,
      versionOne: "",
      versionTwo: "",
      versionOneContent: "",
      versionTwoContent: "",
    };
  },
  computed: {
    ...mapState(useEntityStore, ["activeEntityViewSchemaGetter"]),
    filteredVersionOneOptions() {
      return this.listItemsCompare.filter(
        (item) => item.title !== this.versionTwo?.title
      );
    },
    filteredVersionTwoOptions() {
      return this.listItemsCompare.filter(
        (item) => item.title !== this.versionOne?.title
      );
    },
  },

  methods: {
    comboChange(items) {
      let id = this.$route.params.id;

      let payload = {
        qanon_id: id,
        date: items.title,
      };

      let url = entityApi.chart.version;
      let key = this.activeEntityViewSchemaGetter?.key;
      url = url.replace("@index_key", key);

      this.httpService.postRequest(url, payload).then((res) => {
        let data = res.data;

        if (items === this.versionOne) {
          this.versionOneContent = "";
          data.forEach((element) => {
            let text1 = element._source.content;
            this.versionOneContent += text1 + "\n";
          });
          // console.log("Text1 Compare:", items.title, this.versionOneContent);
        }

        if (items === this.versionTwo) {
          this.versionTwoContent = "";
          data.forEach((element) => {
            let text2 = element._source.content;
            this.versionTwoContent += text2 + "\n";
          });
          // console.log("Text2 Compare:", items.title, this.versionTwoContent);
        }
      });
    },
    compareVersionsQanon() {
      this.$emit(
        "compare-versions-qanon",
        this.versionOneContent,
        this.versionTwoContent
      );
    },
    closeModal() {
      this.$emit("close");
    },
  },
  components: { Multiselect },
};
</script>
<style lang="scss" scoped>
.multiselect {
  width: 15em;
}
</style>