<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">Mitgliedsstatus</h1> </div> </template> <template #diffMain> <div class="flex flex-col gap-4 h-full pl-7"> <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7"> <MembershipStatusListItem v-for="status in membershipStatus" :key="status.id" :membershipStatus="status" /> </div> <div class="flex flex-row gap-4"> <button v-if="can('create', 'configuration', 'membership_status')" primary class="!w-fit" @click="openCreateModal" > Mitgliedsstatus erstellen </button> </div> </div> </template> </MainTemplate> </template> <script setup lang="ts"> import { defineComponent, defineAsyncComponent, markRaw } from "vue"; import { mapState, mapActions } from "pinia"; import MainTemplate from "@/templates/Main.vue"; import { useMembershipStatusStore } from "@/stores/admin/configuration/membershipStatus"; import MembershipStatusListItem from "@/components/admin/configuration/membershipStatus/MembershipStatusListItem.vue"; import { useModalStore } from "@/stores/modal"; import { useAbilityStore } from "@/stores/ability"; </script> <script lang="ts"> export default defineComponent({ computed: { ...mapState(useMembershipStatusStore, ["membershipStatus"]), ...mapState(useAbilityStore, ["can"]), }, mounted() { this.fetchMembershipStatus(); }, methods: { ...mapActions(useMembershipStatusStore, ["fetchMembershipStatus"]), ...mapActions(useModalStore, ["openModal"]), openCreateModal() { this.openModal( markRaw( defineAsyncComponent( () => import("@/components/admin/configuration/membershipStatus/CreateMembershipStatusModal.vue") ) ) ); }, }, }); </script>