From ccb132b9b08ca1946713d2d0f2ea528a943448de Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Fri, 5 Dec 2025 12:49:15 -0500
Subject: [PATCH] Improvements to event details UI to address #41

---
 .../components/calendar/ViewCalendarEvent.vue | 73 ++++++++-----------
 1 file changed, 30 insertions(+), 43 deletions(-)

diff --git a/ui/src/components/calendar/ViewCalendarEvent.vue b/ui/src/components/calendar/ViewCalendarEvent.vue
index fa5185e..9bcacc9 100644
--- a/ui/src/components/calendar/ViewCalendarEvent.vue
+++ b/ui/src/components/calendar/ViewCalendarEvent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { CalendarEvent, CalendarSignup } from '@shared/types/calendar'
-import { CircleAlert, Clock, EllipsisVertical, MapPin, User, X } from 'lucide-vue-next';
+import { CircleAlert, Clock, Clock1, EllipsisVertical, MapPin, User, X } from 'lucide-vue-next';
 import { computed, onMounted, ref, watch } from 'vue';
 import ButtonGroup from '../ui/button-group/ButtonGroup.vue';
 import Button from '../ui/button/Button.vue';
@@ -11,6 +11,7 @@ import DropdownMenu from '../ui/dropdown-menu/DropdownMenu.vue';
 import DropdownMenuTrigger from '../ui/dropdown-menu/DropdownMenuTrigger.vue';
 import DropdownMenuContent from '../ui/dropdown-menu/DropdownMenuContent.vue';
 import DropdownMenuItem from '../ui/dropdown-menu/DropdownMenuItem.vue';
+import { Calendar } from 'lucide-vue-next';
 
 const route = useRoute();
 // const eventID = computed(() => {
@@ -45,37 +46,27 @@ const emit = defineEmits<{
     (e: 'edit', event: CalendarEvent): void
 }>()
 
-// const activeEvent = computed(() => props.event)
-
-const startFmt = new Intl.DateTimeFormat(undefined, {
-    weekday: 'short', year: 'numeric', month: 'short', day: 'numeric',
-    hour: 'numeric', minute: '2-digit'
-})
-const endFmt = new Intl.DateTimeFormat(undefined, {
-    hour: 'numeric', minute: '2-digit'
-})
-
 const dateFmt = new Intl.DateTimeFormat(undefined, {
-    weekday: 'short', year: 'numeric', month: 'short', day: 'numeric',
+    weekday: 'long', month: 'short', day: 'numeric',
+})
+
+const timeFmt = new Intl.DateTimeFormat(undefined, {
     hour: 'numeric', minute: '2-digit'
 })
 
-const startText = computed(() => {
-    return dateFmt.format(new Date(activeEvent.value.start));
+const dateText = computed(() => {
+    let start = dateFmt.format(new Date(activeEvent.value.start));
+    let end = dateFmt.format(new Date(activeEvent.value.end));
+    if (start === end)
+        return start;
+    else
+        return `${start} - ${end}`;
 })
 
-const endText = computed(() => {
-    return dateFmt.format(new Date(activeEvent.value.end));
-})
-
-
-const whenText = computed(() => {
-    if (!activeEvent.value?.start) return ''
-    const s = new Date(activeEvent.value.start)
-    const e = activeEvent.value?.end ? new Date(activeEvent.value.end) : null
-    return e
-        ? `${startFmt.format(s)} – ${endFmt.format(e)}`
-        : `${startFmt.format(s)}`
+const timeText = computed(() => {
+    let startTime = timeFmt.format(new Date(activeEvent.value.start))
+    let endTime = timeFmt.format(new Date(activeEvent.value.end))
+    return [startTime, endTime]
 })
 
 const attending = computed<CalendarSignup[]>(() => { return activeEvent.value.eventSignups.filter((s) => s.status == CalendarAttendance.Attending) })
@@ -175,25 +166,21 @@ defineExpose({ forceReload })
                 </ButtonGroup>
             </section>
             <!-- Meta -->
-            <section class="space-y-2 w-full">
+            <section class="space-y-3 w-full">
                 <p class="text-lg font-semibold">Details</p>
-                <p class="font-semibold">Start: <span class="font-normal">{{ startText }}</span></p>
-                <p class="font-semibold">End: <span class="font-normal">{{ endText }}</span></p>
-                <p class="font-semibold">Creator: <span class="font-normal">{{ activeEvent.creator_name || "Unknown User" }}</span></p>
-                <p class="font-semibold">Location: <span class="font-normal">{{ activeEvent.location || "Unknown" }}</span></p>
+                <div class="text-foreground/80 flex gap-3 items-center">
+                    <Calendar :size="20"></Calendar> {{ dateText }}
+                </div>
+                <div class="text-foreground/80 flex gap-3 items-center">
+                    <Clock1 :size="20"></Clock1> {{ timeText[0] }} - {{ timeText[1] }}
+                </div>
+                <div class="text-foreground/80 flex gap-3 items-center">
+                    <MapPin :size="20"></MapPin> {{ activeEvent.location || "Unknown" }}
+                </div>
+                <div class="text-foreground/80 flex gap-3 items-center">
+                    <User :size="20"></User> {{ activeEvent.creator_name || "Unknown User" }}
+                </div>
             </section>
-            <!-- Quick meta chips -->
-            <!-- <section class="flex flex-wrap gap-2 w-full">
-                <span class="inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs">
-                    <MapPin class="size-3.5 opacity-80" />
-                    <span class="font-medium">{{ activeEvent.location || "Unknown" }}</span>
-                </span>
-                <span class="inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs">
-                    <User class="size-3.5 opacity-80" />
-                    <span class="font-medium">Created by: {{ activeEvent.creator_name || "Unknown User"
-                    }}</span>
-                </span>
-            </section> -->
             <!-- Description -->
             <section class="space-y-2 w-full">
                 <p class="text-lg font-semibold">Description</p>