Add editing of shift time slots

pages/edit.vue

@@ -26,6 +26,25 @@
 		<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>
 
@@ -59,6 +78,17 @@ const locationFilter = computed({
 	}),
 });
 
+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>