117 lines
4.3 KiB
Vue
117 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
import type { PotView } from '~/types'
|
|
|
|
const route = useRoute()
|
|
const slug = route.params.slug as string
|
|
|
|
const { data, refresh, error } = await useFetch<PotView>(`/api/pots/${slug}`)
|
|
|
|
const adding = ref(false)
|
|
const removingId = ref<number | null>(null)
|
|
const removeError = ref('')
|
|
|
|
async function addParticipant(participantName: string) {
|
|
adding.value = true
|
|
try {
|
|
await $fetch(`/api/pots/${slug}/participants`, { method: 'POST', body: { name: participantName } })
|
|
await refresh()
|
|
}
|
|
finally {
|
|
adding.value = false
|
|
}
|
|
}
|
|
|
|
async function removeParticipant(participant: { id: number, name: string }) {
|
|
if (!window.confirm(`Remove ${participant.name} from this Pot?`)) return
|
|
|
|
removeError.value = ''
|
|
removingId.value = participant.id
|
|
try {
|
|
await $fetch(`/api/pots/${slug}/participants/${participant.id}`, { method: 'DELETE' })
|
|
await refresh()
|
|
}
|
|
catch {
|
|
removeError.value = `Couldn't remove ${participant.name}. They may have expenses or payments recorded.`
|
|
}
|
|
finally {
|
|
removingId.value = null
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="error" class="space-y-3 text-center">
|
|
<p class="text-rose-600 dark:text-rose-400">
|
|
This Pot couldn't be found.
|
|
</p>
|
|
<NuxtLink to="/" class="font-medium text-orange-600 dark:text-orange-400">
|
|
Go home
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div v-else-if="data" class="space-y-6">
|
|
<div class="flex items-center gap-2">
|
|
<NuxtLink
|
|
:to="`/p/${slug}`"
|
|
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-stone-300 text-stone-600 transition-colors hover:border-orange-300 hover:text-orange-600 dark:border-stone-700 dark:text-stone-300 dark:hover:border-orange-700 dark:hover:text-orange-400"
|
|
aria-label="Back to Pot"
|
|
>
|
|
<svg class="h-4.5 w-4.5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 0 1 0 1.06L9.06 10l3.73 3.71a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
|
|
</svg>
|
|
</NuxtLink>
|
|
<div>
|
|
<h1 class="text-lg font-bold text-stone-900 dark:text-stone-100">
|
|
Pot settings
|
|
</h1>
|
|
<p class="text-sm text-stone-500 dark:text-stone-400">
|
|
{{ data.pot.name }} · {{ data.pot.currency }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="space-y-3">
|
|
<h2 class="text-sm font-semibold uppercase tracking-wide text-stone-500 dark:text-stone-400">
|
|
Participants
|
|
</h2>
|
|
<ul class="space-y-2">
|
|
<li
|
|
v-for="participant in data.participants"
|
|
:key="participant.id"
|
|
class="flex items-center gap-3 rounded-2xl border border-stone-200 bg-white p-3 shadow-sm dark:border-stone-800 dark:bg-stone-900"
|
|
>
|
|
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-orange-100 text-sm font-semibold text-orange-700 dark:bg-orange-900/40 dark:text-orange-300">
|
|
{{ participant.name.trim().charAt(0).toUpperCase() || '?' }}
|
|
</div>
|
|
<span class="min-w-0 flex-1 truncate font-medium text-stone-900 dark:text-stone-100">{{ participant.name }}</span>
|
|
<button
|
|
type="button"
|
|
:disabled="removingId === participant.id"
|
|
class="shrink-0 text-sm font-medium text-rose-600 disabled:opacity-50 dark:text-rose-400"
|
|
@click="removeParticipant(participant)"
|
|
>
|
|
{{ removingId === participant.id ? 'Removing…' : 'Remove' }}
|
|
</button>
|
|
</li>
|
|
<li v-if="data.participants.length === 0" class="rounded-2xl border border-dashed border-stone-300 p-4 text-center text-sm text-stone-500 dark:border-stone-700 dark:text-stone-400">
|
|
No one's in this Pot yet.
|
|
</li>
|
|
</ul>
|
|
<p v-if="removeError" class="text-sm text-rose-600 dark:text-rose-400">
|
|
{{ removeError }}
|
|
</p>
|
|
</section>
|
|
|
|
<section class="space-y-3 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm dark:border-stone-800 dark:bg-stone-900">
|
|
<h2 class="text-sm font-semibold uppercase tracking-wide text-stone-500 dark:text-stone-400">
|
|
Add a participant
|
|
</h2>
|
|
<NameForm
|
|
title="Name"
|
|
:button-label="adding ? 'Adding…' : 'Add'"
|
|
@submit="addParticipant"
|
|
/>
|
|
</section>
|
|
</div>
|
|
</template>
|