🎉 init
This commit is contained in:
@@ -0,0 +1,199 @@
|
||||
<script setup lang="ts">
|
||||
import type { ExpenseView, PotView } from '~/types'
|
||||
|
||||
const route = useRoute()
|
||||
const slug = route.params.slug as string
|
||||
const { name, setName } = useIdentity()
|
||||
|
||||
const { data, refresh, error } = await useFetch<PotView>(`/api/pots/${slug}`)
|
||||
const { recordVisit } = useVisitedPots()
|
||||
|
||||
const me = computed(() =>
|
||||
data.value?.participants.find(p => p.name.toLowerCase() === name.value?.toLowerCase()),
|
||||
)
|
||||
|
||||
watch(data, (pot) => {
|
||||
if (!pot) return
|
||||
recordVisit({ slug: pot.pot.slug, name: pot.pot.name, currency: pot.pot.currency })
|
||||
}, { immediate: true })
|
||||
|
||||
const activeTab = ref<'people' | 'expenses'>('people')
|
||||
const showExpenseForm = ref(false)
|
||||
const editingExpense = ref<ExpenseView | null>(null)
|
||||
const linkCopied = ref(false)
|
||||
|
||||
async function addMyself() {
|
||||
if (!name.value) return
|
||||
await $fetch(`/api/pots/${slug}/participants`, { method: 'POST', body: { name: name.value } })
|
||||
await refresh()
|
||||
}
|
||||
|
||||
async function submitExpense(payload: { description: string, amountCents: number, payerId: number, participantIds: number[] }) {
|
||||
if (editingExpense.value) {
|
||||
await $fetch(`/api/pots/${slug}/expenses/${editingExpense.value.id}`, { method: 'PATCH', body: payload })
|
||||
}
|
||||
else {
|
||||
await $fetch(`/api/pots/${slug}/expenses`, { method: 'POST', body: payload })
|
||||
}
|
||||
editingExpense.value = null
|
||||
showExpenseForm.value = false
|
||||
await refresh()
|
||||
}
|
||||
|
||||
function editExpense(expense: ExpenseView) {
|
||||
editingExpense.value = expense
|
||||
showExpenseForm.value = true
|
||||
}
|
||||
|
||||
function newExpense() {
|
||||
editingExpense.value = null
|
||||
showExpenseForm.value = true
|
||||
}
|
||||
|
||||
function cancelExpenseForm() {
|
||||
editingExpense.value = null
|
||||
showExpenseForm.value = false
|
||||
}
|
||||
|
||||
async function removeExpense(id: number) {
|
||||
await $fetch(`/api/pots/${slug}/expenses/${id}`, { method: 'DELETE' })
|
||||
await refresh()
|
||||
}
|
||||
|
||||
async function copyLink() {
|
||||
await navigator.clipboard.writeText(window.location.href)
|
||||
linkCopied.value = true
|
||||
setTimeout(() => (linkCopied.value = false), 2000)
|
||||
}
|
||||
</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>
|
||||
|
||||
<NameForm v-else-if="!name" title="What's your name?" @submit="setName" />
|
||||
|
||||
<div v-else-if="data" class="space-y-6">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="inline-flex items-center gap-1 text-sm font-medium text-stone-500 transition-colors hover:text-orange-600 dark:text-stone-400 dark:hover:text-orange-400"
|
||||
>
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M17 10a.75.75 0 0 1-.75.75H5.612l4.158 3.96a.75.75 0 1 1-1.04 1.08l-5.5-5.25a.75.75 0 0 1 0-1.08l5.5-5.25a.75.75 0 1 1 1.04 1.08L5.612 9.25H16.25A.75.75 0 0 1 17 10Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
All Pots
|
||||
</NuxtLink>
|
||||
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div>
|
||||
<h1 class="text-xl font-bold text-stone-900 dark:text-stone-100">
|
||||
{{ data.pot.name }}
|
||||
</h1>
|
||||
<p class="text-sm text-stone-500 dark:text-stone-400">
|
||||
{{ data.pot.currency }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex shrink-0 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-xl border border-stone-300 px-3 py-1.5 text-sm font-medium text-stone-700 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"
|
||||
@click="copyLink"
|
||||
>
|
||||
{{ linkCopied ? 'Copied!' : 'Copy link' }}
|
||||
</button>
|
||||
<NuxtLink
|
||||
:to="`/p/${slug}/settings`"
|
||||
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="Pot settings"
|
||||
>
|
||||
<svg class="h-4.5 w-4.5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M8.34 1.804A1 1 0 0 1 9.32 1h1.36a1 1 0 0 1 .98.804l.24 1.192c.428.183.83.41 1.2.674l1.146-.386a1 1 0 0 1 1.212.464l.68 1.178a1 1 0 0 1-.208 1.267l-.912.816a6.5 6.5 0 0 1 0 1.382l.912.816a1 1 0 0 1 .208 1.267l-.68 1.178a1 1 0 0 1-1.212.464l-1.146-.386c-.37.264-.772.49-1.2.674l-.24 1.192a1 1 0 0 1-.98.804H9.32a1 1 0 0 1-.98-.804l-.24-1.192a6.5 6.5 0 0 1-1.2-.674l-1.146.386a1 1 0 0 1-1.212-.464l-.68-1.178a1 1 0 0 1 .208-1.267l.912-.816a6.5 6.5 0 0 1 0-1.382l-.912-.816a1 1 0 0 1-.208-1.267l.68-1.178a1 1 0 0 1 1.212-.464l1.146.386c.37-.264.772-.49 1.2-.674l.24-1.192ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!me" class="rounded-2xl border border-orange-200 bg-orange-50 p-4 text-sm dark:border-orange-900 dark:bg-orange-950/40">
|
||||
<p class="mb-2 text-stone-700 dark:text-stone-300">
|
||||
You're not in this Pot's participant list yet.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-xl bg-orange-500 px-3 py-1.5 font-medium text-white shadow-sm transition-colors hover:bg-orange-600"
|
||||
@click="addMyself"
|
||||
>
|
||||
Add myself as {{ name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-1 rounded-xl bg-stone-100 p-1 dark:bg-stone-900">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-lg py-2 text-sm font-medium transition-colors"
|
||||
:class="activeTab === 'people'
|
||||
? 'bg-white text-stone-900 shadow-sm dark:bg-stone-800 dark:text-stone-100'
|
||||
: 'text-stone-500 dark:text-stone-400'"
|
||||
@click="activeTab = 'people'"
|
||||
>
|
||||
People & balances
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-lg py-2 text-sm font-medium transition-colors"
|
||||
:class="activeTab === 'expenses'
|
||||
? 'bg-white text-stone-900 shadow-sm dark:bg-stone-800 dark:text-stone-100'
|
||||
: 'text-stone-500 dark:text-stone-400'"
|
||||
@click="activeTab = 'expenses'"
|
||||
>
|
||||
Expenses
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section v-if="activeTab === 'people'">
|
||||
<BalanceSummary
|
||||
:slug="slug"
|
||||
:participants="data.participants"
|
||||
:net-balances="data.netBalances"
|
||||
:settlements="data.settlements"
|
||||
:currency="data.pot.currency"
|
||||
@settled="refresh"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section v-else class="space-y-3">
|
||||
<button
|
||||
v-if="!showExpenseForm"
|
||||
type="button"
|
||||
class="w-full rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600"
|
||||
@click="newExpense"
|
||||
>
|
||||
+ Add expense
|
||||
</button>
|
||||
|
||||
<AddExpenseForm
|
||||
v-if="showExpenseForm"
|
||||
:participants="data.participants"
|
||||
:currency="data.pot.currency"
|
||||
:editing="editingExpense"
|
||||
:default-payer-id="me?.id"
|
||||
@submit="submitExpense"
|
||||
@cancel="cancelExpenseForm"
|
||||
/>
|
||||
|
||||
<ExpenseList
|
||||
v-else
|
||||
:expenses="data.expenses"
|
||||
:participants="data.participants"
|
||||
:currency="data.pot.currency"
|
||||
@edit="editExpense"
|
||||
@remove="removeExpense"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user