feat: support recording cas time in ActivityRecord

Author: qwerzl

components/custom/CAS/Record/NewActivityRecord.vue

@@ -2,6 +2,13 @@
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Multiselect } from '@/components/ui/multiselect'
+import {
+  NumberField,
+  NumberFieldContent,
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from '@/components/ui/number-field'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
 import { useToast } from '@/components/ui/toast/use-toast'
@@ -30,6 +37,9 @@ const formSchema = toTypedSchema(z.object({
   date: z.date(),
   text: z.string().min(10).max(300),
   members: z.array(z.string().uuid()),
+  cTime: z.number().min(0).max(5),
+  aTime: z.number().min(0).max(5),
+  sTime: z.number().min(0).max(5),
 }))
 
 const { data } = await useAsyncData<AllClubs>('allClubs', () => {
@@ -46,8 +56,13 @@ if (!data.value) {
   })
 }
 
-const { handleSubmit, resetForm } = useForm({
+const { handleSubmit, resetForm, setFieldValue } = useForm({
   validationSchema: formSchema,
+  initialValues: {
+    cTime: 0,
+    aTime: 0,
+    sTime: 0,
+  },
 })
 
 const onSubmit = handleSubmit(async (values) => {
@@ -138,6 +153,40 @@ const onSubmit = handleSubmit(async (values) => {
           </FormItem>
         </FormField>
 
+        <div class="flex space-x-2 w-full">
+          <FormField v-for="(slot, index) in ['cTime', 'aTime', 'sTime']" :key="index" v-slot="{ value }" :name="slot">
+            <FormItem>
+              <FormLabel>{{ ['C', 'A', 'S'][index] }}时间</FormLabel>
+              <NumberField
+                class="gap-2 w-max"
+                :min="0"
+                :model-value="value"
+                :step="0.5"
+                :format-options="{
+                  minimumFractionDigits: 1,
+                }"
+                @update:model-value="(v: number) => {
+                  if (v) {
+                    setFieldValue(slot as Parameters<typeof setFieldValue>[0], v)
+                  }
+                  else {
+                    setFieldValue(slot as Parameters<typeof setFieldValue>[0], undefined)
+                  }
+                }"
+              >
+                <NumberFieldContent>
+                  <NumberFieldDecrement />
+                  <FormControl>
+                    <NumberFieldInput />
+                  </FormControl>
+                  <NumberFieldIncrement />
+                </NumberFieldContent>
+              </NumberField>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+        </div>
+
         <FormField v-slot="{ componentField }" name="text">
           <FormItem>
             <FormLabel>活动概要</FormLabel>

components/ui/number-field/NumberField.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue'
+import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<NumberFieldRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NumberFieldRoot v-bind="forwarded" :class="cn('grid gap-1.5', props.class)">
+    <slot />
+  </NumberFieldRoot>
+</template>

components/ui/number-field/NumberFieldContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)">
+    <slot />
+  </div>
+</template>

components/ui/number-field/NumberFieldDecrement.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { NumberFieldDecrementProps } from 'radix-vue'
+import { NumberFieldDecrement, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { Minus } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NumberFieldDecrement data-slot="decrement" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
+    <slot>
+      <Minus class="h-4 w-4" />
+    </slot>
+  </NumberFieldDecrement>
+</template>

components/ui/number-field/NumberFieldIncrement.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { NumberFieldIncrementProps } from 'radix-vue'
+import { NumberFieldIncrement, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { Plus } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NumberFieldIncrement data-slot="increment" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
+    <slot>
+      <Plus class="h-4 w-4" />
+    </slot>
+  </NumberFieldIncrement>
+</template>

components/ui/number-field/NumberFieldInput.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { NumberFieldInput } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <NumberFieldInput
+    data-slot="input"
+    :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+  />
+</template>

components/ui/number-field/index.ts

@@ -0,0 +1,5 @@
+export { default as NumberField } from './NumberField.vue'
+export { default as NumberFieldInput } from './NumberFieldInput.vue'
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'
+export { default as NumberFieldContent } from './NumberFieldContent.vue'

db/migrations/20241014033041_activityrecord_add_cas_time/migration.sql

@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "ActivityRecord" ADD COLUMN     "aTime" DOUBLE PRECISION NOT NULL DEFAULT 0,
+ADD COLUMN     "cTime" DOUBLE PRECISION NOT NULL DEFAULT 0,
+ADD COLUMN     "sTime" DOUBLE PRECISION NOT NULL DEFAULT 0;

db/schema.prisma

@@ -67,6 +67,9 @@ model ActivityRecord {
   clubId Int // Link to Club model
   date   DateTime // Start date of the leave
   text   String
+  cTime  Float    @default(0)
+  aTime  Float    @default(0)
+  sTime  Float    @default(0)
 
   // Relations
   club      Club             @relation(fields: [clubId], references: [id])

sentry.client.config.js

@@ -1,8 +1,9 @@
 import * as Sentry from '@sentry/nuxt'
 
 Sentry.init({
-  // There isn't any way to get the dsn from env var here
+  // eslint-disable-next-line no-undef
   environment: useRuntimeConfig().public.sentry.environment,
+  // eslint-disable-next-line no-undef
   dsn: useRuntimeConfig().public.sentry.dsn,
   // This sets the sample rate to be 10%. You may want this to be 100% while
   // in development and sample at a lower rate in production