owltide/components/AssignedCrew.vue

<!--
	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
	SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<div>
		<template v-for="account in assigned">
			{{ account.name }}
			<button
				v-if="edit"
				type="button"
				@click="assignedIds = new Set([...assignedIds].filter(id => id !== account.id))"
			>
				x
			</button>
			{{ " " }}
		</template>
		<input
			v-if="edit"
			type="text"
			@change="addCrew"
			v-model="addName"
		>
	</div>
</template>

<script lang="ts" setup>
defineProps<{
	edit?: boolean
}>();
const usersStore = useUsersStore();
await usersStore.fetch();
const assignedIds = defineModel<Set<number>>({ required: true });
const assigned = computed(
	() => [...assignedIds.value].map(
		id => usersStore.users.get(id) ?? { id, name: String(id) }
	)
);
const crewByName = computed(() => new Map(
	[...usersStore.users.values()]
		.filter(a => a.type === "crew" || a.type === "admin")
		.map(a => [a.name!, a])
));
const addName = ref("");
function addCrew() {
	if (!addName.value)
		return;
	const account = crewByName.value.get(addName.value);
	if (account) {
		if (!assignedIds.value.has(account.id)) {
			assignedIds.value = new Set([...assignedIds.value, account.id]);
		} else {
			alert(`${addName.value} has already been added`);
		}
		addName.value = "";
	} else {
		alert(`No crew account by the name ${addName.value}`);
	}
}
</script>

<style scoped>
input {
	width: 3em;
}
</style>