join query

Todo: dictionary for join tables

src/components/queryBuilder/BuilderHost.vue

@@ -29,16 +29,32 @@
       >
         <NoSymbolIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
       </div>
-      <div
-        class="p-1 border border-gray-400 bg-red-200 rounded-md"
-        title="Anfrage löschen"
-        @click="$emit('update:model-value', undefined)"
-      >
+      <div class="p-1 border border-gray-400 bg-red-200 rounded-md" title="Anfrage löschen" @click="clearQuery">
         <TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
       </div>
+      <div class="grow"></div>
+      <div class="flex flex-row overflow-hidden border border-gray-400 rounded-md">
+        <div
+          class="p-1"
+          :class="queryMode == 'builder' ? 'bg-gray-200' : ''"
+          title="Visual Builder"
+          @click="queryMode = 'builder'"
+        >
+          <RectangleGroupIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+        <div
+          class="p-1"
+          :class="queryMode == 'editor' ? 'bg-gray-200' : ''"
+          title="SQL Editor"
+          @click="queryMode = 'editor'"
+        >
+          <CommandLineIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+      </div>
     </div>
-    <div class="p-2 h-44 md:h-60 w-full overflow-y-scroll">
-      <Table v-model="value" />
+    <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" />
+      <Table v-else v-model="value" />
     </div>
   </div>
 </template>
@@ -49,9 +65,11 @@ import { mapActions, mapState } from "pinia";
 import type { DynamicQueryStructure } from "../../types/dynamicQueries";
 import {
   ArchiveBoxArrowDownIcon,
+  CommandLineIcon,
   InboxArrowDownIcon,
   NoSymbolIcon,
   PlayIcon,
+  RectangleGroupIcon,
   TrashIcon,
 } from "@heroicons/vue/24/outline";
 import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
@@ -62,7 +80,7 @@ import Table from "./Table.vue";
 export default defineComponent({
   props: {
     modelValue: {
-      type: Object as PropType<DynamicQueryStructure>,
+      type: [Object, String] as PropType<DynamicQueryStructure | string>,
       default: {
         select: "*",
         table: "",
@@ -73,6 +91,26 @@ 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 = "";
+      }
+    },
+  },
+  data() {
+    return {
+      queryMode: "builder" as "builder" | "editor",
+    };
+  },
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas", "loading"]),
     value: {
@@ -89,6 +127,20 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useQueryBuilderStore, ["fetchTableMetas"]),
+    clearQuery() {
+      this.$emit("update:model-value", undefined);
+      if (this.queryMode == "builder") {
+        this.value = {
+          select: "*",
+          table: "",
+          where: [],
+          join: [],
+          orderBy: [],
+        };
+      } else {
+        this.value = "";
+      }
+    },
   },
 });
 </script>

src/components/queryBuilder/Condition.vue

@@ -18,7 +18,23 @@
         {{ op }}
       </option>
     </select>
-    <input v-model="value" :type="inputType" />
+    <div v-if="!operation.toLowerCase().includes('null')" class="contents">
+      <div v-if="operation == 'between'" class="contents">
+        <input
+          :value="(value as any)?.start"
+          @input="(e) => ((value as any).start = (e.target as HTMLInputElement).value)"
+          :type="inputType"
+        />
+        <p>-</p>
+        <input
+          :value="(value as any)?.end"
+          @input="(e) => ((value as any).end = (e.target as HTMLInputElement).value)"
+          :type="inputType"
+        />
+      </div>
+      <input v-else v-model="value" :type="inputType" />
+    </div>
+
     <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="$emit('remove')">
       <TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
     </div>
