builder layout start

src/components/queryBuilder/BuilderHost.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="flex flex-col border border-gray-300 rounded-md">
+    <div class="flex flex-row gap-2 border-b border-gray-300 p-2">
+      <div class="p-1 border border-gray-400 bg-gray-100 rounded-md" title="Abfrage starten">
+        <PlayIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+      </div>
+      <div class="p-1 border border-gray-400 bg-gray-100 rounded-md" title="Abfrage speichern">
+        <InboxArrowDownIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+      </div>
+      <div class="p-1 border border-gray-400 bg-gray-100 rounded-md" title="Ergebnisse leeren">
+        <NoSymbolIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+      </div>
+    </div>
+    <div class="p-2 h-44 md:h-56 overflow-y-scroll">
+      {{ tableMetas }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import type { DynamicQueryStructure } from "../../types/dynamicQueries";
+import { InboxArrowDownIcon, NoSymbolIcon, PlayIcon } from "@heroicons/vue/24/outline";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    query: {
+      type: Object as PropType<DynamicQueryStructure>,
+      default: {
+        select: "*",
+        table: "",
+        where: [],
+        join: [],
+        orderBy: [],
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas", "loading"]),
+  },
+  mounted() {
+    this.fetchTableMetas();
+  },
+  methods: {
+    ...mapActions(useQueryBuilderStore, ["fetchTableMetas"]),
+  },
+});
+</script>

src/viewmodels/admin/query.models.ts

@@ -3,3 +3,8 @@ export interface TableMeta {
   columns: Array<{ column: string; type: string }>;
   relations: Array<{ column: string; relationType: string; referencedTableName: string }>;
 }
+
+export interface QueryViewModel {
+  id: number;
+  query: string;
+}

src/views/admin/club/query/Builder.vue

@@ -7,7 +7,8 @@
     </template>
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
-        <div class="border border-gray-300 rounded-md p-2">builder</div>
+        <BuilderHost />
+        <p>Ergebnisse:</p>
         <Pagination
           :items="data"
           :totalCount="totalLength"
@@ -29,6 +30,7 @@ import { mapActions, mapState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import Pagination from "@/components/Pagination.vue";
 import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
+import BuilderHost from "../../../../components/queryBuilder/BuilderHost.vue";
 </script>
 
 <script lang="ts">