Form Editor Improvements

package.json

@@ -15,6 +15,7 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.20.4",
+		"@types/sortablejs": "^1.15.8",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
 		"eslint": "^8.28.0",
@@ -33,6 +34,7 @@
 		"@deno/kv": "^0.7.0",
 		"discord-api-types": "^0.37.67",
 		"export-to-csv": "^1.2.2",
+		"sortablejs": "^1.15.2",
 		"ulid": "^2.3.0"
 	}
 }

src/lib/components/form/form.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import type { User, Form } from '$lib/store';
+	import type * as db from '$lib/db';
 	import QuestionInput from '$lib/components/question_input/question_input.svelte';
 
 	export let action = '';
 	export let method = 'POST';
-	export let data: Form;
-	export let user: User | undefined = undefined;
+	export let data: db.Form;
+	export let user: db.User | undefined = undefined;
 
 	if (data.questions.shuffled) {
 		data.questions.data = data.questions.data.sort(() => Math.random() - 0.5);
@@ -121,13 +121,6 @@
 		font-weight: 400;
 	}
 
-	:global(.Question-Header) {
-		font-size: 13px;
-		font-weight: bold;
-		margin-bottom: 10px;
-		font-family: 'Poppins';
-	}
-
 	:global(.question) {
 		padding: 20px 15px;
 		width: calc(100% - 30px);

src/lib/components/form_editor/form_editor.svelte

@@ -1,14 +1,25 @@
 <script lang="ts">
-	import type { Form } from '$lib/store';
-	import { QuestionType } from '$lib/form';
+	import type { Form } from '$lib/form';
+	import { QuestionType, type QuestionList } from '$lib/form';
 	import QuestionInput from '$lib/components/question_input/question_input.svelte';
 	import QuestionListEditor from './question_list_editor/question_list_editor.svelte';
+	import BaseEditor from '../questions/base/base_editor.svelte';
+	import BooleanQuestionInputEditor from '../questions/boolean/boolean_question_input_editor.svelte';
+	import QuestionInputEditor from './question_input_editor/question_input_editor.svelte';
 
 	export let action: string;
 	export let method: string;
 	export let value: Form;
 
+	var questions: any = value.questions;
 	// TODO: Add discord data: channels, threads, guilds, roles.
+	function addItem() {
+		questions.append();
+	}
+	function handleSumbit(event: MouseEvent) {
+		event.preventDefault();
+		console.log(questions);
+	}
 </script>
 
 <form {action} {method}>
@@ -65,9 +76,8 @@
 		bind:value={value.questions.shuffled}
 	/>
 
-	<QuestionListEditor bind:value={value.questions} />
-
-	<button type="submit">Submit</button>
+	<QuestionListEditor bind:value={questions} />
+	<button type="submit" on:click={handleSumbit}>Submit</button>
 </form>
 
 <style>
@@ -79,4 +89,38 @@
 		margin: 0 auto;
 		max-width: 400px;
 	}
+	:global(fieldset) {
+		border: none;
+		min-width: 0;
+		margin: 10px;
+		padding: 0px;
+		max-width: calc(100% - 20px);
+		width: 100%;
+		display: block;
+	}
+	:global(legend) {
+		font-size: 13px;
+		font-weight: bold;
+		margin-bottom: 10px;
+		font-family: 'Poppins';
+	}
+
+	:global(.question) {
+		padding: 20px 15px;
+		width: calc(100% - 30px);
+		margin: 10px auto;
+		background-color: #ffffff;
+		border-radius: 10px;
+		border-color: #c5c8c9;
+		border-width: 0;
+		border-style: solid;
+	}
+
+	/* :global(label) {
+		display: flex;
+	} */
+
+	:global(input) {
+		display: flex;
+	}
 </style>

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

@@ -1,11 +1,52 @@
 <script lang="ts">
