generated from Flycro/laravel-nuxt
68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import ConfirmUserDeadline from '~/components/modal/ConfirmUserDeadline.vue'
|
|
|
|
const props = defineProps<{
|
|
bookRecommendationId: number
|
|
}>()
|
|
const { $echo } = useNuxtApp()
|
|
const authStore = useAuthStore()
|
|
|
|
const { refresh: deadlineRefresh, status: deadlineStatus, data: deadlines } = useFetch(() => `book-recommendations/${props.bookRecommendationId}/deadlines`)
|
|
|
|
const columns = [
|
|
{
|
|
label: 'Deadline',
|
|
key: 'deadline',
|
|
},
|
|
{
|
|
label: 'Ziel Seite',
|
|
key: 'target_page',
|
|
},
|
|
{
|
|
label: 'Ziel Kapitel',
|
|
key: 'target_chapter',
|
|
},
|
|
{
|
|
label: '',
|
|
key: 'actions',
|
|
},
|
|
]
|
|
|
|
const dayjs = useDayjs()
|
|
|
|
const rows = computed(() => {
|
|
return deadlines.value?.map((deadline: any) => {
|
|
return {
|
|
id: deadline.id,
|
|
deadline: dayjs(deadline.deadline).format('DD.MM.YYYY'),
|
|
target_page: deadline.target_page,
|
|
target_chapter: deadline.target_chapter,
|
|
user_deadline: deadline.user_deadlines[0],
|
|
actions: null,
|
|
}
|
|
})
|
|
})
|
|
|
|
onMounted(() => {
|
|
$echo.private(`Deadline`)
|
|
.listen('.DeadlineCreated', (e) => {
|
|
deadlineRefresh()
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UTable :columns="columns" :rows="rows" :empty-state="{ icon: 'i-heroicons-calendar-solid', label: 'Keine Deadlines.' }">
|
|
<template #actions-data="{ row }">
|
|
<UBadge v-if="row.user_deadline.completed_at !== null">
|
|
Abgeschlossen - {{ dayjs(row.user_deadline.completed_at).format('DD.MM.YYYY') }}
|
|
</UBadge>
|
|
<ConfirmUserDeadline v-if="row.user_deadline.completed_at === null" :user-deadline-id="row.id" @update="deadlineRefresh" />
|
|
</template>
|
|
</UTable>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|