63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
|
<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>
|