Merge pull request '#14-intelligent-groups' (#21) from #14-intelligent-groups into main

Reviewed-on: Ehrenamt/member-administration-ui#21

package.json

@@ -40,7 +40,7 @@
     "lodash.isequal": "^4.5.0",
     "nprogress": "^0.2.0",
     "pdf-dist": "^1.0.0",
-    "pinia": "^2.1.7",
+    "pinia": "^2.3.0",
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
     "socket.io-client": "^4.5.0",
@@ -76,7 +76,7 @@
     "typescript": "~5.4.0",
     "vite": "^5.3.1",
     "vite-plugin-pwa": "^0.17.4",
-    "vite-plugin-vue-devtools": "^7.3.1",
+    "vite-plugin-vue-devtools": "^7.6.8",
     "vue-tsc": "^2.0.21"
   }
 }

src/components/Pagination.vue

@@ -64,10 +64,11 @@
   </div>
 </template>
 
-<script setup lang="ts" generic="T">
+<script setup lang="ts" generic="T extends { id: FieldType }">
 import { computed, ref, watch } from "vue";
 import { ChevronRightIcon, ChevronLeftIcon, XMarkIcon } from "@heroicons/vue/20/solid";
 import Spinner from "./Spinner.vue";
+import type { FieldType } from "@/types/dynamicQueries";
 
 const props = defineProps({
   items: { type: Array<T>, default: [] },
@@ -105,6 +106,9 @@ const emit = defineEmits({
   search(search: string) {
     return typeof search == "number";
   },
+  clickRow(id: FieldType) {
+    return true;
+  },
 });
 
 const entryCount = computed(() => props.totalCount ?? props.items.length);

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

@@ -0,0 +1,201 @@
+<template>
+  <div class="flex flex-col border border-gray-300 rounded-md select-none">
+    <div class="flex flex-row max-lg:flex-wrap gap-2 border-b border-gray-300 p-2">
+      <div
+        class="p-1 border border-gray-400 bg-green-200 rounded-md"
+        title="Abfrage starten"
+        @click="$emit('query:run')"
+      >
+        <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="Ergebnisse exportieren"
+        @click="$emit('results:export')"
+      >
+        <ArchiveBoxArrowDownIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+      </div>
+      <div
+        class="p-1 border border-gray-400 bg-red-200 rounded-md"
+        title="Ergebnisse leeren"
+        @click="$emit('results:clear')"
+      >
+        <NoSymbolIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+      </div>
+      <div class="p-1 border border-gray-400 bg-red-200 rounded-md" title="Anfrage löschen" @click="clearQuery">
+        <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 max-lg:w-full max-lg:order-10"
+      >
+        <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 max-lg:hidden"></div>
+      <div class="flex flex-row min-w-fit overflow-hidden border border-gray-400 rounded-md">
+        <div
+          class="p-1"
+          :class="queryMode == 'structure' ? 'bg-gray-200' : ''"
+          title="Schema-Struktur"
+          @click="queryMode = 'structure'"
+        >
+          <SparklesIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+        <div
+          class="p-1"
+          :class="typeof value == 'object' && queryMode != 'structure' ? 'bg-gray-200' : ''"
+          title="Visual Builder"
+          @click="queryMode = 'builder'"
+        >
+          <RectangleGroupIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+        <div
+          class="p-1"
+          :class="typeof value == 'string' && queryMode != 'structure' ? 'bg-gray-200' : ''"
+          title="SQL Editor"
+          @click="queryMode = 'editor'"
+        >
+          <CommandLineIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+      </div>
+    </div>
+    <div class="p-2 h-44 md:h-60 w-full overflow-y-auto">
+      <div v-if="queryMode == 'structure'">
+        <img src="/administration-db.png" class="h-full w-full cursor-pointer" @click="showStructure" />
+      </div>
+      <textarea v-else-if="typeof value == 'string'" v-model="value" placeholder="SQL Query" class="h-full w-full" />
+      <Table v-else v-model="value" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import type { DynamicQueryStructure } from "../../types/dynamicQueries";
+import {
+  ArchiveBoxArrowDownIcon,
+  CommandLineIcon,
+  InboxArrowDownIcon,
+  NoSymbolIcon,
+  PlayIcon,
+  RectangleGroupIcon,
+  TrashIcon,
+  SparklesIcon,
+} from "@heroicons/vue/24/outline";
+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">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: [Object, String] as PropType<DynamicQueryStructure | string>,
+      default: {
+        select: "*",
+        table: "",
+        where: [],
+        join: [],
+        orderBy: [],
+      },
+    },
+    allowPredefinedSelect: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  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() {
+      let query = this.queries.find((t) => t.id == this.activeQueryId)?.query;
+      if (query != undefined) {
+        if (typeof query == "string") {
+          this.queryMode = "editor";
+        } else {
+          this.queryMode = "builder";
+        }
+        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;
+      },
+      set(val: DynamicQueryStructure) {
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.fetchTableMetas();
+    this.fetchQueries();
+  },
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    ...mapActions(useQueryBuilderStore, ["fetchTableMetas"]),
+    ...mapActions(useQueryStoreStore, ["fetchQueries"]),
+    clearQuery() {
+      this.$emit("update:model-value", undefined);
+      this.activeQueryId = undefined;
+      if (typeof this.value != "string") {
+        this.value = {
+          select: "*",
+          table: "",
+          where: [],
+          join: [],
+          orderBy: [],
+        };
+      } else {
+        this.value = "";
+      }
+    },
+    showStructure() {
+      this.openModal(markRaw(defineAsyncComponent(() => import("@/components/queryBuilder/StructureModal.vue"))));
+    },
+  },
+});
+</script>

