<template> <div class="flex flex-col gap-2 h-full w-full overflow-y-auto"> <div v-if="memberQualifications != null" class="flex flex-col gap-2 w-full"> <MemberQualificationListItem v-for="qualification in memberQualifications" :key="qualification.id" :qualification="qualification" /> </div> <Spinner v-if="loading == 'loading'" class="mx-auto" /> <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">↺ laden fehlgeschlagen</p> </div> <div class="flex flex-row gap-4"> <button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal"> Qualifikation hinzufügen </button> </div> </template> <script setup lang="ts"> import { defineAsyncComponent, defineComponent, markRaw } from "vue"; import { mapActions, mapState } from "pinia"; import Spinner from "@/components/Spinner.vue"; import { useMemberQualificationStore } from "@/stores/admin/memberQualification"; import MemberQualificationListItem from "@/components/admin/club/member/MemberQualificationListItem.vue"; import { useModalStore } from "@/stores/modal"; import { useAbilityStore } from "@/stores/ability"; </script> <script lang="ts"> export default defineComponent({ props: { memberId: String, }, computed: { ...mapState(useMemberQualificationStore, ["memberQualifications", "loading"]), ...mapState(useAbilityStore, ["can"]), }, mounted() { this.fetchItem(); }, methods: { ...mapActions(useMemberQualificationStore, ["fetchMemberQualificationsForMember"]), ...mapActions(useModalStore, ["openModal"]), fetchItem() { this.fetchMemberQualificationsForMember(); }, openCreateModal() { this.openModal( markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/MemberQualificationCreateModal.vue"))) ); }, }, }); </script>