base_ui/extensions/newFormExtension.js

/* 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,
    },
  },
};