Calendar-Improvements #57
@@ -130,7 +130,7 @@ const attendanceList = computed<CalendarSignup[]>(() => {
|
|||||||
return out;
|
return out;
|
||||||
})
|
})
|
||||||
|
|
||||||
const attendanceCounts = computed(() => {
|
const attendanceCountsByGroup = computed(() => {
|
||||||
const signups = activeEvent.value.eventSignups ?? [];
|
const signups = activeEvent.value.eventSignups ?? [];
|
||||||
|
|
||||||
return {
|
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) => {
|
const statusColor = (status: CalendarAttendance) => {
|
||||||
switch (status) {
|
switch (status) {
|
||||||
case CalendarAttendance.Attending:
|
case CalendarAttendance.Attending:
|
||||||
@@ -251,15 +261,22 @@ defineExpose({ forceReload })
|
|||||||
</section>
|
</section>
|
||||||
<!-- attendance -->
|
<!-- attendance -->
|
||||||
<section class="space-y-2 w-full">
|
<section class="space-y-2 w-full">
|
||||||
|
<div class="flex items-center gap-5">
|
||||||
<p class="text-lg font-semibold">Attendance</p>
|
<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 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">
|
<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]'"
|
<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]'"
|
<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]'"
|
<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>
|
||||||
<div class="pb-1 min-h-48">
|
<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">
|
<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