wip

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.insertSpaces": true,
+	"editor.tabSize": 2,
+	"files.eol": "\n",
+	"[svelte]": {
+		"editor.defaultFormatter": "svelte.svelte-vscode"
+	}
+}

src/lib/components/form/form.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import type { User, Form } from '$lib/store';
-	import QuestionInput from '$lib/components/form/question_input/question_input.svelte';
+	import QuestionInput from '$lib/components/question_input/question_input.svelte';
 
-	export let data: Form;
-	export let user: User | undefined = undefined;
 	export let action = '';
 	export let method = 'POST';
+	export let data: Form;
+	export let user: User | undefined = undefined;
 
 	if (data.questions.shuffled) {
 		data.questions.data = data.questions.data.sort(() => Math.random() - 0.5);
@@ -27,16 +27,16 @@
 				{/if}
 			</p>
 
-			{#if data.schedule?.startDate}
-				<p>Opened at: {data.schedule?.startDate}</p>
+			{#if data.startDate}
+				<p>Opened at: {data.startDate}</p>
 			{/if}
-			{#if data.schedule?.endDate}
-				<p>Opened until: {data.schedule?.endDate}</p>
+			{#if data?.endDate}
+				<p>Opened until: {data?.endDate}</p>
 			{/if}
 		</div>
 	</div>
 	{#each data.questions.data as question}
-		<QuestionInput data={question} />
+		<QuestionInput {...question} />
 	{/each}
 
 	<button type="submit">Submit</button>

src/lib/components/form_editor/form_editor.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import type { Form } from '$lib/store';
 	import { QuestionType } from '$lib/form';
-	import QuestionInput from '$lib/components/form/question_input/question_input.svelte';
+	import QuestionInput from '$lib/components/question_input/question_input.svelte';
+	import QuestionListEditor from './question_list_editor/question_list_editor.svelte';
 
 	export let action: string;
 	export let method: string;
-	export let data: Form;
+	export let value: Form;
 
 	// TODO: Add discord data: channels, threads, guilds, roles.
 </script>
@@ -16,82 +17,55 @@
 		<p class="form-description">Edit a form!</p>
 		<hr />
 		<div class="form-information">
-			<p>Form ID: {data.id}</p>
+			<p>Form ID: {value.id}</p>
 		</div>
 	</div>
 
-	<QuestionInput
-		data={{
-			type: QuestionType.TEXT,
-			name: 'title',
-			content: 'Title'
-		}}
-	/>
+	<QuestionInput type={QuestionType.TEXT} name="title" content="Title" bind:value={value.title} />
 
 	<QuestionInput
-		data={{
-			type: QuestionType.TEXTAREA,
-			name: 'description',
-			content: 'Description'
-		}}
+		type={QuestionType.TEXTAREA}
+		name="description"
+		content="Description"
+		bind:value={value.description}
 	/>
 
-	<!-- TODO: Replace camelCase names with snake_case. -->
 	<QuestionInput
-		data={{
-			type: QuestionType.TEXT,
-			name: 'schedule.startDatetime',
-			content: 'Start date'
-		}}
+		type={QuestionType.DATETIME}
+		name="startDate"
+		content="Start date"
+		bind:value={value.startDate}
 	/>
 
 	<QuestionInput
-		data={{
-			type: QuestionType.TEXT,
-			name: 'schedule.endDatetime',
-			content: 'End date'
-		}}
+		type={QuestionType.DATETIME}
+		name="endDate"
+		content="End date"
+		bind:value={value.endDate}
 	/>
 
 	<QuestionInput
-		data={{
-			type: QuestionType.TIMEZONE,
-			name: 'schedule.timezone',
-			content: 'Timezone (default: UTC/GMT)'
-		}}
+		type={QuestionType.TIMEZONE}
+		name="timezone"
+		content="Timezone (default: UTC/GMT)"
+		bind:value={value.timezone}
 	/>
 
 	<QuestionInput
-		data={{
-			type: QuestionType.BOOLEAN,
-			name: 'anonymized',
-			content: 'Anonymized'
-		}}
+		type={QuestionType.BOOLEAN}
+		name="anonymized"
+		content="Anonymized"
+		bind:value={value.anonymized}
 	/>
 
 	<QuestionInput
-		data={{
-			type: QuestionType.BOOLEAN,
-			name: 'allowsMultipleSubmissions',
-			content: 'Allows multiple submissions'
-		}}
+		type={QuestionType.BOOLEAN}
+		name="shuffled"
+		content="Shuffled"
+		bind:value={value.questions.shuffled}
 	/>
 
-	<!-- Discord message schedule -->
-
-	<!-- <QuestionInput
-		data={{
-			type: QuestionType.SELECT,
-			name: 'message.channelID',
-			content: 'Discord channel ID',
-			options: data.channels.map((channel) => ({
-				value: channel.id,
-				content: channel.name
-			}))
-		}}
-	/> -->
-
-	<!-- TODO: Make editor inputs for each type of question. -->
+	<QuestionListEditor bind:value={value.questions} />
 
 	<button type="submit">Submit</button>
 </form>

src/lib/components/form_editor/question_input_editor/question_base_input.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { QuestionBase } from '$lib/form';
+	import { QuestionType } from '$lib/form';
+	import QuestionInput from '$lib/components/question_input/question_input.svelte';
+
+	export let value: QuestionBase;
+</script>
+
+<input type="hidden" name="type" value={value.type} />
+
+<QuestionInput
+	type={QuestionType.TEXT}
+	name="name"
+	content="The unique identifier for the question."
+	bind:value={value.name}
+/>
+
+<QuestionInput
+	type={QuestionType.TEXTAREA}
+	name="content"
+	content="The markdown question content for the form field."
+	bind:value={value.content}
+/>
+
+<QuestionInput
+	type={QuestionType.BOOLEAN}
+	name="required"
+	content="Whether or not the form field is required."
+	bind:value={value.required}
+/>

src/lib/components/form/question_input_editor/question_input_editor.svelte → src/lib/components/form_editor/question_input_editor/question_input_editor.svelte

@@ -5,11 +5,7 @@
 	// export let value: Question;
 </script>
 
-<!-- <QuestionInput
-	data={{
-		type: value.type,
-		name: value.name,
-		content: value.content,
-		value: value.value
-	}}
-/> -->
+<!-- TODO: Reconcile changes made in
+https://github.com/acmcsufoss/form/pull/new/question-input-editor -->
+
+<!-- TODO: Make a new PR out of this current branch. -->

src/lib/components/form/question_list_editor/question_list_editor.svelte → src/lib/components/form_editor/question_list_editor/question_list_editor.svelte

@@ -3,26 +3,24 @@
 	import { QuestionType } from '$lib/form';
 	import ListInput from '$lib/components/list_input/list_input.svelte';
 	import QuestionInput from '$lib/components/question_input/question_input.svelte';
-	import QuestionInputEditor from '$lib/components/form/question_input_editor/question_input_editor.svelte';
+	import QuestionInputEditor from '$lib/components/form_editor/question_input_editor/question_input_editor.svelte';
 	import AddItem from './add_item.svelte';
 	import DeleteItem from './delete_item.svelte';
 
-	export let data: QuestionList;
+	export let value: QuestionList;
 </script>
 
 <QuestionInput
-	data={{
-		type: QuestionType.BOOLEAN,
-		name: 'shuffled',
-		content: 'Shuffled',
-		value: data.shuffled
-	}}
+	type={QuestionType.BOOLEAN}
+	name="shuffled"
+	content="Shuffled"
+	bind:value={value.shuffled}
 />
 
 <!-- TODO: Figure out how to handle indexed names for the items in the list if needed. -->
 
 <ListInput
-	bind:data={data.data}
+	bind:value={value.data}
 	components={{
 		item: QuestionInputEditor,
 		addItem: AddItem,

src/lib/components/list_input/list_input.svelte

@@ -1,21 +1,22 @@
 <script lang="ts">
 	import type { ItemProps, Components } from './list_input.ts';
 
-	export let data: ItemProps[] = [];
 	export let components: Components;
+	export let value: ItemProps[] = [];
 
 	function deleteItem(i: number): void {
-		data.splice(i, 1);
-		// data = [...data];
+		value.splice(i, 1);
 	}
 
 	function addItem(item: ItemProps): void {
-		data.push(item);
+		value.push(item);
 	}
+
+	// TODO: Make sortable items.
 </script>
 
 <div>
-	{#each data as item, i}
+	{#each value as item, i}
 		<div>
 			<svelte:component this={components.item} {...item} />
 			<svelte:component this={components.deleteItem} deleteAction={() => deleteItem(i)} />

src/lib/components/question_input/question_inputs.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { Question } from '$lib/form';
+	import QuestionInput from './question_input.svelte';
+
+	export const data: Question[] = [];
+</script>
+
+{#each data as question (question.name)}
+	<QuestionInput {...question} />
+{:else}
+	<slot />
+{/each}