<template>
<div>
<div class="mt-3 text__15 text__green" v-if="description">
<span>{{ description }} </span>
</div>
<!-- tab/grouped mode -->
<template v-if="Array.isArray(localFormElements)">
<!-- start:horizontal mode -->
<template v-if="displayMode == 'horizontal'">
<div class="horizontal">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li
v-for="(groupItem, index) in localFormElements"
:key="'groupItem' + index"
@click="setTab(index)"
class="nav-item"
role="presentation"
>
<a
class="nav-link position-relative"
id="home-tab"
data-bs-toggle="tab"
:href="'#' + groupItem.key"
role="tab"
:aria-controls="groupItem.key"
aria-selected="true"
:class="{ active: groupItem?.active ?? false }"
>{{ groupItem.title }}
</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div
class="tab-pane fade show active p-3"
id="home"
role="tabpanel"
aria-labelledby="home-tab"
>
<div
v-if="localFormElements[currentTab]?.hasChildren"
class="accordion"
id="accordionExample"
>
<div
v-for="(innerGroupItem, j) in localFormElements[currentTab]
?.items"
:key="'innerGroupItem' + j"
class="card"
>
<div
class="card-header"
:id="'heading' + j"
style="height: 3rem"
>
<div
class="d-flex justify-content-between"
type="button"
data-bs-toggle="collapse"
:data-bs-target="'#collapse' + j"
aria-expanded="false"
:aria-controls="'collapse' + j"
>
<p style="font-size: 12px; color: black">
{{ innerGroupItem.title }}
</p>
<button
class="btn btn-link btn-block text-end collapsed button-meno"
type="button"
data-bs-toggle="collapse"
:data-bs-target="'#collapse' + j"
aria-expanded="false"
:aria-controls="'collapse' + j"
>
<span class="tavasi tavasi-Component-358--1"></span>
</button>
</div>
</div>
<div class="card-header" :id="'heading' + j">
<h2 class="mb-0">
<button
class="btn btn-link btn-block"
type="button"
data-bs-toggle="collapse"
:data-bs-target="'#collapse' + j"
:aria-expanded="innerGroupItem.active ?? false"
:aria-controls="'collapse' + j"
:class="{ active: innerGroupItem.active ?? false }"
>
{{ innerGroupItem.title }}
</button>
</h2>
</div>
<div
:id="'collapse' + j"
class="collapse"
:class="{ show: innerGroupItem.active ?? false }"
:aria-labelledby="'heading' + j"
data-parent="#accordionExample"
>
<div class="card-body">
<div class="position-relative ms-5">
<div class="container-fluid">
<div :key="'body'+j" class="row">
<div
v-for="(formElement, index1) in localFormElements[
currentTab
]?.items[j]?.items"
:class="formElement.colClass ?? 'col-12'"
>
<component
:otherData="otherData"
@updateComponentOption="updateComponentOption($event, formElement)"
:ref="refKeyBase + '_' + formElement.key"
:key="'element' + currentTab + '_' + j + '_' + index1"
:formElement="addValueToFormElement(formElement)"
:is="returnComponentNameDefault(formElement.type)"
@take-value="takeValueChanged($event, formElement)"
@action-affected-item="actionAffectedItem($event, formElement)"
@keydown="$emit('keydown', $event)"
:class="giveColClass('', formElement)"
:inputClass="giveColClass('input', formElement)"
:labelClass="'col-12'"
class="inside-entity align-items-center"
></component>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else class="position-relative ms-5">
<div class="container-fluid">
<div class="row">
<div
v-for="(formElement, index1) in localFormElements[
currentTab
]?.items"
:class="formElement.colClass ?? 'col-12'"
>
<component
:otherData="otherData"
@updateComponentOption="
updateComponentOption($event, formElement)
"
:ref="refKeyBase + '_' + formElement.key"
:key="'element' + currentTab + '_' + index1"
:formElement="addValueToFormElement(formElement)"
:is="returnComponentNameDefault(formElement.type)"
@take-value="takeValueChanged($event, formElement)"
@action-affected-item="actionAffectedItem($event, formElement)"
@keydown="$emit('keydown', $event)"
:class="giveColClass('', formElement)"
:inputClass="giveColClass('input', formElement)"
:labelClass="'col-12'"
class="inside-entity align-items-center"
></component>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<!-- end:horizontal mode -->
<!-- start:vertical mode -->
<div class="row vertical" v-else-if="displayMode == 'vertical'">
<div class="col-3">
<div
class="nav flex-column nav-pills"
id="v-pills-tab"
role="tablist"
aria-orientation="vertical"
>
<a
v-for="(groupItem, index) in localFormElements"
:key="'groupItem'+index"
@click="setTab(index)"
class="nav-link"
id="v-pills-home-tab"
data-bs-toggle="pill"
href="#v-pills-home"
role="tab"
aria-controls="v-pills-home"
:aria-selected="currentTab == index"
:class="{ active: currentTab == index }"
>{{ groupItem.title }}</a
>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="myTabContent">
<div
class="tab-pane fade show active"
id="home"
role="tabpanel"
aria-labelledby="home-tab"
>
<div
v-if="localFormElements[currentTab]?.hasChildren"
class="accordion"
id="accordionExample"
>
<div
v-for="(innerGroupItem, j) in localFormElements[currentTab]
?.items"
:key="'innerGroupItem' + currentTab + '_' + j"
class="card"
>
<div class="card-header" :id="'heading' + j">
<h2 class="mb-0">
<button
class="btn btn-link btn-block"
type="button"
data-bs-toggle="collapse"
:data-bs-target="'#collapse' + j"
:aria-expanded="innerGroupItem.active ?? false"
:aria-controls="'collapse' + j"
:class="{ active: innerGroupItem.active ?? false }"
>
{{ innerGroupItem.title }}
</button>
</h2>
</div>
<div
:id="'collapse' + j"
class="collapse"
:class="{ show: innerGroupItem.active ?? false }"
:aria-labelledby="'heading' + j"
data-parent="#accordionExample"
>
<div class="card-body">
<div class="position-relative ms-5">
<div class="container-fluid">
<div class="row">
<div
v-for="(formElement, index) in localFormElements[
currentTab
]?.items[j]?.items"
:class="formElement.colClass ?? 'col-12'"
>
<component
:otherData="otherData"
@updateComponentOption="
updateComponentOption($event, formElement)
"
:ref="refKeyBase + '_' + formElement.key"
:key="index"
:formElement="
addValueToFormElement(formElement)
"
:is="
returnComponentNameDefault(formElement.type)
"
@take-value="
takeValueChanged($event, formElement)
"
@action-affected-item="actionAffectedItem($event, formElement)"
@keydown="$emit('keydown', $event)"
:class="giveColClass('', formElement)"
:inputClass="giveColClass('input', formElement)"
:labelClass="'col-12'"
class="inside-entity align-items-center"
></component>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else class="position-relative ms-5">
<div class="container-fluid">
<div class="row">
<div
v-for="(formElement, index1) in localFormElements[
currentTab
]?.items"
:class="formElement.colClass ?? 'col-12'"
>
<component
:otherData="otherData"
@updateComponentOption="
updateComponentOption($event, formElement)
"
:ref="refKeyBase + '_' + formElement.key"
:key="'element' + currentTab + '_' + index1"
:formElement="addValueToFormElement(formElement)"
:is="returnComponentNameDefault(formElement.type)"
@take-value="takeValueChanged($event, formElement)"
@action-affected-item="actionAffectedItem($event, formElement)"
@keydown="$emit('keydown', $event)"
:class="giveColClass('', formElement)"
:inputClass="giveColClass('input', formElement)"
:labelClass="'col-12'"
class="inside-entity align-items-center"
></component>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end:vertical mode -->
<template v-else-if="displayMode == 'accordion'">
<div class="accordion" id="accordionExample">
<div
v-for="(innerGroupItem, j) in localFormElements"
:key="'innerGroupItem'+ j"
class="card my-card"
>
<div class="card-header" :id="'heading' + j">
<div
class="d-flex justify-content-between align-items-center"
type="button"
data-bs-toggle="collapse"
:data-bs-target="'#collapse' + j"
aria-expanded="false"
:aria-controls="'collapse' + j"
>
<h6 style="color: black">
{{ innerGroupItem.title }}
</h6>
<button
class="btn btn-link btn-block text-end collapsed button-meno"
type="button"
data-bs-toggle="collapse"
:data-bs-target="'#collapse' + j"
aria-expanded="false"
:aria-controls="'collapse' + j"
></button>
<span class="tavasi tavasi-Component-358--1"></span>
</div>
</div>
<div
:id="'collapse' + j"
class="collapse"
:class="{ show: innerGroupItem.active ?? false }"
:aria-labelledby="'heading' + j"
data-parent="#accordionExample"
>
<div class="card-body">
<div class="position-relative">
<div class="container-fluid">
<div class="row">
<div
v-for="(formElement, index1) in localFormElements[j]
?.items"
:class="formElement.colClass ?? 'col-12'"
>
<component
:otherData="otherData"
@updateComponentOption="
updateComponentOption($event, formElement)
"
:ref="refKeyBase + '_' + formElement.key"
:key="'element' + j + '_' + index1"
:formElement="addValueToFormElement(formElement)"
:is="returnComponentNameDefault(formElement.type)"
@take-value="takeValueChanged($event, formElement)"
@action-affected-item="actionAffectedItem($event, formElement)"
@keydown="$emit('keydown', $event)"
:class="giveColClass('', formElement)"
:inputClass="giveColClass('input', formElement)"
:labelClass="'col-12'"
class="inside-entity align-items-center"
></component>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<template v-else-if="displayMode == 'default'">
<div class="container-fluid">
<div class="row">
<div
v-for="(formElement, index) in localFormElements"
:class="formElement.colClass ?? 'col-12'"
>
<component
:otherData="otherData"
@updateComponentOption="
updateComponentOption($event, formElement)
"
:ref="refKeyBase + '_' + formElement.key"
:key="index + formElement.key + render"
:formElement="addValueToFormElement(formElement)"
:is="returnComponentNameDefault(formElement.type, formElement)"
@take-value="takeValueChanged($event, formElement)"
@action-affected-item="actionAffectedItem($event, formElement)"
@take-value-validate="$emit('take-value-validate', $event)"
@keydown="$emit('keydown', $event)"
:class="giveColClass(formElement.type, formElement)"
:inputClass="giveColClass('input', formElement)"
:labelClass="giveColClass('label', formElement)"
class="inside-entity align-items-center"
></component>
</div>
</div>
</div>
</template>
</template>
<!-- public mode -->
<div v-else class="container-fluid">
<div class="row">
<div
v-for="(formElement, index) in localFormElements[currentTab]?.items[j]
?.items"
:class="formElement.colClass ?? 'col-12'"
>
<component
:otherData="otherData"
@updateComponentOption="updateComponentOption($event, formElement)"
v-for="(formElement, index1) in localFormElements"
:ref="refKeyBase + '_' + formElement.key"
:key="'element' + currentTab + '_' + j + '_' + index1"
:formElement="addValueToFormElement(formElement)"
:is="returnComponentNameDefault(formElement.type)"
@take-value-validate="$emit('take-value-validate', $event)"
@take-value="takeValueChanged($event, formElement)"
@action-affected-item="actionAffectedItem($event, formElement)"
@keydown="$emit('keydown', $event)"
:class="giveColClass('', formElement)"
:inputClass="giveColClass('input', formElement)"
:labelClass="'col-12'"
class="inside-entity align-items-center"
></component>
</div>
</div>
</div>
</div>
</template>
<script>
// import HttpService from "@services/httpService";
import { cloneDeep } from "lodash";
export default {
props: {
refKeyBase: {
default: "formbuilder",
},
displayMode: {
default: "horizontal",
},
readOnly: {
type: Boolean,
default: false,
},
formElements: {
default() {
return [];
},
},
description: {
default() {
return "";
},
},
formData: {
default() {
return {};
},
},
otherData: {
default() {
return {};
},
},
previewMode: {
default: false,
},
},
beforeMount() {
// this.httpService = new HttpService();
},
mounted() {
this.localFormElements = this.formElements
? cloneDeep(this.formElements)
: {};
this.localFormData = this.formData ? cloneDeep(this.formData) : {};
this.render++;
},
watch: {
formElements: {
handler: function (newValue) {
this.localFormElements = newValue ? cloneDeep(newValue) : [];
},
deep: true,
immediate: true,
},
formData: {
handler: function (newValue) {
this.localFormData = newValue ? cloneDeep(newValue) : {};
},
deep: true,
immediate: true,
},
},
data() {
return {
// httpService: undefined,
render: 100,
currentTab: 0,
prevActiveTabIndex: undefined,
localFormElements: [],
localFormData: {},
activeRequest: [],
};
},
computed: {
buttonText() {
return this.localFormData?.id || this.localFormData?.guid
? "بروزرسانی"
: "افزودن";
},
},
methods: {
setTab(index) {
if (this.prevActiveTabIndex != undefined)
this.localFormElements[this.prevActiveTabIndex].active = false;
this.prevActiveTabIndex = this.currentTab = index;
},
// //برای مثل استان و شهر
// updateComponentOption(schema, filter = "") {
// console.info("updateComponentOption");
// console.log(schema, filter);
// let refkey = this.refKeyBase + "_" + schema.key;
// if (refkey in this.$refs)
// this.$refs[refkey][0].setOptions(schema, filter);
// },
findItemSchema(key, items = undefined) {
if (!items) items = this.localFormElements;
// console.log(key)
// console.log(items)
let finded = undefined;
for (let i = 0; i < items.length; i++) {
if (items[i]?.key == key) return items[i];
else if (items[i].items) {
finded = this.findItemSchema(key, items[i].items);
if (finded) return finded;
}
}
return finded;
},
addValueToFormElement(elements) {
Object.keys(elements).forEach((key, index) => {
if (key == "key") {
if (this.localFormData && this.localFormData[elements[key]]) {
elements["value"] = this.localFormData[elements[key]];
} else {
elements["value"] = null;
}
}
});
return elements;
},
// returnComponentName(type) {
// // if (this.readOnly) return "LabelComponent";
// if (type == "textarea") return "TextareaComponent";
// else if (type == "select") return "SelectComponent";
// else if (type == "sound") return "AudioComponent";
// else if (type == "video") return "VideoComponent";
// else if (type == "img") return "ImageComponent";
// else if (type == "label") return "LabelComponent";
// else if (type == "switch") return "SwitchComponent";
// else if (type == "htmleditor") return "HtmlEditor";
// else if (type == "date") return "DateComponent";
// else if (type == "range_date") return "RangeDateComponent";
// else if (type == "checkbox" || type == "radio")
// return "CheckboxComponent";
// else return "InputComponent";
// },
returnComponentNameDefault(type, item) {
if (this.readOnly) return "LabelComponentForTerm";
if (type == "textarea") return "TextareaComponentDefault";
else if (type == "select") return "SelectComponentDefault";
else if (type == "string") return "InputComponentDefault";
else if (type == "label") return "LabelComponentForTerm";
else if (type == "labelTags") return "LabelTagsComponent";
else if (type == "htmleditor") return "HtmlEditor";
else if (type == "date") return "DateComponent";
else if (type == "range_date") return "RangeDateComponent";
// else if (type == "label" && item?.key == "text_main")
// return "LabelComponentDefault";
// else if (type == "label" && item?.key == "address")
// return "LabelComponentAddress";
// else if (type == "label" && item?.key !== "text_main")
// return "LabelComponentDefaultText";
// else return "InputComponent";
},
actionAffectedItem({ action, key, value}, schemaItem){
// console.log("actionAffectedItem", $event)
this.$emit("action-affected", { action, key, value});
},
takeValueChanged(value, schemaItem) {
let key = schemaItem.key
this.localFormData[key] = value ?? null;
let data = this.localFormData;
// console.log('changeFormValues', key, value , data)
// console.log('changeFormValues', key, value , data)
this.$emit("changeFormValues", data);
},
updateValueFormData(key, value) {
// console.log('updateValueFormData', key, value)
// console.log('updateValueFormData', key, this.localFormData.value)
let refkey = this.refKeyBase + '_' + key
if(this.$refs[refkey]){
// console.log('refkey', refkey, value)
// this.$refs[refkey][0].incrementRenderKey()
this.$refs[refkey][0].initTextValue(value)
}
this.$set(this.localFormData, key, value);
},
////////از پایین فراخوانی نداشت و کامنت شد و اینجاهم کامنت کردم
//فقط برای select
// takeSelectObjectChanged(object, { key }) {
// console.log(object)
// console.log(key)
// if (object?.type == "select") {
// this.localFormData[key] = object?.objectValue?.value;
// // console.log(object)
// this.$emit("changeFormeObject", {
// type: object?.type,
// objectValue: object?.objectValue?.value,
// objectText: object?.objectValue?.text,
// key: key,
// });
// } else {
// }
// let data = this.localFormData;
// console.log('takeSelectObjectChanged',data)
// this.$emit("changeFormValues", data);
// },
giveColClass(type, item) {
if (item.classes) {
if (type == "") return item.classes;
if (type == "label") {
return "col-auto"; //item.classes == "col-12" ? "col-12" : "col-auto";
}
if (type == "input" || type == "string")
return item.inputClass ? item.inputClass : item.classes;
if (type == "textarea")
return item.inputClass ? item.inputClass : item.classes;
}
return "col-12";
},
},
components: {
DateComponent: () => import("@components/forms/DateComponent.vue"),
RangeDateComponent: () =>
import("@components/forms/RangeDateComponent.vue"),
// InputComponent: () => import("@components/forms/InputComponent.vue"),
// TextareaComponent: () => import("@components/forms/TextareaComponent.vue"),
// SelectComponent: () => import("@components/forms/SelectComponent.vue"),
AudioComponent: () => import("@components/forms/AudioComponent.vue"),
VideoComponent: () => import("@components/forms/VideoComponent.vue"),
ImageComponent: () => import("@components/forms/ImageComponent.vue"),
LabelComponent: () => import("@components/forms/LabelComponent.vue"),
CheckboxComponent: () => import("@components/forms/CheckboxComponent.vue"),
SwitchComponent: () => import("@components/forms/SwitchComponent.vue"),
InputComponentDefault: () =>
import("@components/forms/InputComponentDefault.vue"),
TextareaComponentDefault: () =>
import("@components/forms/TextareaComponentDefault.vue"),
SelectComponentDefault: () =>
import("@components/forms/SelectComponentDefault.vue"),
LabelComponentDefault: () =>
import("@components/forms/LabelComponentDefault.vue"),
LabelComponentForTerm: () =>
import("@components/forms/LabelComponentForTerm.vue"),
LabelComponentAddress: () =>
import("@components/forms/LabelComponentAddress.vue"),
LabelComponentDefaultText: () =>
import("@components/forms/LabelComponentDefaultText.vue"),
HtmlEditor: () => import("@components/forms/HtmlEditor.vue"),
LabelTagsComponent: () =>
import("@components/forms/LabelTagsComponent.vue"),
},
};
</script>
<style lang="scss">
.my-card {
width: 100%;
margin: 0 auto;
}
.form-control {
&.error {
border: 1px solid red;
}
}
.form-group {
&.inside-entity {
.form-control {
border-radius: 0.5rem;
border: 2px solid rgb(127, 170, 170);
font-size: 14px;
height: 3em;
&.error {
border: 2px solid red !important;
}
&:focus {
border: 2px solid #61bb9e !important;
}
&.select.in-advanced-search {
height: 3em;
border: 2px solid rgb(127, 170, 170) !important;
&:focus {
border: 2px solid rgb(127, 170, 170) !important;
}
}
}
.date-picker {
.vpd-input-group {
.vpd-icon-btn {
position: absolute;
right: 13.7em;
height: 2.8em;
border-radius: 0.5em 0em 0em 0.5em;
}
.form-control {
width: 17.2em;
}
}
}
}
}
.calendar {
.card-header {
border-bottom: unset;
div {
span {
transform: rotate(90deg);
transition: transform 0.3s ease, color 0.3s ease;
color: #000;
}
&[aria-expanded="true"] {
span {
transform: rotate(-90deg);
color: #000;
}
}
}
}
.my-card {
margin-bottom: 1em;
}
}
</style>
<style lang="scss" scoped>
.horizontal {
.nav-tabs {
background-color: #eee;
.nav-item {
padding-top: 0.5em;
.nav-link {
padding: 0.5rem 2rem !important;
color: var(--text-primary);
border-bottom: unset !important;
&:focus,
&:hover {
color: var(--primary-color);
border-color: transparent;
transition: background-color 0.3s ease, color 0.3s ease;
}
}
}
}
}
.vertical {
margin-top: 1em;
}
</style>