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>
		<h2>Locations</h2>
		<TableScheduleLocations :edit="accountStore.canEditPublic" />
		<h2>Schedule</h2>
		<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 :shiftSlotFilter />
		<h2>Events</h2>
		<TableScheduleEvents :edit="true" />
		<h2>Roles</h2>
		<TableScheduleRoles :edit="true" />
		<h2>Shift Schedule</h2>
		<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" :eventSlotFilter :shiftSlotFilter />
		<h2>Shifts</h2>
		<TableScheduleShifts :edit="true" :roleId="roleFilter" />
		<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 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>