search_ui/components/entity/sidebar-panels/EntityTreeList.vue

<template>
  <div class="tree-list-container text-end pt-3 firefox-scrollbar">
    <!-- <div
      class="d-flex justify-content-between align-items-center border-bottom"
    >
      <h6 class="">فهرست عناوین</h6>
      <button @click.prevent="closeList" class="btn" type="button">
        <svg class="icon icon-Component-294--1">
          <use xlink:href="#icon-Component-294--1"></use>
        </svg>
      </button>
    </div> -->
    <div style="border-bottom: 1px solid var(--primary-color) !important">
      <div
        class="d-flex justify-content-between align-items-center mb-2 header_div"
      >
        <h6 style="font-family: sahel-semi-bold" class="m-0">فهرست عناوین</h6>
        <button @click.prevent="closeList" class="btn" type="button">
          <svg class="icon icon-Component-21--1">
            <use xlink:href="#icon-Component-21--1"></use>
          </svg>
        </button>
      </div>
    </div>
    <template v-if="loading">
      <the-content-loading
        :loadingTitle="'در حال دریافت اطلاعات'"
        class="table-loading mt-3"
      ></the-content-loading>
    </template>
    <div class="tree-list-content">
      <vue3-tree-vue
        class="mt-3"
        :isCheckable="true"
        v-if="localDataTree.length"
        :items="localDataTree"
        ref="tree"
        @onSelect="itemclick"
        @onCheck="itemclick"
        @onExpand="itemtoggle"
        @onCollapse="itemtoggle"
      >
        <!-- Applying some simple styling to tree-items -->
        <template v-slot:item-prepend-icon="treeViewItem">
          <div
            style="display: inherit; width: 200px"
            @click.ctrl="customItemClickWithCtrl"
          >
            <svg class="icon-tree icon icon-MyFolder">
              <use xlink:href="#icon-MyFolder"></use>
            </svg>
            {{ treeViewItem.text }}
          </div>
        </template>
      </vue3-tree-vue>
    </div>
  </div>
</template>

<script>
import "vue3-tree-vue/dist/style.css"; // remember to add this in your component or maint.[ts/js]

import entityApi from "@apis/entityApi";

import { mapActions, mapState } from "pinia";

import { useEntityStore } from "@search/stores/entityStore";
import { useSearchStore } from "~/stores/searchStore";
import { useCommonStore } from "~/stores/commonStore";

export default {
  props: {
    dataTree: {
      default() {
        return [];
      },
    },
  },
  mounted() {
    console.log("localDataTree", this.localDataTree);
  },
  data() {
    return {
      httpService: undefined,

      selectedItems: [],
      selectedLabels: [],
      nodes: [],
      // newTree: {},
      dicTreePath: {},
      searchText: "",
      loading: false,
      localDataTree: this.dataTree,
    };
  },
  computed: {
    ...mapState(useCommonStore, ["paginationGetter"]),
  },

  methods: {
    closeList() {
      this.$emit("showListHeadline", {
        isSearchMode: false,
        isHeadingMode: false,
      });
    },

    inputKeyUp: function () {
      var text = this.searchText;
      const patt = new RegExp(text);
      // console.log(this.$refs.tree);
      this.$refs.tree.handleRecursionNodeChilds(
        this.$refs.tree,
        function (node) {
          if (text !== "" && node.model !== undefined) {
            const str = node.model.text;
            if (str.toLowerCase().includes(text)) {
              node.$el.hidden = false;
              var parent = node.$parent;
              while (parent && parent.model) {
                parent.$el.hidden = false;
                parent.model.opened = true;
                parent = parent.$parent;
              }
              // node.
            } else node.$el.hidden = true;
          } else {
            node.$el.hidden = false;
          }
        }
      );
    },
    UnSelectNode(node_id) {
      // console.log(node_id);
      var self = this;
      this.$refs.tree.handleRecursionNodeChilds(
        this.$refs.tree,
        function (node) {
          if (node.model !== undefined && node.model.id == node_id) {
            node.model.selected = false;
            self.onClick(node);
          }
        }
      );
    },
    itemclick(node) {
      // console.log("onClick", node);
      this.$root.$emit("jump-to-item", {
        _id: node.model.id,
        child_order: node.model.order,
        jumpPage: node.model.jumpPage,
      });

      if (window.innerWidth < 575) {
        this.$emit("is-treelist-mode");
      }

      // if (
      //   typeof node.model != "undefined" &&
      //   node.model.hasOwnProperty("selected") &&
      //   node.model.selected
      // ) {
      //   this.nodes.push(node.model);

      //   this.selectedItems.push(node.model.id);
      //   this.selectedLabels.push(node.model.text);
      // } else {
      //   this.selectedItems.splice(this.selectedItems.indexOf(node.model.id), 1);
      //   this.selectedLabels.splice(
      //     this.selectedLabels.indexOf(node.model.text),
      //     1
      //   );
      //   this.nodes.splice(this.nodes.indexOf(node.model.id), 1);
      // }

      // let page = Math.ceil(node.model.order / this.paginationGetter.limit);
      // this.$router
      //   .push({
      //     name: this.$route.name,
      //     query: { page: `${page}` },
      //     params: { key: this.$route.params.key, id: this.$route.params.id },
      //   })
      //   .then(() => {})
      //   .catch(() => {});
      //   this.$root.$emit("tree-item-click", this.nodes);
    },
    itemtoggle(data) {
      // console.info(data);
    },
    itemdragstart() {
      // console.info(data);
    },
    itemdragend() {
      // console.info(data);
    },
    itemdropbefore() {
      // console.info(data);
    },
    itemdrop() {
      // console.info(data);
    },
  },
};
</script>

