feat: initial forms support

Author: qwerzl

.env.example

@@ -5,3 +5,4 @@ TSIMS_URL=
 SENTRY_DSN=
 CLUB_DATA_SECRET_KEY=
 SENTRY_AUTH_TOKEN=
+NOCODB_URL=

components/custom/sidebar.vue

@@ -18,6 +18,19 @@ const route = useRoute()
           </NuxtLink>
         </div>
       </div>
+      <div class="px-3 py-2">
+        <h2 class="relative px-4 text-lg font-semibold tracking-tight">
+          学校事务
+        </h2>
+        <div class="mt-2">
+          <NuxtLink to="/forms">
+            <Button :variant="route.name === 'forms' ? 'secondary' : 'ghost'" class="w-full justify-start">
+              <Icon class="mr-2 h-4 w-4" name="material-symbols:grid-view-outline-rounded" />
+              表单
+            </Button>
+          </NuxtLink>
+        </div>
+      </div>
       <div class="px-3 py-2">
         <h2 class="relative px-4 text-lg font-semibold tracking-tight">
           社团信息

data/forms/forms.yaml

@@ -0,0 +1,7 @@
+---
+20240930_0001:
+  title: "Form 1"
+  description: "This is the first form"
+  url: "https://wazkw5hf.nocodb.com/#/nc/form/7f4847a8-c4d5-40f9-b052-4222d07b3e2b?embed"
+  start_date: "2024-09-30"
+  end_date: "2024-10-30"

layouts/default.vue

@@ -81,10 +81,8 @@ watch(
               <!-- Sidebar -->
               <Sidebar class="top-0 hidden lg:inline-block h-full w-1/6" />
               <!-- Main content -->
-              <ScrollArea class="h-full px-4 lg:px-8 w-full pt-8">
-                <div class="pb-24">
-                  <slot />
-                </div>
+              <ScrollArea class="h-full px-4 lg:px-8 w-full pt-8 mb-24">
+                <slot />
               </ScrollArea>
             </div>
           </div>

package.json

@@ -50,6 +50,7 @@
     "vaul-vue": "^0.2.0",
     "vee-validate": "^4.13.2",
     "vue-clerk": "^0.6.9",
+    "yaml": "^2.5.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {

pages/forms/[id].vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+import { useClerk } from 'vue-clerk'
+import { toast } from '~/components/ui/toast'
+import type { Form } from '~/types/data/forms'
+
+const clerk = useClerk()
+
+const { height } = useWindowSize()
+
+definePageMeta({
+  middleware: ['auth'],
+})
+
+useHead({
+  title: 'Forms | Enspire',
+})
+
+const { data } = await useAsyncData<Form[]>('classroomStatuses', () => {
+  return $fetch<Form[]>(`/api/forms/open`, {
+    headers: useRequestHeaders(),
+    method: 'GET',
+  })
+})
+
+if (!data.value) {
+  toast({
+    title: '错误',
+    description: '获取教室信息出错',
+  })
+}
+
+const form = data.value!.find(form => form.id === useRoute().params.id)
+</script>
+
+<template>
+  <div v-if="form" class="font-bold text-xl">
+    {{ form.title }}
+  </div>
+  <div v-if="form" class="text-muted-foreground text-sm">
+    {{ form.description }}
+  </div>
+  <div v-if="form" class="rounded">
+    <ClientOnly>
+      <iframe :height="height - 110" width="100%" class="rounded" :src="`${form.url}&userid=${clerk.user.id}`" />
+    </ClientOnly>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

pages/forms/index.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import Toaster from '@/components/ui/toast/Toaster.vue'
+import { toast } from '~/components/ui/toast'
+import type { Form } from '~/types/data/forms'
+
+definePageMeta({
+  middleware: ['auth'],
+})
+
+useHead({
+  title: 'Forms | Enspire',
+})
+
+const { data } = await useAsyncData<Form[]>('classroomStatuses', () => {
+  return $fetch<Form[]>(`/api/forms/open`, {
+    headers: useRequestHeaders(),
+    method: 'GET',
+  })
+})
+
+if (!data.value) {
+  toast({
+    title: '错误',
+    description: '获取教室信息出错',
+  })
+}
+</script>
+
+<template>
+  <div class="font-bold flex items-center space-x-2 text-lg">
+    <Icon name="material-symbols:edit-square-outline" />
+    <div>可填写的表单</div>
+  </div>
+  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mt-2">
+    <NuxtLink v-for="club in data" :key="club.id" :to="`/forms/${club.id}`">
+      <Card class="hover:underline">
+        <CardHeader>
+          <CardTitle>{{ club.title }}</CardTitle>
+          <CardDescription>{{ club.description }}</CardDescription>
+        </CardHeader>
+        <CardFooter class="text-muted-foreground text-sm flex items-center">
+          <div>点击填写</div>
+          <Icon name="material-symbols:arrow-forward" />
+        </CardFooter>
+      </Card>
+    </NuxtLink>
+  </div>
+  <Toaster />
+</template>
+
+<style scoped>
+</style>

pnpm-lock.yaml

@@ -0,0 +1,35 @@
+import dayjs from 'dayjs'
+import { createStorage } from 'unstorage'
+import fsLiteDriver from 'unstorage/drivers/fs-lite'
+import { parse } from 'yaml'
+import type { Form, Forms } from '~/types/data/forms'
+
+const storage = createStorage({
+  driver: fsLiteDriver({ base: './data' }),
+})
+
+export default eventHandler(async (event) => {
+  const { auth } = event.context
+
+  if (!auth.userId) {
+    setResponseStatus(event, 403)
+    return
+  }
+
+  const yaml = await storage.getItem('forms:forms.yaml') as string
+
+  if (!yaml) {
+    setResponseStatus(event, 404)
+    return
+  }
+
+  const yamlForms = parse(yaml) as Forms
+
+  const forms: Form[] = (Object.entries(yamlForms).map(([id, entry]) => ({
+    id,
+    ...entry,
+  })))
+
+  return forms
+    .filter(entry => dayjs().isBefore(dayjs(entry.end_date)))
+})

server/api/forms/open.get.ts

@@ -0,0 +1,12 @@
+export interface Form {
+  id?: string
+  title: string
+  description: string
+  url: string
+  start_date: string
+  end_date: string
+}
+
+export interface Forms {
+  [key: string]: Form
+}