From 4cf5b989e0bf60f9f365d00f265ed6cf667a9d54 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Sat, 14 Dec 2024 17:02:34 +0100
Subject: [PATCH] builder layout start

---
 src/components/queryBuilder/BuilderHost.vue | 55 +++++++++++++++++++++
 src/viewmodels/admin/query.models.ts        |  5 ++
 src/views/admin/club/query/Builder.vue      |  4 +-
 3 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 src/components/queryBuilder/BuilderHost.vue

diff --git a/src/components/queryBuilder/BuilderHost.vue b/src/components/queryBuilder/BuilderHost.vue
new file mode 100644
index 0000000..b2924de
--- /dev/null
+++ b/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>
diff --git a/src/viewmodels/admin/query.models.ts b/src/viewmodels/admin/query.models.ts
index d9a6887..f3d9616 100644
--- a/src/viewmodels/admin/query.models.ts
+++ b/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;
+}
diff --git a/src/views/admin/club/query/Builder.vue b/src/views/admin/club/query/Builder.vue
index e846866..0c8d8ce 100644
--- a/src/views/admin/club/query/Builder.vue
+++ b/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">