#14-intelligent-groups #21
12 changed files with 490 additions and 34 deletions
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -8,13 +8,6 @@
|
||||||
>
|
>
|
||||||
<PlayIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
<PlayIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||||
</div>
|
</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
|
<div
|
||||||
class="p-1 border border-gray-400 bg-gray-100 rounded-md"
|
class="p-1 border border-gray-400 bg-gray-100 rounded-md"
|
||||||
title="Ergebnisse exportieren"
|
title="Ergebnisse exportieren"
|
||||||
|
@ -33,6 +26,23 @@
|
||||||
<TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
<TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||||
</div>
|
</div>
|
||||||
<div class="grow"></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="flex flex-row overflow-hidden border border-gray-400 rounded-md">
|
||||||
<div
|
<div
|
||||||
class="p-1"
|
class="p-1"
|
||||||
|
@ -44,7 +54,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="p-1"
|
class="p-1"
|
||||||
:class="queryMode == 'builder' ? 'bg-gray-200' : ''"
|
:class="typeof value == 'object' ? 'bg-gray-200' : ''"
|
||||||
title="Visual Builder"
|
title="Visual Builder"
|
||||||
@click="queryMode = 'builder'"
|
@click="queryMode = 'builder'"
|
||||||
>
|
>
|
||||||
|
@ -52,7 +62,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="p-1"
|
class="p-1"
|
||||||
:class="queryMode == 'editor' ? 'bg-gray-200' : ''"
|
:class="typeof value == 'string' ? 'bg-gray-200' : ''"
|
||||||
title="SQL Editor"
|
title="SQL Editor"
|
||||||
@click="queryMode = 'editor'"
|
@click="queryMode = 'editor'"
|
||||||
>
|
>
|
||||||
|
@ -72,7 +82,7 @@
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
|
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 type { DynamicQueryStructure } from "../../types/dynamicQueries";
|
||||||
import {
|
import {
|
||||||
ArchiveBoxArrowDownIcon,
|
ArchiveBoxArrowDownIcon,
|
||||||
|
@ -87,6 +97,8 @@ import {
|
||||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||||
import { useModalStore } from "../../stores/modal";
|
import { useModalStore } from "../../stores/modal";
|
||||||
import Table from "./Table.vue";
|
import Table from "./Table.vue";
|
||||||
|
import { useAbilityStore } from "@/stores/ability";
|
||||||
|
import { useQueryStoreStore } from "@/stores/admin/queryStore";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -102,6 +114,10 @@ export default defineComponent({
|
||||||
orderBy: [],
|
orderBy: [],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
allowPredefinedSelect: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
emits: ["update:model-value", "query:run", "query:save", "results:export", "results:clear"],
|
emits: ["update:model-value", "query:run", "query:save", "results:export", "results:clear"],
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -118,14 +134,24 @@ export default defineComponent({
|
||||||
this.value = "";
|
this.value = "";
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
activeQueryId() {
|
||||||
|
let query = this.queries.find((t) => t.id == this.activeQueryId)?.query;
|
||||||
|
if (query != undefined) {
|
||||||
|
this.value = query;
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
autoChangeFlag: false as boolean,
|
||||||
queryMode: "builder" as "builder" | "editor" | "structure",
|
queryMode: "builder" as "builder" | "editor" | "structure",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
...mapState(useAbilityStore, ["can"]),
|
||||||
...mapState(useQueryBuilderStore, ["tableMetas", "loading"]),
|
...mapState(useQueryBuilderStore, ["tableMetas", "loading"]),
|
||||||
|
...mapWritableState(useQueryBuilderStore, ["activeQueryId"]),
|
||||||
|
...mapState(useQueryStoreStore, ["queries"]),
|
||||||
value: {
|
value: {
|
||||||
get() {
|
get() {
|
||||||
return this.modelValue;
|
return this.modelValue;
|
||||||
|
@ -137,13 +163,16 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.fetchTableMetas();
|
this.fetchTableMetas();
|
||||||
|
this.fetchQueries();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions(useModalStore, ["openModal"]),
|
...mapActions(useModalStore, ["openModal"]),
|
||||||
...mapActions(useQueryBuilderStore, ["fetchTableMetas"]),
|
...mapActions(useQueryBuilderStore, ["fetchTableMetas"]),
|
||||||
|
...mapActions(useQueryStoreStore, ["fetchQueries"]),
|
||||||
clearQuery() {
|
clearQuery() {
|
||||||
this.$emit("update:model-value", undefined);
|
this.$emit("update:model-value", undefined);
|
||||||
if (this.queryMode == "builder") {
|
this.activeQueryId = undefined;
|
||||||
|
if (typeof this.value != "string") {
|
||||||
this.value = {
|
this.value = {
|
||||||
select: "*",
|
select: "*",
|
||||||
table: "",
|
table: "",
|
||||||
|
|
|
@ -42,7 +42,7 @@ export default defineComponent({
|
||||||
computed: {
|
computed: {
|
||||||
table: {
|
table: {
|
||||||
get() {
|
get() {
|
||||||
return this.modelValue.table;
|
return this.modelValue.table || "";
|
||||||
},
|
},
|
||||||
set(val: string) {
|
set(val: string) {
|
||||||
this.$emit("update:model-value", { ...this.modelValue, table: val });
|
this.$emit("update:model-value", { ...this.modelValue, table: val });
|
||||||
|
|
|
@ -398,25 +398,10 @@ const router = createRouter({
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "query-store",
|
path: "query-store",
|
||||||
name: "admin-settings-query_store-route",
|
name: "admin-settings-query_store",
|
||||||
component: () => import("@/views/RouterView.vue"),
|
component: () => import("@/views/admin/settings/QueryStore.vue"),
|
||||||
meta: { type: "read", section: "settings", module: "query" },
|
meta: { type: "read", section: "settings", module: "query_store" },
|
||||||
beforeEnter: [abilityAndNavUpdate],
|
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,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
|
@ -13,6 +13,7 @@ export const useQueryBuilderStore = defineStore("queryBuilder", {
|
||||||
loadingData: "fetched" as "loading" | "fetched" | "failed",
|
loadingData: "fetched" as "loading" | "fetched" | "failed",
|
||||||
queryError: "" as string | { sql: string; code: string; msg: string },
|
queryError: "" as string | { sql: string; code: string; msg: string },
|
||||||
query: undefined as undefined | DynamicQueryStructure | string,
|
query: undefined as undefined | DynamicQueryStructure | string,
|
||||||
|
activeQueryId: undefined as undefined | number,
|
||||||
isLoadedQuery: undefined as undefined | number,
|
isLoadedQuery: undefined as undefined | number,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
75
src/stores/admin/queryStore.ts
Normal file
75
src/stores/admin/queryStore.ts
Normal file
|
@ -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;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
|
@ -1,3 +1,5 @@
|
||||||
|
import type { DynamicQueryStructure } from "../../types/dynamicQueries";
|
||||||
|
|
||||||
export interface TableMeta {
|
export interface TableMeta {
|
||||||
tableName: string;
|
tableName: string;
|
||||||
columns: Array<{ column: string; type: string }>;
|
columns: Array<{ column: string; type: string }>;
|
||||||
|
@ -6,5 +8,16 @@ export interface TableMeta {
|
||||||
|
|
||||||
export interface QueryViewModel {
|
export interface QueryViewModel {
|
||||||
id: number;
|
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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,9 +9,10 @@
|
||||||
<div class="flex flex-col w-full h-full gap-2 px-7 overflow-y-auto">
|
<div class="flex flex-col w-full h-full gap-2 px-7 overflow-y-auto">
|
||||||
<BuilderHost
|
<BuilderHost
|
||||||
v-model="query"
|
v-model="query"
|
||||||
@query:run="sendQuery()"
|
allow-predefined-select
|
||||||
@query:save=""
|
@query:run="sendQuery"
|
||||||
@results:clear="clearResults()"
|
@query:save="triggerSave"
|
||||||
|
@results:clear="clearResults"
|
||||||
@results:export=""
|
@results:export=""
|
||||||
/>
|
/>
|
||||||
<p>Ergebnisse:</p>
|
<p>Ergebnisse:</p>
|
||||||
|
@ -63,6 +64,7 @@ import Pagination from "@/components/Pagination.vue";
|
||||||
import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
|
import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
|
||||||
import BuilderHost from "../../../../components/queryBuilder/BuilderHost.vue";
|
import BuilderHost from "../../../../components/queryBuilder/BuilderHost.vue";
|
||||||
import type { DynamicQueryStructure } from "@/types/dynamicQueries";
|
import type { DynamicQueryStructure } from "@/types/dynamicQueries";
|
||||||
|
import { useQueryStoreStore } from "@/stores/admin/queryStore";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -76,6 +78,7 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions(useQueryBuilderStore, ["fetchTableMetas", "sendQuery", "clearResults"]),
|
...mapActions(useQueryBuilderStore, ["fetchTableMetas", "sendQuery", "clearResults"]),
|
||||||
|
...mapActions(useQueryStoreStore, ["triggerSave"]),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
57
src/views/admin/settings/QueryStore.vue
Normal file
57
src/views/admin/settings/QueryStore.vue
Normal file
|
@ -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>
|
Loading…
Reference in a new issue