base_ui/components/forms/DataPropertyModal.vue

<template>
  <div class="d-flex">
    <label :for="localFormElement.key" :class="$attrs.labelClass ?? 'col-md-3'">{{ localFormElement.label }}:</label>
    <div class="d-flex" :class="[$attrs.inputClass ?? ' col-md-9', { error: hasError }]">
     
      <button type="button" class="btn btn-primary" @click="openModal('DataPropertyForm', 'فرم ایجاد خصوصیت ')">
        انتخاب
      </button>
      <base-modal v-if="uploadForFirstTime" @canel="closeModal()" :showHeaderCloseButton="true" :modalTitle="modalTitle"
        class="borhan-modal" modalSize="modal-lg" height="auto" maxHeight="40em" overflow="hidden" :showSaveButton="true"
        :hasFooter="false">
        <component :is="slotComponentName" :uploadForFirstTime="uploadForFirstTime" @saveAnnotation="sendTextValue"
          :ontologyId="ontologyIdGetter" @close="closeModal()"></component>
      </base-modal>
    </div>
  </div> 
</template>

<script>
import formBuilderMixin from "@mixins/formBuilderMixin";
import HttpService from "@services/httpService";
import apis from "@apis/borhanApi.js";
import VueTribute from "vue-tribute";
import { mapGetters, mapMutations, mapActions } from "vuex";
export default {
  mixins: [formBuilderMixin],
  beforeMount() {
    this.httpService = new HttpService();
  },
  mounted() {
    this.multiSelectValue(this.formElement?.key);
  },

  data() {
    return {
      taskForm: "",
      httpService: undefined,
      templateValue: "",
      options: [
        {
          title: "rational",
          name: "rational",
        },
        {
          title: "real",
          name: "real",
        },
        {
          title: "plainliteral",
          name: "plainliteral",
        },
        {
          title: "xmlliteral",
          name: "xmlliteral",
        },
        {
          title: "literal",
          name: "literal",
        },
        {
          title: "anyuri",
          name: "anyuri",
        },
        {
          title: "base64binary",
          name: "base64binary",
        },
        {
          title: "double",
          name: "double",
        },
        {
          title: "byte",
          name: "byte",
        },
        {
          title: "datetime",
          name: "datetime",
        },
        {
          title: "datetimestamp",
          name: "datetimestamp",
        },
        {
          title: "decimal",
          name: "decimal",
        },
        {
          title: "float",
          name: "float",
        },
        {
          title: "hexbinary",
          name: "hexbinary",
        },
        {
          title: "int",
          name: "int",
        },
        {
          title: "integer",
          name: "integer",
        },
        {
          title: "language",
          name: "language",
        },
        {
          title: "long",
          name: "long",
        },
        {
          title: "name",
          name: "name",
        },
        {
          title: "ncname",
          name: "ncname",
        },
        {
          title: "negativeinteger",
          name: "negativeinteger",
        },
        {
          title: "nmtoken",
          name: "nmtoken",
        },
        {
          title: "nonnegativeinteger",
          name: "nonnegativeinteger",
        },
        {
          title: "nonpositiveinteger",
          name: "nonpositiveinteger",
        },
        {
          title: "normalizedstring",
          name: "normalizedstring",
        },
        {
          title: "positiveinteger",
          name: "positiveinteger",
        },
        {
          title: "short",
          name: "short",
        },
        {
          title: "string",
          name: "string",
        },
        {
          title: "token",
          name: "token",
        },
        {
          title: "unsignedbyte",
          name: "unsignedbyte",
        },
        {
          title: "unsignedint",
          name: "unsignedint",
        },
        {
          title: "unsignedlong",
          name: "unsignedlong",
        },
        {
          title: "unsignedshort",
          name: "unsignedshort",
        },
      ],
      tributeOptions: {
        // symbol or string that starts the lookup
        trigger: "",

        // element to target for @mentions
        iframe: null,

        // class added in the flyout menu for active item
        selectClass: "highlight",

        // class added to the menu container
        containerClass: "tribute-container mini",

        // class added to each list item
        itemClass: "my-tribute-class",

        // function called on select that returns the content to insert
        selectTemplate: function (item) {
          return item.original.title;
          // return "@" + item.original.value;
        },

        // template for displaying item in menu
        menuItemTemplate: function (item) {
          return item.original.title;
        },

        // template for when no match is found (optional),
        // If no template is provided, menu is hidden.
        noMatchTemplate:
          '<span class="no-result">مورد مشابهی ثبت نشده است.</span>',

        // specify an alternative parent container for the menu
        // container must be a positioned element for the menu to appear correctly ie. `position: relative;`
        // default container is the body
        menuContainer: document.body,

        // column to search against in the object (accepts function or string)
        lookup: "title",

        // column that contains the content to insert by default
        fillAttr: "title",

        // REQUIRED: array of objects to match or a function that returns data (see 'Loading remote data' for an example)
        // values: [
        //   {
        //     key: null,
        //     value: "sghl",
        //   },
        // ],
        // values: ["سلام", "باسلام", "علیک سلام", "بی سلام", "صدتا سلام"],
        values: (text, cb) => {
          this.remoteSearch(text, (items) => cb(items));
        },
        // When your values function is async, an optional loading template to show
        loadingItemTemplate: null,

        // specify whether a space is required before the trigger string
        requireLeadingSpace: true,

        // specify whether a space is allowed in the middle of mentions
        allowSpaces: true,

        // optionally specify a custom suffix for the replace text
        // (defaults to empty space if undefined)
        // replaceTextSuffix: "",

        // specify whether the menu should be positioned.  Set to false and use in conjuction with menuContainer to create an inline menu
        // (defaults to true)
        positionMenu: true,

        // when the spacebar is hit, select the current match
        spaceSelectsMatch: false,

        // turn tribute into an autocomplete
        autocompleteMode: true,

        // Customize the elements used to wrap matched strings within the results list
        // defaults to <span></span> if undefined
        searchOpts: {
          pre: '<span style="color:red">',
          post: "</span>",
          skip: false, // true will skip local search, useful if doing server-side search
        },

        // Limits the number of items in the menu
        menuItemLimit: 25,

        // specify the minimum number of characters that must be typed before menu appears
        menuShowMinLength: 0,
      },
      uploadForFirstTime: false,
      slotComponentName: null,
      modalTitle: null,
    };
  },
  computed: {
    ...mapGetters("borhan", ["ontologyIdGetter", "clickPointNameGetter"]),
  },
  methods: {
    sendTextValue(event) {
      // this.$emit("keydown", {
      //   event,

      // });
      let url = apis[this.$route.name].add;
      url = url.replace("{{key}}", this.formElement.key);

      let payload = {
        ontology_id: this.ontologyIdGetter,
        name1: this.clickPointNameGetter,
        key: event.key,
        lang: event?.lang,
        type: event.datatype,
        value: event.value,
        prop: event.prop,
      };

      this.httpService
        .postRequest(url, payload)
        .then((res) => {
          this.mySwalToast({
            title: res.message ?? "اطلاعات با موفقیت ثبت شد.",
            html: null,
            icon: "success",
          });
        })
        .catch((err) => { })
        .finally(() => { });

    },
    closeModal() {
      $("#base-modal").modal("hide");

      setTimeout(() => {
        this.uploadForFirstTime = false;
        // this.createOntology();
      }, 500);
    },
    openModal(componentName, title) {
      this.uploadForFirstTime = true;
      this.slotComponentName = componentName;
      this.modalTitle = title;

      setTimeout(() => {
        $("#base-modal").modal({ backdrop: "static", keyboard: false }, "show");
      }, 500);
    },
    multiSelectValue(item) {

      this.httpService
        .getRequest(
          apis.property.update +
          "?ontology_id=" +
          this.ontologyIdGetter +
          `&name1=${"dataproperty"}`
        )
        .then((res) => {
          const list = res.data.Subobject_property;
          const processedList = [];

          list.forEach((element) => {
            const newItem = { title: element.title, name: element.title }; // ایجاد یک شیء جدید با ویژگی title
            processedList.push(newItem); // اضافه کردن شیء جدید به لیست
          });

          this.options = processedList;
        });

    },
  },

  components: {
    VueTribute: () =>
      import( "vue-tribute"),
    Multiselect: () =>
      import( "vue-multiselect"),
    AnnotationFormAdd: () => import("@borhan/components/AnnotationFormAdd.vue"),
    DataPropertyForm: () => import("@borhan/components/DataPropertyForm.vue"),
  },
};
</script>
<style scoped lang="scss">
.form-control {
  position: relative !important;
}

.button-input {
  background-color: unset !important;
  position: absolute !important;
  left: 2px !important;
  height: 100% !important;
  border: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
<style lang="scss">
.class-search {
  .multiselect__tags {
    border: unset;

    input {
      border: unset !important;
    }
  }
}
</style>