From cdd754ce91a1c9642f93e781f2dfc5ccf88001e3 Mon Sep 17 00:00:00 2001
From: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date: Wed, 6 Mar 2024 14:06:55 -0800
Subject: [PATCH] wip

---
 .vscode/settings.json                         |  9 ++
 src/lib/components/form/form.svelte           | 16 ++--
 .../question_base_input.svelte                | 36 --------
 .../components/form_editor/form_editor.svelte | 86 +++++++------------
 .../question_base_input.svelte                | 30 +++++++
 .../question_input_editor.svelte              | 12 +--
 .../question_list_editor/add_item.svelte      |  0
 .../question_list_editor/delete_item.svelte   |  0
 .../question_list_editor.svelte               | 16 ++--
 .../components/list_input/list_input.svelte   | 11 +--
 .../question_input/question_inputs.svelte     | 12 +++
 src/lib/form/form.ts                          | 50 +++--------
 src/routes/forms/[form_id]/+page.svelte       |  4 +-
 .../submissions/[submission_id]/+page.svelte  |  1 -
 14 files changed, 121 insertions(+), 162 deletions(-)
 create mode 100644 .vscode/settings.json
 delete mode 100644 src/lib/components/form/question_input_editor/question_base_input.svelte
 create mode 100644 src/lib/components/form_editor/question_input_editor/question_base_input.svelte
 rename src/lib/components/{form => form_editor}/question_input_editor/question_input_editor.svelte (54%)
 rename src/lib/components/{form => form_editor}/question_list_editor/add_item.svelte (100%)
 rename src/lib/components/{form => form_editor}/question_list_editor/delete_item.svelte (100%)
 rename src/lib/components/{form => form_editor}/question_list_editor/question_list_editor.svelte (68%)
 create mode 100644 src/lib/components/question_input/question_inputs.svelte

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..ad24951
--- /dev/null
+++ b/.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"
+	}
+}
diff --git a/src/lib/components/form/form.svelte b/src/lib/components/form/form.svelte
index ab61be4..cf1889d 100644
--- a/src/lib/components/form/form.svelte
+++ b/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>
diff --git a/src/lib/components/form/question_input_editor/question_base_input.svelte b/src/lib/components/form/question_input_editor/question_base_input.svelte
deleted file mode 100644
index 62dcc8f..0000000
--- a/src/lib/components/form/question_input_editor/question_base_input.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-	import type { QuestionBase } from '$lib/form';
-	import { QuestionType } from '$lib/form';
-	import QuestionInput from '$lib/components/form/question_input/question_input.svelte';
-
-	export let value: QuestionBase;
-</script>
-
-<input type="hidden" name="type" value={value.type} />
-
-<QuestionInput
-	data={{
-		type: QuestionType.TEXT,
-		name: 'Name',
-		content: 'The unique identifier for the question.',
-		value: value.name
-	}}
-/>
-
-<QuestionInput
-	data={{
-		type: QuestionType.TEXTAREA,
-		name: 'Content',
-		content: 'The markdown question content for the form field.',
-		value: value.content
-	}}
-/>
-
-<QuestionInput
-	data={{
-		type: QuestionType.BOOLEAN,
-		name: 'Required',
-		content: 'Whether or not the form field is required.',
-		value: value.required
-	}}
-/>
diff --git a/src/lib/components/form_editor/form_editor.svelte b/src/lib/components/form_editor/form_editor.svelte
index 8c256d6..96eb30d 100644
--- a/src/lib/components/form_editor/form_editor.svelte
+++ b/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>
diff --git a/src/lib/components/form_editor/question_input_editor/question_base_input.svelte b/src/lib/components/form_editor/question_input_editor/question_base_input.svelte
new file mode 100644
index 0000000..18b2f93
--- /dev/null
+++ b/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}
+/>
diff --git a/src/lib/components/form/question_input_editor/question_input_editor.svelte b/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
similarity index 54%
rename from src/lib/components/form/question_input_editor/question_input_editor.svelte
rename to src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
index 7de09ab..f40e9bf 100644
--- a/src/lib/components/form/question_input_editor/question_input_editor.svelte
+++ b/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. -->
diff --git a/src/lib/components/form/question_list_editor/add_item.svelte b/src/lib/components/form_editor/question_list_editor/add_item.svelte
similarity index 100%
rename from src/lib/components/form/question_list_editor/add_item.svelte
rename to src/lib/components/form_editor/question_list_editor/add_item.svelte
diff --git a/src/lib/components/form/question_list_editor/delete_item.svelte b/src/lib/components/form_editor/question_list_editor/delete_item.svelte
similarity index 100%
rename from src/lib/components/form/question_list_editor/delete_item.svelte
rename to src/lib/components/form_editor/question_list_editor/delete_item.svelte
diff --git a/src/lib/components/form/question_list_editor/question_list_editor.svelte b/src/lib/components/form_editor/question_list_editor/question_list_editor.svelte
similarity index 68%
rename from src/lib/components/form/question_list_editor/question_list_editor.svelte
rename to src/lib/components/form_editor/question_list_editor/question_list_editor.svelte
index c5f9ff2..c3714d8 100644
--- a/src/lib/components/form/question_list_editor/question_list_editor.svelte
+++ b/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,
diff --git a/src/lib/components/list_input/list_input.svelte b/src/lib/components/list_input/list_input.svelte
index 3d6c963..c65a1f7 100644
--- a/src/lib/components/list_input/list_input.svelte
+++ b/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)} />
diff --git a/src/lib/components/question_input/question_inputs.svelte b/src/lib/components/question_input/question_inputs.svelte
new file mode 100644
index 0000000..2ff88a0
--- /dev/null
+++ b/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}
diff --git a/src/lib/form/form.ts b/src/lib/form/form.ts
index 87db17c..99fc783 100644
--- a/src/lib/form/form.ts
+++ b/src/lib/form/form.ts
@@ -40,35 +40,20 @@ export interface Form {
 	questions: QuestionList;
 
 	/**
-	 * message is the Discord message that the form is linked to.
+	 * discordMessageID is the ID of the Discord message that the form is linked to (if any).
 	 */
-	message?: DiscordMessage;
+	discordMessageID?: ID;
 
 	/**
-	 * schedule is the schedule for the form.
-	 *
-	 * If undefined, the form is always open and immediately posted to Discord when created.
+	 * discordChannelID is the ID of the Discord channel that the message is in.
 	 */
-	schedule?: FormSchedule;
-
-	/**
-	 * allowsMultipleSubmissions is whether or not the form allows multiple
-	 * submissions. Defaults to false.
-	 */
-	allowsMultipleSubmissions?: boolean;
+	discordChannelID: ID;
 
 	/**
-	 * anonymized is whether or not the form's submissions are anonymized.
-	 *
-	 * Defaults to false.
+	 * discordThreadID is the ID of the Discord thread that the message is in.
 	 */
-	anonymized?: boolean;
-}
+	discordThreadID?: ID;
 
