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

added my current attendance state to buttons

Browse Source
This commit is contained in:
ajdj100
2025-11-25 20:30:51 -05:00
parent ca4f6a811f
commit 145479adfe
2 changed files with 59 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,7 @@ import { computed, ref } from 'vue';
import ButtonGroup from '../ui/button-group/ButtonGroup.vue';
import Button from '../ui/button/Button.vue';
import { CalendarAttendance, setCalendarEventAttendance } from '@/api/calendar';
import { useUserStore } from '@/stores/user';
const props = defineProps<{
event: CalendarEvent | null
@@ -38,6 +39,17 @@ const attending = computed<CalendarSignup[]>(() => { return activeEvent.value.ev
const maybe = computed<CalendarSignup[]>(() => { return activeEvent.value.eventSignups.filter((s) => s.status == CalendarAttendance.Maybe) })
const declined = computed<CalendarSignup[]>(() => { return activeEvent.value.eventSignups.filter((s) => s.status == CalendarAttendance.NotAttending) })
const viewedState = ref<CalendarAttendance>(CalendarAttendance.Attending);
let user = useUserStore();
const myAttendance = computed<CalendarSignup | null>(() => {
return activeEvent.value.eventSignups.find(
(s) => s.member_id === user.user.id
) || null;
});
async function setAttendance(state: CalendarAttendance) {
setCalendarEventAttendance(activeEvent.value.id, state);
}
</script>
<template>
@@ -54,15 +66,18 @@ const viewedState = ref<CalendarAttendance>(CalendarAttendance.Attending);
</button>
</div>
<!-- Body -->
<div class="flex-1 flex flex-col items-center min-h-0 overflow-y-auto px-4 py-4 space-y-6">
<section>
<ButtonGroup>
<div class="flex-1 flex flex-col items-center min-h-0 overflow-y-auto px-4 py-4 space-y-6 w-full">
<section class="w-full">
<ButtonGroup class="flex w-full">
<Button variant="outline"
@click="setCalendarEventAttendance(activeEvent.id, CalendarAttendance.Attending)">Going</Button>
:class="myAttendance?.status === CalendarAttendance.Attending ? 'border-2 border-primary text-primary' : ''"
@click="setAttendance(CalendarAttendance.Attending)">Going</Button>
<Button variant="outline"
@click="setCalendarEventAttendance(activeEvent.id, CalendarAttendance.Maybe)">Maybe</Button>
:class="myAttendance?.status === CalendarAttendance.Maybe ? 'border-2 border-primary' : ''"
@click="setAttendance(CalendarAttendance.Maybe)">Maybe</Button>
<Button variant="outline"
@click="setCalendarEventAttendance(activeEvent.id, CalendarAttendance.NotAttending)">Declined</Button>
:class="myAttendance?.status === CalendarAttendance.NotAttending ? 'border-2 border-primary' : ''"
@click="setAttendance(CalendarAttendance.NotAttending)">Declined</Button>
</ButtonGroup>
</section>
<!-- When -->
@@ -96,9 +111,11 @@ const viewedState = ref<CalendarAttendance>(CalendarAttendance.Attending);
<p class="text-lg font-semibold">Attendance</p>
<div class="flex flex-col border bg-muted/50 rounded-lg min-h-24 my-2">
<div class="flex w-full pt-2 border-b *:w-full *:text-center *:pb-1 *:cursor-pointer">
<label :class="viewedState === CalendarAttendance.Attending ? 'border-b-3 border-foreground' : 'mb-[2px]'"
<label
:class="viewedState === CalendarAttendance.Attending ? 'border-b-3 border-foreground' : 'mb-[2px]'"
@click="viewedState = CalendarAttendance.Attending">Going {{ attending.length }}</label>
<label :class="viewedState === CalendarAttendance.Maybe ? 'border-b-3 border-foreground' : 'mb-[2px]'"
<label
:class="viewedState === CalendarAttendance.Maybe ? 'border-b-3 border-foreground' : 'mb-[2px]'"
@click="viewedState = CalendarAttendance.Maybe">Maybe {{ maybe.length }}</label>
<label
:class="viewedState === CalendarAttendance.NotAttending ? 'border-b-3 border-foreground' : 'mb-[2px]'"
@@ -120,7 +137,7 @@ const viewedState = ref<CalendarAttendance>(CalendarAttendance.Attending);
</section>
</div>
<!-- Footer (optional actions) -->
<div class="border-t px-4 py-3 flex items-center justify-end gap-2">
<!-- <div class="border-t px-4 py-3 flex items-center justify-end gap-2">
<button class="rounded-md border px-3 py-1.5 text-sm hover:bg-muted/40 transition">
Edit
</button>
@@ -128,7 +145,7 @@ const viewedState = ref<CalendarAttendance>(CalendarAttendance.Attending);
class="rounded-md bg-primary text-primary-foreground px-3 py-1.5 text-sm hover:opacity-90 transition">
Open details
</button>
</div>
</div> -->
</div>
</template>

32
ui/src/pages/Calendar.vue
View File

@@ -246,7 +246,7 @@ onMounted(() => {
</div>
</div>
<aside v-if="panelOpen && activeEvent"
class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col"
class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
:style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }">
<ViewCalendarEvent @close="() => {panelOpen = false; activeEvent = null;}" :event="activeEvent"></ViewCalendarEvent>
</aside>
@@ -254,6 +254,36 @@ onMounted(() => {
</div>
</template>
<style scoped>
/* Firefox */
.scrollbar-themed {
scrollbar-width: thin;
scrollbar-color: #555 #1f1f1f;
padding-right: 6px;
}
/* Chrome, Edge, Safari */
.scrollbar-themed::-webkit-scrollbar {
width: 10px;
/* slightly wider to allow padding look */
}
.scrollbar-themed::-webkit-scrollbar-track {
background: #1f1f1f;
margin-left: 6px;
/* ❗ adds space between content + scrollbar */
}
.scrollbar-themed::-webkit-scrollbar-thumb {
background: #555;
border-radius: 9999px;
}
.scrollbar-themed::-webkit-scrollbar-thumb:hover {
background: #777;
}
</style>
<style scoped>
/* ---------- Optional container "card" around the calendar ---------- */
:global(.fc) {