public/owltide
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Organise edit page into tabs

Browse source 
Use tabs for the various sections on the edit page so that the schedule
timetable is more easily visible at the same time as the editable tables.
This commit is contained in:
Hornwitser 2025-06-18 00:23:43 +02:00
parent 7a95d6c3c4
commit 6ef3800a53
4 changed files with 155 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

117
pages/edit.vue
View file

@ -18,54 +18,66 @@
>{{ 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" />
<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" />
</template>
</Tabs>
<p v-if="schedule.modified">
Changes are not saved yet.
<button
@ -82,6 +94,15 @@ definePageMeta({
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();