search_ui/components/entity/modals/EntityQuestionModal.vue

<template>
  <div class="position-relative">
    <form @submit.prevent="save()">
      <div class="form-row form-group p-0">
        <label class="col-md-12" for="subject">عنوان</label>
        <textarea
          class="col-md-12 h-auto"
          v-model="value"
          name=""
          cols="30"
          rows="5"
          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"
            @click.prevent="deleteProperty()"
          >
            حذف
          </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 repoApi from "~/apis/repoApi";
import { mapState, mapActions } from "pinia";
import { propertyMixin } from "@mixins/entity/propertyMixin";

export default {
  mixins: [propertyMixin],

  props: {
    data: { type: Object, default: () => ({}) },

    metaItems: {
      default() {
        return [];
      },
    },
    // called from jahat entity list subjecting.
    projectTagsName: {
      default: undefined,
    },
  },
  emits: ["update-list", "close-modal", "delete-item"],
  mounted() {
    this.httpService = useNuxtApp()["$http"];

    const propValue = this.getPropertyValue(
      this.data.entity,
      this.data.keyName,
      this.data.index
    );
    this.value = propValue?.title;
  },
  data() {
    return {
      value: "",

      showSubjectForm: false,
      tableActions: [
        {
          showOutside: true,

          show: true,
          icon: "tavasi tavasi-Component-295--1",
          title: "حذف",
          to: {
            name: "undefined",
          },
          selected: false,
          disabled: false,
          howToOpen: "",
          href: "",
          class: "delete-btn",
          action: "delete-table-item",
          // can: "subject-",
        },
      ],
      tableColumns: [
        {
          key: "title",
          title: "عنوان",
        },
      ],
      sorting: {
        sortby: "created",
        sortorder: undefined, // asc | none
      },

      httpService: undefined,
      fetchingData: false,
      itemSubject: [],
      subjectProjectId: undefined,
      projects: [],
      comboListCount: 0,
      arrayOfSubjectId: [],
      subjects: {},
      buttonLoading: false,
      lastSubjectSelected: undefined,

      selectedItemClone: {
        id: undefined,
        title: "",
        number: "",
        resource: "",
        date_text: "",
        text: "",
        projectid: this.subjectProjectId,
        item_type: "text",
      },
    };
  },
  computed: {
    ...mapState("list", ["selectedProjectGetter", "selectedItemGetter"]),
    lastComboItem() {
      return this.comboListCount - 1;
    },
  },

  methods: {
    ...mapActions("list", ["SET_SELECTED_PROJECT"]),

    save() {
      if (this.buttonLoading) return;
      this.buttonLoading = true;

      const formData = {
        id: this.selectedItemGetter.id,
        subject_id: this.lastSubjectSelected?.id,
        subject_title: this.lastSubjectSelected?.title,
      };

      if (formData.subject_id === undefined) {
        this.mySwalToast({
          title: "موضوع انتخاب نشده است.",
          html: null,
          icon: "error",
        });
        this.buttonLoading = false;
        return;
      }

      this.httpService
        .formDataRequest(repoUrl() + this.$route.meta.slug + repoApi.subject.add, formData)
        .then((response) => {
          this.mySwalToast({
            title: response.message,
            html: null,
            icon: "success",
          });
          //this.getItemSubject();
          this.itemSubject.push({
            id: this.lastSubjectSelected?.id,
            title: this.lastSubjectSelected?.title,
          });
        })
        .catch((err) => {
          // this.mySwalToast({
          //   title: err.response.data.message,
          //   html: null,
          //   icon: "error",
          // });
        })
        .finally(() => {
          this.buttonLoading = false;
        });
    },
    deleteItem(tableRowItemIndex) {
      const data = {
        id: this.selectedItemGetter.id,
        subject_id: this.itemSubject[tableRowItemIndex].id,
        subject_title: this.itemSubject[tableRowItemIndex].title,
      };

      this.mySwalConfirm({
        title: "هشدار",
        html: "از حذف رابطه موضوع مطمئن هستید؟",
        icon: "warning",
      }).then((result) => {
        if (result.isConfirmed) {
          this.httpService
            .formDataRequest(repoUrl() + this.$route.meta.slug +repoApi.subject.delete, data)
            .then((res) => {
              this.itemSubject.splice(tableRowItemIndex, 1);

              this.mySwalToast({
                title: res.message,
                html: undefined,
                icon: "success",
              });
            });
        }
      });
    },
    sortChanged(sorting) {
      // keep limit status.
      // reset page and offset values.
      this.pagination.page = this.pagination.offset = 0;
      this.sorting = sorting;
    },
  },
 
};
</script>

<style lang="scss" scoped>
.new-subject-form-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  box-shadow: 0px 0px 17px 1px #eee;
  padding: 1em;
  width: 70%;
  margin: auto;
  height: 50%;
}

.form-control {
  border-radius: 0 20px 20px 0;
  font-size: 14px;
  font-weight: 300;
  text-align: right;
  color: #707b87;
  height: 100%;
  border-color: transparent;
  padding-right: 0;
  padding-left: 0;
}
// .remov_button {
//   top: 20px;
//   right: 60%;
// }
.submit_button {
  // position: relative;
  // right: 90px !important;
}

.form-control::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: pink;
}
.form-control::-moz-placeholder {
  /* Firefox 19+ */
  color: pink;
}
.form-control:-ms-input-placeholder {
  /* IE 10+ */
  color: pink;
}
.form-control:-moz-placeholder {
  /* Firefox 18- */
  color: pink;
}
</style>