splitt-the-bill/app/components/AddExpenseForm.vue

<script setup lang="ts">
import type { ExpenseView, ParticipantView } from '../types'

const props = defineProps<{
  participants: ParticipantView[]
  currency: string
  editing?: ExpenseView | null
  defaultPayerId?: number
}>()

const emit = defineEmits<{
  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('')

function toggleParticipant(id: number) {
  if (selectedIds.value.includes(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))

  if (!description.value.trim()) {
    error.value = 'Description is required.'
    return
  }
  if (!Number.isFinite(amountCents) || amountCents <= 0) {
    error.value = 'Enter a valid amount.'
    return
  }
  if (selectedIds.value.length === 0) {
    error.value = 'Select at least one participant to split with.'
    return
  }

  emit('submit', {
    description: description.value.trim(),
    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">
    <div>
      <label for="description" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Description</label>
      <input
        id="description"
        v-model="description"
        type="text"
        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">
        Amount ({{ currency }})
      </label>
      <input
        id="amount"
        v-model="amount"
        type="number"
        step="0.01"
        min="0.01"
        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>
      <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">
          {{ participant.name }}
        </option>
      </select>
    </div>

    <div>
      <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'"
          @click="toggleParticipant(participant.id)"
        >
          {{ participant.name }}
        </button>
      </div>
    </div>

    <p v-if="error" class="text-sm text-rose-600 dark:text-rose-400">
      {{ error }}
    </p>

    <div class="flex gap-3">
      <button
        type="button"
        class="flex-1 rounded-xl border border-stone-300 px-4 py-2 font-medium text-stone-700 dark:border-stone-700 dark:text-stone-300"
        @click="emit('cancel')"
      >
        Cancel
      </button>
      <button
        type="submit"
        class="flex-1 rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600 active:bg-orange-600"
      >
        {{ editing ? 'Save changes' : 'Add expense' }}
      </button>
    </div>
  </form>
</template>