-	// import type { Question } from '$lib/form';
-	// import QuestionInput from '$lib/components/form/question_input/question_input.svelte';
+	import { QuestionType } from '$lib/form';
+	import AvailabilityQuestionInputEditor from '$lib/components/questions/availability/availability_question_input_editor.svelte';
+	import BooleanQuestionInputEditor from '$lib/components/questions/boolean/boolean_question_input_editor.svelte';
+	import ColorQuestionInputEditor from '$lib/components/questions/color/color_question_input_editor.svelte';
+	import DateQuestionInputEditor from '$lib/components/questions/date/date_question_input_editor.svelte';
+	import DatetimeQuestionInputEditor from '$lib/components/questions/datetime/datetime_question_input_editor.svelte';
+	import NumberQuestionInputEditor from '$lib/components/questions/number/number_question_input_editor.svelte';
+	import RadioGroupQuestionInputEditor from '$lib/components/questions/radio_group/radio_group_question_input_editor.svelte';
+	import SelectQuestionInputEditor from '$lib/components/questions/select/select_question_input_editor.svelte';
+	import TextQuestionInputEditor from '$lib/components/questions/text/text_question_input_editor.svelte';
+	import TextareaQuestionInputEditor from '$lib/components/questions/textarea/textarea_question_input_editor.svelte';
+	import TimeQuestionInputEditor from '$lib/components/questions/time/time_question_input_editor.svelte';
+	import BooleanQuestionInput from '$lib/components/questions/boolean/boolean_question_input.svelte';
 
-	// export let value: Question;
+	export var data: any;
 </script>
 
 <!-- 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. -->
+
+<!-- Uncomment finished questions to see if it renders -->
+<div>
+	{#if data.type === QuestionType.BOOLEAN}
+		<BooleanQuestionInputEditor bind:data />
+	{:else if data.type === QuestionType.COLOR}
+		<ColorQuestionInputEditor bind:data />
+	{:else if data.type === QuestionType.NUMBER}
+		<NumberQuestionInputEditor bind:data />
+	{:else if data.type === QuestionType.TEXT}
+		<TextQuestionInputEditor bind:data />
+	{:else if data.type === QuestionType.TEXTAREA}
+		<TextareaQuestionInputEditor bind:data />
+	{:else if data.type === QuestionType.DATE}
+		<DateQuestionInputEditor bind:data />
+	{:else if data.type === QuestionType.DATETIME}
+		<DatetimeQuestionInputEditor bind:data />
+	{:else if data.type === QuestionType.TIME}
+		<TimeQuestionInputEditor bind:data />
+	{:else if data.type === QuestionType.RADIO_GROUP}
+		<RadioGroupQuestionInputEditor bind:data />
+	{:else if data.type === QuestionType.AVAILABILITY}
+		<AvailabilityQuestionInputEditor bind:data />
+	{:else if data.type === QuestionType.SELECT}
+		<SelectQuestionInputEditor bind:data />
+	{/if}
+</div>
+
+<style>
+</style>

src/lib/components/form_editor/question_list_editor/add_item.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { QuestionType } from '$lib/form';
 	import type { AddItemProps } from '$lib/components/list_input/list_input';
+	import { makeBlankQuestion } from './add_item';
 
 	export let addAction: AddItemProps['addAction'];
 
 	let type = QuestionType.TEXT;
 
-	function add() {
-		// TODO: Add a helper function to create a blank question object for each type.
-		addAction({ type });
+	function add(e: MouseEvent) {
+		e.preventDefault();
+		addAction(makeBlankQuestion(type));
 	}
 
 	// function makeDefault(type: QuestionType): Question {

src/lib/components/form_editor/question_list_editor/add_item.ts

@@ -0,0 +1,10 @@
+import type { QuestionBase, QuestionType } from '$lib/form';
+
+export function makeBlankQuestion(type: QuestionType): QuestionBase {
+	return {
+		type,
+		name: '',
+		content: 'No content.',
+		required: false
+	};
+}

src/lib/components/form_editor/question_list_editor/delete_item.svelte

@@ -4,4 +4,14 @@
 	export let deleteAction: DeleteItemProps['deleteAction'];
 </script>
 
+<!-- TODO: stop this button from firing when the user hits the enter key -->
+<!-- With the enter key still inactive its very easy to accidentally delete a question. -->
+<!-- Some inputs may also use an enter such as text area if the user writes mutliple paragraphs -->
 <button on:click={() => deleteAction()}>Delete</button>
+
+<style>
+	button {
+		position: absolute;
+		transform: translateX(-120%) translateY(-250%);
+	}
+</style>

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

@@ -10,12 +10,12 @@
 	export let value: QuestionList;
 </script>
 
-<QuestionInput
+<!-- <QuestionInput
 	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. -->