Calendar-Improvements #57
@@ -130,7 +130,7 @@ const attendanceList = computed<CalendarSignup[]>(() => {
|
||||
return out;
|
||||
})
|
||||
|
||||
const attendanceCounts = computed(() => {
|
||||
const attendanceCountsByGroup = computed(() => {
|
||||
const signups = activeEvent.value.eventSignups ?? [];
|
||||
|
||||
return {
|
||||
@@ -143,6 +143,16 @@ const attendanceCounts = computed(() => {
|
||||
};
|
||||
});
|
||||
|
||||
const attendanceStatusSummary = computed(() => {
|
||||
const signups = activeEvent.value.eventSignups ?? [];
|
||||
|
||||
return {
|
||||
attending: signups.filter(s => s.status === CalendarAttendance.Attending).length,
|
||||
maybe: signups.filter(s => s.status === CalendarAttendance.Maybe).length,
|
||||
notAttending: signups.filter(s => s.status === CalendarAttendance.NotAttending).length,
|
||||
};
|
||||
});
|
||||
|
||||
const statusColor = (status: CalendarAttendance) => {
|
||||
switch (status) {
|
||||
case CalendarAttendance.Attending:
|
||||
@@ -251,15 +261,22 @@ defineExpose({ forceReload })
|
||||
</section>
|
||||
<!-- attendance -->
|
||||
<section class="space-y-2 w-full">
|
||||
<p class="text-lg font-semibold">Attendance</p>
|
||||
<div class="flex items-center gap-5">
|
||||
<p class="text-lg font-semibold">Attendance</p>
|
||||
<!-- <div class="text-muted-foreground flex gap-6">
|
||||
<p>Going <span class="ml-1">{{ attendanceStatusSummary.attending }}</span></p>
|
||||
<p>Maybe <span class="ml-1">{{ attendanceStatusSummary.maybe }}</span></p>
|
||||
<p>Declined <span class="ml-1">{{ attendanceStatusSummary.notAttending }}</span></p>
|
||||
</div> -->
|
||||
</div>
|
||||
<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="attendanceTab === 'Alpha' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
|
||||
@click="attendanceTab = 'Alpha'">Alpha {{ attendanceCounts.Alpha }}</label>
|
||||
@click="attendanceTab = 'Alpha'">Alpha {{ attendanceCountsByGroup.Alpha }}</label>
|
||||
<label :class="attendanceTab === 'Echo' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
|
||||
@click="attendanceTab = 'Echo'">Echo {{ attendanceCounts.Echo }}</label>
|
||||
@click="attendanceTab = 'Echo'">Echo {{ attendanceCountsByGroup.Echo }}</label>
|
||||
<label :class="attendanceTab === 'Other' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
|
||||
@click="attendanceTab = 'Other'">Other {{ attendanceCounts.Other }}</label>
|
||||
@click="attendanceTab = 'Other'">Other {{ attendanceCountsByGroup.Other }}</label>
|
||||
</div>
|
||||
<div class="pb-1 min-h-48">
|
||||
<div class="grid grid-cols-2 font-semibold text-muted-foreground border-b py-1 px-3 mb-2">
|
||||
|
||||
Reference in New Issue
Block a user