@@ -98,7 +114,11 @@ export default defineComponent({
         return this.modelValue.operation;
       },
       set(val: WhereOperation) {
-        this.$emit("update:model-value", { ...this.modelValue, operation: val });
+        if (val == "between") {
+          this.$emit("update:model-value", { ...this.modelValue, operation: val, value: { start: "", end: "" } });
+        } else {
+          this.$emit("update:model-value", { ...this.modelValue, operation: val });
+        }
       },
     },
     value: {

src/components/queryBuilder/Join.vue

@@ -2,8 +2,15 @@
   <div class="flex flex-row gap-2">
     <p class="w-14 min-w-14 pt-2">JOIN</p>
     <div class="flex flex-row flex-wrap gap-2 items-center w-full">
-      <div class="flex flex-row gap-2 items-center justify-end w-full">
-        <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="">
+      <div class="flex flex-row flex-wrap gap-2 items-center justify-end w-full">
+        <JoinTable
+          v-for="(join, index) in value"
+          :model-value="join"
+          :table="table"
+          @update:model-value="($event) => (value[index] = $event)"
+          @remove="removeAtIndex(index)"
+        />
+        <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addToValue">
           <PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
         </div>
       </div>
@@ -17,6 +24,7 @@ import { mapActions, mapState } from "pinia";
 import type { DynamicQueryStructure } from "../../types/dynamicQueries";
 import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
 import { PlusIcon } from "@heroicons/vue/24/outline";
+import JoinTable from "./JoinTable.vue";
 </script>
 
 <script lang="ts">
@@ -40,6 +48,29 @@ export default defineComponent({
     activeTable() {
       return this.tableMetas.find((tm) => tm.tableName == this.table);
     },
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: Array<DynamicQueryStructure & { foreignColumn: string }>) {
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  methods: {
+    addToValue() {
+      this.value.push({
+        select: "*",
+        table: "",
+        where: [],
+        join: [],
+        orderBy: [],
+        foreignColumn: "",
+      });
+    },
+    removeAtIndex(index: number) {
+      this.value.splice(index, 1);
+    },
   },
 });
 </script>

src/components/queryBuilder/JoinTable.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="flex flex-row gap-2 w-full">
+    <div class="flex flex-row gap-2 w-full">
+      <div class="flex flex-col gap-2 w-full">
+        <select v-model="foreignColumn" class="w-full">
+          <option value="" disabled>Relation auswählen</option>
+          <option v-for="relation in activeTable?.relations" :value="relation.column">
+            {{ relation.column }} -> {{ relation.referencedTableName }}
+          </option>
+        </select>
+        <Table v-model="value" disable-table-select />
+      </div>
+      <div class="h-fit p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="$emit('remove')">
+        <TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+      </div>
+    </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 { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import Table from "./Table.vue";
+import { TrashIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: Object as PropType<
+        DynamicQueryStructure & {
+          foreignColumn: string;
+        }
+      >,
+      default: {
+        select: "*",
+        table: "",
+        where: [],
+        join: [],
+        orderBy: [],
+        foreignColumn: "",
+      },
+    },
+  },
+  emits: ["update:model-value", "remove"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    activeTable() {
+      return this.tableMetas.find((tm) => tm.tableName == this.table);
+    },
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(
+        val: DynamicQueryStructure & {
+          foreignColumn: string;
+        }
+      ) {
+        this.$emit("update:model-value", val);
+      },
+    },
+    foreignColumn: {
+      get() {
+        return this.modelValue.foreignColumn;
+      },
+      set(val: string) {
+        let relTable = this.activeTable?.relations.find((r) => r.column == val);
+        this.$emit("update:model-value", {
+          ...this.modelValue,
+          foreignColumn: val,
+          table: relTable?.referencedTableName, // TODO: use dictionary
+        });
+      },
+    },
+  },
+});
+</script>

src/components/queryBuilder/Table.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col gap-2">
-    <TableSelect v-model="table" />
+  <div class="flex flex-col gap-2 w-full">
+    <TableSelect v-model="table" :disableTableSelect="disableTableSelect" />
     <ColumnSelect v-if="table != ''" v-model="columnSelect" :table="table" />
     <Where v-if="table != ''" v-model="where" :table="table" />
     <Order v-if="table != ''" v-model="order" :table="table" :columns="columnSelect" />
@@ -33,6 +33,10 @@ export default defineComponent({
         orderBy: [],
       },
     },
+    disableTableSelect: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["update:model-value"],
   computed: {

src/components/queryBuilder/TableSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-row gap-2">
     <p class="w-14 min-w-14 pt-2">FROM</p>
-    <select v-model="value">
+    <select v-model="value" :disabled="disableTableSelect">
       <option value="" disabled>Tabelle auswählen</option>
       <option v-for="table in tableMetas" :value="table.tableName">
         {{ table.tableName }}
@@ -23,6 +23,10 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    disableTableSelect: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["update:model-value"],
   computed: {

src/stores/admin/queryBuilder.ts

@@ -12,7 +12,7 @@ export const useQueryBuilderStore = defineStore("queryBuilder", {
       totalLength: 0 as number,
       loadingData: "fetched" as "loading" | "fetched" | "failed",
       queryError: "" as string | { sql: string; code: string; msg: string },
-      query: undefined as undefined | DynamicQueryStructure,
+      query: undefined as undefined | DynamicQueryStructure | string,
       isLoadedQuery: undefined as undefined | number,
     };
   },

src/types/dynamicQueries.ts

@@ -61,8 +61,8 @@ export const whereOperationArray = [
   "lte",
   "gt",
   "gte",
-  "in",
-  "notIn",
+  // "in",
+  // "notIn",
   "contains",
   "notContains",
   "null",