search_ui/components/entity/modals/EntityProblemModal.vue

<template>
  <div class="position-relative">
    <form>
      <div class="form-row">
        <label for="">عنوان </label>
        <div class="input-container">
          <input
            type="text"
            ref="title"
            placeholder="عنوان گویا و مختصری را وارد کنید"
            v-model="data.title"
          />
          <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>
      <input
        type="number"
        ref="weight"
        placeholder=""
        v-model="data.weight"
      />
      <div v-if="errors['weight'] && errors['weight'].length > 0">
        <div
          class="error-input"
          v-for="(error, index) in errors['weight']"
          :key="index"
        >
          {{ error }}
        </div>
      </div>
    </div> -->

      <div class="form-row">
        <label for="">بیان </label>
        <div class="input-container">
          <textarea
            v-model="data.description"
            name=""
            ref="text"
            cols="30"
            rows="30"
            placeholder="توضیحی از مشکل و اهمیت مسئله بدهید"
          ></textarea>
          <div
            v-if="errors['description'] && errors['description'].length > 0"
          >
            <div
              class="error-input"
              v-for="(error, index) in errors['description']"
              :key="index"
            >
              {{ error }}
            </div>
          </div>
        </div>
      </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="saveIssue()"
            >
              ثبت
            </button>
          </div>
        </div>
      </div>

      <!-- <div class="popUp-tab__buttons">
      <a
        href="javascript:void(0)"
        class="popUp-tab__clear"
        @click="closeModal()"
        >لغو</a
      >
      <a
        href="javascript:void(0)"
        class="popUp-tab__clear"
        data-dismiss="modal"
        ref="closeProblemModal"
        style="display:none"
        >لغو</a
      >
      <a
        href="javascript:void(0)"
        class="popUp-tab__submit"
        @click="addIssue(entity)"
        >ثبت</a
      >
    </div> -->
    </form>
  </div>
</template>
<script>
import { entityMixin } from "@mixins/entity/entityMixin";
import { commonMixin } from "@mixins/entity/commonMixin";

export default {
  props: {
    data: { type: Object, default: () => ({}) },
  },
  mixins: [entityMixin, commonMixin],
  // beforeMount() {
    // this.httpService = new HttpService(import.meta.env.VITE_REPO_BASE_URL+ this.$route.meta.slug );
  // },
  data() {
    return {
      // httpService: undefined,
      errors: [],
      entity: {
        title: "",
        description: "",
        // weight: 0,
      },

      // type_id: 1,
    };
  },

  methods: {
    saveIssue() {
      if (this.data && this.data.id) this.updateIssue();
      else this.addIssue();
    },
    addIssue() {
      if (!this.data) this.data = this.data;

      this.data.type_id = this.getEntityTypeId(this.$route.name);
      // console.log(this.data);
      this.addEntity(this.data).then((res) => {
        setTimeout(() => {
          this.$emit("problem-added", res);
          this.addToConversation(res, this.data);
        }, 1000);
      });
    },

    //mehdi
    updateIssue() {
      const payload = {
        // id: this.data.id,
        // type_id: this.type_id,
        title: this.data.title,
        description: this.data.description,
        // state_id: 1,
      };

      this.updateEntity(this.data.id, payload).then((res) => {
        setTimeout(() => {
          this.$emit("problem-added", res);
        }, 1000);
      });
    },
  },
};
</script>