query store

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

@@ -9,9 +9,10 @@
       <div class="flex flex-col w-full h-full gap-2 px-7 overflow-y-auto">
         <BuilderHost
           v-model="query"
-          @query:run="sendQuery()"
-          @query:save=""
-          @results:clear="clearResults()"
+          allow-predefined-select
+          @query:run="sendQuery"
+          @query:save="triggerSave"
+          @results:clear="clearResults"
           @results:export=""
         />
         <p>Ergebnisse:</p>
@@ -63,6 +64,7 @@ import Pagination from "@/components/Pagination.vue";
 import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
 import BuilderHost from "../../../../components/queryBuilder/BuilderHost.vue";
 import type { DynamicQueryStructure } from "@/types/dynamicQueries";
+import { useQueryStoreStore } from "@/stores/admin/queryStore";
 </script>
 
 <script lang="ts">
@@ -76,6 +78,7 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useQueryBuilderStore, ["fetchTableMetas", "sendQuery", "clearResults"]),
+    ...mapActions(useQueryStoreStore, ["triggerSave"]),
   },
 });
 </script>

src/views/admin/settings/QueryStore.vue

@@ -0,0 +1,57 @@
+<template>
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">gespeicherte Abfragen</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col gap-4 grow pl-7">
+        <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
+          <QueryStoreListItem v-for="query in queries" :key="query.id" :queryItem="query" />
+        </div>
+        <div class="flex flex-row gap-4">
+          <RouterLink
+            v-if="can('create', 'settings', 'query_store')"
+            :to="{ name: 'admin-club-query_builder' }"
+            button
+            primary
+            class="!w-fit"
+          >
+            Abfrage erstellen
+          </RouterLink>
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions, mapWritableState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useAbilityStore } from "@/stores/ability";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
+import { useQueryStoreStore } from "@/stores/admin/queryStore";
+import QueryStoreListItem from "@/components/admin/settings/queryStore/QueryStoreListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useQueryStoreStore, ["queries"]),
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapWritableState(useQueryBuilderStore, ["query"]),
+  },
+  mounted() {
+    this.fetchQueries();
+  },
+  methods: {
+    ...mapActions(useQueryStoreStore, ["fetchQueries"]),
+    loadCreate() {
+      this.query = undefined;
+      this.$router.push({ name: "admin-club-query_builder" });
+    },
+  },
+});
+</script>