src/components/queryBuilder/ColumnSelect.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="flex flex-row gap-2">
+    <p class="w-14 min-w-14 pt-2">SELECT</p>
+    <div class="flex flex-row flex-wrap gap-2 items-center">
+      <p
+        class="rounded-md shadow-sm relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
+        :class="value == '*' ? 'border-gray-600 bg-gray-200' : ''"
+        @click="value = '*'"
+      >
+        *
+      </p>
+      <p
+        v-for="col in activeTable?.columns"
+        :key="col.column"
+        class="rounded-md shadow-sm relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
+        :class="value.includes(col.column) ? 'border-gray-600 bg-gray-200' : ''"
+        @click="value = [col.column]"
+      >
+        {{ foreignColumns?.includes(col.column) ? "FK:" : "" }} {{ col.column }}:{{ col.type }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: [Array, String] as PropType<"*" | Array<string>>,
+      default: "*",
+    },
+  },
+  emits: ["update:model-value"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    activeTable() {
+      return this.tableMetas.find((tm) => tm.tableName == this.table);
+    },
+    foreignColumns() {
+      return this.activeTable?.relations.map((r) => r.column);
+    },
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: "*" | Array<string>) {
+        let tmp = this.modelValue;
+        if (val == "*") {
+          tmp = val;
+        } else {
+          if (Array.isArray(tmp)) {
+            let index = tmp.findIndex((t) => t == val[0]);
+            if (index == -1) tmp.push(val[0]);
+            else tmp.splice(index, 1);
+          } else {
+            tmp = val;
+          }
+        }
+        if (tmp != "*" && tmp.length == 0) {
+          tmp = "*";
+        }
+        this.$emit("update:model-value", tmp);
+      },
+    },
+  },
+});
+</script>

src/components/queryBuilder/Condition.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="flex flex-row gap-2 items-center w-full">
+    <select v-if="concat != '_'" v-model="concat" class="!w-20 !h-fit">
+      <option value="" disabled>Verknüpfung auswählen</option>
+      <option v-for="operation in ['AND', 'OR']" :value="operation">
+        {{ operation }}
+      </option>
+    </select>
+    <select v-model="column">
+      <option value="" disabled>Verknüpfung auswählen</option>
+      <option v-for="col in activeTable?.columns" :value="col.column">
+        {{ foreignColumns?.includes(col.column) ? "FK:" : "" }} {{ col.column }}:{{ col.type }}
+      </option>
+    </select>
+    <select v-model="operation" class="!w-fit !h-fit">
+      <option value="" disabled>Vergleich auswählen</option>
+      <option v-for="op in whereOperationArray" :value="op">
+        {{ op }}
+      </option>
+    </select>
+    <div v-if="!operation.toLowerCase().includes('null')" class="contents">
+      <div v-if="operation == 'between'" class="contents">
+        <input
+          :value="(value as any)?.start"
+          @input="(e) => ((value as any).start = (e.target as HTMLInputElement).value)"
+          :type="inputType"
+          :min="columnType == 'boolean' ? 0 : undefined"
+          :max="columnType == 'boolean' ? 1 : undefined"
+        />
+        <p>-</p>
+        <input
+          :value="(value as any)?.end"
+          @input="(e) => ((value as any).end = (e.target as HTMLInputElement).value)"
+          :type="inputType"
+          :min="columnType == 'boolean' ? 0 : undefined"
+          :max="columnType == 'boolean' ? 1 : undefined"
+        />
+      </div>
+      <input
+        v-else
+        v-model="value"
+        :type="inputType"
+        :min="columnType == 'boolean' ? 0 : undefined"
+        :max="columnType == 'boolean' ? 1 : undefined"
+      />
+    </div>
+
+    <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="$emit('remove')">
+      <TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import {
+  whereOperationArray,
+  type ConditionStructure,
+  type ConditionValue,
+  type WhereOperation,
+  type WhereType,
+} from "../../types/dynamicQueries";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import { TrashIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: Object as PropType<ConditionStructure & { structureType: "condition" }>,
+      default: {},
+    },
+  },
+  emits: ["update:model-value", "remove"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    activeTable() {
+      return this.tableMetas.find((tm) => tm.tableName == this.table);
+    },
+    foreignColumns() {
+      return this.activeTable?.relations.map((r) => r.column);
+    },
+    columnType() {
+      return this.activeTable?.columns.find((c) => c.column == this.column)?.type;
+    },
+    inputType() {
+      if (this.operation.includes("timespan")) return "number";
+      switch (this.columnType) {
+        case "int":
+          return "number";
+        case "varchar":
+          return "text";
+        case "date":
+          return "date";
+        case "boolean":
+          return "number"; // "checkbox";
+        default:
+          return "text";
+      }
+    },
+    concat: {
+      get() {
+        return this.modelValue.concat;
+      },
+      set(val: WhereType) {
+        this.$emit("update:model-value", { ...this.modelValue, concat: val });
+      },
+    },
+    column: {
+      get() {
+        return this.modelValue.column;
+      },
+      set(val: string) {
+        this.$emit("update:model-value", { ...this.modelValue, column: val });
+      },
+    },
+    operation: {
+      get() {
+        return this.modelValue.operation;
+      },
+      set(val: WhereOperation) {
+        if (val == "between") {
+          this.$emit("update:model-value", { ...this.modelValue, operation: val, value: { start: "", end: "" } });
+        } else {
+          this.$emit("update:model-value", { ...this.modelValue, operation: val });
+        }
+      },
+    },
+    value: {
+      get() {
+        return this.modelValue.value;
+      },
+      set(val: ConditionValue) {
+        this.$emit("update:model-value", { ...this.modelValue, value: val });
+      },
+    },
+  },
+});
+</script>

