src/components/admin/settings/queryStore/CreateQueryStoreModal.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Abfrage abspeichern</p>
+    </div>
+    <br />
+    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <label for="title">Titel</label>
+        <input type="text" id="title" required />
+      </div>
+      <div class="flex flex-row gap-2">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useQueryStoreStore } from "@/stores/admin/queryStore";
+import type { CreateQueryViewModel } from "@/viewmodels/admin/query.models";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["query"]),
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useQueryStoreStore, ["createQueryStore"]),
+    triggerCreate(e: any) {
+      let formData = e.target.elements;
+      let createAward: CreateQueryViewModel = {
+        title: formData.title.value,
+        query: this.query ?? "",
+      };
+      this.createQueryStore(createAward)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/components/admin/settings/queryStore/DeleteQueryStoreModal.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Auszeichnung {{ query?.title }} löschen?</p>
+    </div>
+    <br />
+
+    <div class="flex flex-row gap-2">
+      <button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDelete">
+        unwiederuflich löschen
+      </button>
+      <Spinner v-if="status == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useQueryStoreStore } from "@/stores/admin/queryStore";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useQueryStoreStore, ["queries"]),
+    query() {
+      return this.queries.find((t) => t.id == this.data);
+    },
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useQueryStoreStore, ["deleteQueryStore"]),
+    triggerDelete() {
+      this.deleteQueryStore(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/components/admin/settings/queryStore/QueryStoreListItem.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>{{ queryItem.title }}</p>
+      <div class="flex flex-row">
+        <div @click="loadUpdate">
+          <EyeIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </div>
+        <div v-if="can('update', 'settings', 'query_store')" @click="loadUpdate">
+          <PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </div>
+        <div v-if="can('delete', 'settings', 'query_store')" @click="openDeleteModal">
+          <TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, defineAsyncComponent, markRaw, type PropType } from "vue";
+import { mapState, mapActions, mapWritableState } from "pinia";
+import { EyeIcon, PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { useAbilityStore } from "@/stores/ability";
+import { useModalStore } from "@/stores/modal";
+import type { QueryViewModel } from "@/viewmodels/admin/query.models";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    queryItem: { type: Object as PropType<QueryViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+    ...mapWritableState(useQueryBuilderStore, ["query", "activeQueryId"]),
+  },
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    loadUpdate() {
+      this.activeQueryId = this.queryItem.id;
+      this.query = this.queryItem.query;
+      this.$router.push({ name: "admin-club-query_builder" });
+    },
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/settings/queryStore/DeleteQueryStoreModal.vue"))),
+        this.queryItem.id
+      );
+    },
+  },
+});
+</script>

src/components/admin/settings/queryStore/UpdateQueryStoreModal.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Abfrage aktualisieren</p>
+    </div>
+    <br />
+    <div class="flex flex-col gap-4 py-2">
+      <p>Abfrage mit dem Titel: "{{ activeQuery?.title }}" überschreiben</p>
+      <div class="flex flex-row gap-2">
+        <button primary :disabled="status == 'loading' || status?.status == 'success'" @click="changeToCreate">
+          neu speichern
+        </button>
+        <button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerUpdate">
+          überschreiben
+        </button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useQueryStoreStore } from "@/stores/admin/queryStore";
+import type { CreateQueryViewModel, UpdateQueryViewModel } from "@/viewmodels/admin/query.models";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useQueryBuilderStore, ["query"]),
+    ...mapState(useQueryStoreStore, ["queries"]),
+    activeQuery() {
+      return this.queries.find((t) => t.id == this.data);
+    },
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal", "openModal"]),
+    ...mapActions(useQueryStoreStore, ["updateActiveQueryStore"]),
+    changeToCreate() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/settings/queryStore/CreateQueryStoreModal.vue")))
+      );
+    },
+    triggerUpdate() {
+      let updateQuery: UpdateQueryViewModel = {
+        id: this.data,
+        query: this.query ?? "",
+      };
+      this.updateActiveQueryStore(updateQuery)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

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 });

