query store

src/components/queryBuilder/BuilderHost.vue

@@ -8,13 +8,6 @@
       >
         <PlayIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
       </div>
-      <div
-        class="p-1 border border-gray-400 bg-gray-100 rounded-md"
-        title="Abfrage speichern"
-        @click="$emit('query:save')"
-      >
-        <InboxArrowDownIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
-      </div>
       <div
         class="p-1 border border-gray-400 bg-gray-100 rounded-md"
         title="Ergebnisse exportieren"
@@ -33,6 +26,23 @@
         <TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
       </div>
       <div class="grow"></div>
+      <div v-if="allowPredefinedSelect && can('read', 'settings', 'query_store')" class="flex flex-row gap-2">
+        <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">
+            {{ query.title }}
+          </option>
+        </select>
+        <div
+          v-if="can('create', 'settings', 'query_store')"
+          class="p-1 border border-gray-400 bg-gray-100 rounded-md"
+          title="Abfrage speichern"
+          @click="$emit('query:save')"
+        >
+          <InboxArrowDownIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+      </div>
+      <div class="grow"></div>
       <div class="flex flex-row overflow-hidden border border-gray-400 rounded-md">
         <div
           class="p-1"
@@ -44,7 +54,7 @@
         </div>
         <div
           class="p-1"
-          :class="queryMode == 'builder' ? 'bg-gray-200' : ''"
+          :class="typeof value == 'object' ? 'bg-gray-200' : ''"
           title="Visual Builder"
           @click="queryMode = 'builder'"
         >
@@ -52,7 +62,7 @@
         </div>
         <div
           class="p-1"
-          :class="queryMode == 'editor' ? 'bg-gray-200' : ''"
+          :class="typeof value == 'string' ? 'bg-gray-200' : ''"
           title="SQL Editor"
           @click="queryMode = 'editor'"
         >
@@ -72,7 +82,7 @@
 
 <script setup lang="ts">
 import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
-import { mapActions, mapState } from "pinia";
+import { mapActions, mapState, mapWritableState } from "pinia";
 import type { DynamicQueryStructure } from "../../types/dynamicQueries";
 import {
   ArchiveBoxArrowDownIcon,
@@ -87,6 +97,8 @@ import {
 import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
 import { useModalStore } from "../../stores/modal";
 import Table from "./Table.vue";
+import { useAbilityStore } from "@/stores/ability";
+import { useQueryStoreStore } from "@/stores/admin/queryStore";
 </script>
 
 <script lang="ts">
@@ -102,6 +114,10 @@ export default defineComponent({
         orderBy: [],
       },
     },
+    allowPredefinedSelect: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["update:model-value", "query:run", "query:save", "results:export", "results:clear"],
   watch: {
@@ -118,14 +134,24 @@ export default defineComponent({
         this.value = "";
       }
     },
+    activeQueryId() {
+      let query = this.queries.find((t) => t.id == this.activeQueryId)?.query;
+      if (query != undefined) {
+        this.value = query;
+      }
+    },
   },
   data() {
     return {
+      autoChangeFlag: false as boolean,
       queryMode: "builder" as "builder" | "editor" | "structure",
     };
   },
   computed: {
+    ...mapState(useAbilityStore, ["can"]),
     ...mapState(useQueryBuilderStore, ["tableMetas", "loading"]),
+    ...mapWritableState(useQueryBuilderStore, ["activeQueryId"]),
+    ...mapState(useQueryStoreStore, ["queries"]),
     value: {
       get() {
         return this.modelValue;
@@ -137,13 +163,16 @@ export default defineComponent({
   },
   mounted() {
     this.fetchTableMetas();
+    this.fetchQueries();
   },
   methods: {
     ...mapActions(useModalStore, ["openModal"]),
     ...mapActions(useQueryBuilderStore, ["fetchTableMetas"]),
+    ...mapActions(useQueryStoreStore, ["fetchQueries"]),
     clearQuery() {
       this.$emit("update:model-value", undefined);
-      if (this.queryMode == "builder") {
+      this.activeQueryId = undefined;
+      if (typeof this.value != "string") {
         this.value = {
           select: "*",
           table: "",

src/components/queryBuilder/Table.vue

@@ -42,7 +42,7 @@ export default defineComponent({
   computed: {
     table: {
       get() {
-        return this.modelValue.table;
+        return this.modelValue.table || "";
       },
       set(val: string) {
         this.$emit("update:model-value", { ...this.modelValue, table: val });