condition building

src/components/queryBuilder/BuilderHost.vue

@@ -29,6 +29,13 @@
       >
         <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)"
+      >
+        <TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+      </div>
     </div>
     <div class="p-2 h-44 md:h-60 w-full overflow-y-scroll">
       <Table v-model="value" />
@@ -40,7 +47,13 @@
 import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
 import type { DynamicQueryStructure } from "../../types/dynamicQueries";
-import { ArchiveBoxArrowDownIcon, InboxArrowDownIcon, NoSymbolIcon, PlayIcon } from "@heroicons/vue/24/outline";
+import {
+  ArchiveBoxArrowDownIcon,
+  InboxArrowDownIcon,
+  NoSymbolIcon,
+  PlayIcon,
+  TrashIcon,
+} from "@heroicons/vue/24/outline";
 import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
 import Table from "./Table.vue";
 </script>

src/components/queryBuilder/Condition.vue

@@ -8,10 +8,17 @@
     </select>
     <select v-model="column">
       <option value="" disabled>Verknüpfung auswählen</option>
-      <option v-for="col in activeTable?.columns" :value="col">
+      <option v-for="col in activeTable?.columns" :value="col.column">
         {{ foreignColumns?.includes(col.column) ? "FK:" : "" }} {{ col.column }}:{{ col.type }}
       </option>
     </select>
+    <select v-model="operation" class="!w-fit !h-fit">
+      <option value="" disabled>Vergleich auswählen</option>
+      <option v-for="op in whereOperationArray" :value="op">
+        {{ op }}
+      </option>
+    </select>
+    <input v-model="value" :type="inputType" />
     <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>
@@ -21,7 +28,13 @@
 <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 {
+  whereOperationArray,
+  type ConditionStructure,
+  type ConditionValue,
+  type WhereOperation,
+  type WhereType,
+} from "../../types/dynamicQueries";
 import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
 import { TrashIcon } from "@heroicons/vue/24/outline";
 </script>
@@ -50,6 +63,20 @@ export default defineComponent({
     foreignColumns() {
       return this.activeTable?.relations.map((r) => r.column);
     },
+    inputType() {
+      let type = this.activeTable?.columns.find((c) => c.column == this.column)?.type;
+      if (this.operation.includes("timespan")) return "number";
+      switch (type) {
+        case "int":
+          return "number";
+        case "varchar":
+          return "text";
+        case "date":
+          return "date";
+        default:
+          return "text";
+      }
+    },
     concat: {
       get() {
         return this.modelValue.concat;

src/components/queryBuilder/NestedCondition.vue

@@ -1,6 +1,6 @@
 <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">
+    <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 }}

src/components/queryBuilder/NestedWhere.vue

@@ -12,6 +12,7 @@
         <Condition
           v-else
           :model-value="condition"
+          :table="table"
           @update:model-value="($event) => (value[index] = $event)"
           @remove="removeAtIndex(index)"
         />
@@ -72,7 +73,7 @@ export default defineComponent({
     addNestedToValue() {
       this.value.push({
         structureType: "nested",
-        concat: "AND",
+        concat: this.value.length == 0 ? "_" : "AND",
         conditions: [],
       });
     },

src/components/queryBuilder/Table.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col gap-2">
     <TableSelect v-model="table" />
-    <ColumnSelect v-model="columnSelect" :table="table" />
-    <Where v-model="where" :table="table" />
-    <Order v-model="order" :table="table" :columns="columnSelect" />
-    <Join v-model="modelValue.join" :table="table" />
+    <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" />
+    <Join v-if="table != ''" v-model="modelValue.join" :table="table" />
   </div>
 </template>
 

src/components/queryBuilder/Where.vue

@@ -74,7 +74,7 @@ export default defineComponent({
     addNestedToValue() {
       this.value.push({
         structureType: "nested",
-        concat: "AND",
+        concat: this.value.length == 0 ? "_" : "AND",
         conditions: [],
       });
     },