src/router/index.ts

@@ -398,25 +398,10 @@ const router = createRouter({
             },
             {
               path: "query-store",
-              name: "admin-settings-query_store-route",
-              component: () => import("@/views/RouterView.vue"),
-              meta: { type: "read", section: "settings", module: "query" },
+              name: "admin-settings-query_store",
+              component: () => import("@/views/admin/settings/QueryStore.vue"),
+              meta: { type: "read", section: "settings", module: "query_store" },
               beforeEnter: [abilityAndNavUpdate],
-              children: [
-                {
-                  path: "",
-                  name: "admin-settings-query_store",
-                  component: () => import("@/views/admin/ViewSelect.vue"),
-                },
-                {
-                  path: ":id/edit",
-                  name: "admin-settings-query_store-edit",
-                  component: () => import("@/views/admin/ViewSelect.vue"),
-                  meta: { type: "update", section: "settings", module: "query" },
-                  beforeEnter: [abilityAndNavUpdate],
-                  props: true,
-                },
-              ],
             },
           ],
         },

src/stores/admin/queryBuilder.ts

@@ -13,6 +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,
     };
   },

src/stores/admin/queryStore.ts

@@ -0,0 +1,75 @@
+import { defineStore } from "pinia";
+import type { CreateQueryViewModel, QueryViewModel, UpdateQueryViewModel } from "@/viewmodels/admin/query.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+import { useQueryBuilderStore } from "./queryBuilder";
+import { useModalStore } from "../modal";
+import { defineAsyncComponent, markRaw } from "vue";
+
+export const useQueryStoreStore = defineStore("queryStore", {
+  state: () => {
+    return {
+      queries: [] as Array<QueryViewModel>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchQueries() {
+      this.loading = "loading";
+      http
+        .get("/admin/querystore")
+        .then((result) => {
+          this.queries = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    fetchQueryById(id: number): Promise<AxiosResponse<any, any>> {
+      return http.get(`/admin/querystore/${id}`);
+    },
+    triggerSave() {
+      const queryBuilderStore = useQueryBuilderStore();
+      const modalStore = useModalStore();
+      if (queryBuilderStore.activeQueryId == undefined) {
+        modalStore.openModal(
+          markRaw(
+            defineAsyncComponent(() => import("@/components/admin/settings/queryStore/CreateQueryStoreModal.vue"))
+          )
+        );
+      } else {
+        modalStore.openModal(
+          markRaw(
+            defineAsyncComponent(() => import("@/components/admin/settings/queryStore/UpdateQueryStoreModal.vue"))
+          ),
+          queryBuilderStore.activeQueryId
+        );
+      }
+    },
+    async createQueryStore(query: CreateQueryViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/querystore`, {
+        query: query.query,
+        title: query.title,
+      });
+      if (result.status == 200) {
+        const queryBuilderStore = useQueryBuilderStore();
+        queryBuilderStore.activeQueryId = result.data;
+      }
+      this.fetchQueries();
+      return result;
+    },
+    async updateActiveQueryStore(query: UpdateQueryViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/querystore/${query.id}`, {
+        query: query.query,
+      });
+      this.fetchQueries();
+      return result;
+    },
+    async deleteQueryStore(queryStore: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/querystore/${queryStore}`);
+      this.fetchQueries();
+      return result;
+    },
+  },
+});

src/viewmodels/admin/query.models.ts

@@ -1,3 +1,5 @@
+import type { DynamicQueryStructure } from "../../types/dynamicQueries";
+
 export interface TableMeta {
   tableName: string;
   columns: Array<{ column: string; type: string }>;
@@ -6,5 +8,16 @@ export interface TableMeta {
 
 export interface QueryViewModel {
   id: number;
-  query: string;
+  title: string;
+  query: string | DynamicQueryStructure;
+}
+
+export interface CreateQueryViewModel {
+  title: string;
+  query: string | DynamicQueryStructure;
+}
+
+export interface UpdateQueryViewModel {
+  id: number;
+  query: string | DynamicQueryStructure;
 }

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>