<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>