feat(admin): events management

app.config.ts

@@ -2,5 +2,8 @@ export default defineAppConfig({
   ui: {
     gray: 'stone',
     primary: 'red',
+    notifications: {
+      position: 'bottom-0 left-0',
+    },
   },
 })

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { EventWithAttendees } from '~/shared/types'
+
+const props = defineProps<{
+  event: EventWithAttendees
+}>()
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <span class="font-semibold text-2xl">Attendees</span>
+    </template>
+    <div v-for="attendee in props.event.attendees" v-if="props.event.attendees.length > 0" :key="attendee.id">
+      <div class="mb-3">
+        <p class="font-bold text-xl">
+          {{ attendee.name }}
+        </p>
+        <p><span class="font-semibold">ID: </span>{{ attendee.id }}</p>
+        <hr class="my-2">
+      </div>
+    </div>
+    <div v-if="props.event.attendees.length === 0" class="flex justify-center align-items-center">
+      <div class="text-center">
+        <UIcon class="text-5xl" name="i-heroicons-face-frown" />
+        <p class="font-bold text-xl">
+          No attendees yet!
+        </p>
+        <p>Upload attendees using a .csv file first!</p>
+      </div>
+    </div>
+  </UCard>
+</template>

components/admin/event/event-information.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import type { EventWithAttendees } from '~/shared/types'
+
+const props = defineProps<{
+  event: EventWithAttendees
+}>()
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <div class="relative">
+        <img :src="props.event.badgeImage" class="object-cover w-full max-h-60 object-top rounded-xl">
+        <div class="p-10 absolute z-10 inset-0 flex flex-col bg-gray-800/[0.3] space-y-6 backdrop-blur-sm rounded-xl">
+          <div class="space-y-3 flex flex-col">
+            <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 rounded-lg">
+                {{ `0 / ${event.attendees.length}` }}
+              </div>
+            </div>
+          </div>
+          <div class="text-lg flex flex-col">
+            <span><span class="font-bold">{{ `${dayjs(parseInt(event.startDateTime) * 1000).format("D MMM YYYY")} | ${dayjs(parseInt(event.startDateTime) * 1000).format("H:mm")}` }}</span> to <span class="font-bold">{{ `${dayjs(parseInt(event.endDateTime) * 1000).format("D MMM YYYY")} | ${dayjs(parseInt(event.endDateTime) * 1000).format("H:mm")}` }}</span></span>
+            <span><span class="font-bold">Location:</span> {{ props.event.location }}</span>
+          </div>
+        </div>
+      </div>
+    </template>
+    <div class="">
+      <span class="text-xl font-bold">Description</span>
+      <p class="text-md mt-2">
+        {{ props.event.description }}
+      </p>
+    </div>
+  </UCard>
+</template>

