feat: Dashboard Functionality

nuxt/components/deadline/DeadlineTable.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import ConfirmUserDeadline from '~/components/modal/ConfirmUserDeadline.vue'
+
+const props = defineProps<{
+  bookRecommendationId: number
+}>()
+
+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,
+    }
+  })
+})
+</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>