Hornwitser
7a95d6c3c4
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.
135 lines
2.8 KiB
Vue
135 lines
2.8 KiB
Vue
<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>
|