Add assigment of crew to events and shifts

components/AssignedCrew.vue

@@ -0,0 +1,62 @@
+<template>
+	<div>
+		<template v-for="account in assigned">
+			{{ account.name }}
+			<button
+				v-if="edit"
+				type="button"
+				@click="assignedIds = 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 { data: accounts } = useAccounts();
+const accountsById = computed(() => new Map(accounts.value?.map?.(a => [a.id, a])));
+const assignedIds = defineModel<number[]>({ required: true });
+const assigned = computed(
+	() => assignedIds.value.map(
+		id => accountsById.value.get(id) ?? { id, name: String(id) }
+	)
+);
+const crewByName = computed(() => new Map(
+	accounts.value
+		?.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.some(id => id === account.id)) {
+			assignedIds.value = [...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>