owltide/components/TableScheduleLocations.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>