bookclub-manager/nuxt/components/modal/DeleteBookRecommendation.vue

57 lines
1.6 KiB
Vue

<script setup lang="ts">
import { useBookRecommendationStore } from '~/stores/book-recommendations'
const props = defineProps<{
row: {
id: number
book_name: string
recommender: {
ulid: string
}
}
}>()
const authStore = useAuthStore()
const isOpen = ref(false)
const bookRecommendationStore = useBookRecommendationStore()
const { refresh: onDelete, status } = useFetch<any>(() => `book-recommendations/${props.row.id}`, {
method: 'DELETE',
immediate: false,
watch: false,
async onResponse({ response }) {
if (response.ok) {
useToast().add({
icon: 'i-heroicons-check-circle-20-solid',
title: 'Buchempfehlung wurde gelöscht.',
color: 'emerald',
})
await bookRecommendationStore.fetchRecommendations()
}
isOpen.value = false
},
})
</script>
<template>
<UButton v-if="authStore.user.roles.includes('admin')" class="transition-150 transform-gpu hover:scale-110" icon="i-heroicons-trash" size="sm" color="red" variant="solid" square @click="isOpen = true" />
<UDashboardModal
v-model="isOpen"
title="Buch Empfehlung löschen"
:description="`Möchtest du die Buchempfehlung ${row.book_name} wirklich löschen?`"
icon="i-heroicons-exclamation-circle"
:ui="{
icon: { base: 'text-red-500 dark:text-red-400' } as any,
footer: { base: 'ml-16' } as any,
}"
>
<template #footer>
<UButton color="red" label="Löschen" :loading="status === 'pending'" @click="onDelete" />
<UButton color="white" label="Abbrechen" @click="isOpen = false" />
</template>
</UDashboardModal>
</template>