107 lines
4.1 KiB
Vue
107 lines
4.1 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>
|