src/components/queryBuilder/BuilderHost.vue

@@ -131,6 +131,11 @@ export default defineComponent({
         this.value = query;
       }
     },
+    value() {
+      if (typeof this.value != "string" && !this.value.id) {
+        this.value.id = uuid();
+      }
+    },
   },
   data() {
     return {

src/components/queryBuilder/Condition.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-row gap-2 items-center w-full">
-    <select v-if="concat != '_'" v-model="concat" class="w-20! h-fit!">
+    <select v-if="!isFirst" 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 }}
@@ -68,6 +68,10 @@ import { TrashIcon } from "@heroicons/vue/24/outline";
 <script lang="ts">
 export default defineComponent({
   props: {
+    isFirst: {
+      type: Boolean,
+      default: false,
+    },
     table: {
       type: String,
       default: "",
@@ -78,9 +82,6 @@ export default defineComponent({
     },
   },
   emits: ["update:model-value", "remove"],
-  data() {
-    return {};
-  },
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas"]),
     activeTable() {
@@ -144,5 +145,10 @@ export default defineComponent({
       },
     },
   },
+  mounted() {
+    if (this.concat == "_") {
+      this.concat = "AND";
+    }
+  },
 });
 </script>

src/components/queryBuilder/JoinTable.vue

@@ -40,6 +40,7 @@ import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
 import Table from "./Table.vue";
 import { TrashIcon } from "@heroicons/vue/24/outline";
 import { joinTableName } from "@/helpers/queryFormatter";
+import { v4 as uuid } from "uuid";
 </script>
 
 <script lang="ts">
@@ -94,5 +95,10 @@ export default defineComponent({
       },
     },
   },
+  mounted() {
+    if (!this.value.id) {
+      this.value.id = uuid();
+    }
+  },
 });
 </script>

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-if="concat != '_'" v-model="concat" class="w-20! h-fit!">
+    <select v-if="isFirst" 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 }}
@@ -28,6 +28,10 @@ import NestedWhere from "./NestedWhere.vue";
 <script lang="ts">
 export default defineComponent({
   props: {
+    isFirst: {
+      type: Boolean,
+      default: false,
+    },
     table: {
       type: String,
       default: "",
@@ -38,9 +42,6 @@ export default defineComponent({
     },
   },
   emits: ["update:model-value", "remove"],
-  data() {
-    return {};
-  },
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas"]),
     concat: {
@@ -60,5 +61,10 @@ export default defineComponent({
       },
     },
   },
+  mounted() {
+    if (this.concat == "_") {
+      this.concat = "AND";
+    }
+  },
 });
 </script>

src/components/queryBuilder/Table.vue

@@ -16,6 +16,7 @@ import Where from "./Where.vue";
 import Order from "./Order.vue";
 import Join from "./Join.vue";
 import TableSelect from "./TableSelect.vue";
+import { v4 as uuid } from "uuid";
 </script>
 
 <script lang="ts">
@@ -55,6 +56,14 @@ export default defineComponent({
 
       return tables;
     },
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: DynamicQueryStructure) {
+        this.$emit("update:model-value", val);
+      },
+    },
     table: {
       get() {
         return this.modelValue.table || "";
@@ -96,5 +105,10 @@ export default defineComponent({
       },
     },
   },
+  mounted() {
+    if (!this.value.id) {
+      this.value.id = uuid();
+    }
+  },
 });
 </script>

src/components/queryBuilder/Where.vue

@@ -5,6 +5,7 @@
       <div v-for="(condition, index) in value" class="contents">
         <NestedCondition
           v-if="condition.structureType == 'nested'"
+          :isFirst="index == 0"
           :model-value="condition"
           :table="table"
           @update:model-value="($event) => (value[index] = $event)"
@@ -12,6 +13,7 @@
         />
         <Condition
           v-else
+          :isFirst="index == 0"
           :model-value="condition"
           :table="table"
           @update:model-value="($event) => (value[index] = $event)"
@@ -74,14 +76,14 @@ export default defineComponent({
     addNestedToValue() {
       this.value.push({
         structureType: "nested",
-        concat: this.value.length == 0 ? "_" : "AND",
+        concat: "AND",
         conditions: [],
       });
     },
     addConditionToValue() {
       this.value.push({
         structureType: "condition",
-        concat: this.value.length == 0 ? "_" : "AND",
+        concat: "AND",
         operation: "eq",
         column: "",
         value: "",