Condition and order building

src/components/queryBuilder/Condition.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="flex flex-row gap-2 items-center w-full">
+    <select v-if="concat != '_'" v-model="concat" class="!w-20 !h-fit">
+      <option value="" disabled>Verknüpfung auswählen</option>
+      <option v-for="operation in ['AND', 'OR']" :value="operation">
+        {{ operation }}
+      </option>
+    </select>
+    <select v-model="column">
+      <option value="" disabled>Verknüpfung auswählen</option>
+      <option v-for="col in activeTable?.columns" :value="col">
+        {{ foreignColumns?.includes(col.column) ? "FK:" : "" }} {{ col.column }}:{{ col.type }}
+      </option>
+    </select>
+    <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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import type { ConditionStructure, ConditionValue, WhereOperation, WhereType } from "../../types/dynamicQueries";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import { TrashIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: Object as PropType<ConditionStructure & { structureType: "condition" }>,
+      default: {},
+    },
+  },
+  emits: ["update:model-value", "remove"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    activeTable() {
+      return this.tableMetas.find((tm) => tm.tableName == this.table);
+    },
+    foreignColumns() {
+      return this.activeTable?.relations.map((r) => r.column);
+    },
+    concat: {
+      get() {
+        return this.modelValue.concat;
+      },
+      set(val: WhereType) {
+        this.$emit("update:model-value", { ...this.modelValue, concat: val });
+      },
+    },
+    column: {
+      get() {
+        return this.modelValue.column;
+      },
+      set(val: string) {
+        this.$emit("update:model-value", { ...this.modelValue, column: val });
+      },
+    },
+    operation: {
+      get() {
+        return this.modelValue.operation;
+      },
+      set(val: WhereOperation) {
+        this.$emit("update:model-value", { ...this.modelValue, operation: val });
+      },
+    },
+    value: {
+      get() {
+        return this.modelValue.value;
+      },
+      set(val: ConditionValue) {
+        this.$emit("update:model-value", { ...this.modelValue, value: val });
+      },
+    },
+  },
+});
+</script>

src/components/queryBuilder/Join.vue

@@ -1,7 +1,13 @@
 <template>
-  <div class="flex flex-row gap-2 items-center">
-    <p class="w-14 min-w-14">JOIN</p>
-    {{ activeTable?.relations }}
+  <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="">
+          <PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -10,6 +16,7 @@ import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
 import type { DynamicQueryStructure } from "../../types/dynamicQueries";
 import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import { PlusIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">

src/components/queryBuilder/NestedCondition.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="flex flex-row gap-2 w-full border border-gray-300 rounded-md p-1">
+    <select v-model="concat" class="!w-20 !h-fit">
+      <option value="" disabled>Verknüpfung auswählen</option>
+      <option v-for="operation in ['AND', 'OR']" :value="operation">
+        {{ operation }}
+      </option>
+    </select>
+    <NestedWhere v-model="conditions" :table="table" />
+    <div
+      class="flex items-center justify-center h-full 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>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import type { ConditionStructure, WhereType } from "../../types/dynamicQueries";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import { TrashIcon } from "@heroicons/vue/24/outline";
+import NestedWhere from "./NestedWhere.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: Object as PropType<ConditionStructure & { structureType: "nested" }>,
+      default: {},
+    },
+  },
+  emits: ["update:model-value", "remove"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    concat: {
+      get() {
+        return this.modelValue.concat;
+      },
+      set(val: WhereType) {
+        this.$emit("update:model-value", { ...this.modelValue, concat: val });
+      },
+    },
+    conditions: {
+      get() {
+        return this.modelValue.conditions;
+      },
+      set(val: Array<ConditionStructure>) {
+        this.$emit("update:model-value", { ...this.modelValue, conditions: val });
+      },
+    },
+  },
+});
+</script>

src/components/queryBuilder/NestedWhere.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="flex flex-row gap-2 w-full">
+    <div class="flex flex-row flex-wrap gap-2 items-center w-full">
+      <div v-for="(condition, index) in value" class="contents">
+        <NestedCondition
+          v-if="condition.structureType == 'nested'"
+          :model-value="condition"
+          :table="table"
+          @update:model-value="($event) => (value[index] = $event)"
+          @remove="removeAtIndex(index)"
+        />
+        <Condition
+          v-else
+          :model-value="condition"
+          @update:model-value="($event) => (value[index] = $event)"
+          @remove="removeAtIndex(index)"
+        />
+      </div>
+      <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="addConditionToValue">
+          <PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+        <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addNestedToValue">
+          <RectangleStackIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+      </div>
+    </div>
+  </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";
+import NestedCondition from "./NestedCondition.vue";
+import Condition from "./Condition.vue";
+import { PlusIcon, RectangleStackIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: 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);
+    },
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: Array<ConditionStructure>) {
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  methods: {
+    addNestedToValue() {
+      this.value.push({
+        structureType: "nested",
+        concat: "AND",
+        conditions: [],
+      });
+    },
+    addConditionToValue() {
+      this.value.push({
+        structureType: "condition",
+        concat: this.value.length == 0 ? "_" : "AND",
+        operation: "eq",
+        column: "",
+        value: "",
+      });
+    },
+    removeAtIndex(index: number) {
+      this.value.splice(index, 1);
+    },
+  },
+});
+</script>

src/components/queryBuilder/Order.vue

@@ -1,6 +1,21 @@
 <template>
