anbraten/splitt-the-bill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 add env to useDb and apply prettier
tinyedge/deploy Deployed by TinyEdge
Details

Browse Source
This commit is contained in:
anbraten
2026-08-07 13:28:26 +02:00
parent 67727f96ab
commit cbe1b42f6e
54 changed files with 5492 additions and 2406 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/p/[slug]/index.vue
+89 -51
View File
@@ -1,77 +1,98 @@
<script setup lang="ts">
import type { ExpenseView, PotView } from '~/types'
import type { ExpenseView, PotView } from '~/types';
const route = useRoute()
const slug = route.params.slug as string
const { name, setName } = useIdentity()
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 { 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()),
)
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 })
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)
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()
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[] }) {
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 })
await $fetch(`/api/pots/${slug}/expenses/${editingExpense.value.id}`, {
method: 'PATCH',
body: payload,
});
} else {
await $fetch(`/api/pots/${slug}/expenses`, {
method: 'POST',
body: payload,
});
}
else {
await $fetch(`/api/pots/${slug}/expenses`, { method: 'POST', body: payload })
}
editingExpense.value = null
showExpenseForm.value = false
await refresh()
editingExpense.value = null;
showExpenseForm.value = false;
await refresh();
}
function editExpense(expense: ExpenseView) {
editingExpense.value = expense
showExpenseForm.value = true
editingExpense.value = expense;
showExpenseForm.value = true;
}
function newExpense() {
editingExpense.value = null
showExpenseForm.value = true
editingExpense.value = null;
showExpenseForm.value = true;
}
function cancelExpenseForm() {
editingExpense.value = null
showExpenseForm.value = false
editingExpense.value = null;
showExpenseForm.value = false;
}
async function removeExpense(id: number) {
await $fetch(`/api/pots/${slug}/expenses/${id}`, { method: 'DELETE' })
await refresh()
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)
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>
<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>
@@ -85,7 +106,11 @@ async function copyLink() {
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" />
<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>
@@ -113,13 +138,20 @@ async function copyLink() {
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" />
<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">
<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>
@@ -132,13 +164,17 @@ async function copyLink() {
</button>
</div>
<div class="grid grid-cols-2 gap-1 rounded-xl bg-stone-100 p-1 dark:bg-stone-900">
<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'"
: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 &amp; balances
@@ -146,9 +182,11 @@ async function copyLink() {
<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'"
: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