select and query send

src/views/admin/club/members/Member.vue

@@ -53,52 +53,6 @@ export default defineComponent({
   computed: {
     ...mapState(useMemberStore, ["members", "totalCount", "loading"]),
     ...mapState(useAbilityStore, ["can"]),
-    entryCount() {
-      return this.totalCount ?? this.members.length;
-    },
-    showingStart() {
-      return this.currentPage * this.maxEntriesPerPage;
-    },
-    showingEnd() {
-      let max = this.currentPage * this.maxEntriesPerPage + this.maxEntriesPerPage;
-      if (max > this.entryCount) max = this.entryCount;
-      return max;
-    },
-    showingText() {
-      return `${this.entryCount != 0 ? this.showingStart + 1 : 0} - ${this.showingEnd}`;
-    },
-    countOfPages() {
-      return Math.ceil(this.entryCount / this.maxEntriesPerPage);
-    },
-    displayedPagesNumbers(): Array<number | "."> {
-      //indicate if "." or page number gets pushed
-      let stateOfPush = false;
-
-      return [...new Array(this.countOfPages)].reduce((acc, curr, index) => {
-        if (
-          // always display first 2 pages
-          index <= 1 ||
-          // always display last 2 pages
-          index >= this.countOfPages - 2 ||
-          // always display 1 pages around current page
-          (this.currentPage - 1 <= index && index <= this.currentPage + 1)
-        ) {
-          acc.push(index);
-          stateOfPush = false;
-          return acc;
-        }
-        // abort if placeholder already added to array
-        if (stateOfPush == true) return acc;
-        // show placeholder if pagenumber is not actively rendered
-        acc.push(".");
-        stateOfPush = true;
-
-        return acc;
-      }, []);
-    },
-    visibleRows() {
-      return this.filterData(this.members, this.showingStart, this.showingEnd);
-    },
   },
   mounted() {
     this.fetchMembers(0, this.maxEntriesPerPage, true);
@@ -106,22 +60,6 @@ export default defineComponent({
   methods: {
     ...mapActions(useMemberStore, ["fetchMembers"]),
     ...mapActions(useModalStore, ["openModal"]),
-    loadPage(newPage: number | ".") {
-      if (newPage == ".") return;
-      if (newPage < 0 || newPage >= this.countOfPages) return;
-
-      let pageStart = newPage * this.maxEntriesPerPage;
-      let pageEnd = newPage * this.maxEntriesPerPage + this.maxEntriesPerPage;
-      if (pageEnd > this.entryCount) pageEnd = this.entryCount;
-
-      let loadedElementCount = this.filterData(this.members, pageStart, pageEnd).length;
-      if (loadedElementCount < this.maxEntriesPerPage) this.fetchMembers(pageStart, this.maxEntriesPerPage);
-
-      this.currentPage = newPage;
-    },
-    filterData(array: Array<any>, start: number, end: number): Array<any> {
-      return array.filter((elem, index) => (elem?.tab_pos ?? index) >= start && (elem?.tab_pos ?? index) < end);
-    },
     openCreateModal() {
       this.openModal(
         markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/CreateMemberModal.vue")))

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>