From 289d725ad512f666bdd05e39234a71719902fd1a Mon Sep 17 00:00:00 2001
From: Ethan Chew <chew_ming_hong_ethan@s2019.ssts.edu.sg>
Date: Fri, 29 Sep 2023 16:49:39 +0800
Subject: [PATCH] feat(ui): added update event

---
 components/admin/home/create-event-popup.vue |  4 ++--
 components/admin/home/update-event-popup.vue | 19 ++++++++++++++++---
 server/api/event/[id].post.ts                |  4 ++--
 server/api/event/index.post.ts               |  4 ++--
 server/utils/handlers.ts                     |  1 +
 5 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/components/admin/home/create-event-popup.vue b/components/admin/home/create-event-popup.vue
index bc2ec61..8e55e1e 100644
--- a/components/admin/home/create-event-popup.vue
+++ b/components/admin/home/create-event-popup.vue
@@ -25,8 +25,8 @@ const mutation = useMutation({
 const newEventId = ref('')
 
 async function createEvent() {
-  event.startDateTime = new Date(event.startDateTime).getTime().toString()
-  event.endDateTime = new Date(event.endDateTime).getTime().toString()
+  event.startDateTime = (new Date(event.startDateTime).getTime()/1000).toString()
+  event.endDateTime = (new Date(event.endDateTime).getTime()/1000).toString()
   const res = await mutation.mutateAsync(event)
 
   newEventId.value = res.id
diff --git a/components/admin/home/update-event-popup.vue b/components/admin/home/update-event-popup.vue
index 0a1f6dd..2c1e40f 100644
--- a/components/admin/home/update-event-popup.vue
+++ b/components/admin/home/update-event-popup.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useMutation } from '@tanstack/vue-query'
+import { watch } from 'vue'
 import dayjs from 'dayjs'
 import { f7Block, f7BlockTitle, f7Button, f7Link, f7List, f7ListInput, f7NavRight, f7Navbar, f7Page, f7Popup } from 'framework7-vue'
 import type { EventWithAttendees } from '~/shared/types'
@@ -17,8 +18,13 @@ const updatedValues = reactive({
   endDateTime: dayjs(Number.parseInt(props.event.endDateTime) * 1000).format('YYYY-MM-DDTHH:mm'),
 })
 
-async function updateEvent() {
+watch(props, () => {
+  updatedValues.startDateTime = dayjs(Number.parseInt(props.event.startDateTime) * 1000).format('YYYY-MM-DDTHH:mm')
+  updatedValues.endDateTime = dayjs(Number.parseInt(props.event.endDateTime) * 1000).format('YYYY-MM-DDTHH:mm')
+})
 
+async function updateEvent() {
+  mutation.mutate(props.event.id)
 }
 
 const mutation = useMutation({
@@ -46,14 +52,21 @@ const mutation = useMutation({
           Some content goes here
         </f7Block>
         <f7List form @submit.prevent="updateEvent">
-          <f7ListInput :placeholer="props.event.id" label="Event ID" disabled />
+          <f7ListInput :placeholder="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.badgeImage" type="url" />
+          <f7ListInput v-model:value="updatedValues.startDateTime" label="Start Date and Time" :placeholder="props.event.startDateTime" type="datetime-local" />
+          <f7ListInput v-model:value="updatedValues.endDateTime" label="End Date and Time" :placeholder="props.event.endDateTime" type="datetime-local" />
 
           <f7List inset>
-            <f7Button v-if="!mutation.isSuccess.value" />
+            <f7Button v-if="!mutation.isSuccess.value" fill type="submit" preloader :loading="mutation.isLoading.value" :disabled="mutation.isLoading.value">
+              Update Event
+            </f7Button>
+            <f7Button v-if="mutation.isSuccess.value" fill popup-close>
+              Close
+            </f7Button>
           </f7List>
         </f7List>
       </f7Page>
diff --git a/server/api/event/[id].post.ts b/server/api/event/[id].post.ts
index 7b5314d..680380b 100644
--- a/server/api/event/[id].post.ts
+++ b/server/api/event/[id].post.ts
@@ -7,8 +7,8 @@ const updateEventRequestBody = z.object({
   description: z.string(),
   location: z.string(),
   badgeImage: z.string().url(),
-  startDateTime: z.string().datetime(),
-  endDateTime: z.string().datetime(),
+  startDateTime: z.string(),
+  endDateTime: z.string(),
 })
 
 export default defineProtectedEventHandler(async (event) => {
diff --git a/server/api/event/index.post.ts b/server/api/event/index.post.ts
index a15348a..a48732d 100644
--- a/server/api/event/index.post.ts
+++ b/server/api/event/index.post.ts
@@ -6,8 +6,8 @@ const createEventRequestBody = z.object({
   description: z.string(),
   location: z.string(),
   badgeImage: z.string().url(),
-  startDateTime: z.string().datetime(),
-  endDateTime: z.string().datetime(),
+  startDateTime: z.string(),
+  endDateTime: z.string(),
 })
 
 export default defineProtectedEventHandler(async (event) => {
diff --git a/server/utils/handlers.ts b/server/utils/handlers.ts
index 7e8f9c2..86f0f45 100644
--- a/server/utils/handlers.ts
+++ b/server/utils/handlers.ts
@@ -62,6 +62,7 @@ export function defineProtectedEventHandler<T extends EventHandlerRequest, D>(
       })
     }
 
+
     if (options.restrictTo) {
       if (!user?.memberType || !options.restrictTo.includes(user.memberType)) {
         throw createError({