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

135
components/LocationsTable.vue
View file

@ -1,135 +0,0 @@
<template>
<figure>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>description</th>
<th v-if="edit"></th>
</tr>
</thead>
<tbody>
<tr
v-for="location in schedule.locations.values()"
:key="location.id"
:class="{ removed: location.deleted }"
>
<template v-if='edit'>
<td>{{ location.id }}</td>
<td>
<input
type="text"
:value="location.name"
@input="editLocation(location, { name: ($event as any).target.value })"
>
</td>
<td>
<input
type="text"
:value="location.description"
@input="editLocation(location, { description: ($event as any).target.value })"
>
</td>
<td>
<button
:disabled="location.deleted"
type="button"
@click="editLocation(location, { deleted: true })"
>Remove</button>
<button
v-if="schedule.isModifiedLocation(location.id)"
type="button"
@click="revertLocation(location.id)"
>Revert</button>
</td>
</template>
<template v-else>
<td>{{ location.id }}</td>
<td>{{ location.name }}</td>
<td>{{ location.description }}</td>
</template>
</tr>
<tr v-if='edit'>
<td>
{{ schedule.nextClientId }}
</td>
<td>
<input
type="text"
v-model="newLocationName"
>
</td>
<td>
<input
type="text"
v-model="newLocationDescription"
>
</td>
<td colspan="1">
<button
type="button"
@click="newLocation()"
>Add Location</button>
</td>
</tr>
</tbody>
</table>
</figure>
</template>
<script lang="ts" setup>
import { DateTime } from '~/shared/utils/luxon';
import type { Id } from '~/shared/types/common';
defineProps<{
edit?: boolean
}>();
const schedule = await useSchedule();
const newLocationName = ref("");
const newLocationDescription = ref("");
function editLocation(
location: ClientScheduleLocation,
edits: Parameters<ClientSchedule["editLocation"]>[1],
) {
try {
schedule.value.editLocation(location, edits);
} catch (err: any) {
alert(err.message);
}
}
function revertLocation(id: Id) {
schedule.value.restoreLocation(id);
}
function newLocation() {
const location = new ClientScheduleLocation(
schedule.value.nextClientId--,
DateTime.now(),
false,
newLocationName.value,
newLocationDescription.value,
);
schedule.value.setLocation(location);
newLocationName.value = "";
newLocationDescription.value = "";
}
</script>
<style scoped>
table {
border-spacing: 0;
}
table th {
text-align: left;
border-bottom: 1px solid var(--foreground);
}
table :is(th, td) + :is(th, td) {
padding-inline-start: 0.4em;
}
.removed :is(td, input) {
text-decoration: line-through;
}
</style>