wip: sstaars

components/app/services/event/page.vue

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

components/app/services/page.vue

@@ -1,5 +1,40 @@
 <script setup lang="ts">
-import { f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page } from 'framework7-vue'
+import { FetchError } from 'ofetch'
+import { f7, f7Block, f7BlockTitle, f7Button, f7Card, f7CardContent, f7CardFooter, f7CardHeader, f7Icon, f7List, f7ListButton, f7ListGroup, f7ListInput, f7ListItem, f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page, f7PageContent, f7Sheet, f7SwipeoutButton } from 'framework7-vue'
+
+const sstaarsStore = useSstaarsStore()
+
+const state = reactive({
+  sheetOpened: false,
+  eventId: '',
+  pending: false,
+})
+
+async function click() {
+  if (state.eventId.length === 0)
+    return
+
+  state.pending = true
+  try {
+    const data = await $api(`/api/event/${state.eventId}`)
+    sstaarsStore.value.previousEvents[data.id] = data.name
+    state.sheetOpened = false
+    await nextTick(() => {
+      f7.views.current.router.navigate(`/app/services/event/${data.id}`, { openIn: 'sheet' })
+    })
+  }
+  catch (err) {
+    if (err instanceof FetchError) {
+      f7.toast.show({
+        text: err.statusMessage,
+        closeTimeout: 5000,
+      })
+    }
+  }
+  finally {
+    state.pending = false
+  }
+}
 </script>
 
 <template>
@@ -12,5 +47,66 @@ import { f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page } from 'framework7-vue'
         Alumni Services
       </f7NavTitleLarge>
     </f7Navbar>
+
+    <f7List strong inset>
+      <f7ListItem class="font-semibold">
+        SSTAA Registration System (SSTAARS)
+      </f7ListItem>
+      <f7ListItem>
+        Helping out with an SSTAA event? Access the Event Registration System here.
+      </f7ListItem>
+      <f7ListButton link="/halp" class="custom-card" @click="state.sheetOpened = true">
+        <span>
+          Open
+        </span>
+        <f7Icon material="chevron_right" />
+      </f7ListButton>
+    </f7List>
+
+    <f7Sheet v-model:opened="state.sheetOpened" style="height: auto" swipe-to-close backdrop push>
+      <f7PageContent>
+        <f7BlockTitle large>
+          SSTAARS
+        </f7BlockTitle>
+        <f7Block>
+          <p>
+            SSTAARS is intended for volunteers helping with SST Alumni Association Event Registration.
+          </p>
+          <p>
+            You will need to have an access code to access SSTAARS.
+          </p>
+          <p>
+            Please reach out to your SSTAA contact if they did not provide you with an access code.
+          </p>
+        </f7Block>
+
+        <f7List>
+          <f7ListInput v-model:value="state.eventId" placeholder="Access code" />
+          <div class="m-4">
+            <f7Button large fill preloader :loading="state.pending" @click="click">
+              Continue
+            </f7Button>
+          </div>
+        </f7List>
+
+        <f7BlockTitle>
+          My events
+        </f7BlockTitle>
+        <f7List inset strong>
+          <span v-if="Object.keys(sstaarsStore.previousEvents).length === 0" class="opacity-80">
+            No previous events.
+          </span>
+          <f7ListItem v-for="name, id in sstaarsStore.previousEvents" :key="id" :title="name" :link="`/app/services/event/${id}`" />
+        </f7List>
+      </f7PageContent>
+    </f7Sheet>
   </f7Page>
 </template>
+
+<style scoped>
+:deep(.custom-card > .list-button) {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+}
+</style>

composables/event.ts

@@ -15,12 +15,12 @@ export function useEvents() {
   })
 }
 
-export function useEvent(id: string) {
+export function useEvent(id: MaybeRef<string>) {
   const firebaseCurrentUser = useCurrentUser()
   const queryClient = useQueryClient()
   return useQuery({
     queryKey: queryKeyFactory.events,
-    queryFn: () => $api<EventWithAttendees>('/api/event'),
+    queryFn: () => $api<EventWithAttendees>(`/api/event/${toValue(id)}`),
     enabled: computed(() => !!firebaseCurrentUser.value), // Only run when user exists
     placeholderData() {
       return queryClient.getQueryData<EventWithAttendees[]>(queryKeyFactory.events)?.find(event => event.id === id)

composables/sstaars.ts

@@ -0,0 +1,5 @@
+import { useStorage } from '@vueuse/core'
+
+export const useSstaarsStore = createGlobalState(() => {
+  return useStorage('sstaars:data', { previousEvents: {} as Record<string, string> })
+})

pages/app/[...slug].vue

@@ -11,7 +11,7 @@ import Framework7Vue from 'framework7-vue/bundle'
 import { f7App, f7Link, f7Toolbar, f7View, f7Views } from 'framework7-vue'
 
 import { useIsCurrentUserLoaded } from 'vuefire'
-import { AppHomePage } from '#components'
+import { AppHomePage, AppServicesEventPage } from '#components'
 
 Framework7.use(Framework7Vue)
 
@@ -21,6 +21,10 @@ const appRoutes = [
     path: '/app',
     component: AppHomePage,
   },
+  {
+    path: '/app/services/event/:id',
+    component: AppServicesEventPage,
+  },
 ]
 
 const dark = useDark()

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

@@ -22,8 +22,8 @@ export default defineProtectedEventHandler(async (event) => {
 
   if (!result) {
     throw createError({
-      statusCode: 400,
-      statusMessage: 'Bad request',
+      statusCode: 404,
+      statusMessage: 'Not found',
     })
   }
 
@@ -36,4 +36,8 @@ export default defineProtectedEventHandler(async (event) => {
       admissionKey,
     })),
   }
+}, {
+  cache: {
+    maxAge: 10,
+  },
 })