src/components/queryBuilder/Join.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="flex flex-row gap-2">
+    <p class="w-14 min-w-14 pt-2">JOIN</p>
+    <div class="flex flex-row flex-wrap gap-2 items-center w-full">
+      <div class="flex flex-row flex-wrap gap-2 items-center justify-end w-full">
+        <JoinTable
+          v-for="(join, index) in value"
+          :model-value="join"
+          :table="table"
+          @update:model-value="($event) => (value[index] = $event)"
+          @remove="removeAtIndex(index)"
+        />
+        <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addToValue">
+          <PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import type { DynamicQueryStructure } from "../../types/dynamicQueries";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import { PlusIcon } from "@heroicons/vue/24/outline";
+import JoinTable from "./JoinTable.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: Array as PropType<Array<DynamicQueryStructure & { foreignColumn: string }>>,
+      default: [],
+    },
+  },
+  emits: ["update:model-value"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    activeTable() {
+      return this.tableMetas.find((tm) => tm.tableName == this.table);
+    },
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: Array<DynamicQueryStructure & { foreignColumn: string }>) {
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  methods: {
+    addToValue() {
+      this.value.push({
+        select: "*",
+        table: "",
+        where: [],
+        join: [],
+        orderBy: [],
+        foreignColumn: "",
+      });
+    },
+    removeAtIndex(index: number) {
+      this.value.splice(index, 1);
+    },
+  },
+});
+</script>

src/components/queryBuilder/JoinTable.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="flex flex-row gap-2 w-full">
+    <div class="flex flex-row gap-2 w-full">
+      <div class="flex flex-col gap-2 w-full">
+        <select v-model="foreignColumn" class="w-full">
+          <option value="" disabled>Relation auswählen</option>
+          <option v-for="relation in activeTable?.relations" :value="relation.column">
+            {{ relation.column }} -> {{ joinTableName(relation.referencedTableName) }}
+          </option>
+        </select>
+        <Table v-model="value" disable-table-select />
+      </div>
+      <div class="h-fit p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="$emit('remove')">
+        <TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import type { DynamicQueryStructure } from "../../types/dynamicQueries";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import Table from "./Table.vue";
+import { TrashIcon } from "@heroicons/vue/24/outline";
+import { joinTableName } from "@/helpers/queryFormatter";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: Object as PropType<
+        DynamicQueryStructure & {
+          foreignColumn: string;
+        }
+      >,
+      default: {
+        select: "*",
+        table: "",
+        where: [],
+        join: [],
+        orderBy: [],
+        foreignColumn: "",
+      },
+    },
+  },
+  emits: ["update:model-value", "remove"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    activeTable() {
+      return this.tableMetas.find((tm) => tm.tableName == this.table);
+    },
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(
+        val: DynamicQueryStructure & {
+          foreignColumn: string;
+        }
+      ) {
+        this.$emit("update:model-value", val);
+      },
+    },
+    foreignColumn: {
+      get() {
+        return this.modelValue.foreignColumn;
+      },
+      set(val: string) {
+        let relTable = this.activeTable?.relations.find((r) => r.column == val);
+        this.$emit("update:model-value", {
+          ...this.modelValue,
+          foreignColumn: val,
+          table: joinTableName(relTable?.referencedTableName ?? ""),
+        });
+      },
+    },
+  },
+});
+</script>

src/components/queryBuilder/NestedCondition.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="flex flex-row gap-2 w-full border border-gray-300 rounded-md p-1">
+    <select v-if="concat != '_'" v-model="concat" class="!w-20 !h-fit">
+      <option value="" disabled>Verknüpfung auswählen</option>
+      <option v-for="operation in ['AND', 'OR']" :value="operation">
+        {{ operation }}
+      </option>
+    </select>
+    <NestedWhere v-model="conditions" :table="table" />
+    <div
+      class="flex items-center justify-center h-full p-1 border border-gray-400 hover:bg-gray-200 rounded-md"
+      @click="$emit('remove')"
+    >
+      <TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import type { ConditionStructure, WhereType } from "../../types/dynamicQueries";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import { TrashIcon } from "@heroicons/vue/24/outline";
+import NestedWhere from "./NestedWhere.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: Object as PropType<ConditionStructure & { structureType: "nested" }>,
+      default: {},
+    },
+  },
+  emits: ["update:model-value", "remove"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    concat: {
+      get() {
+        return this.modelValue.concat;
+      },
+      set(val: WhereType) {
+        this.$emit("update:model-value", { ...this.modelValue, concat: val });
+      },
+    },
+    conditions: {
+      get() {
+        return this.modelValue.conditions;
+      },
+      set(val: Array<ConditionStructure>) {
+        this.$emit("update:model-value", { ...this.modelValue, conditions: val });
+      },
+    },
+  },
+});
+</script>

