search_ui/components/entity/modals/EntityMqSectionModal.vue

<template>
  <div class="position-relative">
    <form class="mq-section-form">
      <div class="form-row text__14">
        <!-- <label for="">فرم احکام قانونی</label> -->
        <span class="col-9 text-overflow"> {{ data.entity.content }}</span>

        <div class="input-container col-3">
          <vue-select dir="rtl" v-model="value.state" :options="states">
            <div slot="no-options"> جستجوی ... </div>
          </vue-select>

          <div v-if="errors['state'] && errors['state'].length > 0">
            <div
              class="error-input"
              v-for="(error, index) in errors['state']"
              :key="index"
            >
              {{ error }}
            </div>
          </div>
        </div>
      </div>
      <div class="form-row">
        <label for="">محتوا: </label>
        <div class="input-container">
          <input
            type="text"
            placeholder="محتوا را وارد کنید"
            v-model="value.content"
          />
          <div v-if="errors.content && errors.content.length > 0">
            <div
              class="error-input"
              v-for="(error, index) in errors.content"
              :key="index"
            >
              {{ error }}
            </div>
          </div>
        </div>
      </div>

      <div class="form-row">
        <label for="">توضیحات </label>
        <div class="input-container">
          <textarea
            name=""
            id=""
            v-model="value.description"
            cols="30"
            rows="3"
            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="form-row">
      <label for="">وضعیت</label>
      <div class="input-container">
        <vue-select dir="rtl" v-model="value.state" :options="states">
          <div slot="no-options"> جستجوی ... </div>
        </vue-select>

        <div v-if="errors['state'] && errors['state'].length > 0">
          <div
            class="error-input"
            v-for="(error, index) in errors['state']"
            :key="index"
          >
            {{ error }}
          </div>
        </div>
      </div>
    </div> -->

      <div class="popUp-tab__buttons">
        <div class="d-flex justify-content-between flex-grow-1">
          <button
            type="button"
            class="btn delete-btn btn-outline-danger button_delete_SocialEffects"
            @click.prevent="deleteProperty(value?.id)"
          >
            حذف
          </button>

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

<script>
import { propertyMixin } from "@mixins/entity/propertyMixin";
import { commonMixin } from "@mixins/entity/commonMixin";

import { mapState } from "pinia";

export default {
  mixins: [propertyMixin, commonMixin],

  props: {
    data: { type: Object, default: () => ({}) },
    // slug: {
    //     type: String,
    //   required: true
    //   },
  },

  mounted() {
    // this.httpService = new HttpService(
    //   import.meta.env.VITE_REPO_BASE_URL +
    //     "public/" +
    //     this.$route.params.key +
    //     "/"
    // );

    const res = this.getPropertyValue(
      this.data.entity,
      this.data.keyName,
      this.data.index
    );

    if (res) this.value = res;
  },
  data() {
    return {
      value: {
        content: null,
        description: null,
        state: "",
      },
      states: ["نامشخص", "مدل شده", "اتمام شده", "منقضی شده"],
    };
  },

  methods: {
    closeModal() {
      this.$refs.closeStatusModal.click();
    },
  },
};
</script>
<style scoped lang="scss">
@import "../../../assets/common/scss/mixin.scss";

.answer-modal textarea {
  height: auto;
}

.user-modal .my-profile {
  padding-bottom: 0px;
}

img {
  height: auto;
  max-width: 2.5rem;
  margin-right: 1rem;
}

.d-center {
  display: flex;
  align-items: center;
}

.selected img {
  width: auto;
  max-height: 23px;
  margin-right: 0.5rem;
}

.v-select .dropdown li {
  border-bottom: 1px solid rgba(112, 128, 144, 0.1);
}

.v-select .dropdown li:last-child {
  border-bottom: none;
}

.v-select .dropdown li a {
  padding: 10px 20px;
  width: 100%;
  font-size: 1.25em;
  color: #3c3c3c;
}

.v-select .dropdown-menu .active > a {
  color: #fff;
}
.text-overflow {
  @include textOverflow(36em);
}

.mq-section-form {
  height: 14em;
  overflow: auto;
}
</style>