src/components/queryBuilder/BuilderHost.vue

@@ -32,7 +32,7 @@
       >
         <select v-model="activeQueryId" class="max-h-[34px] !py-0">
           <option :value="undefined" disabled>gepeicherte Anfrage auswählen</option>
-          <option v-for="query in queries" :key="query.id" :value="query.id" @click="value = query.query">
+          <option v-for="query in queries" :key="query.id" :value="query.id">
             {{ query.title }}
           </option>
         </select>
@@ -54,7 +54,7 @@
           class="p-1"
           :class="typeof value == 'object' ? 'bg-gray-200' : ''"
           title="Visual Builder"
-          @click="queryMode = 'builder'"
+          @click="changeMode('builder')"
         >
           <RectangleGroupIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
         </div>
@@ -62,7 +62,7 @@
           class="p-1"
           :class="typeof value == 'string' ? 'bg-gray-200' : ''"
           title="SQL Editor"
-          @click="queryMode = 'editor'"
+          @click="changeMode('editor')"
         >
           <CommandLineIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
         </div>
@@ -116,21 +116,9 @@ export default defineComponent({
   },
   emits: ["update:model-value", "query:run", "query:save", "results:export", "results:clear"],
   watch: {
-    queryMode() {
-      if (this.queryMode == "builder") {
-        this.value = {
-          select: "*",
-          table: "",
-          where: [],
-          join: [],
-          orderBy: [],
-        };
-      } else {
-        this.value = "";
-      }
-      this.activeQueryId = undefined;
-    },
     activeQueryId() {
+      if (this.activeQueryId == undefined) return;
+
       let query = this.queries.find((t) => t.id == this.activeQueryId)?.query;
       if (query != undefined) {
         if (typeof query == "string") {
@@ -188,6 +176,22 @@ export default defineComponent({
     showStructure() {
       this.openModal(markRaw(defineAsyncComponent(() => import("@/components/queryBuilder/StructureModal.vue"))));
     },
+    changeMode(mode: "editor" | "builder") {
+      this.queryMode = mode;
+
+      this.activeQueryId = undefined;
+      if (this.queryMode == "builder") {
+        this.value = {
+          select: "*",
+          table: "",
+          where: [],
+          join: [],
+          orderBy: [],
+        };
+      } else {
+        this.value = "";
+      }
+    },
   },
 });
 </script>

src/stores/admin/club/queryBuilder.ts

@@ -13,8 +13,7 @@ export const useQueryBuilderStore = defineStore("queryBuilder", {
       loadingData: "fetched" as "loading" | "fetched" | "failed",
       queryError: "" as string | { sql: string; code: string; msg: string },
       query: undefined as undefined | DynamicQueryStructure | string,
-      activeQueryId: undefined as undefined | number,
-      isLoadedQuery: undefined as undefined | number,
+      activeQueryId: undefined as undefined | string,
     };
   },
   actions: {

src/stores/admin/configuration/queryStore.ts

@@ -31,7 +31,7 @@ export const useQueryStoreStore = defineStore("queryStore", {
           this.loading = "failed";
         });
     },
-    fetchQueryById(id: number): Promise<AxiosResponse<any, any>> {
+    fetchQueryById(id: string): Promise<AxiosResponse<any, any>> {
       return http.get(`/admin/querystore/${id}`);
     },
     triggerSave() {

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

@@ -8,7 +8,7 @@ export interface NewsletterViewModel {
   newsletterText: string;
   newsletterSignatur: string;
   isSent: boolean;
-  recipientsByQueryId?: number | null;
+  recipientsByQueryId?: string | null;
   recipientsByQuery?: QueryViewModel | null;
 }
 
@@ -23,7 +23,7 @@ export interface SyncNewsletterViewModel {
   newsletterTitle: string;
   newsletterText: string;
   newsletterSignatur: string;
-  recipientsByQueryId?: number;
+  recipientsByQueryId?: string;
 }
 
 export interface SendNewsletterViewModel {

src/viewmodels/admin/configuration/query.models.ts

@@ -7,7 +7,7 @@ export interface TableMeta {
 }
 
 export interface QueryViewModel {
-  id: number;
+  id: string;
   title: string;
   query: string | DynamicQueryStructure;
 }
@@ -18,6 +18,6 @@ export interface CreateQueryViewModel {
 }
 
 export interface UpdateQueryViewModel {
-  id: number;
+  id: string;
   query: string | DynamicQueryStructure;
 }

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

@@ -134,10 +134,10 @@ export default defineComponent({
         if (val == "def") {
           this.activeNewsletterObj.recipientsByQueryId = null;
           this.activeNewsletterObj.recipientsByQuery = null;
-        } else if (this.queries.find((q) => q.id == parseInt(val))) {
-          this.activeNewsletterObj.recipientsByQueryId = parseInt(val);
-          this.activeNewsletterObj.recipientsByQuery = cloneDeep(this.queries.find((q) => q.id == parseInt(val)));
-          this.sendQuery(0, 1000, this.recipientsByQuery?.query);
+        } 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);
         }
       },
     },
@@ -171,7 +171,7 @@ export default defineComponent({
     },
     loadQuery() {
       if (this.recipientsByQuery) {
-        this.sendQuery(0, 1000, this.recipientsByQuery.query);
+        this.sendQuery(0, 0, this.recipientsByQuery.query, true);
       }
     },
   },

vite.config.ts

@@ -58,6 +58,14 @@ export default defineConfig({
           },
         ],
       },
+      workbox: {
+        runtimeCaching: [
+          {
+            urlPattern: /^\/api\//,
+            handler: "NetworkFirst",
+          },
+        ],
+      },
     }),
   ],
   resolve: {