Hornwitser
3be7f8be05
Rename accounts to users to be consistent with the new naming scheme where account only referes to the logged in user of the session and implement live updates of users via a user store which listens for updates from the event stream.
62 lines
1.3 KiB
Vue
62 lines
1.3 KiB
Vue
<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>
|