src/components/queryBuilder/NestedWhere.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="flex flex-row gap-2 w-full">
+    <div class="flex flex-row flex-wrap gap-2 items-center w-full">
+      <div v-for="(condition, index) in value" class="contents">
+        <NestedCondition
+          v-if="condition.structureType == 'nested'"
+          :model-value="condition"
+          :table="table"
+          @update:model-value="($event) => (value[index] = $event)"
+          @remove="removeAtIndex(index)"
+        />
+        <Condition
+          v-else
+          :model-value="condition"
+          :table="table"
+          @update:model-value="($event) => (value[index] = $event)"
+          @remove="removeAtIndex(index)"
+        />
+      </div>
+      <div class="flex flex-row gap-2 items-center justify-end w-full">
+        <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addConditionToValue">
+          <PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+        <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addNestedToValue">
+          <RectangleStackIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import type { ConditionStructure } from "../../types/dynamicQueries";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import NestedCondition from "./NestedCondition.vue";
+import Condition from "./Condition.vue";
+import { PlusIcon, RectangleStackIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: Array as PropType<Array<ConditionStructure>>,
+      default: [],
+    },
+  },
+  emits: ["update:model-value"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    activeTable() {
+      return this.tableMetas.find((tm) => tm.tableName == this.table);
+    },
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: Array<ConditionStructure>) {
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  methods: {
+    addNestedToValue() {
+      this.value.push({
+        structureType: "nested",
+        concat: this.value.length == 0 ? "_" : "AND",
+        conditions: [],
+      });
+    },
+    addConditionToValue() {
+      this.value.push({
+        structureType: "condition",
+        concat: this.value.length == 0 ? "_" : "AND",
+        operation: "eq",
+        column: "",
+        value: "",
+      });
+    },
+    removeAtIndex(index: number) {
+      this.value.splice(index, 1);
+    },
+  },
+});
+</script>

src/components/queryBuilder/Order.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="flex flex-row gap-2">
+    <p class="w-14 min-w-14 pt-2">ORDER</p>
+    <div class="flex flex-row flex-wrap gap-2 items-center w-full">
+      <OrderStructure
+        v-for="(order, index) in value"
+        :model-value="order"
+        :table="table"
+        :columns="columns"
+        @update:model-value="($event) => (value[index] = $event)"
+        @remove="removeAtIndex(index)"
+      />
+      <div class="flex flex-row gap-2 items-center justify-end w-full">
+        <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addToValue">
+          <PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import type { OrderByStructure } from "../../types/dynamicQueries";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import OrderStructure from "./OrderStructure.vue";
+import { PlusIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: String,
+      default: "",
+    },
+    columns: {
+      type: [Array, String] as PropType<"*" | Array<string>>,
+      default: "*",
+    },
+    modelValue: {
+      type: Array as PropType<Array<OrderByStructure>>,
+      default: [],
+    },
+  },
+  emits: ["update:model-value"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: Array<OrderByStructure>) {
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  methods: {
+    addToValue() {
+      this.value.push({
+        column: "",
+        order: "ASC",
+      });
+    },
+    removeAtIndex(index: number) {
+      this.value.splice(index, 1);
+    },
+  },
+});
+</script>

src/components/queryBuilder/OrderStructure.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="flex flex-row gap-2 items-center w-full">
+    <select v-model="column" class="w-full">
+      <option value="" disabled>Spalte auswählen</option>
+      <option v-for="column in selectableColumns" :value="column">
+        {{ column }}
+      </option>
+    </select>
+    <select v-model="order">
+      <option value="" disabled>Sortierung auswählen</option>
+      <option v-for="order in ['ASC', 'DESC']" :value="order">
+        {{ order }}
+      </option>
+    </select>
+    <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="$emit('remove')">
+      <TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import type { OrderByStructure, OrderByType } from "../../types/dynamicQueries";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import { TrashIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: String,
+      default: "",
+    },
+    columns: {
+      type: [Array, String] as PropType<"*" | Array<string>>,
+      default: "*",
+    },
+    modelValue: {
+      type: Object as PropType<OrderByStructure>,
+      default: {},
+    },
+  },
+  emits: ["update:model-value", "remove"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    selectableColumns() {
+      if (this.columns == "*") {
+        let meta = this.tableMetas.find((tm) => tm.tableName == this.table);
+        if (!meta) return [];
+        let relCols = meta.relations.map((r) => r.column);
+        return meta.columns.map((c) => c.column).filter((c) => !relCols.includes(c));
+      } else {
+        return this.columns;
+      }
+    },
+    column: {
+      get() {
+        return this.modelValue.column;
+      },
+      set(val: string) {
+        this.$emit("update:model-value", { ...this.modelValue, column: val });
+      },
+    },
+    order: {
+      get() {
+        return this.modelValue.order;
+      },
+      set(val: OrderByType) {
+        this.$emit("update:model-value", { ...this.modelValue, order: val });
+      },
+    },
+  },
+});
+</script>

src/components/queryBuilder/StructureModal.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="flex flex-col w-full h-full overflow-hidden">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Datenstruktur</p>
+    </div>
+    <br />
+
+    <div class="grow w-full overflow-hidden">
+      <img src="/administration-db.png" class="max-h-full max-w-full h-auto w-auto mx-auto" />
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal">schnließen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+  },
+});
+</script>

src/components/queryBuilder/Table.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="flex flex-col gap-2 w-full">
+    <TableSelect v-model="table" :disableTableSelect="disableTableSelect" />
+    <ColumnSelect v-if="table != ''" v-model="columnSelect" :table="table" />
+    <Where v-if="table != ''" v-model="where" :table="table" />
+    <Order v-if="table != ''" v-model="order" :table="table" :columns="columnSelect" />
+    <Join v-if="table != ''" v-model="modelValue.join" :table="table" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import type { ConditionStructure, DynamicQueryStructure, OrderByStructure } from "../../types/dynamicQueries";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import ColumnSelect from "./ColumnSelect.vue";
+import Where from "./Where.vue";
+import Order from "./Order.vue";
+import Join from "./Join.vue";
+import TableSelect from "./TableSelect.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Object as PropType<DynamicQueryStructure>,
+      default: {
+        select: "*",
+        table: "",
+        where: [],
+        join: [],
+        orderBy: [],
+      },
+    },
+    disableTableSelect: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value"],
+  computed: {
+    table: {
+      get() {
+        return this.modelValue.table || "";
+      },
+      set(val: string) {
+        this.$emit("update:model-value", { ...this.modelValue, table: val });
+      },
+    },
+    columnSelect: {
+      get() {
+        return this.modelValue.select;
+      },
+      set(val: "*" | Array<string>) {
+        this.$emit("update:model-value", { ...this.modelValue, select: val });
+      },
+    },
+    where: {
+      get() {
+        return this.modelValue.where;
+      },
+      set(val: Array<ConditionStructure>) {
+        this.$emit("update:model-value", { ...this.modelValue, where: val });
+      },
+    },
+    order: {
+      get() {
+        return this.modelValue.orderBy;
+      },
+      set(val: Array<OrderByStructure>) {
+        this.$emit("update:model-value", { ...this.modelValue, orderBy: val });
+      },
+    },
+    join: {
+      get() {
+        return this.modelValue.join;
+      },
+      set(val: Array<DynamicQueryStructure & { foreignColumn: string }>) {
+        this.$emit("update:model-value", { ...this.modelValue, join: val });
+      },
+    },
+  },
+});
+</script>

