441 lines
12 KiB
JavaScript
441 lines
12 KiB
JavaScript
/* Be aware that component extension is not as classes inheritance.
|
||
In this case, Vue merges both the parent and child component options creating a new mixed object.
|
||
For the case of the mounted and destroyed hook, both the parent’s and children’s are kept and they
|
||
will be called in inheritance order, from parent to children.
|
||
|
||
https://vueschool.io/articles/vuejs-tutorials/reusing-logic-in-vue-components/
|
||
*/
|
||
|
||
/* hooks order
|
||
1) extension
|
||
2) mixins
|
||
3) component
|
||
*/
|
||
|
||
import formTableActions from "@json/formTableActions";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
addToChildren: false,
|
||
editChildTab: false,
|
||
|
||
parentRowItemIndex: 0,
|
||
childRowItemIndex: 0,
|
||
|
||
childRowItem: {},
|
||
parentRowItem: {},
|
||
|
||
tabIndex: undefined,
|
||
childTabIndex: undefined,
|
||
|
||
fetchingData: false,
|
||
tableColumns: [
|
||
{
|
||
isLink: true,
|
||
key: "label",
|
||
title: "عنوان",
|
||
width: "1",
|
||
},
|
||
{
|
||
key: "key",
|
||
title: "کلید",
|
||
width: "1",
|
||
},
|
||
{
|
||
key: "placeholder",
|
||
title: "راهنما",
|
||
width: "3",
|
||
},
|
||
{
|
||
key: "value",
|
||
title: "مقدار",
|
||
width: "1",
|
||
},
|
||
{
|
||
key: "type",
|
||
title: "نوع",
|
||
width: "1",
|
||
},
|
||
],
|
||
formTableActions: formTableActions,
|
||
|
||
localFormData: {},
|
||
|
||
currentTab: 0,
|
||
buttonLoading: false,
|
||
};
|
||
},
|
||
methods: {
|
||
onLinkedTitleClick({ rowItem, tableColumn, index }) {
|
||
this.editNewFormItem(index);
|
||
},
|
||
|
||
/*
|
||
summary: change the sort of form items(elements)
|
||
|
||
description: changing the sort of the form items
|
||
in the table by drag and drop them.
|
||
|
||
@param {Event} Sortable sort event.
|
||
@param {newIndex} String dropped into index.
|
||
@param {oldIndex} String dragged from index.
|
||
|
||
@return void.
|
||
*/
|
||
onSort({ newIndex, oldIndex }) {
|
||
const tempItem =
|
||
this.localMainFormElements[this.currentTab].items[newIndex];
|
||
|
||
this.localMainFormElements[this.currentTab].items[newIndex] =
|
||
this.localMainFormElements[this.currentTab].items[oldIndex];
|
||
this.localMainFormElements[this.currentTab].items[oldIndex] = tempItem;
|
||
},
|
||
openNewTabFormModal() {
|
||
this.showNewTabFormModal = true;
|
||
this.tabIndex = undefined;
|
||
|
||
const options = [
|
||
{
|
||
title: "بدون والد",
|
||
value: null,
|
||
},
|
||
];
|
||
|
||
this.localMainFormElements.forEach((element) => {
|
||
options.push({ title: element.title, value: element.title });
|
||
});
|
||
|
||
this.formTabElement.items[0].options = options;
|
||
|
||
setTimeout(() => {
|
||
$("#base-modal").modal({ backdrop: "static", keyboard: false }, "show");
|
||
}, 500);
|
||
},
|
||
|
||
openEditTabFormModal(index) {
|
||
this.editChildTab = false;
|
||
|
||
this.tabIndex = index;
|
||
this.childTabIndex = undefined;
|
||
|
||
const options = [
|
||
{
|
||
title: "بدون والد",
|
||
value: null,
|
||
},
|
||
];
|
||
|
||
this.localMainFormElements.forEach((element) => {
|
||
options.push({ title: element.title, value: element.title });
|
||
});
|
||
|
||
this.formTabElement.items[0].options = options;
|
||
|
||
this.formTabData = this.localMainFormElements[index];
|
||
this.showNewTabFormModal = true;
|
||
|
||
setTimeout(() => {
|
||
$("#base-modal").modal({ backdrop: "static", keyboard: false }, "show");
|
||
}, 500);
|
||
},
|
||
openChildTabEditModal(childIndex) {
|
||
this.editChildTab = true;
|
||
|
||
this.tabIndex = undefined;
|
||
this.childTabIndex = childIndex;
|
||
|
||
const options = [
|
||
{
|
||
title: "بدون والد",
|
||
value: null,
|
||
},
|
||
];
|
||
|
||
this.localMainFormElements.forEach((element) => {
|
||
options.push({ title: element.title, value: element.title });
|
||
});
|
||
|
||
this.formTabElement.items[0].options = options;
|
||
|
||
this.formTabData =
|
||
this.localMainFormElements[this.currentTab].items[childIndex];
|
||
this.showNewTabFormModal = true;
|
||
|
||
setTimeout(() => {
|
||
$("#base-modal").modal({ backdrop: "static", keyboard: false }, "show");
|
||
}, 500);
|
||
},
|
||
|
||
closeNewTabFormModal() {
|
||
$("#base-modal").modal("hide");
|
||
|
||
setTimeout(() => {
|
||
this.showNewTabFormModal = false;
|
||
}, 500);
|
||
},
|
||
|
||
addTab() {
|
||
if (this.editChildTab) this.addChildTab();
|
||
else this.addParentTab();
|
||
|
||
this.closeNewTabFormModal();
|
||
},
|
||
addParentTab() {
|
||
const tab = this.$refs.tabFormBuilder.localFormData;
|
||
if (tab.parent) {
|
||
const tabItem = this.localMainFormElements.find(
|
||
(item) => item.title == tab.parent
|
||
);
|
||
tabItem.active = true;
|
||
|
||
if (tabItem) {
|
||
tabItem.hasChildren = true;
|
||
|
||
tabItem.items.push({
|
||
parent: tab.parent,
|
||
key: tab.key,
|
||
title: tab.title,
|
||
active: true,
|
||
items: [],
|
||
});
|
||
}
|
||
} else {
|
||
if (this.tabIndex == undefined) {
|
||
this.localMainFormElements.push({
|
||
key: tab.key,
|
||
title: tab.title,
|
||
active: true,
|
||
items: [],
|
||
});
|
||
|
||
this.setTab(this.localMainFormElements?.length - 1);
|
||
} else {
|
||
this.localMainFormElements[this.tabIndex].title = tab.title;
|
||
this.localMainFormElements[this.tabIndex].key = tab.key;
|
||
}
|
||
}
|
||
},
|
||
addChildTab() {
|
||
const tab = this.$refs.tabFormBuilder.localFormData;
|
||
const tabItem =
|
||
this.localMainFormElements[this.currentTab].items[this.childTabIndex];
|
||
|
||
if (tabItem) {
|
||
tabItem.parent = tab.parent;
|
||
tabItem.title = tab.title;
|
||
tabItem.key = tab.key;
|
||
tabItem.newButtonText = tab.newButtonText ?? tab.title;
|
||
}
|
||
},
|
||
|
||
setTab(index) {
|
||
if (this.localMainFormElements[index].hasChildren) {
|
||
this.addToChildren = true;
|
||
} else {
|
||
this.addToChildren = false;
|
||
}
|
||
|
||
if (this.prevActiveTabIndex != undefined)
|
||
this.localMainFormElements[this.prevActiveTabIndex].active = false;
|
||
|
||
this.prevActiveTabIndex = this.currentTab = index;
|
||
},
|
||
|
||
removeParentTab(index) {
|
||
this.mySwalConfirm({
|
||
title: "هشدار!!!",
|
||
html: "از حذف این مورد مطمئن هستید؟",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
this.localMainFormElements.splice(index, 1);
|
||
}
|
||
});
|
||
},
|
||
removeChildTab(childIndex) {
|
||
this.mySwalConfirm({
|
||
title: "هشدار!!!",
|
||
html: "از حذف این مورد مطمئن هستید؟",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
this.localMainFormElements[this.currentTab].items.splice(
|
||
childIndex,
|
||
1
|
||
);
|
||
}
|
||
});
|
||
},
|
||
|
||
// addFormItemToFormElements(newFormItem) {
|
||
// if (this.localMainFormElements[this.currentTab].items?.length == 0)
|
||
// this.localMainFormElements[this.currentTab].items.push(newFormItem);
|
||
// else {
|
||
|
||
// }
|
||
// },
|
||
addFormItemToFormElements(updatedColumn) {
|
||
if (this.addToChildren) this.addItemToChildren(updatedColumn);
|
||
else this.addItemToParent(updatedColumn);
|
||
},
|
||
addItemToChildren(updatedColumn) {
|
||
if (this.childRowItemIndex)
|
||
this.$set(
|
||
this.localMainFormElements[this.currentTab].items[
|
||
this.parentRowItemIndex
|
||
].items,
|
||
this.childRowItemIndex,
|
||
updatedColumn
|
||
);
|
||
else {
|
||
// find new item in the forms table columns items.
|
||
// if exist => continue
|
||
// else catch block executs and create new table columns.
|
||
|
||
try {
|
||
const res = this.localMainFormElements[this.currentTab].items[
|
||
this.parentRowItemIndex
|
||
].items.filter((item) => item.key == updatedColumn.key);
|
||
|
||
if (res.length)
|
||
this.mySwalToast({
|
||
title: "ستونی با چنین مشخصاتی قبلا ایجاد شده است.",
|
||
html: null,
|
||
icon: "error",
|
||
});
|
||
else {
|
||
this.localMainFormElements[this.currentTab].items[
|
||
this.parentRowItemIndex
|
||
].items.push(updatedColumn);
|
||
}
|
||
} catch (msg) {
|
||
this.localMainFormElements[this.currentTab].items[
|
||
this.parentRowItemIndex
|
||
] = {
|
||
items: [updatedColumn],
|
||
title: this.formTitleData.title,
|
||
};
|
||
}
|
||
}
|
||
},
|
||
addItemToParent(updatedColumn) {
|
||
if (this.parentRowItemIndex)
|
||
this.$set(
|
||
this.localMainFormElements[this.currentTab].items,
|
||
this.parentRowItemIndex,
|
||
updatedColumn
|
||
);
|
||
else {
|
||
// find new item in the forms table columns items.
|
||
// if exist => continue
|
||
// else catch block executs and create new table columns.
|
||
|
||
try {
|
||
const res = this.localMainFormElements[this.currentTab].items.filter(
|
||
(item) => item.key == updatedColumn.key
|
||
);
|
||
|
||
if (res.length)
|
||
this.mySwalToast({
|
||
title: "ستونی با چنین مشخصاتی قبلا ایجاد شده است.",
|
||
html: null,
|
||
icon: "error",
|
||
});
|
||
else {
|
||
this.localMainFormElements[this.currentTab].items.push(
|
||
updatedColumn
|
||
);
|
||
}
|
||
} catch (msg) {
|
||
this.localMainFormElements[this.currentTab] = {
|
||
items: [updatedColumn],
|
||
title: this.formTitleData.title,
|
||
};
|
||
}
|
||
}
|
||
},
|
||
|
||
openChildNewFormItem(parentIndex) {
|
||
this.addToChildren = true;
|
||
this.parentRowItem =
|
||
this.localMainFormElements[this.currentTab].items[parentIndex];
|
||
this.childRowItem = undefined;
|
||
|
||
this.parentRowItemIndex = parentIndex;
|
||
this.childRowItemIndex = undefined;
|
||
|
||
this.$emit("open-new-form-item");
|
||
},
|
||
childEditNewFormItem(childIndex, parentIndex) {
|
||
this.addToChildren = true;
|
||
|
||
this.parentRowItem =
|
||
this.localMainFormElements[this.currentTab].items[parentIndex];
|
||
this.childRowItem =
|
||
this.localMainFormElements[this.currentTab].items[parentIndex].items[
|
||
childIndex
|
||
];
|
||
|
||
this.parentRowItemIndex = parentIndex;
|
||
this.childRowItemIndex = childIndex;
|
||
|
||
this.$emit("open-new-form-item", this.childRowItem);
|
||
},
|
||
|
||
editNewFormItem(index) {
|
||
this.addToChildren = false;
|
||
|
||
this.parentRowItem =
|
||
this.localMainFormElements[this.currentTab].items[index];
|
||
// this.parentRowItem = index;
|
||
|
||
this.$emit(
|
||
"open-new-form-item",
|
||
this.localMainFormElements[this.currentTab].items[index]
|
||
);
|
||
},
|
||
openNewFormItem() {
|
||
this.addToChildren = false;
|
||
|
||
// this.rowItem = {};
|
||
this.childRowItem = {};
|
||
this.parentRowItem = {};
|
||
|
||
this.$emit("open-new-form-item");
|
||
},
|
||
|
||
deleteChildItem(childIndex, parentIndex) {
|
||
this.mySwalConfirm({
|
||
title: "هشدار!!!",
|
||
html: "از حذف این مورد مطمئن هستید؟",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
{
|
||
this.localMainFormElements[this.currentTab].items[
|
||
parentIndex
|
||
].items.splice(childIndex, 1);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
deleteItem(index) {
|
||
this.mySwalConfirm({
|
||
title: "هشدار!!!",
|
||
html: "از حذف این مورد مطمئن هستید؟",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
this.localMainFormElements[this.currentTab].items.splice(index, 1);
|
||
}
|
||
});
|
||
},
|
||
},
|
||
watch: {
|
||
newFormItem: {
|
||
handler(newVal) {
|
||
if (newVal) this.addFormItemToFormElements(newVal);
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
},
|
||
};
|