owltide/components/DiffFieldEntityId.vue

<!--
	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
	SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<DiffEntry
		v-if='state !== "modified" || after !== before'
		: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: Id | undefined,
	after: Id | undefined,
	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 entries = computed(() => {
	const result: ["removed" | "added", string][] = [];
	const beforeName = getName(props.before);
	if (props.state !== "created" && beforeName) {
		result.push(["removed", beforeName]);
	}
	const afterName = getName(props.after);
	if (props.state !== "deleted" && afterName) {
		result.push(["added", afterName]);
	}
	return result;
})
</script>