feat(02-01): add CRUD form actions

- Add create action with content validation (title optional, type defaults to thought)
- Add update action with field-by-field updates and validation
- Add delete action with existence check
- Add toggleComplete action to toggle between open/done
- Use getOrdered() in load function for tasks-first ordering
- Update page component to use new data structure
This commit is contained in:
Thomas Richter
2026-01-29 11:02:43 +01:00
parent 87bf928c12
commit 9a449228b7
2 changed files with 133 additions and 28 deletions

View File

@@ -5,7 +5,7 @@
<main class="min-h-screen bg-gray-50 p-8">
<div class="max-w-2xl mx-auto">
<h1 class="text-3xl font-bold text-gray-900 mb-2">TaskPlanner</h1>
<p class="text-gray-600 mb-8">Foundation Phase Complete</p>
<p class="text-gray-600 mb-8">Core CRUD Phase - Form Actions Ready</p>
<div class="bg-white rounded-lg shadow p-6 mb-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">System Status</h2>
@@ -13,34 +13,34 @@
<div class="space-y-3">
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="text-gray-700">Database: {data.dbStatus}</span>
<span class="text-gray-700">Form actions: create, update, delete, toggleComplete</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="text-gray-700">Entries in database: {data.entryCount}</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="text-gray-700">Repository layer: operational</span>
<span class="text-gray-700">Entries loaded: {data.entries.length}</span>
</div>
</div>
</div>
{#if data.recentEntries.length > 0}
{#if data.entries.length > 0}
<div class="bg-white rounded-lg shadow p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">Recent Entries</h2>
<h2 class="text-lg font-semibold text-gray-800 mb-4">Entries (tasks first, newest within type)</h2>
<ul class="space-y-2">
{#each data.recentEntries as entry}
{#each data.entries as entry}
<li class="p-3 bg-gray-50 rounded">
<div class="font-medium text-gray-900">{entry.title || '(no title)'}</div>
<div class="text-sm text-gray-600">{entry.content}</div>
<div class="text-xs text-gray-400 mt-1">
Type: {entry.type} | Created: {new Date(entry.createdAt).toLocaleString()}
Type: {entry.type} | Status: {entry.status} | Created: {new Date(entry.createdAt).toLocaleString()}
</div>
</li>
{/each}
</ul>
</div>
{:else}
<div class="bg-white rounded-lg shadow p-6">
<p class="text-gray-500">No entries yet. Use form actions to create entries.</p>
</div>
{/if}
</div>
</main>