-  <div class="flex flex-row gap-2 items-center">
-    <p class="w-14 min-w-14">ORDER</p>
+  <div class="flex flex-row gap-2">
+    <p class="w-14 min-w-14 pt-2">ORDER</p>
+    <div class="flex flex-row flex-wrap gap-2 items-center w-full">
+      <OrderStructure
+        v-for="(order, index) in value"
+        :model-value="order"
+        :table="table"
+        :columns="columns"
+        @update:model-value="($event) => (value[index] = $event)"
+        @remove="removeAtIndex(index)"
+      />
+      <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="addToValue">
+          <PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -9,6 +24,8 @@ import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
 import type { OrderByStructure } from "../../types/dynamicQueries";
 import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import OrderStructure from "./OrderStructure.vue";
+import { PlusIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -33,8 +50,24 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas"]),
-    activeTable() {
-      return this.tableMetas.find((tm) => tm.tableName == this.table);
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: Array<OrderByStructure>) {
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  methods: {
+    addToValue() {
+      this.value.push({
+        column: "",
+        order: "ASC",
+      });
+    },
+    removeAtIndex(index: number) {
+      this.value.splice(index, 1);
     },
   },
 });

src/components/queryBuilder/OrderStructure.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="flex flex-row gap-2 items-center w-full">
+    <select v-model="column" class="w-full">
+      <option value="" disabled>Spalte auswählen</option>
+      <option v-for="column in selectableColumns" :value="column">
+        {{ column }}
+      </option>
+    </select>
+    <select v-model="order">
+      <option value="" disabled>Sortierung auswählen</option>
+      <option v-for="order in ['ASC', 'DESC']" :value="order">
+        {{ order }}
+      </option>
+    </select>
+    <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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import type { OrderByStructure, OrderByType } from "../../types/dynamicQueries";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import { TrashIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: String,
+      default: "",
+    },
+    columns: {
+      type: [Array, String] as PropType<"*" | Array<string>>,
+      default: "*",
+    },
+    modelValue: {
+      type: Object as PropType<OrderByStructure>,
+      default: {},
+    },
+  },
+  emits: ["update:model-value", "remove"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    selectableColumns() {
+      if (this.columns == "*") {
+        let meta = this.tableMetas.find((tm) => tm.tableName == this.table);
+        if (!meta) return [];
+        let relCols = meta.relations.map((r) => r.column);
+        return meta.columns.map((c) => c.column).filter((c) => !relCols.includes(c));
+      } else {
+        return this.columns;
+      }
+    },
+    column: {
+      get() {
+        return this.modelValue.column;
+      },
+      set(val: string) {
+        this.$emit("update:model-value", { ...this.modelValue, column: val });
+      },
+    },
+    order: {
+      get() {
+        return this.modelValue.order;
+      },
+      set(val: OrderByType) {
+        this.$emit("update:model-value", { ...this.modelValue, order: val });
+      },
+    },
+  },
+});
+</script>

src/components/queryBuilder/Table.vue

@@ -2,9 +2,9 @@
   <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" />
+    <Where v-model="where" :table="table" />
     <Order v-model="order" :table="table" :columns="columnSelect" />
-    <Join v-model="modelValue.join" />
+    <Join v-model="modelValue.join" :table="table" />
   </div>
 </template>
 

src/components/queryBuilder/Where.vue

@@ -1,6 +1,32 @@
 <template>
-  <div class="flex flex-row gap-2 items-center">
-    <p class="w-14 min-w-14">WHERE</p>
+  <div class="flex flex-row gap-2 w-full">
+    <p class="w-14 min-w-14 pt-2">WHERE</p>
+    <div class="flex flex-row flex-wrap gap-2 items-center w-full">
+      <div v-for="(condition, index) in value" class="contents">
+        <NestedCondition
+          v-if="condition.structureType == 'nested'"
+          :model-value="condition"
+          :table="table"
+          @update:model-value="($event) => (value[index] = $event)"
+          @remove="removeAtIndex(index)"
+        />
+        <Condition
+          v-else
+          :model-value="condition"
+          :table="table"
+          @update:model-value="($event) => (value[index] = $event)"
+          @remove="removeAtIndex(index)"
+        />
+      </div>
+      <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="addConditionToValue">
+          <PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+        <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addNestedToValue">
+          <RectangleStackIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -9,6 +35,9 @@ import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
 import type { ConditionStructure } from "../../types/dynamicQueries";
 import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import NestedCondition from "./NestedCondition.vue";
+import Condition from "./Condition.vue";
+import { PlusIcon, RectangleStackIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -18,10 +47,6 @@ export default defineComponent({
       type: String,
       default: "",
     },
-    columns: {
-      type: [Array, String] as PropType<"*" | Array<string>>,
-      default: "*",
-    },
     modelValue: {
       type: Array as PropType<Array<ConditionStructure>>,
       default: [],
@@ -36,6 +61,35 @@ export default defineComponent({
     activeTable() {
       return this.tableMetas.find((tm) => tm.tableName == this.table);
     },
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: Array<ConditionStructure>) {
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  methods: {
+    addNestedToValue() {
+      this.value.push({
+        structureType: "nested",
+        concat: "AND",
+        conditions: [],
+      });
+    },
+    addConditionToValue() {
+      this.value.push({
+        structureType: "condition",
+        concat: this.value.length == 0 ? "_" : "AND",
+        operation: "eq",
+        column: "",
+        value: "",
+      });
+    },
+    removeAtIndex(index: number) {
+      this.value.splice(index, 1);
+    },
   },
 });
 </script>

src/types/dynamicQueries.ts

@@ -44,6 +44,7 @@ export type WhereOperation =
   | "between" //	Is between
   | "startsWith" //	Starts with
   | "endsWith"; //	Ends with
+// TODO: age between | age equals | age greater | age smaller
 
 export type OrderByStructure = {
   column: string;