public/owltide
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Use prefix notation for component names

Browse source 
Start component names with the kind of element it creates on the page
(button, input, table, card, etc), then follow it with an hierarchy like
set of parts describing what part of the system it operates on.

This makes related components stick together in the directory listing of
components and auto-complete work better.
This commit is contained in:
Hornwitser 2025-06-17 22:29:16 +02:00
parent f4f23e6c18
commit 7a95d6c3c4
11 changed files with 8 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

82
components/EventCard.vue
View file

@ -1,82 +0,0 @@
<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.interestedEventIds.has(event.id) }"
@click="toggle('event', event.id, [...event.slots.keys()])"
>
{{ accountStore.interestedEventIds.has(event.id) ? "✔ interested" : "🔔 interested?" }}
</button>
</p>
<h4>Timeslots</h4>
<ul>
<li v-for="slot in event.slots.values()" :key="slot.id">
{{ formatTime(slot.start) }} - {{ formatTime(slot.end) }}
<button
v-if="accountStore.valid && event.slots.size > 1"
class="interested"
:disabled="accountStore.interestedEventIds.has(event.id)"
:class="{ active: accountStore.interestedEventIds.has(event.id) || accountStore.interestedEventSlotIds.has(slot.id) }"
@click="toggle('slot', slot.id)"
>
{{ accountStore.interestedEventIds.has(event.id) || accountStore.interestedEventSlotIds.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';
defineProps<{
event: ClientScheduleEvent
}>()
const accountStore = useAccountStore();
const { data: accounts } = await useAccounts();
const idToAccount = computed(() => new Map(accounts.value?.map(a => [a.id, a])));
function formatTime(time: DateTime) {
return time.toFormat("yyyy-LL-dd HH:mm");
}
async function toggle(type: "event" | "slot", id: number, slotIds?: number[]) {
await accountStore.toggleInterestedId(type, 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>