Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 12 Pull requests Projects Releases 25 Packages Wiki Activity Actions

query store

Browse source
This commit is contained in:
Julian Krauser 2024-12-18 22:27:44 +01:00
parent a01764e471
commit 9206a657c1
12 changed files with 490 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

78
src/components/admin/settings/queryStore/CreateQueryStoreModal.vue Normal file
View file

@ -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>

72
src/components/admin/settings/queryStore/DeleteQueryStoreModal.vue Normal file
View file

@ -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>

54
src/components/admin/settings/queryStore/QueryStoreListItem.vue Normal file
View file

@ -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>

89
src/components/admin/settings/queryStore/UpdateQueryStoreModal.vue Normal file
View file

@ -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>

51
src/components/queryBuilder/BuilderHost.vue
View file

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

2
src/components/queryBuilder/Table.vue
View file

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