ff-admin/src/components/admin/club/member/MemberAwardListItem.vue

53 lines
1.8 KiB
Vue
Raw Normal View History

2024-09-18 09:28:59 +02:00
<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 gap-2 justify-between items-center">
<p class="grow">{{ award.award }}</p>
2024-11-24 15:31:08 +01:00
<PencilIcon v-if="can('update', 'club', 'member')" class="w-5 h-5 cursor-pointer" @click="openEditModal" />
<TrashIcon v-if="can('delete', 'club', 'member')" class="w-5 h-5 cursor-pointer" @click="openDeleteModal" />
2024-09-18 09:28:59 +02:00
</div>
<div class="p-2">
<p>erhalten am: {{ award.date }}</p>
<p v-if="!award.given">Annahme abgelehnt/verwehrt</p>
2024-09-18 09:28:59 +02:00
<p v-if="award.note">Notiz: {{ award.note }}</p>
</div>
</div>
</template>
<script setup lang="ts">
import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
2024-09-18 09:28:59 +02:00
import { mapState, mapActions } from "pinia";
2025-01-02 18:28:13 +01:00
import type { MemberAwardViewModel } from "@/viewmodels/admin/club/member/memberAward.models";
import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
import { useModalStore } from "@/stores/modal";
2024-11-24 15:31:08 +01:00
import { useAbilityStore } from "@/stores/ability";
2024-09-18 09:28:59 +02:00
</script>
<script lang="ts">
export default defineComponent({
props: {
award: {
type: Object as PropType<MemberAwardViewModel>,
default: {},
},
},
2024-11-24 15:31:08 +01:00
computed: {
...mapState(useAbilityStore, ["can"]),
},
methods: {
...mapActions(useModalStore, ["openModal"]),
openEditModal() {
this.openModal(
markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/MemberAwardEditModal.vue"))),
this.award.id
);
},
openDeleteModal() {
this.openModal(
markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/MemberAwardDeleteModal.vue"))),
this.award.id
);
},
},
2024-09-18 09:28:59 +02:00
});
</script>