src/components/queryBuilder/TableSelect.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="flex flex-row gap-2">
+    <p class="w-14 min-w-14 pt-2">FROM</p>
+    <select v-model="value" :disabled="disableTableSelect">
+      <option value="" disabled>Tabelle auswählen</option>
+      <option v-for="table in tableMetas" :value="table.tableName">
+        {{ table.tableName }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState } from "pinia";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    disableTableSelect: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value"],
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+});
+</script>

src/components/queryBuilder/Where.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="flex flex-row gap-2 w-full">
+    <p class="w-14 min-w-14 pt-2">WHERE</p>
+    <div class="flex flex-row flex-wrap gap-2 items-center w-full">
+      <div v-for="(condition, index) in value" class="contents">
+        <NestedCondition
+          v-if="condition.structureType == 'nested'"
+          :model-value="condition"
+          :table="table"
+          @update:model-value="($event) => (value[index] = $event)"
+          @remove="removeAtIndex(index)"
+        />
+        <Condition
+          v-else
+          :model-value="condition"
+          :table="table"
+          @update:model-value="($event) => (value[index] = $event)"
+          @remove="removeAtIndex(index)"
+        />
+      </div>
+      <div class="flex flex-row gap-2 items-center justify-end w-full">
+        <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addConditionToValue">
+          <PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+        <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addNestedToValue">
+          <RectangleStackIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapActions, mapState } from "pinia";
+import type { ConditionStructure } from "../../types/dynamicQueries";
+import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import NestedCondition from "./NestedCondition.vue";
+import Condition from "./Condition.vue";
+import { PlusIcon, RectangleStackIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    table: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: Array as PropType<Array<ConditionStructure>>,
+      default: [],
+    },
+  },
+  emits: ["update:model-value"],
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    activeTable() {
+      return this.tableMetas.find((tm) => tm.tableName == this.table);
+    },
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: Array<ConditionStructure>) {
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  methods: {
+    addNestedToValue() {
+      this.value.push({
+        structureType: "nested",
+        concat: this.value.length == 0 ? "_" : "AND",
+        conditions: [],
+      });
+    },
+    addConditionToValue() {
+      this.value.push({
+        structureType: "condition",
+        concat: this.value.length == 0 ? "_" : "AND",
+        operation: "eq",
+        column: "",
+        value: "",
+      });
+    },
+    removeAtIndex(index: number) {
+      this.value.splice(index, 1);
+    },
+  },
+});
+</script>

src/helpers/queryFormatter.ts

@@ -0,0 +1,58 @@
+import { joinTableFormatter, type FieldType, type QueryResult } from "../types/dynamicQueries";
+
+export function joinTableName(name: string): string {
+  let normalized = joinTableFormatter[name];
+  return normalized ?? name;
+}
+
+export function flattenQueryResult(result: Array<QueryResult>): Array<{ [key: string]: FieldType }> {
+  function flatten(row: QueryResult, prefix: string = ""): Array<{ [key: string]: FieldType }> {
+    let results: Array<{ [key: string]: FieldType }> = [{}];
+
+    for (const key in row) {
+      const value = row[key];
+      const newKey = prefix ? `${prefix}.${key}` : key;
+
+      if (Array.isArray(value) && value.every((item) => typeof item === "object" && item !== null)) {
+        console.log(value, newKey);
+        const arrayResults: Array<{ [key: string]: FieldType }> = [];
+        value.forEach((item) => {
+          const flattenedItems = flatten(item, newKey);
+          arrayResults.push(...flattenedItems);
+        });
+
+        const tempResults: Array<{ [key: string]: FieldType }> = [];
+        results.forEach((res) => {
+          arrayResults.forEach((arrRes) => {
+            tempResults.push({ ...res, ...arrRes });
+          });
+        });
+        results = tempResults;
+      } else if (value && typeof value === "object" && !Array.isArray(value)) {
+        console.log(value, newKey);
+        const objResults = flatten(value as QueryResult, newKey);
+        const tempResults: Array<{ [key: string]: FieldType }> = [];
+        results.forEach((res) => {
+          objResults.forEach((objRes) => {
+            tempResults.push({ ...res, ...objRes });
+          });
+        });
+        results = tempResults;
+      } else {
+        results.forEach((res) => {
+          res[newKey] = String(value);
+        });
+      }
+    }
+    return results;
+  }
+
+  const flattenedResults: Array<{ [key: string]: FieldType }> = [];
+
+  result.forEach((item) => {
+    const flattenedItems = flatten(item);
+    flattenedResults.push(...flattenedItems);
+  });
+
+  return flattenedResults;
+}

