Hornwitser
02be8a37a5
Render the timeslots as an editable table of times with associated event. When the event it's linked to is edited the time slot is removed from the original event it belonged to and added to the possibly new event it now belongs to. This gives a somewhat intutive editing experience when editing time slots linked to events with multiple times.
60 lines
1.4 KiB
Vue
60 lines
1.4 KiB
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"
|
|
><All locations></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" />
|
|
</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 { data: session } = await useAccountSession();
|
|
const isAdmin = computed(() => session.value?.account.type === "admin")
|
|
</script>
|