fix: addressed comments

components/admin/event/_slug.vue → components/admin/event/detail.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { f7NavTitle, f7Navbar, f7Page } from 'framework7-vue'
 import type { Router } from 'framework7/types'
+import { typeIsEventWithAttendees } from '~/composables/event'
 
 const props = defineProps<{
   f7route: Router.Route
@@ -28,9 +29,9 @@ const showForbidden = computed(() => {
     <template v-else>
       <AdminEventInformation :event="event" />
 
-      <AdminEventUploadAttendees :event="event" />
+      <AdminEventUploadAttendees v-if="typeIsEventWithAttendees(event)" :event="event" />
 
-      <AdminEventCheckedinUsers :event="event" />
+      <AdminEventCheckedinUsers v-if="typeIsEventWithAttendees(event)" :event="event" />
     </template>
   </f7Page>
 </template>

components/admin/event/event-checkedin-users.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { f7Card, f7CardContent, f7CardHeader, f7List, f7ListItem } from 'framework7-vue'
+import type { EventWithAttendees } from '~/shared/types'
 
-const props = defineProps(['event'])
+const props = defineProps<{
+  event: EventWithAttendees
+}>()
 </script>
 
 <template>

components/admin/event/event-information.vue

@@ -32,13 +32,13 @@ function convertEpochToSGT(epochTime: number) {
             <span class="font-bold text-3xl md:text-4xl">{{ props.event.name }}</span>
             <div>
               <div class="flex-inline shrink grow-0 p-1 px-4 border border-solid b-rounded-3">
-                {{ `0 / ${event.attendees.length} Attendees Checked-In` }}
+                {{ `0 / ${event.attendees.length}` }}
               </div>
             </div>
           </div>
           <div class="text-lg flex flex-col">
-            <span><b>{{ convertEpochToSGT(props.event.startDateTime) }}</b> to <b>{{ convertEpochToSGT(props.event.endDateTime) }}</b></span>
-            <span><b>Location:</b> {{ props.event.location }}</span>
+            <p><span class="font-bold">{{ convertEpochToSGT(props.event.startDateTime) }}</span> to <span class="font-bold">{{ convertEpochToSGT(props.event.endDateTime) }}</span></p>
+            <p><span class="font-bold">Location:</span> {{ props.event.location }}</p>
           </div>
         </div>
       </div>

components/admin/event/upload-attendees.vue

@@ -4,9 +4,11 @@ import type { ParseResult } from 'papaparse'
 import { parse } from 'papaparse'
 import { ref } from 'vue'
 import { createId } from '@paralleldrive/cuid2'
-import type { ImportedUser } from '~/shared/types'
+import type { EventWithAttendees, ImportedUser } from '~/shared/types'
 
-const props = defineProps(['event'])
+const props = defineProps<{
+  event: EventWithAttendees
+}>()
 
 let uploadedAttendees: ImportedUser[]
 const pending = ref(false)

components/admin/home/update-event-popup.vue

@@ -29,9 +29,8 @@ const updatedValues = reactive({
 //   msg: '',
 // })
 
-// async function updateEvent() {
-
-// }
+async function updateEvent() {
+}
 </script>
 
 <template>
@@ -51,15 +50,12 @@ const updatedValues = reactive({
         <f7Block>
           Some content goes here
         </f7Block>
-        <f7List form>
+        <f7List form @submit.prevent="updateEvent">
           <f7ListInput :placeholer="props.event.id" label="Event ID" disabled />
           <f7ListInput v-model:value="updatedValues.name" label="Event Name" :placeholder="props.event.name" />
           <f7ListInput v-model:value="updatedValues.description" label="Event Description" :placeholder="props.event.description" />
           <f7ListInput v-model:value="updatedValues.location" label="Event Location" :placeholder="props.event.location" />
           <f7ListInput v-model:value="updatedValues.badgeImage" label="Image URL" :placeholder="props.event.url" type="url" />
-          <f7ListInput v-model:value="updatedValues.startDateTime" label="Start Date and Time" :placeholder="epochToISO(props.event.startDateTime)" type="datetime-local" />
-          <f7ListInput v-model:value="updatedValues.endDateTime" label="End Date and Time" :placeholder="epochToISO(props.event.endDateTime)" type="datetime-local" />
-
           <f7List inset>
             <!-- <f7ListInput></f7ListInput> -->
           </f7List>

components/app/services/page.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { FetchError } from 'ofetch'
 import { f7, f7Block, f7BlockTitle, f7Button, f7Icon, f7List, f7ListButton, f7ListInput, f7ListItem, f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page, f7PageContent, f7Sheet } from 'framework7-vue'
+import type { EventWithAttendees } from '~/shared/types'
+import { typeIsEventWithAttendees } from '~/composables/event'
 
 const sstaarsStore = useSstaarsStore()
 
@@ -16,7 +18,11 @@ async function click() {
 
   state.pending = true
   try {
-    const data = await $api(`/api/event/${state.eventId}`)
+    const data: EventWithAttendees | unknown = await $api(`/api/event/${state.eventId}`)
+
+    if (!typeIsEventWithAttendees(data))
+      return
+
     sstaarsStore.value.previousEvents[data.id] = data.name
     state.sheetOpened = false
     await nextTick(() => {

composables/event.ts

@@ -27,3 +27,7 @@ export function useEvent(id: MaybeRef<string>) {
     },
   })
 }
+
+export function typeIsEventWithAttendees(obj: EventWithAttendees | unknown): obj is EventWithAttendees {
+  return obj !== undefined
+}

pages/admin/[...slug].vue

@@ -11,7 +11,7 @@ import Framework7Vue from 'framework7-vue/bundle'
 import { f7App, f7View } from 'framework7-vue'
 
 import { useIsCurrentUserLoaded } from 'vuefire'
-import { AdminEventSlug, AdminHomePage, AdminMembersPage } from '#components'
+import { AdminEventDetail, AdminHomePage, AdminMembersPage } from '#components'
 
 Framework7.use(Framework7Vue)
 
@@ -29,7 +29,7 @@ const appRoutes = [
   {
     name: 'event-details',
     path: '/admin/event/:id',
-    component: AdminEventSlug,
+    component: AdminEventDetail,
   },
 ]