fix: filter query (staffs)

Author: jiyuujin

apps/web/app/components/TeamPageSection.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
 import { team as teamData, volunteers } from '~/utils/constants'
-// import type { StaffInfo } from '@vuejs-jp/model'
-// import { useFetch, useRuntimeConfig } from '#imports'
+import type { StaffCategory, StaffInfo } from '@vuejs-jp/model'
+import { useRuntimeConfig } from '#imports'
 
-// type Staffs = Record<'allStaffs', StaffInfo>
+type Staffs = Record<StaffCategory, StaffInfo>
 
-// const config = useRuntimeConfig()
+const props = defineProps<{
+  data: Staffs
+}>()
 
-// const { data, error } = await useFetch('/api/staffs')
-// if (error.value) {
-//   console.error(error.value)
-// }
-// const { allStaffs } = data.value as Staffs
-// const team = config.public.staffDatasource === 'supabase' ? allStaffs.list : teamData
-const team = teamData
+const config = useRuntimeConfig()
+
+const coreTeam = config.public.staffDatasource === 'supabase' ? props.data.coreStaffs.list : teamData
+const volunteerTeam = config.public.staffDatasource === 'supabase'
+  ? props.data.volunteerStaffs.list.map((staff) => staff.name)
+  : volunteers
+// const team = teamData
 </script>
 
 <template>
@@ -28,7 +30,7 @@ const team = teamData
       </div>
 
       <div class="team-members-container">
-        <div v-for="member in team" :key="member.name" class="team-member-wrapper">
+        <div v-for="member in coreTeam" :key="member.name" class="team-member-wrapper">
           <template v-if="member.x_id !== ''">
             <a :href="`https://x.com/${member.x_id}`" target="_blank" :aria-label="member.name">
               <VFAvatar :src="member.image_url" :alt="member.name" />
@@ -39,7 +41,8 @@ const team = teamData
                 target="_blank"
                 :href="`https://x.com/${member.x_id}`"
                 color="vue-blue"
-                >{{ member.name }}
+              >
+                {{ member.x_id ?? member.github_id }}
               </VFTextLink>
             </div>
           </template>
@@ -59,7 +62,7 @@ const team = teamData
       </VFTitle>
 
       <div class="volunteer-members-container">
-        <VFCreditList :list="volunteers" />
+        <VFCreditList :list="volunteerTeam" />
       </div>
     </article>
   </section>

apps/web/app/pages/index.vue

@@ -21,11 +21,16 @@ const { data: sponsors, error: error2, refresh: refreshSponsor } = await useFetc
 if (error2.value) {
   console.error(error2.value)
 }
+const { data: staffs, error: error3, refresh: refreshStaff } = await useFetch('/api/staffs')
+if (error3.value) {
+  console.error(error3.value)
+}
 
 onMounted(function () {
   window.addEventListener('popstate', async function (event) {
     await refreshSpeaker()
     await refreshSponsor()
+    await refreshStaff()
     await reloadNuxtApp()
   })
 })
@@ -52,5 +57,5 @@ useHead({
   <SponsorPageSection :data="sponsors" />
   <CooperationPartnerSection />
   <FormPageSection />
-  <TeamPageSection />
+  <TeamPageSection :data="staffs" />
 </template>

apps/web/app/server/api/staffs.get.ts

@@ -18,13 +18,22 @@ export default defineEventHandler(async (event) => {
         if (process.env.NODE_ENV === 'production') return staff.is_open === true && staff.is_volunteer === false
         return staff.is_volunteer === false
       })
+      .filter(staff => staff.display_order !== null)
       .sort((a: Staff, b: Staff) => {
-        if (a.display_order) return -1
-        if (b.display_order) return 1
-        if (!a.display_order) return a.name < b.name ? -1 : 1
-        if (!b.display_order) return a.name < b.name ? -1 : 1
-        return a.display_order - b.display_order
-      }),
+        if (b.display_order && a.display_order) return a.display_order - b.display_order
+        return 1
+      })
+      .concat(
+        staffs
+          .filter((staff: Staff) => {
+            if (process.env.NODE_ENV === 'production') return staff.is_open === true && staff.is_volunteer === false
+            return staff.is_volunteer === false
+          })
+          .filter(staff => staff.display_order === null)
+          .sort((a: Staff, b: Staff) => {
+            return a.created_at < b.created_at ? -1 : 1
+          }),
+        ),
   }
 
   const volunteerStaffs: StaffInfo = {
@@ -36,11 +45,7 @@ export default defineEventHandler(async (event) => {
         return staff.is_volunteer === true
       })
       .sort((a: Staff, b: Staff) => {
-        if (a.display_order) return -1
-        if (b.display_order) return 1
-        if (!a.display_order) return a.name < b.name ? -1 : 1
-        if (!b.display_order) return a.name < b.name ? -1 : 1
-        return a.display_order - b.display_order
+        return a.created_at < b.created_at ? -1 : 1
       }),
   }
 

apps/web/app/utils/constants.ts

@@ -1,3 +1,5 @@
+import type { TeamData } from '@vuejs-jp/model'
+
 export const conferenceTitle = 'Vue Fes Japan 2024'
 
 export const ogDescription =
@@ -82,7 +84,7 @@ export const personalSponsors = [
   'Haruki Tetone',
 ]
 
-export const team = [
+export const team: TeamData[] = [
   {
     name: 'kazu_pon',
     image_url: 'team/kazu_pon.jpg',

packages/model/lib/staff.ts

@@ -2,20 +2,23 @@ export type StaffCategory =
   | 'coreStaffs'
   | 'volunteerStaffs'
 
-export type Staff = {
+export type Staff = TeamData & {
   id?: string
-  name: string
   detail_page_id: string
-  image_url: string
-  x_id?: string
-  github_id?: string
   is_open: boolean
   display_order?: number
   is_volunteer: boolean
   created_at: string
   updated_at: string
 }
 
+export type TeamData = {
+  name: string
+  image_url: string
+  x_id?: string
+  github_id?: string
+}
+
 export type StaffInfo = {
   type: 'core-staff' | 'volunteer-staff'
   title: string