Hornwitser
bb450fd583
Use the ClientSchedule data structure for deserialising and tracking edit state on the client instead of trying to directly deal with the ApiSchedule type which is not build for ease of edits or rendering.
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 { data: accounts } = useAccounts();
|
|
const accountsById = computed(() => new Map(accounts.value?.map?.(a => [a.id, a])));
|
|
const assignedIds = defineModel<Set<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.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>
|