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>