generated from Flycro/laravel-nuxt
46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
userDeadlineId: number
|
|
}>()
|
|
|
|
const emit = defineEmits(['update'])
|
|
|
|
const isOpen = ref(false)
|
|
|
|
const { refresh: onConfirmDeadline, status } = useFetch<any>(() => `user-deadlines/${props.userDeadlineId}`, {
|
|
method: 'PUT',
|
|
immediate: false,
|
|
watch: false,
|
|
async onResponse({ response }) {
|
|
if (response.ok) {
|
|
useToast().add({
|
|
icon: 'i-heroicons-check-circle-20-solid',
|
|
title: 'Deadline erfolgreich Abgeschlossen.',
|
|
color: 'emerald',
|
|
})
|
|
emit('update')
|
|
isOpen.value = false
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UButton class="transition-150 transform-gpu hover:scale-110" icon="i-heroicons-book-open" size="sm" variant="solid" color="primary" square @click="isOpen = true" />
|
|
<UDashboardModal
|
|
v-model="isOpen"
|
|
title="Deadline abschließen"
|
|
description="Bist du dir sicher das du die Deadline abschließen möchtest?"
|
|
icon="i-heroicons-book-open"
|
|
:ui="{
|
|
icon: { base: 'text-primary dark:text-primary-400' } as any,
|
|
footer: { base: 'ml-16' } as any,
|
|
}"
|
|
>
|
|
<template #footer>
|
|
<UButton color="primary" label="Abschließen" :loading="status === 'pending'" @click="onConfirmDeadline" />
|
|
<UButton color="white" label="Abbrechen" @click="isOpen = false" />
|
|
</template>
|
|
</UDashboardModal>
|
|
</template>
|