Refactor to use ClientSchedule on client

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

View file

@ -5,7 +5,7 @@
<button
v-if="edit"
type="button"
@click="assignedIds = assignedIds.filter(id => id !== account.id)"
@click="assignedIds = new Set([...assignedIds].filter(id => id !== account.id))"
>
x
</button>
@ -26,9 +26,9 @@ defineProps<{
}>();
const { data: accounts } = useAccounts();
const accountsById = computed(() => new Map(accounts.value?.map?.(a => [a.id, a])));
const assignedIds = defineModel<number[]>({ required: true });
const assignedIds = defineModel<Set<number>>({ required: true });
const assigned = computed(
() => assignedIds.value.map(
() => [...assignedIds.value].map(
id => accountsById.value.get(id) ?? { id, name: String(id) }
)
);
@ -43,8 +43,8 @@ function addCrew() {
return;
const account = crewByName.value.get(addName.value);
if (account) {
if (!assignedIds.value.some(id => id === account.id)) {
assignedIds.value = [...assignedIds.value, account.id];
if (!assignedIds.value.has(account.id)) {
assignedIds.value = new Set([...assignedIds.value, account.id]);
} else {
alert(`${addName.value} has already been added`);
}