239 lines
7.5 KiB
Vue
239 lines
7.5 KiB
Vue
<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"
|
|
@updated="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>
|