search_ui/components/entity/modals/EntityDataModal.vue

<template>
  <div class="position-relative">
    <form>
      <div class="form-row">
        <label for="">عنوان </label>
        <div class="input-container">
          <vue-select
            dir="rtl"
            v-model="info.title"
            :options="all_data"
          ></vue-select>
          <div v-if="errors.title && errors.title.length > 0">
            <div
              class="error-input"
              v-for="(error, index) in errors.title"
              :key="index"
            >
              {{ error }}
            </div>
          </div>
        </div>
      </div>

      <div class="form-row">
        <label for="">توضیح </label>
        <textarea
          v-model="info.desc"
          name=""
          id=""
          cols="30"
          rows="30"
          placeholder="توضیحی مختصر برای نحوه ارتباط"
        ></textarea>
      </div>

      <div class="popUp-tab__buttons">
        <div class="d-flex justify-content-between flex-grow-1">
          <span>&nbsp;</span>

          <div class="d-flex">
            <button
              title="لغو"
              @click.prevent="$emit('close-modal')"
              class="popUp-tab__clear btn"
              type="button"
            >
              لغو
            </button>
            <button
              type="button"
              class="popUp-tab__submit btn"
              @click.prevent="saveProperty()"
            >
              ثبت
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import { mapActions } from "pinia";
import { propertyMixin } from "~/entity/mixins/propertyMixin";

export default {
  mixins: [propertyMixin],

  props: {
    data: { type: Object, default: () => ({}) },
  },
  mounted() {
    this.project = this.data.entity;
    this.getAllData();
  },

  data() {
    return {
      info: {
        description: undefined,
        file: undefined,
        title: undefined,
      },
      // property: {
      //   entity: {
      //     title: ''
      //   },
      //   value_json: {
      //     desc: ''
      //   },
      //   entity_id:  this.data.entity.id,
      // },
      errors: {},
      all_data: [],
    };
  },

  computed: {
    propertyObj() {
      if (this.data.property) {
        return { ...this.data.property };
      } else {
        return this.property;
      }
    },
  },

  methods: {
    ...mapActions("jahat", ["SAVE_ENTITY_ENTITY"]),

    // saveProperty() {
    //   let self = this;
    //   let property = this.propertyObj;
    //   let index = 0;
    //   let url = "entity/data";

    //   if (property.id) {
    //     index = property.position;
    //     url = "entity/data/" + property.id;
    //     property._method = "PUT";
    //   }

    //   this.SAVE_ENTITY_ENTITY({ property, url })
    //     .then((response) => {
    //       self.$emit("change", {
    //         item: response.data,
    //         type: "related_datas",
    //         index: index,
    //       });
    //       self.closeModal();
    //     })
    //     .catch((errors) => {
    //       self.errors = errors.data.errors;
    //     });
    // },

    getAllData() {
      let self = this;
      ApiService.get(
        null,
        "entity/data",
        function (response) {
          response.data.forEach((item) => {
            let data = {
              id: item.id,
              label: item.title,
            };
            self.all_data.push(data);
          });
          // self.all_data = response.data;
          // let payload = response.data.data;
          // context.commit('SET_PROBLEMS', payload);
        },
        function () {
          // context.commit(PURGE_AUTH);
        }
      );
    },

    // closeModal() {
    //   this.data = { title: "" };
    //   this.propertyObj.value_json = { desc: "" };
    //   this.$refs.closeDataModal.click();
    // },
  },
};
</script>