<style lang="scss">
.icon-tree {
  color: #dbc056;
  font-size: 0.6rem;
}
.vtl-node-main {
  padding: 5px 1rem 5px 0 !important;

  .vtl-node-content {
    // margin-right: 7px;
  }

  &.vtl-drag-disabled {
    // background-color: #d0cfcf;
    background-color: inherit !important;
  }

  &:hover {
    cursor: pointer;
    background-color: #f0f0f0 !important;
  }

  .vtl-caret {
    // margin-left: 0;
    // margin-right: -1rem;
    // margin-top: 8px;
    // transform: rotateY(180deg);
  }
}

.vtl-tree-margin {
  // margin-right: 2em;
  // margin-left: auto;
}

.vtl {
  .vtl-drag-disabled {
    background-color: #d0cfcf;

    &:hover {
      background-color: #d0cfcf;
    }
  }

  .vtl-disabled {
    background-color: #d0cfcf;
  }
}

.vtl {
}
.tree-icon {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAABgCAMAAABblVsaAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAdRQTFRFAAAAHR0bubm5MzMz////28BW28BW28BW28BW28BW28BW28BW28BWeHh428BW28BW28BW28BWeHh4eHh428BWeHh4eHh4eHh428BW28BW28BW28BW28BW28BW28BWubm5ubm5ubm5dHZ7qKepgIKJXGNwVVdbALq6ALq6ALq6ALq6ALq6ALq6ALq670RE7kRE7kRE70RE70RE70RE70RE7e3tmJmY09PUALq6ALq670RE70RE70RE/Pv77Oztr6/jArW1EL6+3/b2ALq670REhISEAjawAbi47/v7ALq670REgICAALq6fn5+fHx8e3t7IMPD7EREJiYm39/gf3+4ALq670REscS0BAAABAoCfn5+ODg4+CgoAAAA9vX25+fnM6wABAQEpbml/v//8fLx1NPURm1D/Pr709TU/////v7/+/v68PLxOTk5OTk6//3+//7/PT49/v3+//7+Pj4+/f39//3//fz8/fv7/Pv8Nzc3PT09+vn5+vr6/Pr69fP19vb2/Pv7PDw88PHw8vPy8vTy8fLy8fPxOTk5+vr5+Pj59/f39vX19/b3+Pf4+/n6/Pv6dHZ7dXd8dXd8dnh9dnd8dHZ8dXZ7CQ4GCA4GCA4HCA0G1tXEywAAAJx0Uk5TAP////8krf+xKsrRSOT++64W7f9+8/b543tF2u2lE/z9/v//////QI/P79+fIECQ0O/fnyD///8Q/xCP/////0L//zAw//+y/6+v/+D/////Mf///7+//wkWgFr/Jv///0H//////////v///1ta/P9b+/9b+v////8BW/n///r//lr8/////1r9//////////39/Pz8/v4WFxcXHg+V+QAABbNJREFUeJztnM1vG0UYh99xHMVJFTsfFEpRaHFJqFoUoUagBpBaUSQkxAUh0ZRWyiIEJ0BC6glunJA4gcSJA0ECBP8AXPgqStsISCulgNrSuIQDVUlbN6b5ol4vO7t2vOuZ2fU4r+Pd8D5VJ+N9be/o6W9nZ+1NGeDCrObWW40wPtaSYWwisAVSAgk9KIF6UAKxoQTqQQnEhhKoR4wTmPA/LGHXG8QjsM273RSfGlZ330+ZoPW+fcJnoCQKWl+9nXEVjC2Le/YSlMA2U96vtx5Cm2dXluztQ+pNFtjl7jK5KO45EGyBAQlsvsC1bQl9gR3ln+23xF17CE+gt/WDkkDLbVsrsHNZLRA6VgFSjOXFEUjBFhiWwCgITLOFAIEu3dfEEXAogQC9JQgXCKviCKT4BZbPhKZKYGDdfT/L/8fzcgZWZZ+WqV9HEJixzUGfydtGBf6/E5gBWOgvcn/NSiBsboHcIDj+KIENzoGZsr8mJlDs11sPIRrrwMyC4vVoCRT79dZDiPiVCEYCvdsbvRZWE/Fr4W3+lXPfFXEEHPo0RlXfzioqCpAGxv6sc1jxERgNYpzAiEIC9aAEYkMC9aAEYkMC9aAEYoMucJN/MUwJxIYSqAclEBtKoB6UQGwogXpQArGhBOoR4wTuYGxurW9Zc7V1rPsDs4zZlhIX6xwW+ncigQl6gDmcU9WH3frPstrOrd5H83/U1hMj3kfTosCQeoVH8lZ/Hqzf5dUWfisHsP9mwvlmG/LnpfVH2dIWp2OdlFTvu8P76Nrl2vr6BQ46LYNSf97WpDBYC7rAgATu7q30/vlFVn9sbTDL02K1DkFrrxppTKDzjzLK/rrnSi6riGAL70yAg/yr1pR7D23XN2J9OF3tp74WyogCe24qBD7Bf3y7M0CgALpAdQKfKthNqsO5NaDnK7H+dKHaT38plPEE3jmVbVhgKxP4zHXe/vQwbxd+E+v7uqr9xbNCGU3gtlPQuEABhPsD1bcE+uujtj13i+3wtFh/HGDK3bIfYFLYPYLAnG0O7j7J2zgmcK8zx2VWV+y28KtY9yZw6YxQRhEI2e2T3F+E50A1D3bz1hUomwNHOqv9Js2BOd7Jyl9fOQsD3DsQzQQeWuJtZ/qq3d64INafna/2CzNCGWUOzJX9yRfS7kIQzIH+c2DmJE+QsJELaTeCHPlKuhpB2Uoa5ySSy6peb/Mcb2bMAdg605P6QTbE1l6JrK2k8z1T0nplJW1Zp8Ri869EXIaG4cw+W+Os6gl+Nu7+QM6hq6XMwt4ZyfHr8mS+tGVx8Lx4/MLGXQsfts9fZtLq/VFapU9jlPUGiY/AaBDjBEYUEqgHJRAbEqgHJRAbEqgHJRAbEqgHJRAbEqgHJRAbEqgHJRAbEqgHJRAbEqhHcxM4Zv/9XF0+4u6MfYq5z1ajI/AYfFLT8TPGklC01AaPfsHbF9jtzzR2GjHqTKABE5Ktx8AVV/lZy1j7HOwq3lYadASOstXp52NssBapQAOkAsvmVP7gSGr2/ksBBh2B44xZFwZia7CuBBoKf647pT8ucHcxwKB7CL9kJs/Cno/qGW0ckAg0lP4cg0p/jkCwDa4o5sGj6Q/t9hXGZoaW43oiCUpgeeIzAvwFHL9QFmgb3KGI4GtFLhDGPx7dcyuuAgV8Ark5I8xfSAIDBL7OPij3Xp2Pq8DAOdCw3Rmh+QueA4MO4TfY++MA3W3vARyOq0AB3xxo8GZC/eTws3DgSeQ4/x0QsBKTp18uxFVgyFnYqGv+UxkMWca8ydiJ4T74+67vYGglrgIFas7CxkTAc0OvREIW0m8lL2fdm0R3XYyrwKZeC4ddyr1d/t/W2ey/ZlwFCmzkhwnvuL8Jxy4NHo/tSaSlnwe++BDXZybZu3BgM1+JNI0xduDEQcZK3wMEHOjRhj6RxoYE6kEJxIYE6kEJxIYE6kEJxOY/TrEkjkDL/tIAAAAASUVORK5CYII=") !important;
}
</style>

<style lang="scss" scoped>
.label {
  position: relative;
  background-color: #fafafa;
  // background-color: #fff;
  padding: 0.3em;
  border-radius: 0.5em;
  margin-left: 1.4em;
  margin-top: 0.5rem;
  border: 1px solid #9e00b1;
  span {
    position: absolute;
    top: -0.5em;
    left: -1.2em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.icon {
  &:hover {
    cursor: pointer;
  }
}

.muted {
  color: gray;
  font-size: 80%;
}

.tree {
  text-align: right;
}

.tree-list-container {
  .tree-list-content {
    width: 100%;
    height: calc(100vh - 20em);
    overflow-y: auto;
  }

  // }
}
</style>