<template> <div class="flex flex-col gap-2 h-full w-full overflow-y-auto"> <div v-if="memberAwards != null" class="flex flex-col gap-2 w-full"> <MemberAwardListItem v-for="award in memberAwards" :key="award.id" :award="award" /> </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"> Auszeichnung 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 { useMemberAwardStore } from "@/stores/admin/club/member/memberAward"; import MemberAwardListItem from "@/components/admin/club/member/MemberAwardListItem.vue"; import { useModalStore } from "@/stores/modal"; import { useAbilityStore } from "@/stores/ability"; </script> <script lang="ts"> export default defineComponent({ props: { memberId: String, }, computed: { ...mapState(useMemberAwardStore, ["memberAwards", "loading"]), ...mapState(useAbilityStore, ["can"]), }, mounted() { this.fetchItem(); }, methods: { ...mapActions(useMemberAwardStore, ["fetchMemberAwardsForMember"]), ...mapActions(useModalStore, ["openModal"]), fetchItem() { this.fetchMemberAwardsForMember(); }, openCreateModal() { this.openModal( markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/MemberAwardCreateModal.vue"))) ); }, }, }); </script>