owltide/pages/edit.vue

<template>
	<main>
		<h1>Edit</h1>
		<h2>Locations</h2>
		<LocationsTable :edit="isAdmin" />
		<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"
					:key="location.id"
					:value="location.id"
					:selected="locationFilter === location.id"
				>{{ location.name }}</option>
			</select>
		</label>
		<ScheduleTable :edit="true" :location="locationFilter" />
		<h2>Events</h2>
		<EventsTable :edit="true" />
		<h2>Roles</h2>
		<RolesTable :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"
					:key="role.id"
					:value="role.id"
					:selected="roleFilter === role.id"
				>{{ role.name }}</option>
			</select>
		</label>
		<ShiftScheduleTable :edit="true" :role="roleFilter" />
	</main>
</template>

<script lang="ts" setup>
import type { LocationQueryValue } from 'vue-router';

definePageMeta({
	middleware: ["authenticated"],
	allowedAccountTypes: ["crew", "admin"],
});

const schedule = await useSchedule();

function queryToString(item?: null | LocationQueryValue | LocationQueryValue[]) {
	if (item === null)
		return "";
	if (item instanceof Array)
		return queryToString(item[0])
	return item;
}

const route = useRoute();
const locationFilter = computed({
	get: () => queryToString(route.query.location),
	set: (value: string | undefined) => navigateTo({
		path: route.path,
		query: {
			...route.query,
			location: value,
		},
	}),
});

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

const { data: session } = await useAccountSession();
const isAdmin = computed(() => session.value?.account.type === "admin")
</script>