ff-admin/src/views/admin/settings/QueryStore.vue

58 lines
1.8 KiB
Vue
Raw Normal View History

2024-12-18 22:27:44 +01:00
<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>