feat(ActivityRecord): Checkbox, Counter, DataTable sort as descending date and minor fixes (#697)

* feat(ActivityRecord): replace Multiselect with Checkbox with word and mamber counter

* feat(ActivityRecord): add refresh watcher to CustomCASRecordViewMyActivityRecords component

* docs(changesets): update

* feat(DataTable): sort by date descending order & add page size

* docs(changesets): update

Author: at-wr

.changeset/afraid-apricots-wash.md

@@ -0,0 +1,5 @@
+---
+"enspire": minor
+---
+
+Add Word Counter and Member Counter

.changeset/chatty-yaks-begin.md

@@ -0,0 +1,5 @@
+---
+"enspire": patch
+---
+
+Sort by date descending order & add page size in DataTable

.changeset/clean-pets-fail.md

@@ -0,0 +1,5 @@
+---
+"enspire": patch
+---
+
+Add refresh watcher to CustomCASRecordViewMyActivityRecords component

.changeset/strong-beans-explode.md

@@ -0,0 +1,5 @@
+---
+"enspire": minor
+---
+
+Replace Multiselect with Checkbox on NewActivityRecord

app/components/custom/CAS/Record/NewActivityRecord.vue

@@ -3,7 +3,7 @@ import type { AllClubs } from '@@/types/api/user/all_clubs'
 import { Button } from '@/components/ui/button'
 import { Calendar } from '@/components/ui/calendar'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Multiselect } from '@/components/ui/multiselect'
