From 75084de1aa3b58e5a1ec6fb9c41e287e30cbf5f6 Mon Sep 17 00:00:00 2001
From: Ethan Chew <chew_ming_hong_ethan@s2019.ssts.edu.sg>
Date: Thu, 28 Sep 2023 09:26:05 +0800
Subject: [PATCH] fix: addressed comments

---
 components/admin/event/{_slug.vue => detail.vue} |  5 +++--
 components/admin/event/event-checkedin-users.vue |  5 ++++-
 components/admin/event/event-information.vue     |  6 +++---
 components/admin/event/upload-attendees.vue      |  6 ++++--
 components/admin/home/update-event-popup.vue     | 10 +++-------
 components/app/services/page.vue                 |  8 +++++++-
 composables/event.ts                             |  4 ++++
 pages/admin/[...slug].vue                        |  4 ++--
 8 files changed, 30 insertions(+), 18 deletions(-)
 rename components/admin/event/{_slug.vue => detail.vue} (75%)

diff --git a/components/admin/event/_slug.vue b/components/admin/event/detail.vue
similarity index 75%
rename from components/admin/event/_slug.vue
rename to components/admin/event/detail.vue
index f452668..7c8d20f 100644
--- a/components/admin/event/_slug.vue
+++ b/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>
diff --git a/components/admin/event/event-checkedin-users.vue b/components/admin/event/event-checkedin-users.vue
index e5fd52d..c228d7b 100644
--- a/components/admin/event/event-checkedin-users.vue
+++ b/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>
diff --git a/components/admin/event/event-information.vue b/components/admin/event/event-information.vue
index 8d7ff4f..21266d1 100644
--- a/components/admin/event/event-information.vue
+++ b/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>
diff --git a/components/admin/event/upload-attendees.vue b/components/admin/event/upload-attendees.vue
index 0026870..12fc9ac 100644
--- a/components/admin/event/upload-attendees.vue
+++ b/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)
diff --git a/components/admin/home/update-event-popup.vue b/components/admin/home/update-event-popup.vue
index 9d83ed5..2042e4f 100644
--- a/components/admin/home/update-event-popup.vue
+++ b/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>
diff --git a/components/app/services/page.vue b/components/app/services/page.vue
index 93a635d..9975231 100644
--- a/components/app/services/page.vue
+++ b/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(() => {
diff --git a/composables/event.ts b/composables/event.ts
index 05b3879..a875fe9 100644
--- a/composables/event.ts
+++ b/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
+}
diff --git a/pages/admin/[...slug].vue b/pages/admin/[...slug].vue
index 6c6c2e4..0333d44 100644
--- a/pages/admin/[...slug].vue
+++ b/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,
   },
 ]