Reorganize components (#17)

* reorganize components again

* wip

* Update form.ts

* fix check errors

* wip

Author: EthanThatOneKid

.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/form_editor/form_editor.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { Form } from '$lib/store';
+	import { QuestionType } from '$lib/form';
+	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 value: Form;
+
+	// TODO: Add discord data: channels, threads, guilds, roles.
+</script>
+
+<form {action} {method}>
+	<div class="form-header">
+		<h1>Form editor</h1>
+		<p class="form-description">Edit a form!</p>
+		<hr />
+		<div class="form-information">
+			<p>Form ID: {value.id}</p>
+		</div>
+	</div>
+
+	<QuestionInput type={QuestionType.TEXT} name="title" content="Title" bind:value={value.title} />
+
+	<QuestionInput
+		type={QuestionType.TEXTAREA}
+		name="description"
+		content="Description"
+		bind:value={value.description}
+	/>
+
+	<QuestionInput
+		type={QuestionType.DATETIME}
+		name="startDate"
+		content="Start date"
+		bind:value={value.startDate}
+	/>
+
+	<QuestionInput
+		type={QuestionType.DATETIME}
+		name="endDate"
+		content="End date"
+		bind:value={value.endDate}
+	/>
+
+	<QuestionInput
+		type={QuestionType.TIMEZONE}
+		name="timezone"
+		content="Timezone (default: UTC/GMT)"
+		bind:value={value.timezone}
+	/>
+
+	<QuestionInput
+		type={QuestionType.BOOLEAN}
+		name="anonymized"
+		content="Anonymized"
+		bind:value={value.anonymized}
+	/>
+
+	<QuestionInput
+		type={QuestionType.BOOLEAN}
+		name="shuffled"
+		content="Shuffled"
+		bind:value={value.questions.shuffled}
+	/>
+
+	<QuestionListEditor bind:value={value.questions} />
+
+	<button type="submit">Submit</button>
+</form>
+
+<style>
+	form {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		margin: 0 auto;
+		max-width: 400px;
+	}
+</style>

src/lib/components/form/question_input/question_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_base_input.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_editor/form_editor.svelte

@@ -10,6 +10,10 @@
 		// TODO: Add a helper function to create a blank question object for each type.
 		addAction({ type });
 	}
+
+	// function makeDefault(type: QuestionType): Question {
+	// 	switch...
+	// }
 </script>
 
 <select bind:value={type}>