Sai Kiran Vella
87 lines
2.3 KiB
Svelte
87 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import Spinner from '$lib/Spinner.svelte';
|
|
|
|
interface FormData {
|
|
title: string;
|
|
quarter: string;
|
|
date: string;
|
|
thesis: string;
|
|
tickers: string;
|
|
}
|
|
|
|
let {
|
|
saving = false,
|
|
error = null,
|
|
onSubmit,
|
|
onCancel,
|
|
}: {
|
|
saving?: boolean;
|
|
error?: string | null;
|
|
onSubmit: (data: FormData) => void;
|
|
onCancel: () => void;
|
|
} = $props();
|
|
|
|
function currentQuarter(): string {
|
|
const d = new Date();
|
|
return `Q${Math.ceil((d.getMonth() + 1) / 3)} ${d.getFullYear()}`;
|
|
}
|
|
|
|
let form = $state<FormData>({
|
|
title: '',
|
|
quarter: currentQuarter(),
|
|
date: new Date().toISOString().slice(0, 10),
|
|
thesis: '',
|
|
tickers: '',
|
|
});
|
|
|
|
function handleSubmit(e: SubmitEvent) {
|
|
e.preventDefault();
|
|
onSubmit({ ...form });
|
|
}
|
|
</script>
|
|
|
|
<section class="section form-section">
|
|
<div class="section-header"><h2>New Market Call</h2></div>
|
|
<form class="call-form" onsubmit={handleSubmit}>
|
|
<div class="call-form-row">
|
|
<label>
|
|
<span>Title</span>
|
|
<input bind:value={form.title} placeholder="Q3 2025 — Rate pivot & tech rotation" required />
|
|
</label>
|
|
<label class="narrow">
|
|
<span>Quarter</span>
|
|
<input bind:value={form.quarter} placeholder="Q3 2025" required />
|
|
</label>
|
|
<label class="narrow">
|
|
<span>Date</span>
|
|
<input type="date" bind:value={form.date} required />
|
|
</label>
|
|
</div>
|
|
<label>
|
|
<span>Thesis</span>
|
|
<textarea
|
|
bind:value={form.thesis}
|
|
rows="4"
|
|
placeholder="Describe the macro thesis behind this call — why these tickers, why now..."
|
|
required
|
|
></textarea>
|
|
</label>
|
|
<label>
|
|
<span>Tickers to track</span>
|
|
<input bind:value={form.tickers} placeholder="AAPL, MSFT, TLT, GLD …" required />
|
|
<span class="call-hint">Comma or space separated. Current prices will be snapshot automatically.</span>
|
|
</label>
|
|
{#if error}
|
|
<div class="form-error-block">⚠ {error}</div>
|
|
{/if}
|
|
<div class="call-form-actions">
|
|
<button type="submit" class="btn-primary" disabled={saving}>
|
|
{#if saving}<Spinner size="sm" /><span>Snapshotting prices…</span>
|
|
{:else}Save Call{/if}
|
|
</button>
|
|
<button type="button" class="btn-ghost" onclick={onCancel}>Cancel</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|