owltide/components/DiffFieldSetEntityId.vue

<!--
	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
	SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<DiffEntry
		:title
		:entries
	/>
</template>

<script lang="ts" setup>
import type { ApiEntity } from '~/shared/types/api';
import type { Id } from '~/shared/types/common';
import type { ClientEntity } from '~/utils/client-entity';

const props = defineProps<{
	title: string,
	before: Set<Id>,
	after: Set<Id>,
	entities: ClientMap<ClientEntity<ApiEntity> & { name?: string }>,
	state: "deleted" | "created" | "modified",
}>();

function getName(id?: Id) {
	if (id === undefined)
		return undefined;
	const entity = props.entities.get(id);
	if (entity?.name !== undefined)
		return entity.name;
	return String(id);
}

const added = computed(() => {
	if (props.state === "deleted")
		return new Set<number>();
	if (props.state === "created")
		return props.after;
	return toRaw(props.after).difference(props.before)
});
const removed = computed(() => {
	if (props.state === "deleted")
		return props.before;
	if (props.state === "created")
		return new Set<number>();
	return toRaw(props.before).difference(props.after);
});
const entries = computed((): ["added" | "removed", string][] => {
	return [
		...[...removed.value]
			.map(getName)
			.filter(name => name !== undefined)
			.map((name) => ["removed", name] as ["removed", string]),
		...[...added.value]
			.map(getName)
			.filter(name => name !== undefined)
			.map((name) => ["added", name] as ["added", string]),
	];
});
</script>