feat: roll call and event info in pass

sstalumniassociation · Jan 20, 2024 · 1f56b04 · 1f56b04
1 parent 5069188
commit 1f56b04
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 4 deletions.
diff --git a/composables/sstaars.ts b/composables/sstaars.ts
@@ -13,5 +13,6 @@ export function useAdmission(key: string) {
   return useQuery({
     queryKey: queryKeyFactory.admission(key),
     queryFn: () => $api(`/api/admission/${key}`),
+    retry: false,
   })
 }
diff --git a/pages/admin/events/[id].vue b/pages/admin/events/[id].vue
@@ -26,6 +26,17 @@ const links = computed(() => [
   },
 ])
 
+const dropdownItems = [
+  [
+    {
+      label: 'Delete',
+      click() {
+        state.value.showDeleteConfirmation = true
+      },
+    },
+  ],
+]
+
 type CsvRow = Pick<User, 'name' | 'email' | 'memberType' | 'graduationYear'>
 
 const userUploadPreview = ref<CsvRow[]>([])
@@ -118,6 +129,25 @@ function deleteEvent() {
     },
   })
 }
+
+async function downloadRollCall() {
+  const { unparse } = await import('papaparse')
+  const transformedData = event.value?.attendees.map(({ id, name, admissionKey }) => ({
+    id,
+    name,
+    link: `https://app.sstaa.org/pass/${admissionKey}`,
+  })) ?? []
+  const file = unparse(transformedData)
+
+  const element = document.createElement('a')
+  element.setAttribute('href', `data:text/plain;charset=utf-8,${encodeURIComponent(file)}`)
+  element.setAttribute('download', `${event.value?.name ?? 'Untitled event'}.csv`)
+
+  element.style.display = 'none'
+  document.body.appendChild(element)
+  element.click()
+  document.body.removeChild(element)
+}
 </script>
 
 <template>
@@ -127,9 +157,15 @@ function deleteEvent() {
         <UBreadcrumb :links="links" />
       </div>
 
-      <UButton variant="soft" @click="state.showDeleteConfirmation = true">
-        Delete
-      </UButton>
+      <div class="flex gap-3 items-center">
+        <UButton @click="downloadRollCall">
+          Download roll call
+        </UButton>
+
+        <UDropdown :items="dropdownItems">
+          <UButton color="white" label="More" trailing-icon="i-heroicons-chevron-down-20-solid" />
+        </UDropdown>
+      </div>
 
       <UModal v-model="state.showDeleteConfirmation">
         <UCard>

diff --git a/pages/pass/[admissionKey].vue b/pages/pass/[admissionKey].vue
@@ -32,7 +32,7 @@ const qrcode = useQRCode(() => admission.value?.admissionKey ?? '', {
         <f7Navbar title="SST Alumni Association Passes" />
 
         <div v-if="admissionIsLoading">
-          <f7List inset class="flex flex-gap-4 flex-col">
+          <f7List inset class="flex gap-4 flex-col">
             <f7SkeletonBlock height="100px" class="rounded-md!" />
             <f7SkeletonBlock height="200px" class="rounded-md!" />
             <f7SkeletonBlock height="300px" class="rounded-md!" />
@@ -66,6 +66,27 @@ const qrcode = useQRCode(() => admission.value?.admissionKey ?? '', {
             <p>
               {{ admission?.event.name }}
             </p>
+
+            <p class="font-semibold">
+              Event description
+            </p>
+            <p>
+              {{ admission?.event.description }}
+            </p>
+
+            <p class="font-semibold">
+              Event location
+            </p>
+            <p>
+              {{ admission?.event.location }}
+            </p>
+
+            <p class="font-semibold">
+              Your name
+            </p>
+            <p>
+              {{ admission?.user.name }}
+            </p>
           </f7Block>
 
           <f7BlockTitle>