src/main.css

@@ -79,17 +79,20 @@ a[button].disabled {
 }
 
 input:not([type="checkbox"]),
-textarea {
+textarea,
+select {
   @apply rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none;
 }
 
 input[readonly],
-textarea[readonly] {
+textarea[readonly],
+select[readonly] {
   @apply pointer-events-none;
 }
 
 input[disabled],
-textarea[disabled] {
+textarea[disabled],
+select[disabled] {
   @apply opacity-75 pointer-events-none;
 }
 

src/router/index.ts

@@ -239,6 +239,13 @@ const router = createRouter({
                 },
               ],
             },
+            {
+              path: "query-builder",
+              name: "admin-club-query_builder",
+              component: () => import("@/views/admin/club/query/Builder.vue"),
+              meta: { type: "read", section: "club", module: "query" },
+              beforeEnter: [abilityAndNavUpdate],
+            },
           ],
         },
         {
@@ -324,22 +331,22 @@ const router = createRouter({
               ],
             },
             {
-              path: "communication",
+              path: "communication-type",
-              name: "admin-settings-communication-route",
+              name: "admin-settings-communication_type-route",
               component: () => import("@/views/RouterView.vue"),
-              meta: { type: "read", section: "settings", module: "communication" },
+              meta: { type: "read", section: "settings", module: "communication_type" },
               beforeEnter: [abilityAndNavUpdate],
               children: [
                 {
                   path: "",
-                  name: "admin-settings-communication",
+                  name: "admin-settings-communication_type",
                   component: () => import("@/views/admin/settings/CommunicationType.vue"),
                 },
                 {
                   path: ":id/edit",
-                  name: "admin-settings-communication-edit",
+                  name: "admin-settings-communication_type-edit",
                   component: () => import("@/views/admin/settings/CommunicationTypeEdit.vue"),
-                  meta: { type: "update", section: "settings", module: "communication" },
+                  meta: { type: "update", section: "settings", module: "communication_type" },
                   beforeEnter: [abilityAndNavUpdate],
                   props: true,
                 },
@@ -389,6 +396,13 @@ const router = createRouter({
                 },
               ],
             },
+            {
+              path: "query-store",
+              name: "admin-settings-query_store",
+              component: () => import("@/views/admin/settings/QueryStore.vue"),
+              meta: { type: "read", section: "settings", module: "query_store" },
+              beforeEnter: [abilityAndNavUpdate],
+            },
           ],
         },
         {

src/stores/admin/navigation.ts

@@ -90,6 +90,7 @@ export const useNavigationStore = defineStore("navigation", {
             ...(abilityStore.can("read", "club", "calendar") ? [{ key: "calendar", title: "Kalender" }] : []),
             ...(abilityStore.can("read", "club", "protocol") ? [{ key: "protocol", title: "Protokolle" }] : []),
             ...(abilityStore.can("read", "club", "newsletter") ? [{ key: "newsletter", title: "Newsletter" }] : []),
+            ...(abilityStore.can("read", "club", "query") ? [{ key: "query_builder", title: "Query Builder" }] : []),
           ],
         },
         settings: {
@@ -102,8 +103,8 @@ export const useNavigationStore = defineStore("navigation", {
             ...(abilityStore.can("read", "settings", "executive_position")
               ? [{ key: "executive_position", title: "Vereinsämter" }]
               : []),
-            ...(abilityStore.can("read", "settings", "communication")
+            ...(abilityStore.can("read", "settings", "communication_type")
-              ? [{ key: "communication", title: "Kommunikationsarten" }]
+              ? [{ key: "communication_type", title: "Kommunikationsarten" }]
               : []),
             ...(abilityStore.can("read", "settings", "membership_status")
               ? [{ key: "membership_status", title: "Mitgliedsstatus" }]
@@ -111,6 +112,7 @@ export const useNavigationStore = defineStore("navigation", {
             ...(abilityStore.can("read", "settings", "calendar_type")
               ? [{ key: "calendar_type", title: "Terminarten" }]
               : []),
+            ...(abilityStore.can("read", "settings", "query") ? [{ key: "query_store", title: "Query Store" }] : []),
           ],
         },
         user: {

src/stores/admin/queryBuilder.ts

@@ -0,0 +1,93 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import type { TableMeta } from "../../viewmodels/admin/query.models";
+import type { DynamicQueryStructure, FieldType } from "../../types/dynamicQueries";
+import { flattenQueryResult } from "../../helpers/queryFormatter";
+
+export const useQueryBuilderStore = defineStore("queryBuilder", {
+  state: () => {
+    return {
+      tableMetas: [] as Array<TableMeta>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      data: [] as Array<{ id: FieldType; [key: string]: FieldType }>,
+      totalLength: 0 as number,
+      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,
+    };
+  },
+  actions: {
+    fetchTableMetas() {
+      this.loading = "loading";
+      http
+        .get("/admin/querybuilder/tables")
+        .then((result) => {
+          this.tableMetas = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    sendQuery(offset = 0, count = 25) {
+      this.queryError = "";
+      this.data = [];
+      this.totalLength = 0;
+      if (this.query == undefined || this.query == "" || (typeof this.query != "string" && this.query.table == ""))
+        return;
+      this.loadingData = "loading";
+      http
+        .post(`/admin/querybuilder/query?offset=${offset}&count=${count}`, {
+          query: this.query,
+        })
+        .then((result) => {
+          if (result.data.stats == "success") {
+            this.data = flattenQueryResult(result.data.rows).map((row) => ({
+              id: row.id ?? "", // Ensure id is present
+              ...row,
+            }));
+            this.totalLength = result.data.total;
+            this.loadingData = "fetched";
+          } else {
+            this.queryError = result.data ?? "An error occurred";
+            this.loadingData = "failed";
+          }
+        })
+        .catch((err) => {
+          this.queryError = "An error occurred";
+          this.loadingData = "failed";
+        });
+    },
+    clearResults() {
+      this.data = [];
+      this.totalLength = 0;
+      this.queryError = "";
+      this.loadingData = "fetched";
+    },
+    exportData() {
+      if (this.data.length == 0) return;
+      const csvString = [Object.keys(this.data[0]), ...this.data.map((d) => Object.values(d))]
+        .map((e) => e.join(";"))
+        .join("\n");
+
+      // Create a Blob from the CSV string
+      const blob = new Blob([csvString], { type: "text/csv" });
+
+      // Create a download link
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "items.csv";
+
+      // Append the link to the document and trigger the download
+      document.body.appendChild(a);
+      a.click();
+
+      // Clean up
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+    },
+  },
+});

src/stores/admin/queryStore.ts

@@ -0,0 +1,77 @@
+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";
+import { useAbilityStore } from "../ability";
+
+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();
+      const abilityStore = useAbilityStore();
+      if (queryBuilderStore.activeQueryId != undefined && abilityStore.can("update", "settings", "query_store")) {
+        modalStore.openModal(
+          markRaw(
+            defineAsyncComponent(() => import("@/components/admin/settings/queryStore/UpdateQueryStoreModal.vue"))
+          ),
+          queryBuilderStore.activeQueryId
+        );
+      } else {
+        modalStore.openModal(
+          markRaw(
+            defineAsyncComponent(() => import("@/components/admin/settings/queryStore/CreateQueryStoreModal.vue"))
+          )
+        );
+      }
+    },
+    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/types/dynamicQueries.ts

@@ -0,0 +1,87 @@
+export interface DynamicQueryStructure {
+  select: string[] | "*";
+  table: string;
+  where?: Array<ConditionStructure>;
+  join?: Array<DynamicQueryStructure & { foreignColumn: string }>;
+  orderBy?: Array<OrderByStructure>;
+}
+
+export type ConditionStructure = (
+  | {
+      structureType: "condition";
+      column: string;
+      operation: WhereOperation;
+      value: ConditionValue;
+    }
+  | {
+      structureType: "nested";
+      invert?: boolean;
+      conditions: Array<ConditionStructure>;
+    }
+) & {
+  concat: WhereType;
+  structureType: "condition" | "nested";
+};
+
+export type ConditionValue = FieldType | Array<FieldType> | { start: FieldType; end: FieldType };
+export type FieldType = number | string | Date | boolean;
+
+export type WhereType = "OR" | "AND" | "_"; // _ represents initial where in (sub-)query
+
+export type WhereOperation =
+  | "eq" //	Equal
+  | "neq" //	Not equal
+  | "lt" //	Less than
+  | "lte" //	Less than or equal to
+  | "gt" //	Greater than
+  | "gte" //	Greater than or equal to
+  | "in" //	Included in an array
+  | "notIn" //	Not included in an array
+  | "contains" //	Contains
+  | "notContains" //	Does not contain
+  | "null" //	Is null
+  | "notNull" //	Is not null
+  | "between" //	Is between
+  | "startsWith" //	Starts with
+  | "endsWith" //	Ends with
+  | "timespanEq"; // Date before x years (YYYY-01-01 <bis> YYYY-12-31)
+// TODO: age between | age equals | age greater | age smaller
+
+export type OrderByStructure = {
+  column: string;
+  order: OrderByType;
+};
+
+export type OrderByType = "ASC" | "DESC";
+
+export type QueryResult = {
+  [key: string]: FieldType | QueryResult | Array<QueryResult>;
+};
+
+export const whereOperationArray = [
+  "eq",
+  "neq",
+  "lt",
+  "lte",
+  "gt",
+  "gte",
+  // "in",
+  // "notIn",
+  "contains",
+  "notContains",
+  "null",
+  "notNull",
+  "between",
+  "startsWith",
+  "endsWith",
+  "timespanEq",
+];
+
+export const joinTableFormatter: { [key: string]: string } = {
+  member_awards: "memberAwards",
+  membership_status: "membershipStatus",
+  member_qualifications: "memberQualifications",
+  member_executive_positions: "memberExecutivePositions",
+  communication_type: "communicationType",
+  executive_position: "executivePosition",
+};

src/types/permissionTypes.ts

@@ -8,11 +8,13 @@ export type PermissionModule =
   | "qualification"
   | "award"
   | "executive_position"
-  | "communication"
+  | "communication_type"
   | "membership_status"
   | "calendar_type"
   | "user"
-  | "role";
+  | "role"
+  | "query"
+  | "query_store";
 
 export type PermissionType = "read" | "create" | "update" | "delete";
 
@@ -44,15 +46,25 @@ export const permissionModules: Array<PermissionModule> = [
   "qualification",
   "award",
   "executive_position",
-  "communication",
+  "communication_type",
   "membership_status",
   "calendar_type",
   "user",
   "role",
+  "query",
+  "query_store",
 ];
 export const permissionTypes: Array<PermissionType> = ["read", "create", "update", "delete"];
 export const sectionsAndModules: SectionsAndModulesObject = {
-  club: ["member", "calendar", "newsletter", "protocol"],
+  club: ["member", "calendar", "newsletter", "protocol", "query"],
-  settings: ["qualification", "award", "executive_position", "communication", "membership_status", "calendar_type"],
+  settings: [
+    "qualification",
+    "award",
+    "executive_position",
+    "communication_type",
+    "membership_status",
+    "calendar_type",
+    "query_store",
+  ],
   user: ["user", "role"],
 };

src/viewmodels/admin/query.models.ts

@@ -0,0 +1,23 @@
+import type { DynamicQueryStructure } from "../../types/dynamicQueries";
+
+export interface TableMeta {
+  tableName: string;
+  columns: Array<{ column: string; type: string }>;
+  relations: Array<{ column: string; relationType: string; referencedTableName: string }>;
+}
+
+export interface QueryViewModel {
+  id: number;
+  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/members/Member.vue

@@ -53,52 +53,6 @@ export default defineComponent({
   computed: {
     ...mapState(useMemberStore, ["members", "totalCount", "loading"]),
     ...mapState(useAbilityStore, ["can"]),
-    entryCount() {
-      return this.totalCount ?? this.members.length;
-    },
-    showingStart() {
-      return this.currentPage * this.maxEntriesPerPage;
-    },
-    showingEnd() {
-      let max = this.currentPage * this.maxEntriesPerPage + this.maxEntriesPerPage;
-      if (max > this.entryCount) max = this.entryCount;
-      return max;
-    },
-    showingText() {
-      return `${this.entryCount != 0 ? this.showingStart + 1 : 0} - ${this.showingEnd}`;
-    },
-    countOfPages() {
-      return Math.ceil(this.entryCount / this.maxEntriesPerPage);
-    },
-    displayedPagesNumbers(): Array<number | "."> {
-      //indicate if "." or page number gets pushed
-      let stateOfPush = false;
-
-      return [...new Array(this.countOfPages)].reduce((acc, curr, index) => {
-        if (
-          // always display first 2 pages
-          index <= 1 ||
-          // always display last 2 pages
-          index >= this.countOfPages - 2 ||
-          // always display 1 pages around current page
-          (this.currentPage - 1 <= index && index <= this.currentPage + 1)
-        ) {
-          acc.push(index);
-          stateOfPush = false;
-          return acc;
-        }
-        // abort if placeholder already added to array
-        if (stateOfPush == true) return acc;
-        // show placeholder if pagenumber is not actively rendered
-        acc.push(".");
-        stateOfPush = true;
-
-        return acc;
-      }, []);
-    },
-    visibleRows() {
-      return this.filterData(this.members, this.showingStart, this.showingEnd);
-    },
   },
   mounted() {
     this.fetchMembers(0, this.maxEntriesPerPage, true);
@@ -106,22 +60,6 @@ export default defineComponent({
   methods: {
     ...mapActions(useMemberStore, ["fetchMembers"]),
     ...mapActions(useModalStore, ["openModal"]),
-    loadPage(newPage: number | ".") {
-      if (newPage == ".") return;
-      if (newPage < 0 || newPage >= this.countOfPages) return;
-
-      let pageStart = newPage * this.maxEntriesPerPage;
-      let pageEnd = newPage * this.maxEntriesPerPage + this.maxEntriesPerPage;
-      if (pageEnd > this.entryCount) pageEnd = this.entryCount;
-
-      let loadedElementCount = this.filterData(this.members, pageStart, pageEnd).length;
-      if (loadedElementCount < this.maxEntriesPerPage) this.fetchMembers(pageStart, this.maxEntriesPerPage);
-
-      this.currentPage = newPage;
-    },
-    filterData(array: Array<any>, start: number, end: number): Array<any> {
-      return array.filter((elem, index) => (elem?.tab_pos ?? index) >= start && (elem?.tab_pos ?? index) < end);
-    },
     openCreateModal() {
       this.openModal(
         markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/CreateMemberModal.vue")))

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

@@ -0,0 +1,84 @@
+<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">Query Builder</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 px-7 overflow-y-auto">
+        <BuilderHost
+          v-model="query"
+          allow-predefined-select
+          @query:run="sendQuery"
+          @query:save="triggerSave"
+          @results:clear="clearResults"
+          @results:export="exportData"
+        />
+        <p>Ergebnisse:</p>
+        <div
+          v-if="loadingData == 'failed'"
+          class="flex flex-col p-2 border border-red-600 bg-red-200 rounded-md select-none"
+        >
+          <p v-if="typeof queryError == 'string'">
+            {{ queryError }}
+          </p>
+          <div v-else>
+            <p>
+              CODE: <br />
+              {{ queryError.code }}
+            </p>
+            <br />
+            <p>
+              MSG: <br />
+              {{ queryError.msg }}
+            </p>
+            <br />
+            <p>
+              RESULTING SQL: <br />
+              {{ queryError.sql }}
+            </p>
+          </div>
+        </div>
+        <Pagination
+          v-else
+          :items="data"
+          :totalCount="totalLength"
+          :indicateLoading="loadingData == 'loading'"
+          @load-data="(offset, count) => sendQuery(offset, count)"
+        >
+          <template #pageRow="{ row }: { row: { id: FieldType; [key: string]: FieldType } }">
+            <p>{{ row }}</p>
+          </template>
+        </Pagination>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import Pagination from "@/components/Pagination.vue";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
+import BuilderHost from "../../../../components/queryBuilder/BuilderHost.vue";
+import type { DynamicQueryStructure, FieldType } from "@/types/dynamicQueries";
+import { useQueryStoreStore } from "@/stores/admin/queryStore";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useQueryBuilderStore, ["loading", "loadingData", "tableMetas", "data", "totalLength", "queryError"]),
+    ...mapWritableState(useQueryBuilderStore, ["query"]),
+  },
+  mounted() {
+    this.fetchTableMetas();
+  },
+  methods: {
+    ...mapActions(useQueryBuilderStore, ["fetchTableMetas", "sendQuery", "clearResults", "exportData"]),
+    ...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>