Hornwitser
2cb56247be
The EventCard logic assume interestedIds not being present means the account can't set events as interested. Fix this logic by checking if the account is valid instead and always have interestedIds present on the account store.
83 lines
2.2 KiB
Vue
83 lines
2.2 KiB
Vue
<template>
|
|
<section class="event">
|
|
<h3>{{ event.name }}</h3>
|
|
<p>{{ event.description ?? "No description provided" }}</p>
|
|
<p v-if="event.interested">
|
|
{{ event.interested }} interested
|
|
</p>
|
|
<p v-if="accountStore.valid">
|
|
<button
|
|
class="interested"
|
|
:class="{ active: accountStore.interestedIds.has(event.id) }"
|
|
@click="toggle(event.id, event.slots.map(slot => slot.id))"
|
|
>
|
|
{{ accountStore.interestedIds.has(event.id) ? "✔ interested" : "🔔 interested?" }}
|
|
</button>
|
|
</p>
|
|
|
|
<h4>Timeslots</h4>
|
|
<ul>
|
|
<li v-for="slot in event.slots" :key="slot.id">
|
|
{{ formatTime(slot.start) }} - {{ formatTime(slot.end) }}
|
|
<button
|
|
v-if="accountStore.valid && event.slots.length > 1"
|
|
class="interested"
|
|
:disabled="accountStore.interestedIds.has(event.id)"
|
|
:class="{ active: accountStore.interestedIds.has(event.id) || accountStore.interestedIds.has(slot.id) }"
|
|
@click="toggle(slot.id)"
|
|
>
|
|
{{ accountStore.interestedIds.has(event.id) || accountStore.interestedIds.has(slot.id) ? "✔ interested" : "🔔 interested?" }}
|
|
</button>
|
|
<template v-if="slot.interested">
|
|
({{ slot.interested }} interested)
|
|
</template>
|
|
<p v-if="slot.assigned">
|
|
Crew:
|
|
{{ slot.assigned.map(id => idToAccount.get(id)?.name).join(", ") }}
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { DateTime } from 'luxon';
|
|
import type { ScheduleEvent } from '~/shared/types/schedule';
|
|
|
|
defineProps<{
|
|
event: ScheduleEvent
|
|
}>()
|
|
|
|
const accountStore = useAccountStore();
|
|
const { data: accounts } = await useAccounts();
|
|
const idToAccount = computed(() => new Map(accounts.value?.map(a => [a.id, a])));
|
|
|
|
function formatTime(time: string) {
|
|
return DateTime.fromISO(time, { zone: accountStore.activeTimezone, locale: "en-US" }).toFormat("yyyy-LL-dd HH:mm");
|
|
}
|
|
|
|
async function toggle(id: string, slotIds?: string[]) {
|
|
await accountStore.toggleInterestedId(id, slotIds);
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.event {
|
|
background: color-mix(in oklab, var(--background), grey 20%);
|
|
padding: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
}
|
|
.event h3 {
|
|
margin: 0;
|
|
}
|
|
.event + .event {
|
|
margin-block-start: 0.5rem;
|
|
}
|
|
|
|
button {
|
|
padding-inline: 0.2em;
|
|
}
|
|
button.active {
|
|
color: color-mix(in oklab, var(--foreground), green 50%);
|
|
}
|
|
</style>
|