From b5f6dd4572166d7f50638536547e335ec59007c6 Mon Sep 17 00:00:00 2001
From: Alan Ye <git@wrye.dev>
Date: Sat, 22 Feb 2025 16:09:33 +0800
Subject: [PATCH 1/5] feat(ActivityRecord): replace Multiselect with Checkbox
 with word and mamber counter

---
 .../custom/CAS/Record/NewActivityRecord.vue   | 76 ++++++++++++-------
 1 file changed, 48 insertions(+), 28 deletions(-)

diff --git a/app/components/custom/CAS/Record/NewActivityRecord.vue b/app/components/custom/CAS/Record/NewActivityRecord.vue
index bc87ad26..543b1a19 100644
--- a/app/components/custom/CAS/Record/NewActivityRecord.vue
+++ b/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>
\ No newline at end of file

From d0299605dd305f6b9c9f2bb5f042354aa9552fd2 Mon Sep 17 00:00:00 2001
From: Alan Ye <git@wrye.dev>
Date: Sat, 22 Feb 2025 16:09:55 +0800
Subject: [PATCH 2/5] feat(ActivityRecord): add refresh watcher to
 CustomCASRecordViewMyActivityRecords component

---
 app/pages/activity/view.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/pages/activity/view.vue b/app/pages/activity/view.vue
index 479738ce..8382af44 100644
--- a/app/pages/activity/view.vue
+++ b/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>

From dd0ea2fe604eefe6dcc294482276fe62fd562954 Mon Sep 17 00:00:00 2001
From: Alan Ye <git@wrye.dev>
Date: Sat, 22 Feb 2025 16:21:41 +0800
Subject: [PATCH 3/5] docs(changesets): update

---
 .changeset/afraid-apricots-wash.md | 5 +++++
 .changeset/clean-pets-fail.md      | 5 +++++
 .changeset/strong-beans-explode.md | 5 +++++
 3 files changed, 15 insertions(+)
 create mode 100644 .changeset/afraid-apricots-wash.md
 create mode 100644 .changeset/clean-pets-fail.md
 create mode 100644 .changeset/strong-beans-explode.md

diff --git a/.changeset/afraid-apricots-wash.md b/.changeset/afraid-apricots-wash.md
new file mode 100644
index 00000000..9c54406b
--- /dev/null
+++ b/.changeset/afraid-apricots-wash.md
@@ -0,0 +1,5 @@
+---
+"enspire": minor
+---
+
+Add Word Counter and Member Counter
diff --git a/.changeset/clean-pets-fail.md b/.changeset/clean-pets-fail.md
new file mode 100644
index 00000000..65c96bb3
--- /dev/null
+++ b/.changeset/clean-pets-fail.md
@@ -0,0 +1,5 @@
+---
+"enspire": patch
+---
+
+Add refresh watcher to CustomCASRecordViewMyActivityRecords component
diff --git a/.changeset/strong-beans-explode.md b/.changeset/strong-beans-explode.md
new file mode 100644
index 00000000..442a93ca
--- /dev/null
+++ b/.changeset/strong-beans-explode.md
@@ -0,0 +1,5 @@
+---
+"enspire": minor
+---
+
+Replace Multiselect with Checkbox on NewActivityRecord

From 59de3b7b12ee9b87e0b5e065d047f5afd5737ec1 Mon Sep 17 00:00:00 2001
From: Alan Ye <git@wrye.dev>
Date: Sat, 22 Feb 2025 16:53:08 +0800
Subject: [PATCH 4/5] feat(DataTable): sort by date descending order & add page
 size

---
 .../CAS/Record/view-activity-records/DataTable.vue   | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/components/custom/CAS/Record/view-activity-records/DataTable.vue b/app/components/custom/CAS/Record/view-activity-records/DataTable.vue
index a4db1c97..a88c27ef 100644
--- a/app/components/custom/CAS/Record/view-activity-records/DataTable.vue
+++ b/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

From 016f480eb3adc7c07092fa22fb9636de6a282c7d Mon Sep 17 00:00:00 2001
From: Alan Ye <git@wrye.dev>
Date: Sat, 22 Feb 2025 16:54:12 +0800
Subject: [PATCH 5/5] docs(changesets): update

---
 .changeset/chatty-yaks-begin.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/chatty-yaks-begin.md

diff --git a/.changeset/chatty-yaks-begin.md b/.changeset/chatty-yaks-begin.md
new file mode 100644
index 00000000..c23f5a64
--- /dev/null
+++ b/.changeset/chatty-yaks-begin.md
@@ -0,0 +1,5 @@
+---
+"enspire": patch
+---
+
+Sort by date descending order & add page size in DataTable