🎉 init
This commit is contained in:
@@ -0,0 +1,108 @@
|
||||
<script setup lang="ts">
|
||||
const { name, setName } = useIdentity()
|
||||
const { pots: visitedPots } = useVisitedPots()
|
||||
|
||||
const potName = ref('')
|
||||
const currency = ref('EUR')
|
||||
const creating = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const currencies = ['EUR', 'USD', 'GBP', 'CHF']
|
||||
|
||||
async function createPot() {
|
||||
if (!potName.value.trim()) return
|
||||
creating.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
const pot = await $fetch('/api/pots', {
|
||||
method: 'POST',
|
||||
body: { name: potName.value.trim(), currency: currency.value, creatorName: name.value },
|
||||
})
|
||||
await navigateTo(`/p/${pot.slug}/setup`)
|
||||
}
|
||||
catch {
|
||||
error.value = 'Could not create the Pot. Please try again.'
|
||||
}
|
||||
finally {
|
||||
creating.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-8">
|
||||
<div class="space-y-1 text-center">
|
||||
<div class="text-4xl">
|
||||
🍯
|
||||
</div>
|
||||
<h1 class="text-2xl font-bold text-stone-900 dark:text-stone-100">
|
||||
Splitt the Bill
|
||||
</h1>
|
||||
<p class="text-sm text-stone-500 dark:text-stone-400">
|
||||
Track shared costs with friends, the easy way.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section v-if="visitedPots.length" class="space-y-2">
|
||||
<h2 class="text-sm font-semibold text-stone-500 dark:text-stone-400">
|
||||
Your Pots
|
||||
</h2>
|
||||
<ul class="space-y-2">
|
||||
<li v-for="pot in visitedPots" :key="pot.slug">
|
||||
<NuxtLink
|
||||
:to="`/p/${pot.slug}`"
|
||||
class="flex items-center justify-between gap-3 rounded-2xl border border-stone-200 bg-white p-3 shadow-sm transition-colors hover:border-orange-300 dark:border-stone-800 dark:bg-stone-900 dark:hover:border-orange-700"
|
||||
>
|
||||
<span class="font-medium text-stone-900 dark:text-stone-100">{{ pot.name }}</span>
|
||||
<span class="shrink-0 text-xs font-medium text-stone-400 dark:text-stone-500">{{ pot.currency }}</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<NameForm v-if="!name" @submit="setName" />
|
||||
|
||||
<form v-else class="space-y-4 rounded-2xl border border-stone-200 bg-white p-5 shadow-sm dark:border-stone-800 dark:bg-stone-900" @submit.prevent="createPot">
|
||||
<p class="text-sm text-stone-600 dark:text-stone-400">
|
||||
Hi {{ name }}! Create a new Pot to start splitting costs.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<label for="pot-name" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Pot name</label>
|
||||
<input
|
||||
id="pot-name"
|
||||
v-model="potName"
|
||||
type="text"
|
||||
required
|
||||
class="mt-1 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-950 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
|
||||
placeholder="Weekend in Lisbon"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="currency" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Currency</label>
|
||||
<select
|
||||
id="currency"
|
||||
v-model="currency"
|
||||
class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base text-stone-900 shadow-sm focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-200 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-100 dark:focus:ring-orange-900"
|
||||
>
|
||||
<option v-for="code in currencies" :key="code" :value="code">
|
||||
{{ code }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="text-sm text-rose-600 dark:text-rose-400">
|
||||
{{ error }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="creating"
|
||||
class="w-full 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"
|
||||
>
|
||||
{{ creating ? 'Creating…' : 'Create Pot' }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,86 @@
|
||||
<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)
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
</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="font-medium text-stone-900 dark:text-stone-100">{{ participant.name }}</span>
|
||||
</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>
|
||||
</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>
|
||||
@@ -0,0 +1,84 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user