From e3c27b304f38e9b0af92a782160217a1bb39061a Mon Sep 17 00:00:00 2001
From: Shaheed Azaad <4594-shaheedazaad@users.noreply.gitlab.pavlovia.org>
Date: Mon, 14 Jul 2025 00:53:24 +0200
Subject: [PATCH] fixed create form

---
 src/routes/experiment/create/+page.svelte | 125 ++++++++++------------
 1 file changed, 58 insertions(+), 67 deletions(-)

diff --git a/src/routes/experiment/create/+page.svelte b/src/routes/experiment/create/+page.svelte
index eb0b0f7..e54771d 100644
--- a/src/routes/experiment/create/+page.svelte
+++ b/src/routes/experiment/create/+page.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
-	import * as Form from '$lib/components/ui/form';
 	import { Input } from '$lib/components/ui/input';
 	import { Checkbox } from '$lib/components/ui/checkbox';
-	import * as Select from '$lib/components/ui/select/index.js';
-	import { superForm } from 'sveltekit-superforms';
+	import * as Select from '$lib/components/ui/select/index.js'; // the import should stay as index.js
+	import { superForm, type SuperValidated, type Infer } from 'sveltekit-superforms';
 	import { zod } from 'sveltekit-superforms/adapters';
 	import { z } from 'zod';
 	import { toast } from 'svelte-sonner';
+	import { Label } from '$lib/components/ui/label';
+	import { Button } from '$lib/components/ui/button';
 
 	const formSchema = z.object({
 		name: z.string().min(1, 'Name is required'),
@@ -19,35 +20,36 @@
 		})
 	});
 
-	const form = superForm(
-		{
-			name: '',
-			description: '',
-			multiplayer: false,
-			type: 'jsPsych'
-		},
-		{
-			validators: zod(formSchema),
-			SPA: true,
-			onUpdate: async ({ form: f }) => {
-				if (f.valid) {
-					const res = await fetch('/api/experiment', {
-						method: 'POST',
-						headers: { 'Content-Type': 'application/json' },
-						body: JSON.stringify(f.data)
-					});
-					if (res.ok) {
-						await goto('/');
-						toast.success('Experiment created successfully');
-					} else {
-						const data = await res.json().catch(() => ({}));
-						toast.error(data?.error || 'Failed to create experiment');
-					}
+	const form = superForm({
+		name: '',
+		description: '',
+		multiplayer: false,
+		type: ''
+	}, {
+		validators: zod(formSchema),
+		SPA: true,
+		onUpdate: async ({ form: f }) => {
+			if (f.valid) {
+				const res = await fetch('/api/experiment', {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify(f.data)
+				});
+				if (res.ok) {
+					await goto('/');
+					toast.success('Experiment created successfully');
+				} else {
+					const data = await res.json().catch(() => ({}));
+					toast.error(data?.error || 'Failed to create experiment');
 				}
 			}
 		}
+	});
+
+	const { form: formData, enhance, errors } = form;
+	const triggerContent = $derived(
+		$formData.type ? $formData.type : 'Select a type'
 	);
-	const { form: formData, enhance } = form;
 </script>
 
 <div class="flex justify-center items-center min-h-screen bg-background">
@@ -57,45 +59,34 @@
 		</CardHeader>
 		<CardContent>
 			<form method="POST" use:enhance class="space-y-4">
-				<Form.Field {form} name="name">
-					<Form.Control let:attrs>
-						<Form.Label>Name</Form.Label>
-						<Input {...attrs} bind:value={$formData.name} />
-					</Form.Control>
-					<Form.FieldErrors />
-				</Form.Field>
-				<Form.Field {form} name="description">
-					<Form.Control let:attrs>
-						<Form.Label>Description</Form.Label>
-						<Input {...attrs} bind:value={$formData.description} />
-					</Form.Control>
-					<Form.FieldErrors />
-				</Form.Field>
-				<Form.Field {form} name="multiplayer">
-					<Form.Control let:attrs>
-						<div class="flex items-center space-x-2">
-							<Checkbox {...attrs} bind:checked={$formData.multiplayer} />
-							<Form.Label>Multiplayer</Form.Label>
-						</div>
-					</Form.Control>
-					<Form.FieldErrors />
-				</Form.Field>
-				<Form.Field {form} name="type">
-					<Form.Control let:attrs>
-						<Form.Label>Type</Form.Label>
-						<Select.Root {...attrs} bind:value={$formData.type} type="single">
-							<Select.Trigger>
-								{$formData.type || 'Select a type'}
-							</Select.Trigger>
-							<Select.Content>
-								<Select.Item value="jsPsych">jsPsych</Select.Item>
-								<Select.Item value="PsychoJS">PsychoJS</Select.Item>
-							</Select.Content>
-						</Select.Root>
-					</Form.Control>
-					<Form.FieldErrors />
-				</Form.Field>
-				<Form.Button class="w-full">Create</Form.Button>
+				<div class="space-y-2">
+					<Label for="name">Name</Label>
+					<Input name="name" bind:value={$formData.name} />
+					{#if $errors.name}<span class="text-red-500 text-sm">{$errors.name[0]}</span>{/if}
+				</div>
+				<div class="space-y-2">
+					<Label for="description">Description</Label>
+					<Input name="description" bind:value={$formData.description} />
+					{#if $errors.description}<span class="text-red-500 text-sm">{$errors.description[0]}</span>{/if}
+				</div>
+				<div class="flex items-center space-x-2">
+					<Checkbox name="multiplayer" bind:checked={$formData.multiplayer} />
+					<Label for="multiplayer">Multiplayer</Label>
+				</div>
+				<div class="space-y-2">
+					<Label for="type">Type</Label>
+					<Select.Root type="single" bind:value={$formData.type} name="type">
+						<Select.Trigger class="w-full" name="type">
+							{triggerContent}
+						</Select.Trigger>
+						<Select.Content>
+							<Select.Item value="jsPsych">jsPsych</Select.Item>
+							<Select.Item value="PsychoJS">PsychoJS</Select.Item>
+						</Select.Content>
+					</Select.Root>
+					{#if $errors.type}<span class="text-red-500 text-sm">{$errors.type[0]}</span>{/if}
+				</div>
+				<Button type="submit" class="w-full">Create</Button>
 			</form>
 		</CardContent>
 	</Card>