+import { Checkbox } from '@/components/ui/checkbox'
 import {
   NumberField,
   NumberFieldContent,
@@ -39,12 +39,12 @@ const formSchema = toTypedSchema(z.object({
   club: z.string(),
   date: z
     .string()
-    .refine(v => v, { message: 'A date of birth is required.' }),
-  text: z.string().min(10).max(300),
+    .refine(v => v, { message: '日期为必填项' }),
+  text: z.string().min(10, "字数不得少于 10 字符").max(300, "字数不得大于 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),
+  cTime: z.number().min(0).max(5, "时长不得大于 5 小时"),
+  aTime: z.number().min(0).max(5, "时长不得大于 5 小时"),
+  sTime: z.number().min(0).max(5, "时长不得大于 5 小时"),
 }))
 
 const { data, suspense } = useQuery<AllClubs>({
@@ -68,6 +68,17 @@ const { handleSubmit, resetForm, setFieldValue, values } = useForm({
   },
 })
 
+const selectedMembers = ref<string[]>([])
+
+const handleCheckboxChange = (memberId: string, checked: boolean) => {
+  if (checked) {
+    selectedMembers.value.push(memberId)
+  } else {
+    selectedMembers.value = selectedMembers.value.filter(id => id !== memberId)
+  }
+  setFieldValue('members', selectedMembers.value)
+}
+
 const calendarPlaceholder = ref()
 const calendarValue = computed({
   get: () => values.date ? parseDate(values.date) : undefined,
@@ -148,7 +159,7 @@ const onSubmit = handleSubmit(async (values) => {
                       !calendarValue && 'text-muted-foreground',
                     )"
                   >
-                    <span>{{ calendarValue ? df.format(toDate(calendarValue)) : "Pick a date" }}</span>
+                    <span>{{ calendarValue ? df.format(toDate(calendarValue)) : "请选择日期..." }}</span>
                     <CalendarIcon class="ms-auto h-4 w-4 opacity-50" />
                   </Button>
                   <input hidden>
@@ -212,13 +223,16 @@ const onSubmit = handleSubmit(async (values) => {
           </FormField>
         </div>
 
-        <FormField v-slot="{ componentField }" name="text">
+        <FormField v-slot="{ componentField, value }" name="text">
           <FormItem>
-            <FormLabel>活动概要</FormLabel>
+            <div class="flex items-center justify-between">
+              <FormLabel>活动概要</FormLabel>
+              <span class="text-sm text-muted-foreground">{{ value?.length || 0 }}/300</span>
+            </div>
             <FormControl>
               <Textarea
                 class="resize-none"
-                placeholder="详细记录，最多一百字..."
+                placeholder="详细记录，最多三百字..."
                 v-bind="componentField"
                 :disabled="isLoading"
               />
@@ -229,24 +243,30 @@ const onSubmit = handleSubmit(async (values) => {
 
         <FormField v-slot="{ componentField }" name="members">
           <FormItem>
-            <FormLabel>参与者</FormLabel>
+            <div class="flex items-center justify-between">
+              <FormLabel>参与者 <span class="text-sm text-muted-foreground">({{ selectedMembers.length }}/{{ (([...data.president, ...data.vice].find(club => club.id === Number(selectedClub))?.memberships) ?? []).length }})</span></FormLabel>
+            </div>
             <FormControl>
-              <Multiselect
-                v-if="data"
-                :options="((
-                  [...data.president, ...data.vice].find(
-                    (club) => club.id === Number(selectedClub),
-                  )
-                )?.memberships)?.map((membership) => ({
-                  label: membership.name,
-                  value: membership.id,
-                })) ?? []"
-                placeholder="Select options"
-                variant="inverted"
-                v-bind="componentField"
-                :animation="2"
-                :max-count="3"
-              />
+              <div class="flex flex-wrap gap-x-2 gap-y-2">
+                <div 
+                  v-for="member in (
+                    [...data.president, ...data.vice].find(
+                      club => club.id === Number(selectedClub)
+                    )?.memberships
+                  ) ?? []"
+                  :key="member.id"
+                  class="flex items-center space-x-1"
+                >
+                  <Checkbox 
+                    :id="member.id"
+                    :value="member.id"
+                    :checked="selectedMembers.includes(member.id)"
+                    @update:checked="(checked) => handleCheckboxChange(member.id, checked)"
+                    class="w-3.5 h-3.5"
+                  />
+                  <Label :for="member.id">{{ member.name }}</Label>
+                </div>
+              </div>
             </FormControl>
             <FormMessage />
           </FormItem>
@@ -260,4 +280,4 @@ const onSubmit = handleSubmit(async (values) => {
     </CardContent>
   </Card>
   <Toaster />
-</template>
+</template>

app/components/custom/CAS/Record/view-activity-records/DataTable.vue

@@ -35,7 +35,12 @@ type ActivityRecordtWithClubInfo = ActivityRecord & {
 }
 
 const isDialogOpen = ref(false)
-const sorting = ref<SortingState>([])
+const sorting = ref<SortingState>([
+  {
+    id: 'date', // Match this with your date column's accessorKey
+    desc: true // true for descending order (newest first)
+  }
+])
 const columnFilters = ref<ColumnFiltersState>([])
 const currentRequestInDialog = ref<ActivityRecordtWithClubInfo>()
 
@@ -52,12 +57,15 @@ const table = useVueTable({
     get sorting() { return sorting.value },
     get columnFilters() { return columnFilters.value },
   },
+  initialState: {
+    sorting: sorting.value
+  }
 })
 
 const isLoading = ref(false)
 const deleteDialogOpen = ref(false)
 
-table.setPageSize(5)
+table.setPageSize(20)
 
 async function submitDeletion(id: string) {
   isLoading.value = true

app/pages/activity/view.vue

@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
+import CustomCASRecordViewMyActivityRecords from '@/components/custom/CAS/Record/ViewMyActivityRecords.vue'
+
 definePageMeta({
   middleware: ['auth'],
   breadcrumb: '浏览',
@@ -7,11 +10,11 @@ definePageMeta({
 useHead({
   title: 'Activities | Enspire',
 })
-</script>
+</script> 
 
 <template>
   <Suspense>
-    <CustomCASRecordViewMyActivityRecords />
+    <CustomCASRecordViewMyActivityRecords :refreshWatcher="ref(false)" />
     <template #fallback>
       <Card class="w-full">
         <CardHeader>