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/components/AddExpenseForm.vue
+72 -38
View File
@@ -1,48 +1,60 @@
<script setup lang="ts">
import type { ExpenseView, ParticipantView } from '../types'
import type { ExpenseView, ParticipantView } from '../types';
const props = defineProps<{
participants: ParticipantView[]
currency: string
editing?: ExpenseView | null
defaultPayerId?: number
}>()
participants: ParticipantView[];
currency: string;
editing?: ExpenseView | null;
defaultPayerId?: number;
}>();
const emit = defineEmits<{
submit: [payload: { description: string, amountCents: number, payerId: number, participantIds: number[] }]
cancel: []
}>()
submit: [
payload: {
description: string;
amountCents: number;
payerId: number;
participantIds: number[];
},
];
cancel: [];
}>();
const description = ref(props.editing?.description ?? '')
const amount = ref(props.editing ? fromCents(props.editing.amountCents).toString() : '')
const payerId = ref<number>(props.editing?.payerId ?? props.defaultPayerId ?? props.participants[0]!.id)
const selectedIds = ref<number[]>(props.editing?.participantIds ?? props.participants.map(p => p.id))
const error = ref('')
const description = ref(props.editing?.description ?? '');
const amount = ref(
props.editing ? fromCents(props.editing.amountCents).toString() : '',
);
const payerId = ref<number>(
props.editing?.payerId ?? props.defaultPayerId ?? props.participants[0]!.id,
);
const selectedIds = ref<number[]>(
props.editing?.participantIds ?? props.participants.map((p) => p.id),
);
const error = ref('');
function toggleParticipant(id: number) {
if (selectedIds.value.includes(id)) {
selectedIds.value = selectedIds.value.filter(existing => existing !== id)
}
else {
selectedIds.value = [...selectedIds.value, id]
selectedIds.value = selectedIds.value.filter((existing) => existing !== id);
} else {
selectedIds.value = [...selectedIds.value, id];
}
}
function onSubmit() {
error.value = ''
const amountCents = toCents(Number(amount.value))
error.value = '';
const amountCents = toCents(Number(amount.value));
if (!description.value.trim()) {
error.value = 'Description is required.'
return
error.value = 'Description is required.';
return;
}
if (!Number.isFinite(amountCents) || amountCents <= 0) {
error.value = 'Enter a valid amount.'
return
error.value = 'Enter a valid amount.';
return;
}
if (selectedIds.value.length === 0) {
error.value = 'Select at least one participant to split with.'
return
error.value = 'Select at least one participant to split with.';
return;
}
emit('submit', {
@@ -50,14 +62,21 @@ function onSubmit() {
amountCents,
payerId: payerId.value,
participantIds: selectedIds.value,
})
});
}
</script>
<template>
<form class="space-y-4 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm dark:border-stone-800 dark:bg-stone-900" @submit.prevent="onSubmit">
<form
class="space-y-4 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm dark:border-stone-800 dark:bg-stone-900"
@submit.prevent="onSubmit"
>
<div>
<label for="description" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Description</label>
<label
for="description"
class="block text-sm font-medium text-stone-700 dark:text-stone-300"
>Description</label
>
<input
id="description"
v-model="description"
@@ -65,11 +84,14 @@ function onSubmit() {
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="Dinner, taxi, groceries…"
>
/>
</div>
<div>
<label for="amount" class="block text-sm font-medium text-stone-700 dark:text-stone-300">
<label
for="amount"
class="block text-sm font-medium text-stone-700 dark:text-stone-300"
>
Amount ({{ currency }})
</label>
<input
@@ -81,33 +103,45 @@ function onSubmit() {
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="0.00"
>
/>
</div>
<div>
<label for="payer" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Paid by</label>
<label
for="payer"
class="block text-sm font-medium text-stone-700 dark:text-stone-300"
>Paid by</label
>
<select
id="payer"
v-model="payerId"
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="participant in participants" :key="participant.id" :value="participant.id">
<option
v-for="participant in participants"
:key="participant.id"
:value="participant.id"
>
{{ participant.name }}
</option>
</select>
</div>
<div>
<span class="block text-sm font-medium text-stone-700 dark:text-stone-300">Split equally among</span>
<span class="block text-sm font-medium text-stone-700 dark:text-stone-300"
>Split equally among</span
>
<div class="mt-2 flex flex-wrap gap-2">
<button
v-for="participant in participants"
:key="participant.id"
type="button"
class="rounded-full border px-3 py-1.5 text-sm font-medium transition-colors"
:class="selectedIds.includes(participant.id)
? 'border-orange-400 bg-orange-100 text-orange-800 dark:border-orange-700 dark:bg-orange-900/40 dark:text-orange-200'
: 'border-stone-300 bg-white text-stone-600 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-400'"
:class="
selectedIds.includes(participant.id)
? 'border-orange-400 bg-orange-100 text-orange-800 dark:border-orange-700 dark:bg-orange-900/40 dark:text-orange-200'
: 'border-stone-300 bg-white text-stone-600 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-400'
"
@click="toggleParticipant(participant.id)"
>
{{ participant.name }}