家計簿アプリを作る #4：収支の登録フォームを実装する

import { fail, redirect } from '@sveltejs/kit';
import type { Actions } from './$types';
import { createDb } from '$lib/server/db';
import { transactions } from '$lib/server/db/schema';

export const actions: Actions = {
  create: async ({ request, platform }) => {
    const formData = await request.formData();
    const amount = formData.get('amount');
    const type = formData.get('type');
    const category = formData.get('category');
    const memo = formData.get('memo') || '';
    const date = formData.get('date');

    if (!amount || !type || !category || !date) {
      return fail(400, { error: 'All fields except memo are required.' });
    }

    const db = createDb(platform!.env.DB);

    await db.insert(transactions).values({
      amount: Number(amount),
      type: String(type),
      category: String(category),
      memo: String(memo),
      date: String(date)
    });

    redirect(303, '/');
  }
};

<script lang="ts">
  import { enhance } from "$app/forms";

  let { form } = $props();
</script>

<form method="POST" action="?/create" use:enhance>
  <label>
    金額:
    <input type="number" name="amount" required />
  </label>
  <label>
    種類:
    <select name="type" required>
      <option value="income">収入</option>
      <option value="expense">支出</option>
    </select>
  </label>
  <label>
    カテゴリ:
    <input type="text" name="category" required />
  </label>
  <label>
    メモ:
    <input type="text" name="memo" />
  </label>
  <label>
    日付:
    <input type="date" name="date" required />
  </label>
  <button type="submit">追加</button>

  {#if form?.error}
    <p style="color: red">{form.error}</p>
  {/if}
</form>