select and query send

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

@@ -7,7 +7,13 @@
     </template>
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
-        <BuilderHost v-model="query" />
+        <BuilderHost
+          v-model="query"
+          @query:run="sendQuery()"
+          @query:save=""
+          @results:clear="clearResults()"
+          @results:export=""
+        />
         <p>Ergebnisse:</p>
         <Pagination
           :items="data"
@@ -26,7 +32,7 @@
 
 <script setup lang="ts">
 import { defineComponent } from "vue";
-import { mapActions, mapState } from "pinia";
+import { mapActions, mapState, mapWritableState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import Pagination from "@/components/Pagination.vue";
 import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
@@ -36,19 +42,15 @@ import type { DynamicQueryStructure } from "@/types/dynamicQueries";
 
 <script lang="ts">
 export default defineComponent({
-  data() {
-    return {
-      query: undefined as undefined | DynamicQueryStructure,
-    };
-  },
   computed: {
     ...mapState(useQueryBuilderStore, ["loading", "loadingData", "tableMetas", "data", "totalLength"]),
+    ...mapWritableState(useQueryBuilderStore, ["query"]),
   },
   mounted() {
     this.fetchTableMetas();
   },
   methods: {
-    ...mapActions(useQueryBuilderStore, ["fetchTableMetas", "sendQuery"]),
+    ...mapActions(useQueryBuilderStore, ["fetchTableMetas", "sendQuery", "clearResults"]),
   },
 });
 </script>