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

Calendar-Improvements #57

Open
Ajdj100 wants to merge 10 commits from Calendar-Improvements into main
pull from: Calendar-Improvements
merge into: 17th-Ranger-Battalion-ORG:main
Conversation 0 Commits 10 Files Changed 6 +30 -43
1 changed files with 30 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ccb132b9b0 - Show all commits

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

@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { CalendarEvent, CalendarSignup } from '@shared/types/calendar' 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 { computed, onMounted, ref, watch } from 'vue';
import ButtonGroup from '../ui/button-group/ButtonGroup.vue'; import ButtonGroup from '../ui/button-group/ButtonGroup.vue';
import Button from '../ui/button/Button.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 DropdownMenuTrigger from '../ui/dropdown-menu/DropdownMenuTrigger.vue';
import DropdownMenuContent from '../ui/dropdown-menu/DropdownMenuContent.vue'; import DropdownMenuContent from '../ui/dropdown-menu/DropdownMenuContent.vue';
import DropdownMenuItem from '../ui/dropdown-menu/DropdownMenuItem.vue'; import DropdownMenuItem from '../ui/dropdown-menu/DropdownMenuItem.vue';
import { Calendar } from 'lucide-vue-next';
const route = useRoute(); const route = useRoute();
// const eventID = computed(() => { // const eventID = computed(() => {
@@ -45,37 +46,27 @@ const emit = defineEmits<{
(e: 'edit', event: CalendarEvent): void (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, { 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' hour: 'numeric', minute: '2-digit'
}) })
const startText = computed(() => { const dateText = computed(() => {
return dateFmt.format(new Date(activeEvent.value.start)); 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(() => { const timeText = computed(() => {
return dateFmt.format(new Date(activeEvent.value.end)); let startTime = timeFmt.format(new Date(activeEvent.value.start))
}) let endTime = timeFmt.format(new Date(activeEvent.value.end))
return [startTime, endTime]
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 attending = computed<CalendarSignup[]>(() => { return activeEvent.value.eventSignups.filter((s) => s.status == CalendarAttendance.Attending) }) const attending = computed<CalendarSignup[]>(() => { return activeEvent.value.eventSignups.filter((s) => s.status == CalendarAttendance.Attending) })
@@ -175,25 +166,21 @@ defineExpose({ forceReload })
</ButtonGroup> </ButtonGroup>
</section> </section>
<!-- Meta --> <!-- 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="text-lg font-semibold">Details</p>
<p class="font-semibold">Start: <span class="font-normal">{{ startText }}</span></p> <div class="text-foreground/80 flex gap-3 items-center">
<p class="font-semibold">End: <span class="font-normal">{{ endText }}</span></p> <Calendar :size="20"></Calendar> {{ dateText }}
<p class="font-semibold">Creator: <span class="font-normal">{{ activeEvent.creator_name || "Unknown User" }}</span></p> </div>
<p class="font-semibold">Location: <span class="font-normal">{{ activeEvent.location || "Unknown" }}</span></p> <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> </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 --> <!-- Description -->
<section class="space-y-2 w-full"> <section class="space-y-2 w-full">
<p class="text-lg font-semibold">Description</p> <p class="text-lg font-semibold">Description</p>