-/**
- * FormSchedule is the schedule for a form.
- */
-export interface FormSchedule {
 	/**
 	 * startDate is the start time for the form.
 	 *
@@ -87,28 +72,19 @@ export interface FormSchedule {
 	 * timezone is the timezone ID for the form. Defaults to UTC/GMT.
 	 */
 	timezone?: string;
-}
 
-/**
- * DiscordMessage is a Discord message.
- */
-export interface DiscordMessage {
 	/**
-	 * id is the ID of the Discord message that the form is linked to (if any).
-	 */
-	id?: ID;
-
-	/**
-	 * channelID is the ID of the Discord channel that the message is in.
+	 * allowsMultipleSubmissions is whether or not the form allows multiple
+	 * submissions. Defaults to false.
 	 */
-	channelID: ID;
+	allowsMultipleSubmissions?: boolean;
 
 	/**
-	 * threadID is the ID of the Discord thread that the message is in.
+	 * anonymized is whether or not the form's submissions are anonymized.
+	 *
+	 * Defaults to false.
 	 */
-	threadID?: ID;
-
-	// TODO: Add guild ID to target specific guild.
+	anonymized?: boolean;
 }
 
 /**
diff --git a/src/routes/forms/[form_id]/+page.svelte b/src/routes/forms/[form_id]/+page.svelte
index fe5d2b0..29cd523 100644
--- a/src/routes/forms/[form_id]/+page.svelte
+++ b/src/routes/forms/[form_id]/+page.svelte
@@ -1,13 +1,13 @@
 <!-- TODO: Editor page -->
 <script lang="ts">
 	import type { PageData } from './$types';
-	import FormEditor from '$lib/components/form/form_editor/form_editor.svelte';
+	import FormEditor from '$lib/components/form_editor/form_editor.svelte';
 
 	export let data: PageData;
 </script>
 
 {#if data.form}
-	<FormEditor action="" method="POST" data={data.form} />
+	<FormEditor action="" method="POST" value={data.form} />
 {:else}
 	<p>Form not found</p>
 {/if}
diff --git a/src/routes/forms/[form_id]/submissions/[submission_id]/+page.svelte b/src/routes/forms/[form_id]/submissions/[submission_id]/+page.svelte
index 94072ba..b2424b9 100644
--- a/src/routes/forms/[form_id]/submissions/[submission_id]/+page.svelte
+++ b/src/routes/forms/[form_id]/submissions/[submission_id]/+page.svelte
@@ -5,7 +5,6 @@
 </script>
 
 {#if data.submission}
-	<!-- <Submission data={data.submission} /> -->
 	<code>{'<Submission />'}</code>
 {:else}
 	<p>Submission not found</p>