data structure

src/components/queryBuilder/BuilderHost.vue

@@ -34,6 +34,14 @@
       </div>
       <div class="grow"></div>
       <div class="flex flex-row overflow-hidden border border-gray-400 rounded-md">
+        <div
+          class="p-1"
+          :class="queryMode == 'structure' ? 'bg-gray-200' : ''"
+          title="Schema-Struktur"
+          @click="queryMode = 'structure'"
+        >
+          <SparklesIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
         <div
           class="p-1"
           :class="queryMode == 'builder' ? 'bg-gray-200' : ''"
@@ -53,14 +61,17 @@
       </div>
     </div>
     <div class="p-2 h-44 md:h-60 w-full overflow-y-auto">
-      <textarea v-if="typeof value == 'string'" v-model="value" placeholder="SQL Query" class="h-full w-full" />
+      <div v-if="queryMode == 'structure'">
+        <img src="/administration-db.png" class="h-full w-full cursor-pointer" @click="showStructure" />
+      </div>
+      <textarea v-else-if="typeof value == 'string'" v-model="value" placeholder="SQL Query" class="h-full w-full" />
       <Table v-else v-model="value" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineComponent, type PropType } from "vue";
+import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
 import type { DynamicQueryStructure } from "../../types/dynamicQueries";
 import {
@@ -71,8 +82,10 @@ import {
   PlayIcon,
   RectangleGroupIcon,
   TrashIcon,
+  SparklesIcon,
 } from "@heroicons/vue/24/outline";
 import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import { useModalStore } from "../../stores/modal";
 import Table from "./Table.vue";
 </script>
 
@@ -108,7 +121,7 @@ export default defineComponent({
   },
   data() {
     return {
-      queryMode: "builder" as "builder" | "editor",
+      queryMode: "builder" as "builder" | "editor" | "structure",
     };
   },
   computed: {
@@ -126,6 +139,7 @@ export default defineComponent({
     this.fetchTableMetas();
   },
   methods: {
+    ...mapActions(useModalStore, ["openModal"]),
     ...mapActions(useQueryBuilderStore, ["fetchTableMetas"]),
     clearQuery() {
       this.$emit("update:model-value", undefined);
@@ -141,6 +155,9 @@ export default defineComponent({
         this.value = "";
       }
     },
+    showStructure() {
+      this.openModal(markRaw(defineAsyncComponent(() => import("@/components/queryBuilder/StructureModal.vue"))));
+    },
   },
 });
 </script>

src/components/queryBuilder/StructureModal.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="flex flex-col w-full h-full overflow-hidden">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Datenstruktur</p>
+    </div>
+    <br />
+
+    <div class="grow w-full overflow-hidden">
+      <img src="/administration-db.png" class="max-h-full max-w-full h-auto w-auto mx-auto" />
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal">schnließen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+  },
+});
+</script>

src/stores/admin/queryBuilder.ts

@@ -30,7 +30,11 @@ export const useQueryBuilderStore = defineStore("queryBuilder", {
         });
     },
     sendQuery(offset = 0, count = 25) {
-      if (this.query == undefined) return;
+      this.queryError = "";
+      this.data = [];
+      this.totalLength = 0;
+      if (this.query == undefined || this.query == "" || (typeof this.query != "string" && this.query.table == ""))
+        return;
       this.loadingData = "loading";
       http
         .post(`/admin/querybuilder/query?offset=${offset}&count=${count}`, {