Hornwitser
4ff3dcb3fe
When async components are added dynamically to the tree via v-for list that change their order and position gets messed up. I am not sure what causes this, so I will just work around the issue for now and not use async components. Components that need async data loaded will instead depend on the parent page fetching this data during its setup.
65 lines
1.4 KiB
Vue
65 lines
1.4 KiB
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();
|
|
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>
|