150 lines
4.5 KiB
Vue
150 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
import type { ExpenseView, ParticipantView } from '../types';
|
|
|
|
const props = defineProps<{
|
|
expenses: ExpenseView[];
|
|
participants: ParticipantView[];
|
|
currency: string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
edit: [expense: ExpenseView];
|
|
remove: [id: number];
|
|
}>();
|
|
|
|
const expandedId = ref<number | null>(null);
|
|
|
|
function nameOf(id: number) {
|
|
return props.participants.find((p) => p.id === id)?.name ?? 'Unknown';
|
|
}
|
|
|
|
function namesOf(ids: number[]) {
|
|
return ids.map(nameOf).join(', ');
|
|
}
|
|
|
|
function toggle(id: number) {
|
|
expandedId.value = expandedId.value === id ? null : id;
|
|
}
|
|
|
|
const sorted = computed(() =>
|
|
[...props.expenses].sort((a, b) => b.createdAt - a.createdAt),
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-3">
|
|
<p
|
|
v-if="expenses.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 expenses yet. Add the first one below.
|
|
</p>
|
|
|
|
<div
|
|
v-for="expense in sorted"
|
|
:key="expense.id"
|
|
class="rounded-2xl border p-4 shadow-sm"
|
|
:class="
|
|
expense.type === 'payment'
|
|
? 'border-emerald-100 bg-emerald-50/60 dark:border-emerald-900/60 dark:bg-emerald-950/20'
|
|
: 'border-stone-200 bg-white dark:border-stone-800 dark:bg-stone-900'
|
|
"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="flex w-full items-start justify-between gap-2 text-left"
|
|
@click="toggle(expense.id)"
|
|
>
|
|
<div
|
|
v-if="expense.type === 'payment'"
|
|
class="flex min-w-0 items-center gap-2"
|
|
>
|
|
<svg
|
|
class="h-4 w-4 shrink-0 text-emerald-600 dark:text-emerald-400"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<p
|
|
class="truncate font-medium text-emerald-800 dark:text-emerald-300"
|
|
>
|
|
{{ nameOf(expense.payerId) }} paid
|
|
{{ nameOf(expense.participantIds[0]!) }}
|
|
</p>
|
|
</div>
|
|
<div v-else class="min-w-0">
|
|
<p class="truncate font-medium text-stone-900 dark:text-stone-100">
|
|
{{ expense.description }}
|
|
</p>
|
|
<p class="text-sm text-stone-500 dark:text-stone-400">
|
|
paid by {{ nameOf(expense.payerId) }}
|
|
</p>
|
|
</div>
|
|
<div class="flex shrink-0 items-center gap-2">
|
|
<span
|
|
class="font-medium"
|
|
:class="
|
|
expense.type === 'payment'
|
|
? 'text-emerald-700 dark:text-emerald-300'
|
|
: 'text-stone-900 dark:text-stone-100'
|
|
"
|
|
>
|
|
{{ formatCurrency(expense.amountCents, currency) }}
|
|
</span>
|
|
<svg
|
|
class="h-4 w-4 shrink-0 text-stone-400 transition-transform"
|
|
:class="{ 'rotate-180': expandedId === expense.id }"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.148l3.71-3.918a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</button>
|
|
|
|
<div
|
|
v-if="expandedId === expense.id"
|
|
class="mt-3 space-y-3 border-t pt-3"
|
|
:class="
|
|
expense.type === 'payment'
|
|
? 'border-emerald-100 dark:border-emerald-900/60'
|
|
: 'border-stone-100 dark:border-stone-800'
|
|
"
|
|
>
|
|
<p
|
|
v-if="expense.type === 'expense'"
|
|
class="text-xs text-stone-400 dark:text-stone-500"
|
|
>
|
|
split among {{ namesOf(expense.participantIds) }}
|
|
</p>
|
|
<div class="flex gap-3">
|
|
<button
|
|
v-if="expense.type === 'expense'"
|
|
type="button"
|
|
class="text-sm font-medium text-orange-600 dark:text-orange-400"
|
|
@click="emit('edit', expense)"
|
|
>
|
|
Edit
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="text-sm font-medium text-rose-600 dark:text-rose-400"
|
|
@click="emit('remove', expense.id)"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|