components/admin/event/upload-attendees.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import type { ParseResult } from 'papaparse'
+import { parse } from 'papaparse'
+import { ref } from 'vue'
+import { createId } from '@paralleldrive/cuid2'
+import type { EventWithAttendees, User } from '~/shared/types'
+import { useQueryClient } from '@tanstack/vue-query'
+
+const props = defineProps<{
+  event: EventWithAttendees
+}>()
+const queryClient = useQueryClient()
+
+let uploadedAttendees: Omit<User, 'firebaseId' | 'id'>[]
+const pending = ref(false)
+const isUploaded = ref(false)
+const error = ref({
+  didError: false,
+  msg: '',
+})
+const file = ref<File | undefined>(undefined)
+
+// Check for Type
+function isFile(file: File | undefined): file is File {
+  return file instanceof File
+}
+
+function handleFileUpload(e: Event) {
+  pending.value = true
+  file.value = (e.target as HTMLInputElement).files?.[0]
+
+  // Parse the CSV File
+  if (isFile(file.value)) {
+    parse(file.value, {
+      skipEmptyLines: true,
+      header: true,
+      complete(results: ParseResult<Omit<User, 'firebaseId' | 'id'>>) {
+        uploadedAttendees = results.data
+
+        if (JSON.stringify(results.meta.fields?.sort()) !== JSON.stringify(['name', 'email', 'memberType', 'graduationYear'].sort())) {
+          error.value.didError = true
+          error.value.msg = 'CSV has missing fields! Please check the file and reupload it.'
+          return
+        }
+
+        pending.value = uploadedAttendees === undefined
+      },
+    })
+  }
+}
+
+async function uploadToDB() {
+  // Upload to users database
+  const createdUsers = []
+
+  for (let i = 0; i < uploadedAttendees.length; i += 30) {
+    let usersBatch = uploadedAttendees.slice(i, i + 29)
+
+    usersBatch = usersBatch.map(item => ({
+      ...item,
+      graduationYear: Number.parseInt((item.graduationYear).toString(), 10),
+      memberId: createId(),
+    }))
+
+    try {
+      const res = await $api('/api/user/bulk', {
+        method: 'POST',
+        body: usersBatch,
+      })
+
+      createdUsers.push(res)
+    }
+    catch (err) {
+      error.value.didError = true
+      error.value.msg = `Failed to push chunk ${i} to the users database.`
+    }
+  }
+  // Upload to users_event database
+  for (let i = 0; i < createdUsers.length; i += 1) {
+    const chunk = []
+    for (let j = 0; j < createdUsers[i].length; j += 1) {
+      chunk.push({
+        userId: createdUsers[i][j].id,
+        eventId: props.event.id,
+        admissionKey: createId(),
+      })
+    }
+    // Upload the chunk to the database
+    try {
+      await $api('/api/event/users', {
+        method: 'POST',
+        body: chunk,
+      })
+    }
+    catch (err) {
+      error.value.didError = true
+      error.value.msg = `Failed to push chunk ${i} to the users_event database.`
+    }
+  }
+
+  pending.value = false
+  if (!error.value.didError)
+    isUploaded.value = true
+    queryClient.invalidateQueries({ queryKey: ['events'] })
+  }
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex flex-col space-y-1">
+        <span class="font-semibold text-2xl">Upload Attendees</span>
+        <span class="text-base">Upload a <i>.csv</i> file containing the <span class="font-bold">Name, Email, Member Type and Graduation Year</span> of the attendees attending this event. Do ensure that this file contains headers for <span class="font-bold">all</span> the columns.</span>
+      </div>
+    </template>
+
+    <div class="space-y-2">
+      <div class="space-x-5">
+        <label class="inline-block p-2 px-4 bg-[#007aff]/[0.4] hover:bg-[#007aff]/[0.7] duration-100 rounded-xl cursor-pointer">
+          <input type="file" accept=".csv" class="hidden" @change="handleFileUpload($event)">
+          <div class="space-x-2">
+            <UIcon name="i-heroicons-arrow-up-tray" />
+            <span class="text-md font-semibold">Upload File</span>
+          </div>
+        </label>
+        <span><span class="font-bold">{{ file ? `Uploaded File:` : '' }}</span> {{ file ? file.name : '' }}</span>
+      </div>
+      <UButton v-if="file" tonal class="flex-inline max-w-xs" :loading="pending" :disabled="pending" @click="uploadToDB">
+        Populate Database
+      </UButton>
+      <span v-if="isUploaded">Successfully added users to the database. </span>
+      <span v-if="error.didError">{{ error.msg }}</span>
+    </div>
+  </UCard>
+</template>

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

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import { ref } from 'vue'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
+import type { Event } from '~/shared/types'
+
+const props = defineProps<{
+  showPopup: boolean
+}>()
+const queryClient = useQueryClient()
+
+const closePopup = defineEmits(['closePopup'])
+const state = reactive({
+  name: '',
+  description: '',
+  location: '',
+  badgeImage: '',
+  startDateTime: '',
+  endDateTime: '',
+})
+const newEventId = ref('')
+const inputError = ref('')
+
+const mutation = useMutation({
+  mutationFn: (newEvent: Omit<Event, 'id'>) => $api('/api/event', {
+    method: 'POST',
+    body: newEvent,
+  }),
+})
+
+async function handleSubmit() {
+  inputError.value = ''
+
+  const newEvent = { ...state }
+  newEvent.startDateTime = dayjs(state.startDateTime).toISOString()
+  newEvent.endDateTime = dayjs(state.endDateTime).toISOString()
+
+  try {
+    const res = await mutation.mutateAsync(newEvent)
+
+    newEventId.value = res.id
+    queryClient.invalidateQueries({ queryKey: ['events'] })
+  } catch (err) {
+    if (err instanceof Error && err.message.includes('Invalid Image URL')) {
+      inputError.value = "Invalid Image URL"
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <UModal v-model="props.showPopup">
+      <UCard>
+        <template #header>
+          <div class="flex flex-row items-start">
+            <div>
+              <h1 class="text-xl font-bold pb-1">
+                Create Event
+              </h1>
+              <p class="text-md">
+                Create a new SSTAA event
+              </p>
+            </div>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="ml-auto -my-1" @click="$emit('closePopup')" />
+          </div>
+        </template>
+
+        <UForm :state="state" class="space-y-7" @submit="handleSubmit">
+          <div class="space-y-5">
+            <UFormGroup label="Event Name" required :error="!state.name && 'You must enter an Event Name!'">
+              <UInput v-model="state.name" placeholder="Amazing Event" color="gray" variant="outline" :disabled="newEventId !== ''" />
+            </UFormGroup>
+            <UFormGroup label="Description" description="Provide a short description describing what this event is about" required :error="!state.description && 'You must enter an Event Description!'">
+              <UInput v-model="state.description" placeholder="Description" color="gray" variant="outline" :disabled="newEventId !== ''" />
+            </UFormGroup>
+            <UFormGroup label="Location" description="Where is this event held at" required :error="!state.location && 'You must enter the Event Location!'">
+              <UInput v-model="state.location" placeholder="School of Science and Technology, Singapore" color="gray" variant="outline" :disabled="newEventId !== ''" />
+            </UFormGroup>
+            <UFormGroup name="imageurl" label="Banner Image" description="The image shown to everyone viewing this event. Enter a valid Image URL." required :error="!state.badgeImage && 'You must enter a valid Image URL'">
+              <UInput v-model="state.badgeImage" name="imageurl" type="url" placeholder="https://example.com" color="gray" variant="outline" :disabled="newEventId !== ''" />
+            </UFormGroup>
+            <UFormGroup label="Start Date and Time" required :error="!state.startDateTime && 'You must enter the Start Date!'">
+              <UInput v-model="state.startDateTime" type="datetime-local" color="gray" variant="outline" :disabled="newEventId !== ''" />
+            </UFormGroup>
+            <UFormGroup label="End Date and Time" required :error="!state.endDateTime && 'You must enter the End Date!'">
+              <UInput v-model="state.endDateTime" type="datetime-local" color="gray" variant="outline" :disabled="newEventId !== ''" />
+            </UFormGroup>
+          </div>
+
+          <UButton v-if="newEventId === ''" type="submit" color="green" :loading="mutation.isLoading.value">
+            Create Event
+          </UButton>
+          <p v-if="inputError !== ''">
+            {{ inputError }}
+          </p>
+        </UForm>
+        <div v-if="mutation.isSuccess.value" class="space-y-3 mt-4">
+          <p>Created Event with an ID of <b>{{ newEventId }}</b>.</p>
+          <UButton color="blue" @click="$emit('closePopup')">
+            Done
+          </UButton>
+        </div>
+      </UCard>
+    </UModal>
+  </div>
+</template>