17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 22 Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

Improvements to event details UI to address #41
Some checks failed
Continuous Deployment / Update Deployment (push) Failing after 1m30s
Details

Browse Source
This commit is contained in:
ajdj100
2025-12-05 12:49:15 -05:00
parent e550f862bc
commit ccb132b9b0
1 changed files with 30 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
ui/src/components/calendar/ViewCalendarEvent.vue
View File

@@ -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>