95 lines
2.9 KiB
Svelte
95 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import { formSchema, type FormSchema } from './answer-schema';
|
|
import type { Question } from '$lib/types';
|
|
|
|
import { toast } from 'svelte-sonner';
|
|
import { zodClient } from 'sveltekit-superforms/adapters';
|
|
import { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
|
|
|
|
import * as Card from '$lib/components/ui/card/index.js';
|
|
import * as Form from '$lib/components/ui/form/index.js';
|
|
import { Input } from '$lib/components/ui/input/index.js';
|
|
import { Textarea } from '$lib/components/ui/textarea/index.js';
|
|
import Altcha from '$lib/components/Altcha.svelte';
|
|
|
|
let {
|
|
data
|
|
}: {
|
|
data: { answer_form: SuperValidated<Infer<FormSchema>>; question: Question; poolSize: number };
|
|
} = $props();
|
|
|
|
const form = superForm(data.answer_form, {
|
|
validators: zodClient(formSchema),
|
|
invalidateAll: 'force',
|
|
onUpdated: ({ form: f }) => {
|
|
if (f.valid) {
|
|
toast.success('Vastus saadetud.');
|
|
} else {
|
|
toast.error('Vastamine nurjus, palun paranda vead.');
|
|
}
|
|
}
|
|
});
|
|
|
|
const { form: formData, enhance, constraints } = form;
|
|
</script>
|
|
|
|
<Card.Root>
|
|
<Card.Header>
|
|
{#if !data.question}
|
|
<Card.Title>Kõik vastatud</Card.Title>
|
|
<Card.Description>Rahval said kõik küsimused otsa!</Card.Description>
|
|
{:else}
|
|
<Card.Title>Vasta vajajale</Card.Title>
|
|
<Card.Description>Tänutäheks saad vastu ühe küsimuse küsida.</Card.Description>
|
|
{/if}
|
|
</Card.Header>
|
|
{#if !data.question}
|
|
<Card.Content>
|
|
{#if data.poolSize === 0}
|
|
<p class="text-sm leading-6">Sellise erandjuhuga saad ühe korra niisama küsida!</p>
|
|
{:else}
|
|
<p class="text-sm leading-6">Äkki tahaksid su sõbrad vastata või on neil küsimusi?</p>
|
|
{/if}
|
|
</Card.Content>
|
|
{:else}
|
|
<form method="POST" use:enhance action="?/answer">
|
|
<Card.Content>
|
|
<Form.Field {form} name="answer">
|
|
<Form.Control>
|
|
{#snippet children({ props })}
|
|
<Form.Label class="transition-colors">{data.question.content}?</Form.Label>
|
|
<Textarea
|
|
{...props}
|
|
bind:value={$formData.answer}
|
|
class="resize-none transition-colors"
|
|
/>
|
|
{/snippet}
|
|
</Form.Control>
|
|
<div class="flex justify-between">
|
|
<Form.FieldErrors />
|
|
<Form.Description>
|
|
{$formData.answer.length}/{$constraints.answer?.maxlength}
|
|
</Form.Description>
|
|
</div>
|
|
</Form.Field>
|
|
<Form.Field {form} name="questionId">
|
|
<Form.Control>
|
|
{#snippet children({ props })}
|
|
<Input type="hidden" {...props} bind:value={$formData.questionId} />
|
|
{/snippet}
|
|
</Form.Control>
|
|
</Form.Field>
|
|
<Form.Field {form} name="altcha" class="mx-auto mt-3 w-[var(--altcha-max-width)]">
|
|
<Form.Control>
|
|
{#snippet children({ props })}
|
|
<Altcha {...props} bind:value={$formData.altcha} />
|
|
{/snippet}
|
|
</Form.Control>
|
|
</Form.Field>
|
|
</Card.Content>
|
|
<Card.Footer class="justify-center">
|
|
<Form.Button>Vasta</Form.Button>
|
|
</Card.Footer>
|
|
</form>
|
|
{/if}
|
|
</Card.Root>
|