85 lines
2.5 KiB
Vue
85 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const slug = route.params.slug as string
|
|
|
|
const names = ref([''])
|
|
const saving = ref(false)
|
|
|
|
function addRow() {
|
|
names.value.push('')
|
|
}
|
|
|
|
async function continueToPot() {
|
|
saving.value = true
|
|
const toAdd = names.value.map(n => n.trim()).filter(Boolean)
|
|
try {
|
|
for (const participantName of toAdd) {
|
|
await $fetch(`/api/pots/${slug}/participants`, {
|
|
method: 'POST',
|
|
body: { name: participantName },
|
|
})
|
|
}
|
|
}
|
|
finally {
|
|
await navigateTo(`/p/${slug}`)
|
|
}
|
|
}
|
|
|
|
function skip() {
|
|
navigateTo(`/p/${slug}`)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-6">
|
|
<div class="space-y-1 text-center">
|
|
<div class="text-3xl">
|
|
👋
|
|
</div>
|
|
<h1 class="text-xl font-bold text-stone-900 dark:text-stone-100">
|
|
Add the rest of the group
|
|
</h1>
|
|
<p class="text-sm text-stone-500 dark:text-stone-400">
|
|
Add everyone else's name now, or skip and add them later from settings.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<input
|
|
v-for="(_, index) in names"
|
|
:key="index"
|
|
v-model="names[index]"
|
|
type="text"
|
|
class="block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base text-stone-900 shadow-sm placeholder:text-stone-400 focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-200 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
|
|
placeholder="Participant name"
|
|
>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
class="w-full rounded-xl border border-dashed border-stone-300 px-4 py-2 text-sm font-medium text-stone-600 transition-colors hover:border-orange-300 hover:text-orange-600 dark:border-stone-700 dark:text-stone-400 dark:hover:border-orange-700 dark:hover:text-orange-400"
|
|
@click="addRow"
|
|
>
|
|
+ Add another
|
|
</button>
|
|
|
|
<div class="flex gap-3">
|
|
<button
|
|
type="button"
|
|
class="flex-1 rounded-xl border border-stone-300 px-4 py-2 font-medium text-stone-700 dark:border-stone-700 dark:text-stone-300"
|
|
@click="skip"
|
|
>
|
|
Skip
|
|
</button>
|
|
<button
|
|
type="button"
|
|
:disabled="saving"
|
|
class="flex-1 rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600 active:bg-orange-600 disabled:opacity-50"
|
|
@click="continueToPot"
|
|
>
|
|
{{ saving ? 'Saving…' : 'Continue' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|