84 lines
2.5 KiB
Svelte
84 lines
2.5 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { notes } from '$lib';
|
||
|
|
import { goto } from '$app/navigation';
|
||
|
|
|
||
|
|
let title = '';
|
||
|
|
let content = '';
|
||
|
|
let saving = false;
|
||
|
|
let error = '';
|
||
|
|
|
||
|
|
async function handleSubmit() {
|
||
|
|
if (!title || !content) return;
|
||
|
|
|
||
|
|
saving = true;
|
||
|
|
error = '';
|
||
|
|
|
||
|
|
try {
|
||
|
|
await notes.add({ title, content });
|
||
|
|
await notes.load(); // Reload notes before navigation
|
||
|
|
await goto('/');
|
||
|
|
} catch (err) {
|
||
|
|
console.error('Failed to create note:', err);
|
||
|
|
error = 'Failed to save note. Please try again.';
|
||
|
|
} finally {
|
||
|
|
saving = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<section class="section">
|
||
|
|
<h1 class="title">New Note</h1>
|
||
|
|
|
||
|
|
<form on:submit|preventDefault={handleSubmit}>
|
||
|
|
<div class="field">
|
||
|
|
<label class="label" for="title">Title</label>
|
||
|
|
<div class="control">
|
||
|
|
<input
|
||
|
|
id="title"
|
||
|
|
class="input"
|
||
|
|
type="text"
|
||
|
|
bind:value={title}
|
||
|
|
required
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field">
|
||
|
|
<label class="label" for="content">Content</label>
|
||
|
|
<div class="control">
|
||
|
|
<textarea
|
||
|
|
id="content"
|
||
|
|
class="textarea"
|
||
|
|
bind:value={content}
|
||
|
|
rows="10"
|
||
|
|
placeholder="Write your note in markdown..."
|
||
|
|
required
|
||
|
|
></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{#if error}
|
||
|
|
<div class="notification is-danger">
|
||
|
|
{error}
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
<div class="field is-grouped">
|
||
|
|
<div class="control">
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
class="button is-primary"
|
||
|
|
disabled={saving}
|
||
|
|
>
|
||
|
|
{saving ? 'Saving...' : 'Save'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<a href="/" class="button is-light" disabled={saving}>Cancel</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</section>
|
||
|
|
</div>
|