base_ui/components/favorites/components/FavoriteList.vue

<template>
  <div class="menu-main">
    <div class="row m-2 border-bottom" style="height: 4em">
      <div class="col-12 d-flex justify-content-between align-items-center">
        <p class="header-label">علاقه مندی ها</p>

        <div class="header-icon" @click="closeMenu()">
          <svg class="icon icon-Component-294--1">
            <use xlink:href="#icon-Component-294--1"></use>
          </svg>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <my-vue-tree-list
          :treeItems="treeItems"
          @on-click="clickItem($event)"
          ref="treelist"
          style="padding: 5px"
        >
        </my-vue-tree-list>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "pinia";
import favoriteApi from "~/apis/favoriteApi";

// import { treeListMixin } from "~/favorites/mixins/treeListMixin";
export default {
  
  // mixins: [treeListMixin],
  beforeMount() {
    this.httpService = new HttpService(import.meta.env.VITE_REPO_BASE_URL);
  },
  mounted() {
    // this.getInitialTreeList();

    this.treeItems = this.ConvertDataToTree(this.schemasGetter);
    // this.openIds.push(this.treeItems[0].id);
    this.SET_ACTIVE_EVENT_TREE_LIST(this.treeItems[0]);
    // this.showDefaultList();
  },
  watch: {
    schemasGetter(newVal) {
      this.treeItems = this.ConvertDataToTree(newVal);
    },
  },
  data() {
    return {
      httpService: undefined,
      treeItems: [],
      openIds: [],
    };
  },
  computed: {
    ...mapState({
      organNameGetter: "organNameGetter",
      schemasGetter: "schemasGetter",
      activeSchemaGetter: "activeSchemaGetter",
    }),
    ...mapState("favorite", ["listTakenFromTreeGetter"]),
  },
  methods: {
    ...mapActions("favorite", [
      "SET_LIST_TAKEN_FROM_TREE",
      "SET_ACTIVE_EVENT_TREE_LIST",
    ]),
    closeMenu() {
      this.$emit("closeMenu", true);
    },

    // #region Functions related to tree List

    getInitialTreeList() {
      let list = structuredClone(this.schemasGetter);
      var treeList = [];
      var index = 0;
      //children
      list.forEach((element) => {
        if (element.items.length > 0) {
          var children = [];
          var indexChildren = 0;
          element.items.forEach((item) => {
            item["delNodeDisabled"] = true;
            item["dragDisabled"] = true;
            item["editNodeDisabled"] = true;
            item["addLeafNodeDisabled"] = true;
            item["addTreeNodeDisabled"] = true;
            item["name"] = item.title;
            item["isLeaf"] = true;
            item["key"] = item.key;
            item["routeName"] = item.routeName;
            item["id"] = indexChildren++;

            children.push(item);
          });
        }

        treeList.push({
          delNodeDisabled: true,
          dragDisabled: true,
          editNodeDisabled: true,
          addLeafNodeDisabled: true,
          addTreeNodeDisabled: true,
          key: element["key"],
          name: element["title"],
          pid: 0,
          id: index++,
          children: element["items"],
        });
        this.treeItems = treeList;
      });
    },

    ConvertDataToTree(list, parent_id = 0, parent_element = null) {
      if (!Array.isArray(list)) {
        console.error("Input is not an array!");
        return []; // یا هر مقدار پیش‌فرض دیگری که مناسب است
      }
      var finalList = [];
      var index = 0;
      list.forEach((element) => {
        finalList.push({
          delNodeDisabled: true,
          dragDisabled: true,
          editNodeDisabled: true,
          addLeafNodeDisabled: true,
          addTreeNodeDisabled: true,
          isLeaf: element.children == 0,
          id: element["id"],
          index: index++,
          keyId: element["key"],
          name: element["label"] ?? element["name"],
          child_order: element["child_order"],
          children: [],
          // value: element,
          pid: parent_id,
          parent: parent_element,
          other_id: element["other_id"],
        });
      });
      return finalList;
    },
    clickItem(event) {
      // debugger
      this.SET_ACTIVE_EVENT_TREE_LIST(event);
    },

    // #endregion
  },

};
</script>
<style lang="scss">
.menu-main {
  max-width: 25em;
  width: auto;
  min-width: 25em;
  background-color: #fff;
  height: calc(100vh - 4em);
  border-left: 1px solid #dee2e6;
  z-index: 100;
}
.header-label {
  font-size: 1.2rem;
  margin-top: 13px;
  padding: 0;
}
.header-icon {
  cursor: pointer;
}

@media only screen and (max-width: 575.98px) {
  /* استایل‌های مربوط به اندازه‌های کوچکتر از 576 پیکسل */
  .menu-main {
    position: fixed;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  /* استایل‌های مربوط به اندازه‌های بین 576 تا 767 پیکسل */
  .menu-main {
    position: fixed;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  /* استایل‌های مربوط به اندازه‌های بین 768 تا 991 پیکسل */
  .menu-main {
    position: fixed;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  /* استایل‌های مربوط به اندازه‌های بین 992 تا 1199 پیکسل */
}
@media only screen and (min-width: 1200px) {
  /* استایل‌های مربوط به اندازه‌های بزرگتر از 1200 پیکسل */
}
</style>