owltide/pages/edit.vue

<template>
	<main>
		<h1>Edit</h1>
		<label>
			Crew Filter:
			<select
				v-model="crewFilter"
			>
				<option
					:value="undefined"
					:selected="crewFilter === undefined"
				>&lt;All Crew&gt;</option>
				<option
					v-for="account in accounts?.filter(a => a.type === 'crew' || a.type === 'admin')"
					:key="account.id"
					:value="String(account.id)"
					:selected="crewFilter === String(account.id)"
				>{{ account.name }}</option>
			</select>
		</label>
		<Timetable :schedule :eventSlotFilter :shiftSlotFilter />
		<Tabs
			:tabs
			default="locations"
		>
			<template #locations>
				<TableScheduleLocations :edit="accountStore.canEditPublic" />
			</template>
			<template #events>
				<TableScheduleEvents :edit="true" />
			</template>
			<template #eventSlots>
				<label>
					Location Filter:
					<select
						v-model="locationFilter"
					>
						<option
							:value="undefined"
							:selected="locationFilter === undefined"
						>&lt;All locations&gt;</option>
						<option
							v-for="location in schedule.locations.values()"
							:key="location.id"
							:value="location.id"
							:disabled="location.deleted"
							:selected="locationFilter === location.id"
						>{{ location.name }}</option>
					</select>
				</label>
				<TableScheduleEventSlots :edit="true" :locationId="locationFilter" :eventSlotFilter />
			</template>
			<template #roles>
				<TableScheduleRoles :edit="true" />
			</template>
			<template #shifts>
				<TableScheduleShifts :edit="true" :roleId="roleFilter" />
			</template>
			<template #shiftSlots>
				<label>
					Role Filter:
					<select
						v-model="roleFilter"
					>
						<option
							:value="undefined"
							:selected="roleFilter === undefined"
						>&lt;All roles&gt;</option>
						<option
							v-for="role in schedule.roles.values()"
							:key="role.id"
							:value="role.id"
							:disabled="role.deleted"
							:selected="roleFilter === role.id"
						>{{ role.name }}</option>
					</select>
				</label>
				<TableScheduleShiftSlots :edit="true" :roleId="roleFilter" :shiftSlotFilter />
			</template>
		</Tabs>
		<p v-if="schedule.modified">
			Changes are not saved yet.
			<button
				type="button"
				@click="saveChanges"
			>Save Changes</button>
		</p>
	</main>
</template>

<script lang="ts" setup>
definePageMeta({
	middleware: ["authenticated"],
	allowedAccountTypes: ["crew", "admin"],
});

const tabs = [
	{ id: "locations", title: "Locations" },
	{ id: "events", title: "Events" },
	{ id: "eventSlots", title: "Event Slots" },
	{ id: "roles", title: "Roles" },
	{ id: "shifts", title: "Shifts" },
	{ id: "shiftSlots", title: "Shifts Slots" },
];

const schedule = await useSchedule();
const { data: accounts } = await useAccounts();
const accountStore = useAccountStore();

const route = useRoute();
const crewFilter = computed({
	get: () => queryToString(route.query.crew),
	set: (value: string | undefined) => navigateTo({
		path: route.path,
		query: {
			...route.query,
			crew: value,
		},
	}),
});
const eventSlotFilter = computed(() => {
	if (crewFilter.value === undefined || !accountStore.valid) {
		return () => true;
	}
	const cid = parseInt(crewFilter.value);
	return (slot: ClientScheduleEventSlot) => slot.assigned.has(cid);
});
const shiftSlotFilter = computed(() => {
	if (crewFilter.value === undefined || !accountStore.valid) {
		return () => true;
	}
	const cid = parseInt(crewFilter.value);
	return (slot: ClientScheduleShiftSlot) => slot.assigned.has(cid);
});

const locationFilter = computed({
	get: () => queryToNumber(route.query.location),
	set: (value: number | undefined) => navigateTo({
		path: route.path,
		query: {
			...route.query,
			location: value !== undefined ? String(value) : undefined,
		},
	}),
});

const roleFilter = computed({
	get: () => queryToNumber(route.query.role),
	set: (value: string | undefined) => navigateTo({
		path: route.path,
		query: {
			...route.query,
			role: value,
		},
	}),
});

async function saveChanges() {
	try {
		await $fetch("/api/schedule", {
			method: "PATCH",
			body: schedule.value.toApi(true),
		});
	} catch (err: any) {
		console.error(err);
		alert(err?.data?.message ?? err.message);
	}
}
</script>