feat: Dashboard Functionality

nuxt/components/modal/ConfirmUserDeadline.vue

@@ -0,0 +1,45 @@
+<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>

nuxt/components/modal/NewDeadline.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const props = defineProps<{
+  bookRecommendationId: number
+}>()
+const isOpen = ref(false)
+const loading = ref(false)
+
+const dayjs = useDayjs()
+const form = ref()
+
+interface NewDeadlineState {
+  book_recommendation_id: number | null
+  deadline: string
+  target_page?: number
+  target_chapter?: string
+}
+
+const state: NewDeadlineState = reactive({
+  book_recommendation_id: props.bookRecommendationId,
+  deadline: '',
+  target_page: undefined,
+  target_chapter: undefined,
+})
+
+async function onSubmit() {
+  loading.value = true
+
+  await $fetch('deadlines', {
+    method: 'POST',
+    body: state,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    async onResponse({ response }) {
+      loading.value = false
+      if (response?.status === 422) {
+        form.value.setErrors(response._data?.errors)
+      }
+      else if (response.ok) {
+        useToast().add({
+          icon: 'i-heroicons-check-circle-20-solid',
+          title: 'Deadline erfolgreich erstellt.',
+          color: 'emerald',
+        })
+        loading.value = false
+
+        isOpen.value = false
+      }
+    },
+  })
+}
+</script>
+
+<template>
+  <div>
+    <UButton icon="i-heroicons-plus" label="Neue Deadline" size="sm" variant="solid" color="green" square @click="isOpen = true" />
+    <UModal v-model="isOpen">
+      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Neue Deadline
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+          </div>
+        </template>
+
+        <UForm ref="form" :state="state" class="space-y-4" @submit="onSubmit">
+          <UFormGroup label="Deadline" name="deadline">
+            <UInput v-model="state.deadline" type="date" />
+          </UFormGroup>
+          <UFormGroup label="Zielseite" name="target_page">
+            <UInput v-model="state.target_page" type="number" />
+          </UFormGroup>
+          <UFormGroup label="Zielkapitel" name="target_chapter">
+            <UInput v-model="state.target_chapter" />
+          </UFormGroup>
+          <UButton size="md" type="submit" :loading="loading">
+            Erstellen
+          </UButton>
+          <UButton size="md" class="mx-4" color="white" label="Abbrechen" @click="isOpen = false" />
+        </UForm>
+      </UCard>
+    </UModal>
+  </div>
+</template>