feat: basic event view

components/admin/event/page.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { f7Pagea } from 'framework7-vue'
+</script>
+
+<template>
+  <f7Page>
+    event
+  </f7Page>
+</template>

components/admin/home/events-table.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+
+const { data: events } = useEvents()
+</script>
+
+<template>
+  <div class="data-table data-table-init card">
+    <table>
+      <thead>
+        <tr>
+          <th class="label-cell">
+            Name
+          </th>
+          <th class="label-cell">
+            Start date
+          </th>
+          <th class="label-cell">
+            End date
+          </th>
+          <th class="numeric-label">
+            Participants
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="event in events" :key="event.id">
+          <td class="label-cell">
+            {{ event.name }}
+          </td>
+          <td class="label-cell">
+            {{ dayjs(event.startDateTime).format('DD-MM-YYYY hh:mm') }}
+          </td>
+          <td class="label-cell">
+            {{ dayjs(event.endDateTime).format('DD-MM-YYYY hh:mm') }}
+          </td>
+          <td class="numeric-cell">
+            {{ event.attendees.length }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

components/admin/home/page.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { f7, f7BlockTitle, f7Link, f7List, f7ListItem, f7NavLeft, f7NavRight, f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page, f7Searchbar, f7SkeletonBlock, f7SkeletonText } from 'framework7-vue'
+import { f7Block, f7BlockTitle, f7Link, f7Navbar, f7Page, f7Tab, f7Tabs, f7Toolbar } from 'framework7-vue'
 import type { Router } from 'framework7/types'
 import { useIsCurrentUserLoaded } from 'vuefire'
 
@@ -33,10 +33,44 @@ const showForbidden = computed(() => {
 
     <LazyAdminHomeForbidden v-if="showForbidden" />
 
-    <f7List v-else inset class="space-y-8">
-      <f7BlockTitle>
-        Events
-      </f7BlockTitle>
-    </f7List>
+    <f7Toolbar v-else position="bottom" tabbar icons>
+      <f7Link
+        tab-link="#events"
+        tab-link-active
+        text="Events"
+        icon-md="material:today"
+      />
+      <f7Link
+        tab-link="#members"
+        text="Members"
+        icon-md="material:account_circle"
+      />
+      <f7-link
+        tab-link="#settings"
+        text="Settings"
+        icon-md="material:settings"
+      />
+    </f7Toolbar>
+
+    <f7Tabs>
+      <f7Tab id="events" tab-active>
+        <f7BlockTitle large>
+          Events
+        </f7BlockTitle>
+        <AdminHomeEventsTable />
+      </f7Tab>
+
+      <f7Tab id="members">
+        <f7BlockTitle large>
+          Members
+        </f7BlockTitle>
+      </f7Tab>
+
+      <f7Tab id="settings">
+        <f7BlockTitle large>
+          Settings
+        </f7BlockTitle>
+      </f7Tab>
+    </f7Tabs>
   </f7Page>
 </template>

composables/event.ts

@@ -0,0 +1,29 @@
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import type { EventWithAttendees } from '~/shared/types'
+
+const queryKeyFactory = {
+  events: ['events'],
+  event: (id: string) => ['events', id],
+}
+
+export function useEvents() {
+  const firebaseCurrentUser = useCurrentUser()
+  return useQuery({
+    queryKey: queryKeyFactory.events,
+    queryFn: () => $api<EventWithAttendees[]>('/api/event'),
+    enabled: computed(() => !!firebaseCurrentUser.value), // Only run when user exists
+  })
+}
+
+export function useEvent(id: string) {
+  const firebaseCurrentUser = useCurrentUser()
+  const queryClient = useQueryClient()
+  return useQuery({
+    queryKey: queryKeyFactory.events,
+    queryFn: () => $api<EventWithAttendees>('/api/event'),
+    enabled: computed(() => !!firebaseCurrentUser.value), // Only run when user exists
+    placeholderData() {
+      return queryClient.getQueryData<EventWithAttendees[]>(queryKeyFactory.events)?.find(event => event.id === id)
+    },
+  })
+}

server/api/event/[id].delete.ts

@@ -0,0 +1,18 @@
+import dayjs from 'dayjs'
+
+export default defineProtectedEventHandler(event => ({
+  id: event.context.params!.id,
+  name: 'SST Homecoming 2024',
+  description: 'SST Homecoming 2024',
+  location: 'SST',
+  badgeImage: 'https://www.sst.edu.sg/images/default-source/album/2019-2020/2020-01-24-homecoming/20200124_182000.jpg?sfvrsn=2',
+  startDateTime: dayjs(Date.now()).valueOf(),
+  endDateTime: dayjs(Date.now()).valueOf(),
+  attendees: [
+    {
+      id: '123',
+      name: 'Qin Guan',
+      admissionKey: '123',
+    },
+  ],
+}))

server/api/event/[id].post.ts

@@ -0,0 +1,18 @@
+import dayjs from 'dayjs'
+
+export default defineProtectedEventHandler(event => ({
+  id: event.context.params!.id,
+  name: 'SST Homecoming 2024',
+  description: 'SST Homecoming 2024',
+  location: 'SST',
+  badgeImage: 'https://www.sst.edu.sg/images/default-source/album/2019-2020/2020-01-24-homecoming/20200124_182000.jpg?sfvrsn=2',
+  startDateTime: dayjs(Date.now()).valueOf(),
+  endDateTime: dayjs(Date.now()).valueOf(),
+  attendees: [
+    {
+      id: '123',
+      name: 'Qin Guan',
+      admissionKey: '123',
+    },
+  ],
+}))

server/api/event/index.get.ts

@@ -0,0 +1,18 @@
+import dayjs from 'dayjs'
+
+export default defineProtectedEventHandler(event => [{
+  id: event.context.params!.id,
+  name: 'SST Homecoming 2024',
+  description: 'SST Homecoming 2024',
+  location: 'SST',
+  badgeImage: 'https://www.sst.edu.sg/images/default-source/album/2019-2020/2020-01-24-homecoming/20200124_182000.jpg?sfvrsn=2',
+  startDateTime: dayjs(Date.now()).valueOf(),
+  endDateTime: dayjs(Date.now()).valueOf(),
+  attendees: [
+    {
+      id: '123',
+      name: 'Qin Guan',
+      admissionKey: '123',
+    },
+  ],
+}])

shared/types.ts

@@ -1,4 +1,9 @@
 import type { InferSelectModel } from 'drizzle-orm'
-import type { users } from '~/server/db/schema'
+import type { events, users } from '~/server/db/schema'
 
 export type User = InferSelectModel<typeof users>
+export type UserRestricted = Pick<User, 'id' | 'name'>
+export type UserRestrictedWithAdmissionKey = UserRestricted & { admissionKey: string }
+
+export type Event = InferSelectModel<typeof events>
+export type EventWithAttendees = Event & { attendees: UserRestrictedWithAdmissionKey[] }