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

Refactor to use ClientSchedule on client

Browse source 
Use the ClientSchedule data structure for deserialising and tracking
edit state on the client instead of trying to directly deal with the
ApiSchedule type which is not build for ease of edits or rendering.
This commit is contained in:
Hornwitser 2025-06-14 19:22:53 +02:00
parent ce9f758f84
commit bb450fd583
15 changed files with 488 additions and 1297 deletions
Download patch file Download diff file Expand all files Collapse all files

41
pages/edit.vue
View file

@ -1,11 +1,5 @@
<template>
<main v-if="schedule.deleted">
<h1>Error</h1>
<p>
Schedule has been deleted.
</p>
</main>
<main v-else>
<main>
<h1>Edit</h1>
<label>
Crew Filter:
@ -37,14 +31,15 @@
:selected="locationFilter === undefined"
>&lt;All locations&gt;</option>
<option
v-for="location in schedule.locations?.filter(l => !l.deleted)"
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>
<ScheduleTable :edit="true" :location="locationFilter" :eventSlotFilter :shiftSlotFilter />
<ScheduleTable :edit="true" :locationId="locationFilter" :eventSlotFilter :shiftSlotFilter />
<h2>Events</h2>
<EventsTable :edit="true" />
<h2>Roles</h2>
@ -60,9 +55,10 @@
:selected="roleFilter === undefined"
>&lt;All roles&gt;</option>
<option
v-for="role in schedule.roles?.filter(r => !r.deleted)"
v-for="role in schedule.roles.values()"
:key="role.id"
:value="role.id"
:disabled="role.deleted"
:selected="roleFilter === role.id"
>{{ role.name }}</option>
</select>
@ -70,12 +66,17 @@
<ShiftScheduleTable :edit="true" :roleId="roleFilter" :eventSlotFilter :shiftSlotFilter />
<h2>Shifts</h2>
<ShiftsTable :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>
import type { ApiScheduleEventSlot, ApiScheduleShiftSlot } from '~/shared/types/api';
definePageMeta({
middleware: ["authenticated"],
allowedAccountTypes: ["crew", "admin"],
@ -101,14 +102,14 @@ const eventSlotFilter = computed(() => {
return () => true;
}
const cid = parseInt(crewFilter.value);
return (slot: ApiScheduleEventSlot) => slot.assigned?.some(id => id === cid) || false;
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: ApiScheduleShiftSlot) => slot.assigned?.some(id => id === cid) || false;
return (slot: ClientScheduleShiftSlot) => slot.assigned.has(cid);
});
const locationFilter = computed({
@ -132,4 +133,16 @@ const roleFilter = computed({
},
}),
});
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>

28
pages/schedule.vue
View file

@ -1,11 +1,5 @@
<template>
<main v-if="schedule.deleted">
<h1>Error</h1>
<p>
Schedule has been deleted.
</p>
</main>
<main v-else>
<main>
<h1>Schedule & Events</h1>
<p>
Study carefully, we only hold these events once a year.
@ -48,10 +42,10 @@
</label>
<Timetable :schedule :eventSlotFilter :shiftSlotFilter />
<h2>Events</h2>
<EventCard v-for="event in schedule.events?.filter(e => !e.deleted && e.slots.some(eventSlotFilter))" :event/>
<EventCard v-for="event in [...schedule.events.values()].filter(e => !e.deleted && [...e.slots.values()].some(eventSlotFilter))" :event/>
<h2>Locations</h2>
<ul>
<li v-for="location in schedule.locations?.filter(l => !l.deleted)" :key="location.id">
<li v-for="location in schedule.locations.values()" :key="location.id">
<h3>{{ location.name }}</h3>
{{ location.description ?? "No description provided" }}
</li>
@ -60,8 +54,6 @@
</template>
<script setup lang="ts">
import type { ApiScheduleShiftSlot, ApiScheduleEventSlot } from '~/shared/types/api';
const accountStore = useAccountStore();
const { data: accounts } = await useAccounts();
const schedule = await useSchedule();
@ -85,21 +77,21 @@ const eventSlotFilter = computed(() => {
const aid = accountStore.id;
if (filter.value === "my-schedule") {
const slotIds = new Set(accountStore.interestedEventSlotIds);
for (const event of schedule.value.events ?? []) {
for (const event of schedule.value.events.values()) {
if (!event.deleted && accountStore.interestedEventIds.has(event.id)) {
for (const slot of event.slots) {
for (const slot of event.slots.values()) {
slotIds.add(slot.id);
}
}
}
return (slot: ApiScheduleEventSlot) => slotIds.has(slot.id) || slot.assigned?.some(id => id === aid) || false;
return (slot: ClientScheduleEventSlot) => slotIds.has(slot.id) || slot.assigned.has(aid!) || false;
}
if (filter.value === "assigned") {
return (slot: ApiScheduleEventSlot) => slot.assigned?.some(id => id === aid) || false;
return (slot: ClientScheduleEventSlot) => slot.assigned.has(aid!) || false;
}
if (filter.value.startsWith("crew-")) {
const cid = parseInt(filter.value.slice(5));
return (slot: ApiScheduleEventSlot) => slot.assigned?.some(id => id === cid) || false;
return (slot: ClientScheduleEventSlot) => slot.assigned.has(cid) || false;
}
return () => false;
});
@ -109,11 +101,11 @@ const shiftSlotFilter = computed(() => {
}
if (filter.value === "my-schedule" || filter.value === "assigned") {
const aid = accountStore.id;
return (slot: ApiScheduleShiftSlot) => slot.assigned?.some(id => id === aid) || false;
return (slot: ClientScheduleShiftSlot) => slot.assigned.has(aid!) || false;
}
if (filter.value.startsWith("crew-")) {
const cid = parseInt(filter.value.slice(5));
return (slot: ApiScheduleShiftSlot) => slot.assigned?.some(id => id === cid) || false;
return (slot: ClientScheduleShiftSlot) => slot.assigned.has(cid) || false;
}
return () => false;
});