enhance: use QueryStoreId to fetch query

src/stores/admin/club/queryBuilder.ts

@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import { http } from "@/serverCom";
 import type { TableMeta } from "@/viewmodels/admin/configuration/query.models";
 import type { DynamicQueryStructure, FieldType } from "@/types/dynamicQueries";
+import type { AxiosResponse } from "axios";
 
 export const useQueryBuilderStore = defineStore("queryBuilder", {
   state: () => {
@@ -58,6 +59,16 @@ export const useQueryBuilderStore = defineStore("queryBuilder", {
           this.loadingData = "failed";
         });
     },
+    async sendQueryByStoreId(
+      id: string,
+      offset = 0,
+      count = 25,
+      noLimit: boolean = false
+    ): Promise<AxiosResponse<any, any>> {
+      return await http.post(
+        `/admin/querybuilder/query/${id}?` + (noLimit ? `noLimit=true` : `offset=${offset}&count=${count}`)
+      );
+    },
     clearResults() {
       this.data = [];
       this.totalLength = 0;

src/viewmodels/admin/club/newsletter/newsletter.models.ts

@@ -1,5 +1,3 @@
-import type { QueryViewModel } from "../../configuration/query.models";
-
 export interface NewsletterViewModel {
   id: number;
   title: string;
@@ -9,7 +7,6 @@ export interface NewsletterViewModel {
   newsletterSignatur: string;
   isSent: boolean;
   recipientsByQueryId?: string | null;
-  recipientsByQuery?: QueryViewModel | null;
 }
 
 export interface CreateNewsletterViewModel {

src/views/admin/club/newsletter/NewsletterRecipients.vue

@@ -81,6 +81,7 @@ import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore";
 import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
 import cloneDeep from "lodash.clonedeep";
 import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
+import type { FieldType } from "@/types/dynamicQueries";
 </script>
 
 <script lang="ts">
@@ -88,14 +89,9 @@ export default defineComponent({
   props: {
     newsletterId: String,
   },
-  watch: {
-    recipientsByQuery() {
-      this.loadQuery();
-    },
-  },
   data() {
     return {
-      query: "" as String,
+      queryResult: [] as Array<{ id: FieldType; [key: string]: FieldType }>,
       members: [] as Array<MemberViewModel>,
       showMemberSelect: false as boolean,
     };
@@ -104,7 +100,6 @@ export default defineComponent({
     ...mapWritableState(useNewsletterRecipientsStore, ["recipients", "loading"]),
     ...mapWritableState(useNewsletterStore, ["activeNewsletterObj"]),
     ...mapState(useQueryStoreStore, ["queries"]),
-    ...mapState(useQueryBuilderStore, ["data"]),
     ...mapState(useAbilityStore, ["can"]),
     selected(): Array<MemberViewModel> {
       return this.members
@@ -119,10 +114,10 @@ export default defineComponent({
     },
     queried(): Array<MemberViewModel> {
       if (this.recipientsByQueryId == "def") return [];
-      let keys = Object.keys(this.data?.[0] ?? {});
+      let keys = Object.keys(this.queryResult?.[0] ?? {});
       let memberKey = keys.find((k) => k.includes("member_id"));
       return this.members.filter((m) =>
-        this.data
+        this.queryResult
           .map((t) => ({
             id: t.id,
             ...(memberKey ? { memberId: t[memberKey] } : {}),
@@ -149,17 +144,12 @@ export default defineComponent({
         if (this.activeNewsletterObj == undefined) return;
         if (val == "def") {
           this.activeNewsletterObj.recipientsByQueryId = null;
-          this.activeNewsletterObj.recipientsByQuery = null;
         } else if (this.queries.find((q) => q.id == val)) {
           this.activeNewsletterObj.recipientsByQueryId = val;
-          this.activeNewsletterObj.recipientsByQuery = cloneDeep(this.queries.find((q) => q.id == val));
-          this.sendQuery(0, 0, this.recipientsByQuery?.query, true);
+          this.loadQuery();
         }
       },
     },
-    recipientsByQuery() {
-      return this.activeNewsletterObj?.recipientsByQuery;
-    },
   },
   mounted() {
     // this.fetchNewsletterRecipients();
@@ -171,7 +161,7 @@ export default defineComponent({
     ...mapActions(useMemberStore, ["getAllMembers"]),
     ...mapActions(useNewsletterRecipientsStore, ["fetchNewsletterRecipients"]),
     ...mapActions(useQueryStoreStore, ["fetchQueries"]),
-    ...mapActions(useQueryBuilderStore, ["sendQuery"]),
+    ...mapActions(useQueryBuilderStore, ["sendQueryByStoreId"]),
     removeSelected(id: string) {
       let index = this.recipients.findIndex((s) => s == id);
       if (index != -1) {
@@ -186,8 +176,12 @@ export default defineComponent({
         .catch(() => {});
     },
     loadQuery() {
-      if (this.recipientsByQuery) {
-        this.sendQuery(0, 0, this.recipientsByQuery.query, true);
+      if (this.recipientsByQueryId != "def") {
+        this.sendQueryByStoreId(this.recipientsByQueryId, 0, 0, true)
+          .then((result) => {
+            this.queryResult = result.data.rows;
+          })
+          .catch(() => {});
       }
     },
   },