src/components/queryBuilder/BuilderHost.vue

@@ -32,7 +32,7 @@
       >
         <select v-model="activeQueryId" class="max-h-[34px] !py-0">
           <option :value="undefined" disabled>gepeicherte Anfrage auswählen</option>
-          <option v-for="query in queries" :key="query.id" :value="query.id" @click="value = query.query">
+          <option v-for="query in queries" :key="query.id" :value="query.id">
             {{ query.title }}
           </option>
         </select>
@@ -54,7 +54,7 @@
           class="p-1"
           :class="typeof value == 'object' ? 'bg-gray-200' : ''"
           title="Visual Builder"
-          @click="queryMode = 'builder'"
+          @click="changeMode('builder')"
         >
           <RectangleGroupIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
         </div>
@@ -62,7 +62,7 @@
           class="p-1"
           :class="typeof value == 'string' ? 'bg-gray-200' : ''"
           title="SQL Editor"
-          @click="queryMode = 'editor'"
+          @click="changeMode('editor')"
         >
           <CommandLineIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
         </div>
@@ -116,21 +116,9 @@ export default defineComponent({
   },
   emits: ["update:model-value", "query:run", "query:save", "results:export", "results:clear"],
   watch: {
-    queryMode() {
-      if (this.queryMode == "builder") {
-        this.value = {
-          select: "*",
-          table: "",
-          where: [],
-          join: [],
-          orderBy: [],
-        };
-      } else {
-        this.value = "";
-      }
-      this.activeQueryId = undefined;
-    },
     activeQueryId() {
+      if (this.activeQueryId == undefined) return;
+
       let query = this.queries.find((t) => t.id == this.activeQueryId)?.query;
       if (query != undefined) {
         if (typeof query == "string") {
@@ -188,6 +176,22 @@ export default defineComponent({
     showStructure() {
       this.openModal(markRaw(defineAsyncComponent(() => import("@/components/queryBuilder/StructureModal.vue"))));
     },
+    changeMode(mode: "editor" | "builder") {
+      this.queryMode = mode;
+
+      this.activeQueryId = undefined;
+      if (this.queryMode == "builder") {
+        this.value = {
+          select: "*",
+          table: "",
+          where: [],
+          join: [],
+          orderBy: [],
+        };
+      } else {
+        this.value = "";
+      }
+    },
   },
 });
 </script>