776 Database tree left side clicks (#799)

adds handler to accept clicks on the left side of the database tree
adds handler for double clicks on the left side of the database tree
refs: #776

Author: plucik

pgmanage/app/static/pgmanage_frontend/src/components/TreeMariaDB.vue

@@ -1,6 +1,6 @@
 <template>
   <PowerTree ref="tree" v-model="nodes" @nodedblclick="doubleClickNode" @toggle="onToggle"
-    @nodecontextmenu="onContextMenu" :allow-multiselect="false" @nodeclick="onClickHandler" tabindex="0">
+    @nodecontextmenu="onContextMenu" :allow-multiselect="false" @nodeclick="onClickHandler" @click="handleLeftSideClick" @dblclick="handleLeftSideDblClick" tabindex="0">
     <template v-slot:toggle="{ node }">
       <i v-if="node.isExpanded" class="exp_col fas fa-chevron-down"></i>
       <i v-if="!node.isExpanded" class="exp_col fas fa-chevron-right"></i>

pgmanage/app/static/pgmanage_frontend/src/components/TreeMssql.vue

@@ -7,6 +7,8 @@
     @nodecontextmenu="onContextMenu"
     :allow-multiselect="false"
     @nodeclick="onClickHandler"
+    @click="handleLeftSideClick"
+    @dblclick="handleLeftSideDblClick"
     tabindex="0"
   >
     <template v-slot:toggle="{ node }">

pgmanage/app/static/pgmanage_frontend/src/components/TreeMysql.vue

@@ -1,6 +1,6 @@
 <template>
   <PowerTree ref="tree" v-model="nodes" @nodedblclick="doubleClickNode" @toggle="onToggle"
-    @nodecontextmenu="onContextMenu" :allow-multiselect="false" @nodeclick="onClickHandler" tabindex="0">
+    @nodecontextmenu="onContextMenu" :allow-multiselect="false" @nodeclick="onClickHandler" @click="handleLeftSideClick" @dblclick="handleLeftSideDblClick" tabindex="0">
     <template v-slot:toggle="{ node }">
       <i v-if="node.isExpanded" class="exp_col fas fa-chevron-down"></i>
       <i v-if="!node.isExpanded" class="exp_col fas fa-chevron-right"></i>

pgmanage/app/static/pgmanage_frontend/src/components/TreeOracle.vue

@@ -1,6 +1,6 @@
 <template>
   <PowerTree ref="tree" v-model="nodes" @nodedblclick="doubleClickNode" @toggle="onToggle"
-    @nodecontextmenu="onContextMenu" :allow-multiselect="false" @nodeclick="onClickHandler" tabindex="0">
+    @nodecontextmenu="onContextMenu" :allow-multiselect="false" @nodeclick="onClickHandler" @click="handleLeftSideClick" @dblclick="handleLeftSideDblClick" tabindex="0">
     <template v-slot:toggle="{ node }">
       <i v-if="node.isExpanded" class="exp_col fas fa-chevron-down"></i>
       <i v-if="!node.isExpanded" class="exp_col fas fa-chevron-right"></i>

pgmanage/app/static/pgmanage_frontend/src/components/TreePostgresql.vue

@@ -1,6 +1,6 @@
 <template>
   <PowerTree ref="tree" v-model="nodes" @nodedblclick="doubleClickNode" @toggle="onToggle"
-    @nodecontextmenu="onContextMenu" :allow-multiselect="false" @nodeclick="onClickHandler" tabindex="0">
+    @nodecontextmenu="onContextMenu" :allow-multiselect="false" @nodeclick="onClickHandler" @click="handleLeftSideClick" @dblclick="handleLeftSideDblClick" tabindex="0">
     <template v-slot:toggle="{ node }">
       <i v-if="node.isExpanded" class="exp_col fas fa-chevron-down"></i>
       <i v-if="!node.isExpanded" class="exp_col fas fa-chevron-right"></i>

pgmanage/app/static/pgmanage_frontend/src/components/TreeSnippets.vue

@@ -7,6 +7,7 @@
     @nodecontextmenu="onContextMenu"
     :allow-multiselect="false"
     @nodeclick="onClickHandler"
+    @click="handleLeftSideClick"
   >
     <template v-slot:toggle="{ node }">
       <i v-if="node.isExpanded" class="exp_col fas fa-chevron-down"></i>

pgmanage/app/static/pgmanage_frontend/src/components/TreeSqlite.vue

@@ -7,6 +7,8 @@
     @nodecontextmenu="onContextMenu"
     :allow-multiselect="false"
     @nodeclick="onClickHandler"
+    @click="handleLeftSideClick"
+    @dblclick="handleLeftSideDblClick"
     tabindex="0"
   >
     <template v-slot:toggle="{ node }">

pgmanage/app/static/pgmanage_frontend/src/mixins/power_tree.js

@@ -480,5 +480,35 @@ export default {
         });
       }
     },
+    resolveNodeFromEvent(event) {
+      let target = event.target;
+      let nodePath = null;
+
+      if (target.classList.contains("vue-power-tree-gap")) {
+        let parent = target.parentElement;
+        nodePath = JSON.parse(parent.getAttribute("path"));
+      } else if (!!target.getAttribute("path")) {
+        nodePath = JSON.parse(target.getAttribute("path"));
+      }
+
+      if (!nodePath) return;
+
+      const node = this.$refs.tree.getNode(nodePath);
+
+      return node;
+    },
+    handleLeftSideClick(event) {
+      const node = this.resolveNodeFromEvent(event);
+      if (!node) return;
+      
+      this.$refs.tree.select(node.path);
+      this.onClickHandler(node, event);
+    },
+    handleLeftSideDblClick(event) {
+      const node = this.resolveNodeFromEvent(event);
+      if (!node) return;
+
+      this.doubleClickNode(node);
+    },
   },
 };