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]/settings.vue
+53 -35
View File
@@ -1,49 +1,49 @@
<script setup lang="ts">
import type { PotView } from '~/types'
import type { PotView } from '~/types';
const route = useRoute()
const slug = route.params.slug as string
const route = useRoute();
const slug = route.params.slug as string;
const { data, refresh, error } = await useFetch<PotView>(`/api/pots/${slug}`)
const { data, refresh, error } = await useFetch<PotView>(`/api/pots/${slug}`);
const adding = ref(false)
const removingId = ref<number | null>(null)
const removeError = ref('')
const adding = ref(false);
const removingId = ref<number | null>(null);
const removeError = ref('');
async function addParticipant(participantName: string) {
adding.value = true
adding.value = true;
try {
await $fetch(`/api/pots/${slug}/participants`, { method: 'POST', body: { name: participantName } })
await refresh()
}
finally {
adding.value = false
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
async function removeParticipant(participant: { id: number; name: string }) {
if (!window.confirm(`Remove ${participant.name} from this Pot?`)) return;
removeError.value = ''
removingId.value = participant.id
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
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>
<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>
@@ -57,7 +57,11 @@ async function removeParticipant(participant: { id: number, name: string }) {
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" />
<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>
@@ -71,7 +75,9 @@ async function removeParticipant(participant: { id: number, name: string }) {
</div>
<section class="space-y-3">
<h2 class="text-sm font-semibold uppercase tracking-wide text-stone-500 dark:text-stone-400">
<h2
class="text-sm font-semibold uppercase tracking-wide text-stone-500 dark:text-stone-400"
>
Participants
</h2>
<ul class="space-y-2">
@@ -80,10 +86,15 @@ async function removeParticipant(participant: { id: number, name: string }) {
: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">
<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>
<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"
@@ -93,7 +104,10 @@ async function removeParticipant(participant: { id: number, name: string }) {
{{ 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">
<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>
@@ -102,8 +116,12 @@ async function removeParticipant(participant: { id: number, name: string }) {
</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">
<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