owltide/components/EventsTable.vue

<template>
	<div>
		<table>
			<thead>
				<tr>
					<th>id</th>
					<th>name</th>
					<th>description</th>
					<th>p</th>
					<th>s</th>
					<th v-if="edit"></th>
				</tr>
			</thead>
			<tbody>
				<template v-if="edit">
					<tr
						v-for="event in schedule.events.values()"
						:key="event.id"
						:class="{ removed: event.deleted }"
					>
						<td>{{ event.id }}</td>
						<td>
							<input
								type="text"
								:value="event.name"
								:disabled="!canEdit(event)"
								@input="editEvent(event, { name: ($event as any).target.value })"
							>
						</td>
						<td>
							<input
								type="text"
								:disabled="!canEdit(event)"
								:value="event.description"
								@input="editEvent(event, { description: ($event as any).target.value })"
							>
						</td>
						<td>
							<input
								type="checkbox"
								:disabled="!accountStore.canEditPublic"
								:value="!event.crew"
								:checked="!event.crew"
								@change="editEvent(event, { crew: !($event as any).target.value })"
							>
						</td>
						<td>{{ event.slots.size ? event.slots.size : "" }}</td>
						<td>
							<button
								type="button"
								:disabled="!canEdit(event) || event.deleted"
								@click="editEvent(event, { deleted: true })"
							>Delete</button>
							<button
								v-if="schedule.isModifiedEvent(event.id)"
								type="button"
								@click="revertEvent(event.id)"
							>Revert</button>
						</td>
					</tr>
					<tr>
						<td>{{ schedule.nextClientId }}</td>
						<td>
							<input
								type="text"
								v-model="newEventName"
							>
						</td>
						<td>
							<input
								type="text"
								v-model="newEventDescription"
							>
						</td>
						<td>
							<input
								type="checkbox"
								:disabled="!accountStore.canEditPublic"
								v-model="newEventPublic"
							>
						</td>
						<td></td>
						<td>
							<button
								v-if="eventExists(newEventName)"
								disabled
							>Event already exists</button>
							<button
								v-else
								type="button"
								@click="newEvent"
							>Add Event</button>
						</td>
					</tr>
				</template>
				<template v-else>
					<tr
						v-for="event in schedule.events.values()"
						:key="event.id"
					>
						<td>{{ event.id }}</td>
						<td>{{ event.name }}</td>
						<td>{{ event.description }}</td>
						<td>{{ event.crew ? "" : "Yes"}}</td>
						<td>{{ event.slots.size ? event.slots.size : "" }}</td>
					</tr>
				</template>
			</tbody>
		</table>
	</div>
</template>

<script lang="ts" setup>
import type { Id } from '~/shared/types/common';
import { DateTime } from '~/shared/utils/luxon';
import { toId } from '~/shared/utils/functions';

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

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

function canEdit(event: ClientScheduleEvent) {
	return event.crew || accountStore.canEditPublic;
}

const newEventName = ref("");
const newEventDescription = ref("");
const newEventPublic = ref(false);
function editEvent(
	event: ClientScheduleEvent,
	edits: Parameters<ClientSchedule["editEvent"]>[1],
) {
	schedule.value.editEvent(event, edits);
}
function revertEvent(id: Id) {
	schedule.value.restoreEvent(id);
}
function eventExists(name: string) {
	name = toId(name);
	return (
		[...schedule.value.events.values()].some(e => !e.deleted && toId(e.name) === name)
	);
}
function newEvent() {
	if (eventExists(newEventName.value)) {
		alert(`Event ${newEventName.value} already exists`);
		return;
	}
	const event = new ClientScheduleEvent(
		schedule.value.nextClientId--,
		DateTime.now(),
		false,
		newEventName.value,
		!newEventPublic.value,
		"",
		false,
		newEventDescription.value,
		0,
		new Map(),
	);
	schedule.value.setEvent(event);
	newEventName.value = "";
	newEventDescription.value = "";
	newEventPublic.value = false;
}
</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>