feat: upcoming events

np-inprove · Aug 3, 2023 · d275f17 · d275f17
1 parent 2576902
commit d275f17
Show file tree

Hide file tree

Showing 19 changed files with 811 additions and 335 deletions.
diff --git a/app.vue b/app.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const config = useRuntimeConfig()
 
-const cookieRaw = useCookie('theme')
+const { cookieRaw } = useTheme()
 const route = useRoute()
 const resolvedTheme = computed(() => {
   let theme = 'lara-dark-indigo'

diff --git a/components/dashboard/ForumCard.vue b/components/dashboard/ForumCard.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import Card from 'primevue/card'
+
+const props = defineProps<{
+  groupId: string
+  forumId: string
+  name: string
+  description: string
+}>()
+</script>
+
+<template>
+  <NuxtLink prefetch :to="`/dashboard/${props.groupId}/forums/${props.forumId}`">
+    <Card :pt="$pt.clickableCard">
+      <template #subtitle>
+        # {{ props.name }}
+      </template>
+      <template #content>
+        {{ props.description }}
+      </template>
+    </Card>
+  </NuxtLink>
+</template>
diff --git a/components/dashboard/UpcomingEvents.vue b/components/dashboard/UpcomingEvents.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import Skeleton from 'primevue/skeleton'
+import Button from 'primevue/button'
+import { Calendar } from 'v-calendar'
+
+const props = defineProps<{
+  groupId: string
+}>()
+
+const { data: events, isLoading: eventsIsLoading, error: eventsError } = useUpcomingEvents(props.groupId)
+
+const { cookieRaw } = useTheme()
+const isDark = computed(() => cookieRaw.value?.includes('dark') ?? true)
+const attributes = computed(() => events.value?.map(e => ({
+  highlight: true,
+  dates: {
+    start: e.startTime,
+    repeat: e.repeat,
+  },
+})) ?? undefined)
+</script>
+
+<template>
+  <div>
+    <Skeleton v-if="eventsIsLoading" height="300px" />
+    <div v-else>
+      <Calendar
+        :attributes="attributes"
+        title-position="left"
+        borderless
+        transparent
+        expanded
+        :is-dark="isDark"
+      />
+
+      <NuxtLink prefetch :to="`/dashboard/${props.groupId}/events/new`">
+        <Button label="Create" />
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<style>
+@import 'v-calendar/style.css';
+</style>
diff --git a/components/dashboard/WorkDue.vue b/components/dashboard/WorkDue.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// TODO clean up this file
+
 import InputText from 'primevue/inputtext'
 import Button from 'primevue/button'
 import add from 'date-fns/add/index'
@@ -31,7 +33,12 @@ const formData = reactive<{
 })
 
 function createDeadline() {
-  createMutate(formData)
+  createMutate(formData, {
+    onSuccess() {
+      formData.name = ''
+      formData.dueDate = null
+    },
+  })
 }
 
 const base = new Date(2004, 8, 14, 0, 0, 0, 0)
@@ -50,6 +57,7 @@ function addDueDate() {
   if (!formData.dueDate)
     return
 
+  formData.dueDate.setHours(0, 0, 0, 0)
   formData.dueDate = add(formData.dueDate, { minutes: formData.tempDueDateSelectedTimingIdx * 30 })
 }
 </script>

diff --git a/composables/event.ts b/composables/event.ts
@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/vue-query'
+
+export function useUpcomingEvents(groupId: string) {
+  const { $client } = useNuxtApp()
+  return useQuery({
+    queryKey: ['event', 'upcoming', groupId],
+    queryFn: () => $client.event.upcoming.query({ groupId }),
+  })
+}
diff --git a/composables/theme.ts b/composables/theme.ts
@@ -0,0 +1,6 @@
+export function useTheme() {
+  const cookieRaw = useCookie('theme')
+  return {
+    cookieRaw,
+  }
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -3,6 +3,10 @@ export default defineNuxtConfig({
   ssr: false,
   spaLoadingTemplate: false,
 
+  experimental: {
+    componentIslands: true,
+  },
+
   vue: {
     defineModel: true,
   },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "inprove",
-  "packageManager": "[email protected].10",
+  "packageManager": "[email protected].11",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -15,27 +15,29 @@
     "docs:preview": "vitepress preview docs"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.39.8",
+    "@antfu/eslint-config": "^0.40.0",
     "@iconify-json/tabler": "^1.1.86",
-    "@nuxt/devtools": "^0.7.1",
+    "@nuxt/devtools": "^0.7.4",
     "@nuxt/image": "1.0.0-rc.1",
     "@nuxtjs/html-validator": "^1.5.2",
     "@nuxtjs/turnstile": "^0.5.0",
-    "@prisma/client": "5.0.0",
+    "@popperjs/core": "^2.11.8",
+    "@prisma/client": "5.1.0",
     "@qingu/vue-email": "^1.0.23",
-    "@tanstack/vue-query": "^4.32.0",
+    "@tanstack/vue-query": "^4.32.4",
     "@trpc/client": "^10.36.0",
     "@trpc/server": "^10.36.0",
-    "@types/node": "^20.4.5",
-    "@unocss/eslint-config": "^0.54.0",
-    "@unocss/nuxt": "^0.54.0",
+    "@types/node": "^20.4.6",
+    "@unocss/eslint-config": "^0.54.1",
+    "@unocss/nuxt": "^0.54.1",
     "@vueuse/core": "^10.3.0",
     "@vueuse/integrations": "^10.3.0",
     "@vueuse/nuxt": "^10.3.0",
-    "chart.js": "^4.3.2",
+    "chart.js": "^4.3.3",
     "consola": "^3.2.3",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
+    "v-calendar": "^3.0.3",
     "eslint": "^8.46.0",
     "lint-staged": "^13.2.3",
     "nodemailer": "^6.9.4",
@@ -45,10 +47,10 @@
     "pino-http": "^8.3.3",
     "pino-pretty": "^10.2.0",
     "primevue": "^3.31.0",
-    "prisma": "^5.0.0",
+    "prisma": "^5.1.0",
     "qrcode": "^1.5.3",
     "resend": "^0.17.2",
-    "sass": "^1.64.1",
+    "sass": "^1.64.2",
     "sharp": "^0.32.4",
     "simple-git-hooks": "^2.9.0",
     "std-env": "^3.3.3",

diff --git a/pages/dashboard/[groupId]/events/new.vue b/pages/dashboard/[groupId]/events/new.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const route = useRoute()
+</script>
+
+<template>
+  <div w-full flex flex-col>
+    <GroupHeader
+      :group-id="
+        route.params.groupId as string
+      "
+    />
+  </div>
+</template>
diff --git a/pages/dashboard/[groupId]/index.vue b/pages/dashboard/[groupId]/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Card from 'primevue/card'
 import Skeleton from 'primevue/skeleton'
+import ScrollPanel from 'primevue/scrollpanel'
 
 const route = useRoute()
 
@@ -14,7 +14,7 @@ const Tab = {
 </script>
 
 <template>
-  <div w-full>
+  <div w-full flex flex-col>
     <div v-if="groupError || forumsError" h-full flex items-center justify-center pb25>
       <LazyErrorCard v-bind="groupError || forumsError" />
     </div>
@@ -26,61 +26,80 @@ const Tab = {
         "
       />
 
-      <div w-full p8 space-y-6>
-        <section space-y-4>
-          <h3 font-semibold>
-            Forums
-          </h3>
+      <div overflow-auto p4 md:p8>
+        <ScrollPanel style="height: 100%">
+          <div min-h-md flex flex-wrap gap6>
+            <section max-w-sm w-sm space-y-4>
+              <h3 font-semibold>
+                Upcoming events
+              </h3>
 
-          <Skeleton v-if="forumsIsLoading" height="100px" />
-          <TransitionGroup v-else appear>
-            <div class="w-[200px]">
-              <NuxtLink v-for="(forum, idx) in forums" :key="idx" prefetch :to="`/dashboard/${route.params.groupId}/forums/${forum.id}`">
-                <Card :pt="$pt.clickableCard">
-                  <template #subtitle>
-                    # {{ forum.name }}
-                  </template>
-                  <template #content>
-                    {{ forum.description }}
-                  </template>
-                </Card>
-              </NuxtLink>
-            </div>
-          </TransitionGroup>
-        </section>
+              <DashboardUpcomingEvents
+                :group-id="
+                  route.params.groupId as string
+                "
+              />
+            </section>
 
-        <section space-y-4>
-          <div flex gap2>
-            <NuxtLink
-              prefetch
-              :class="{ 'bg-$highlight-bg text-$highlight-text-color hover:no-underline': !route.query.tab || route.query.tab === Tab.WorkDue }"
-              class="h-9 inline-flex cursor-pointer items-center justify-start rounded-md px-4 py-2 font-normal transition-colors disabled:pointer-events-none hover:bg-$highlight-bg font-medium! hover:text-$highlight-text-color hover:underline disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1"
-              to="?tab=work-due"
-            >
-              Work due
-            </NuxtLink>
-            <NuxtLink
-              prefetch
-              :class="{ 'bg-$highlight-bg text-$highlight-text-color hover:no-underline': route.query.tab === Tab.StudyPlan }"
-              class="h-9 inline-flex cursor-pointer items-center justify-start rounded-md px-4 py-2 font-normal transition-colors disabled:pointer-events-none hover:bg-$highlight-bg font-medium! hover:text-$highlight-text-color hover:underline disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1"
-              to="?tab=study-plan"
-            >
-              Study plan
-            </NuxtLink>
+            <section flex-1 space-y-4>
+              <h3 font-semibold>
+                Forums
+              </h3>
+
+              <Skeleton v-if="forumsIsLoading" height="100px" />
+              <TransitionGroup v-else appear>
+                <div
+                  v-for="(forum, idx) in forums"
+                  :key="idx" class="w-[200px]"
+                >
+                  <DashboardForumCard
+                    :group-id="
+                      route.params.groupId as string
+                    "
+                    :forum-id="
+                      forum.id as string
+                    "
+                    :name="forum.name"
+                    :description="forum.description"
+                  />
+                </div>
+              </TransitionGroup>
+            </section>
           </div>
 
-          <KeepAlive>
-            <DashboardWorkDue
-              v-if="
-                !route.query.tab || route.query.tab === Tab.WorkDue
-              "
-              :group-id="
-                route.params.groupId as string
-              "
-            />
-            <DashboardStudyPlan v-else-if="route.query.tab === Tab.StudyPlan" />
-          </KeepAlive>
-        </section>
+          <section mt6 space-y-4>
+            <div flex gap2>
+              <NuxtLink
+                prefetch
+                :class="{ 'bg-$highlight-bg text-$highlight-text-color hover:no-underline': !route.query.tab || route.query.tab === Tab.WorkDue }"
+                class="h-9 inline-flex cursor-pointer items-center justify-start rounded-md px-4 py-2 font-normal transition-colors disabled:pointer-events-none hover:bg-$highlight-bg font-medium! hover:text-$highlight-text-color hover:underline disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1"
+                to="?tab=work-due"
+              >
+                Work due
+              </NuxtLink>
+              <NuxtLink
+                prefetch
+                :class="{ 'bg-$highlight-bg text-$highlight-text-color hover:no-underline': route.query.tab === Tab.StudyPlan }"
+                class="h-9 inline-flex cursor-pointer items-center justify-start rounded-md px-4 py-2 font-normal transition-colors disabled:pointer-events-none hover:bg-$highlight-bg font-medium! hover:text-$highlight-text-color hover:underline disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1"
+                to="?tab=study-plan"
+              >
+                Study plan
+              </NuxtLink>
+            </div>
+
+            <KeepAlive>
+              <DashboardWorkDue
+                v-if="
+                  !route.query.tab || route.query.tab === Tab.WorkDue
+                "
+                :group-id="
+                  route.params.groupId as string
+                "
+              />
+              <DashboardStudyPlan v-else-if="route.query.tab === Tab.StudyPlan" />
+            </KeepAlive>
+          </section>
+        </ScrollPanel>
       </div>
     </template>
   </div>