search_ui/components/entity/modals/EntitySocialEffectsModal.vue

<template>
  <div class="position-relative">
    <form>
      <!-- <div>entity_id: {{ data.entity.id }}</div> -->
      <div class="form-row">
        <label for="">عنوان </label>
        <input
          type="text"
          placeholder="عنوان گویا و مختصری را وارد کنید"
          v-model="value.title"
        />
      </div>
      <div class="form-row">
        <label for="">فایل مرتبط </label>
        <!-- <a href="javascript:void(0)" data-bs-toggle="modal" -->
        <!-- data-bs-target="#jahat-modal" @click="$emit('file-event')">افزودن</a> -->
        <div
          class="image-uploader-container"
          :class="{ 'hide-preview': hasImage }"
        >
          <image-uploader
            ref="file-uploader"
            :scaleRatio="0.9"
            :preview="true"
            :debug="1"
            :maxWidth="300"
            :maxHeight="300"
            :maxSize="0.5"
            :quality="1"
            :autoRotate="true"
            outputFormat="file"
            :className="['fileinput', { 'fileinput--loaded': hasImage }]"
            :capture="false"
            accept="image/*"
            doNotResize="['gif', 'svg']"
            @input="setImage"
          >
            <label class="upload-label" for="fileInput" slot="upload-label">
              <img
                v-if="
                  value.file?.length &&
                  (getFileExtension(value.file) == 'png' ||
                    getFileExtension(value.file) == 'jpg' ||
                    getFileExtension(value.file) == 'jpeg')
                "
                :src="imageUrl(value.file)"
                class="img-fluid"
                :alt="data.title"
              />

              <span
                v-else-if="value.file?.length"
                class="tavasi"
                :class="`tavasi-${getFileExtension(value.file)}-file`"
              ></span>

              <!-- replace image src with incoming src -->

              <span v-else class="tavasi tavasi-cloud-upload"></span>
            </label>
          </image-uploader>
        </div>

        <!-- <picture-input
        :prefill="imageUrl"
        ref="pictureInput"
        width="200"
        height="100"
        margin="16"
        accept="image/jpeg,image/png,image/jpg"
        :alertOnError="false"
        size="10"
        button-class="btn btn-info btn-sm"
        remove-button-class="btn btn-danger btn-sm"
        :custom-strings="{
          drag: 'فایل را اینجا رها کنید',
          change: 'تغییر عکس',
          remove: 'حذف عکس',
        }"
        :removable="true"
        :hideChangeButton="true"
        @change="onChange"
        @remove="removeImg"
      >
      </picture-input> -->
      </div>

      <div class="form-row" v-if="data.keyName != 'files'">
        <label for="">توضیح </label>

        <textarea
          style="overflow: auto"
          v-model="value.description"
          name=""
          id=""
          cols="30"
          rows="30"
          placeholder="توضیحی مختصر برای نحوه ارتباط"
        ></textarea>
      </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()"
          >
            حذف
          </button>
          <div data-v-e8ee7a26="" 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 "~/entity/mixins/propertyMixin";

// import ImageUploader from "vue-image-upload-resize";

export default {
  mixins: [propertyMixin],
  
  props: {
    data: { type: Object, default: () => ({}) },
  },
  mounted() {
    const res = this.getPropertyValue(
      this.data.entity,
      this.data.keyName,
      this.data.index
    );

    if (res) this.value = res;
  },
  data() {
    return {
      value: {
        title: null,
        description: null,
        file: null,
      },
      hasImage: false,
      // imageUrl: undefined,
    };
  },

  computed: {
    // propertyObj(){
    //   return this.value;
    // }
  },

  methods: {
    imageUrl(url) {
      return import.meta.env.VITE_BASE_URL + url
    },
    setImage: function (file) {
      this.hasImage = true;
      // this.imageUrl = file;
      this.saveFile(file.info);
    },
    getFileExtension(filename) {
      const validtypes = [
        "xlsx",
        "xls",
        "doc",
        "docx",
        "ppt",
        "pptx",
        "txt",
        "pdf",
        "jpg",
        "png",
        "jpeg",
      ];
      const fileExtension = filename?.split(".").pop();
      return validtypes.includes(fileExtension) ? fileExtension : "other";
    },

    // ...mapActions("jahat",['SAVE_PROPERTY']),
    // saveProperty(){
    //   let self = this;
    //   let property = this.propertyObj;
    //   let index = 0;
    //   if(property.id){
    //     index = property.index;
    //   }
    //   this.SAVE_PROPERTY(property).then(response => {
    //     self.$emit('change', {item: response.data, type: 'necessities', index: index});
    //   });
    // }
  },
};
</script>
<style lang="scss">
.picture-input input[type="file"],
#fileInput {
  display: none !important;
}

.image-uploader-container {
  position: relative;
  border: 2px dashed #eee;
  padding: 0.2em;

  &.hide-preview {
    .upload-label {
      position: absolute;
      right: 0;
      left: 0;
      top: 0;
      bottom: 0;
      width: auto !important;
      overflow: hidden;
    }

    .upload-label img {
      visibility: hidden;
    }
  }
  .img-preview {
    width: 300px;
    max-width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
  }
}
</style>