owltide/components/TableScheduleLocations.vue

<!--
	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
	SPDX-License-Identifier: AGPL-3.0-or-later
-->
<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"
								v-model="location.name"
							>
						</td>
						<td>
							<input
								type="text"
								v-model="location.description"
							>
						</td>
						<td>
							<button
								:disabled="location.deleted"
								type="button"
								@click="location.deleted = true"
							>Remove</button>
							<button
								v-if="location.isModified()"
								type="button"
								@click="schedule.locations.discardId(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 { Info } from '~/shared/utils/luxon';

defineProps<{
	edit?: boolean
}>();

const schedule = await useSchedule();
const accountStore = useAccountStore();

const newLocationName = ref("");
const newLocationDescription = ref("");

function newLocation() {
	const zone = Info.normalizeZone(accountStore.activeTimezone);
	const locale = accountStore.activeLocale;
	const location = ClientScheduleLocation.create(
		schedule.value.nextClientId--,
		newLocationName.value,
		newLocationDescription.value,
		{ zone, locale },
	);
	schedule.value.locations.add(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>