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

Refactor API types and sync logic
All checks were successful
/ build (push) Successful in 2m5s
Details
/ deploy (push) Successful in 16s
Details

Browse source 
Rename and refactor the types passed over the API to be based on an
entity that's either living or a tombstone.  A living entity has a
deleted property that's either undefined or false, while a tombstone
has a deleted property set to true.  All entities have a numeric id
and an updatedAt timestamp.

To sync entities, an array of replacements are passed around. Living
entities are replaced with tombstones when they're deleted. And
tombstones are replaced with living entities when restored.
This commit is contained in:
Hornwitser 2025-06-11 21:05:17 +02:00
parent 251e83f640
commit fe06d0d6bd
36 changed files with 1242 additions and 834 deletions
Download patch file Download diff file Expand all files Collapse all files

89
components/RolesTable.vue
View file

@ -1,5 +1,8 @@
<template>
<div>
<div v-if="schedule.deleted">
Error: Unexpected deleted schedule.
</div>
<div v-else>
<table>
<thead>
<tr>
@ -12,7 +15,7 @@
<tbody>
<template v-if="edit">
<tr
v-for="role in roles"
v-for="role in roles.filter(r => !r.deleted)"
:key="role.id"
:class="{ removed: removed.has(role.id) }"
>
@ -38,14 +41,14 @@
@click="delRole(role.id)"
>Delete</button>
<button
v-if="changes.some(c => c.data.id === role.id)"
v-if="changes.some(c => c.id === role.id)"
type="button"
@click="revertRole(role.id)"
>Revert</button>
</td>
</tr>
<tr>
<td>{{ toId(newRoleName) }}</td>
<td>{{ newRoleId }}</td>
<td>
<input
type="text"
@ -73,7 +76,7 @@
</template>
<template v-else>
<tr
v-for="role in roles"
v-for="role in roles.filter(r => !r.deleted)"
:key="role.id"
>
<td>{{ role.id }}</td>
@ -102,8 +105,8 @@
</template>
<script lang="ts" setup>
import type { ChangeRecord, Role } from '~/shared/types/schedule';
import { applyChangeArray } from '~/shared/utils/changes';
import type { ApiSchedule, ApiScheduleRole } from '~/shared/types/api';
import { applyUpdatesToArray } from '~/shared/utils/update';
import { toId } from '~/shared/utils/functions';
defineProps<{
@ -112,14 +115,14 @@ defineProps<{
const schedule = await useSchedule();
const changes = ref<ChangeRecord<Role>[]>([]);
const removed = computed(() => new Set(changes.value.filter(c => c.op === "del").map(c => c.data.id)));
const changes = ref<ApiScheduleRole[]>([]);
const removed = computed(() => new Set(changes.value.filter(c => c.deleted).map(c => c.id)));
function replaceChange(
change: ChangeRecord<Role>,
changes: ChangeRecord<Role>[],
change: ApiScheduleRole,
changes: ApiScheduleRole[],
) {
const index = changes.findIndex(item => (
item.op === change.op && item.data.id === change.data.id
item.deleted === change.deleted && item.id === change.id
));
const copy = [...changes];
if (index !== -1)
@ -128,14 +131,24 @@ function replaceChange(
copy.push(change);
return copy;
}
function revertChange(id: string, changes: ChangeRecord<Role>[]) {
return changes.filter(change => change.data.id !== id);
function revertChange(id: number, changes: ApiScheduleRole[]) {
return changes.filter(change => change.id !== id);
}
const newRoleName = ref("");
const newRoleId = computed(() => {
if (schedule.value.deleted) {
throw new Error("Unexpected deleted schedule");
}
return Math.max(
1,
...schedule.value.roles?.map(r => r.id) ?? [],
...changes.value.map(c => c.id)
) + 1;
});
const newRoleDescription = ref("");
function editRole(
role: Role,
role: Extract<ApiScheduleRole, { deleted?: false }>,
edits: { name?: string, description?: string }
) {
const copy = { ...role };
@ -145,21 +158,23 @@ function editRole(
if (edits.description !== undefined) {
copy.description = edits.description || undefined;
}
const change = { op: "set" as const, data: copy };
changes.value = replaceChange(copy, changes.value);
}
function delRole(id: number) {
const change = { id, updatedAt: "", deleted: true as const };
changes.value = replaceChange(change, changes.value);
}
function delRole(id: string) {
const change = { op: "del" as const, data: { id } };
changes.value = replaceChange(change, changes.value);
}
function revertRole(id: string) {
function revertRole(id: number) {
changes.value = revertChange(id, changes.value);
}
function roleExists(name: string) {
const id = toId(name);
if (schedule.value.deleted) {
throw new Error("Unexpected deleted schedule");
}
name = toId(name);
return (
schedule.value.roles?.some(e => e.id === id)
|| changes.value.some(c => c.data.id === id)
schedule.value.roles?.some(r => !r.deleted && toId(r.name) === name)
|| changes.value.some(c => !c.deleted && c.name === name)
);
}
function newRole() {
@ -167,14 +182,15 @@ function newRole() {
alert(`Role ${newRoleName.value} already exists`);
return;
}
if (schedule.value.deleted) {
throw new Error("Unexpected deleted schedule");
}
const change = {
op: "set" as const,
data: {
id: toId(newRoleName.value),
name: newRoleName.value,
description: newRoleDescription.value || undefined,
slots: [],
},
id: newRoleId.value,
updatedAt: "",
name: newRoleName.value,
description: newRoleDescription.value || undefined,
slots: [],
};
changes.value = replaceChange(change, changes.value);
newRoleName.value = "";
@ -184,7 +200,11 @@ async function saveRoles() {
try {
await $fetch("/api/schedule", {
method: "PATCH",
body: { roles: changes.value },
body: {
id: 111,
updatedAt: "",
roles: changes.value
} satisfies ApiSchedule,
});
changes.value = [];
} catch (err: any) {
@ -194,8 +214,11 @@ async function saveRoles() {
}
const roles = computed(() => {
if (schedule.value.deleted) {
throw new Error("Unexpected deleted schedule");
}
const data = [...schedule.value.roles ?? []];
applyChangeArray(changes.value.filter(change => change.op === "set"), data);
applyUpdatesToArray(changes.value.filter(change => !change.deleted), data);
return data;
});
</script>