src/components/queryBuilder/BuilderHost.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="flex flex-col border border-gray-300 rounded-md">
+  <div class="flex flex-col border border-gray-300 rounded-md select-none">
     <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">
+      <div class="p-1 border border-gray-400 bg-green-200 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">
+      <div class="p-1 border border-gray-400 bg-red-200 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">
+    <div class="p-2 h-44 md:h-56 w-full overflow-y-scroll">
-      {{ tableMetas }}
+      <Table v-model="value" />
     </div>
   </div>
 </template>
@@ -23,12 +23,13 @@ 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";
+import Table from "./Table.vue";
 </script>
 
 <script lang="ts">
 export default defineComponent({
   props: {
-    query: {
+    modelValue: {
       type: Object as PropType<DynamicQueryStructure>,
       default: {
         select: "*",
@@ -39,11 +40,17 @@ export default defineComponent({
       },
     },
   },
-  data() {
+  emits: ["update:model-value"],
-    return {};
-  },
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas", "loading"]),
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: DynamicQueryStructure) {
+        this.$emit("update:model-value", val);
+      },
+    },
   },
   mounted() {
     this.fetchTableMetas();

src/components/queryBuilder/ColumnSelect.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="flex flex-row gap-2">
+    <p class="w-14 min-w-14 pt-2">SELECT</p>
+    <div class="flex flex-row flex-wrap gap-2 items-center">
+      <p
+        class="rounded-md shadow-sm relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
+      >
+        *
+      </p>
+      <p
+        v-for="col in activeTable?.columns"
+        :key="col.column"
+        class="rounded-md shadow-sm relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
+      >
+        {{ col.column }}:{{ col.type }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: [Array, String] as PropType<"*" | Array<string>>,
+      default: "*",
+    },
+  },
+  emits: ["update:model-value"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    activeTable() {
+      return this.tableMetas.find((tm) => tm.tableName == this.table);
+    },
+  },
+});
+</script>

src/components/queryBuilder/Join.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex flex-row gap-2 items-center">
+    <p class="w-14 min-w-14">JOIN</p>
+    {{ activeTable?.relations }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import type { DynamicQueryStructure } from "../../types/dynamicQueries";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: Array as PropType<Array<DynamicQueryStructure & { foreignColumn: string }>>,
+      default: [],
+    },
+  },
+  emits: ["update:model-value"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    activeTable() {
+      return this.tableMetas.find((tm) => tm.tableName == this.table);
+    },
+  },
+});
+</script>

src/components/queryBuilder/Order.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex flex-row gap-2 items-center">
+    <p class="w-14 min-w-14">ORDER</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import type { OrderByStructure } from "../../types/dynamicQueries";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: String,
+      default: "",
+    },
+    columns: {
+      type: [Array, String] as PropType<"*" | Array<string>>,
+      default: "*",
+    },
+    modelValue: {
+      type: Array as PropType<Array<OrderByStructure>>,
+      default: [],
+    },
+  },
+  emits: ["update:model-value"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    activeTable() {
+      return this.tableMetas.find((tm) => tm.tableName == this.table);
+    },
+  },
+});
+</script>

src/components/queryBuilder/Table.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <TableSelect v-model="table" />
+    <ColumnSelect v-model="columnSelect" :table="table" />
+    <Where v-model="where" :table="table" :columns="columnSelect" />
+    <Order v-model="order" :table="table" :columns="columnSelect" />
+    <Join v-model="modelValue.join" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import type { ConditionStructure, DynamicQueryStructure, OrderByStructure } from "../../types/dynamicQueries";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import ColumnSelect from "./ColumnSelect.vue";
+import Where from "./Where.vue";
+import Order from "./Order.vue";
+import Join from "./Join.vue";
+import TableSelect from "./TableSelect.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Object as PropType<DynamicQueryStructure>,
+      default: {
+        select: "*",
+        table: "",
+        where: [],
+        join: [],
+        orderBy: [],
+      },
+    },
+  },
+  emits: ["update:model-value"],
+  computed: {
+    table: {
+      get() {
+        return this.modelValue.table;
+      },
+      set(val: string) {
+        this.$emit("update:model-value", { ...this.modelValue, table: val });
+      },
+    },
+    columnSelect: {
+      get() {
+        return this.modelValue.select;
+      },
+      set(val: "*" | Array<string>) {
+        this.$emit("update:model-value", { ...this.modelValue, select: val });
+      },
+    },
+    where: {
+      get() {
+        return this.modelValue.where;
+      },
+      set(val: Array<ConditionStructure>) {
+        this.$emit("update:model-value", { ...this.modelValue, where: val });
+      },
+    },
+    order: {
+      get() {
+        return this.modelValue.orderBy;
+      },
+      set(val: Array<OrderByStructure>) {
+        this.$emit("update:model-value", { ...this.modelValue, orderBy: val });
+      },
+    },
+    join: {
+      get() {
+        return this.modelValue.join;
+      },
+      set(val: Array<DynamicQueryStructure & { foreignColumn: string }>) {
+        this.$emit("update:model-value", { ...this.modelValue, join: val });
+      },
+    },
+  },
+});
+</script>

src/components/queryBuilder/TableSelect.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="flex flex-row gap-2">
+    <p class="w-14 min-w-14 pt-2">FROM</p>
+    <select v-model="value">
+      <option value="" disabled>Tabelle auswählen</option>
+      <option v-for="table in tableMetas" :value="table.tableName">
+        {{ table.tableName }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState } from "pinia";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["update:model-value"],
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+});
+</script>

src/components/queryBuilder/Where.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex flex-row gap-2 items-center">
+    <p class="w-14 min-w-14">WHERE</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import type { ConditionStructure } from "../../types/dynamicQueries";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: String,
+      default: "",
+    },
+    columns: {
+      type: [Array, String] as PropType<"*" | Array<string>>,
+      default: "*",
+    },
+    modelValue: {
+      type: Array as PropType<Array<ConditionStructure>>,
+      default: [],
+    },
+  },
+  emits: ["update:model-value"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    activeTable() {
+      return this.tableMetas.find((tm) => tm.tableName == this.table);
+    },
+  },
+});
+</script>

src/main.css

@@ -79,17 +79,20 @@ a[button].disabled {
 }
 
 input:not([type="checkbox"]),
-textarea {
+textarea,
+select {
   @apply rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none;
 }
 
 input[readonly],
-textarea[readonly] {
+textarea[readonly],
+select[readonly] {
   @apply pointer-events-none;
 }
 
 input[disabled],
-textarea[disabled] {
+textarea[disabled],
+select[disabled] {
   @apply opacity-75 pointer-events-none;
 }
 

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

@@ -7,7 +7,7 @@
     </template>
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
-        <BuilderHost />
+        <BuilderHost v-model="query" />
         <p>Ergebnisse:</p>
         <Pagination
           :items="data"
@@ -31,12 +31,15 @@ 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";
+import type { DynamicQueryStructure } from "@/types/dynamicQueries";
 </script>
 
 <script lang="ts">
 export default defineComponent({
   data() {
-    return {};
+    return {
+      query: undefined as undefined | DynamicQueryStructure,
+    };
   },
   computed: {
     ...mapState(useQueryBuilderStore, ["loading", "loadingData", "tableMetas", "data", "totalLength"]),