Hornwitser
bb450fd583
Use the ClientSchedule data structure for deserialising and tracking edit state on the client instead of trying to directly deal with the ApiSchedule type which is not build for ease of edits or rendering.
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>
|