Form Editor Improvements

src/lib/components/form/form.svelte

@@ -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: 0px;
+		padding: 0px;
+		max-width: 100%;
+		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,53 @@
 <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 = $$props;
 </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 $$props.type === QuestionType.BOOLEAN}
+		<BooleanQuestionInputEditor bind:data />
+	{:else if $$props.type === QuestionType.COLOR}
+		<ColorQuestionInputEditor bind:data />
+	{:else if $$props.type === QuestionType.NUMBER}
+		<NumberQuestionInputEditor {...$$props} />
+	{:else if $$props.type === QuestionType.TEXT}
+		<TextQuestionInputEditor {...$$props} />
+	{:else if $$props.type === QuestionType.TEXTAREA}
+		<TextareaQuestionInputEditor {...$$props} />
+	{:else if $$props.type === QuestionType.DATE}
+		<DateQuestionInputEditor {...$$props} />
+	{:else if $$props.type === QuestionType.DATETIME}
+		<DatetimeQuestionInputEditor {...$$props} />
+	{:else if $$props.type === QuestionType.TIME}
+		<TimeQuestionInputEditor {...$$props} />
+		<!-- 
+	{:else if $$props.type === QuestionType.RADIO_GROUP}
+		<RadioGroupQuestionInputEditor {...$$props} />
+
+	{:else if $$props.type === QuestionType.AVAILABILITY}
+		<AvailabilityQuestionInputEditor {...$$props} />
+
+	 -->
+	{:else if $$props.type === QuestionType.SELECT}
+		<SelectQuestionInputEditor {...$$props} />
+	{/if}
+</div>

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

@@ -6,9 +6,11 @@
 
 	let type = QuestionType.TEXT;
 
-	function add() {
+	function add(e: MouseEvent) {
+		e.preventDefault();
+		const data = { type };
 		// TODO: Add a helper function to create a blank question object for each type.
-		addAction({ type });
+		addAction(data);
 	}
 
 	// function makeDefault(type: QuestionType): Question {

src/lib/components/list_input/list_input.svelte

@@ -5,11 +5,11 @@
 	export let value: ItemProps[] = [];
 
 	function deleteItem(i: number): void {
-		value.splice(i, 1);
+		value = value.filter((_, index) => index !== i);
 	}
 
 	function addItem(item: ItemProps): void {
-		value.push(item);
+		value = [...value, item];
 	}
 
 	// TODO: Make sortable items.

src/lib/components/questions/availability/availability_question_input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { AvailablityQuestion } from '$lib/form';
 
-	const data = $$props as AvailablityQuestion;
+	export let data = $$props as AvailablityQuestion;
 </script>
 
 <fieldset>

src/lib/components/questions/base/base_editor.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { QuestionBase, TextQuestion } from '$lib/form';
+	import { QuestionType } from '$lib/form';
+	import BooleanQuestionInput from '../boolean/boolean_question_input.svelte';
+	import TextQuestionInput from '../text/text_question_input.svelte';
+
+	/*  type: QuestionType;
+	    name: string;
+      content: string;
+      required?: boolean; */
+	export let data = $$props as QuestionBase;
+</script>
+
+<!-- Copied From TextQuestionInput -->
+<fieldset>
+	<legend>Question Title</legend>
+	<input type="text" bind:value={data.content} placeholder="Question Title" />
+</fieldset>
+
+<fieldset>
+	<legend>Internal Question</legend>
+	<input type="text" bind:value={data.name} placeholder="Internal Question Name" />
+</fieldset>
+
+<fieldset>
+	<legend>Question Required</legend>
+	<input type="checkbox" bind:value={data.required} placeholder="Question Required" />
+</fieldset>
+
+
+<slot />

src/lib/components/questions/boolean/boolean_question_input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { BooleanQuestion } from '$lib/form';
 
-	const data = $$props as BooleanQuestion;
+	export var data = $$props as BooleanQuestion;
 </script>
 
 <fieldset>

src/lib/components/questions/boolean/boolean_question_input_editor.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { QuestionType, BooleanQuestion, SelectQuestion } from '$lib/form';
+	import BooleanQuestionInput from './boolean_question_input.svelte';
+	import input from '../text/text_question_input.svelte';
+	import TextareaQuestionInput from '../textarea/textarea_question_input.svelte';
+	import SelectQuestionInput from '../select/select_question_input.svelte';
+	import { drafts } from '$lib/stores/drafts/drafts';
+	import BaseEditor from '../base/base_editor.svelte';
+	export let data: BooleanQuestion;
+	/* 
+    type: QuestionType.BOOLEAN,
+		name: 'internal name',
+		content: 'Are you 18 years old?',
+		required: false,
+		style: 'checkbox',
+		value: false */
+	// var mySelect: SelectQuestion = {
+	// 	type: QuestionType.SELECT,
+	// options: [
+	// 	{ content: 'checkbox', value: 'checkbox' },
+	// 	{ content: 'radio', value: 'radio' }
+	// ],
+	// 	name: 'booleanStyleSelector',
+	// 	content: 'Choose A Style'
+	// };
+</script>
+
+<BaseEditor bind:data>
+	<!-- <SelectQuestionInput
+		name={'style'}
+		content={'Choose a Style'}
+		options={[
+			{ content: 'checkbox', value: 'checkbox' },
+			{ content: 'radio', value: 'radio' }
+		]}
+		bind:value={data.style}
+	/> -->
+	<fieldset>
+		<legend>Choose a Style</legend>
+		<select name={'style'} bind:value={data.style}>
+			{#each [
+				{ content: 'checkbox', value: 'checkbox' },
+				{ content: 'radio', value: 'radio' }
+			] as option}
+				<option value={option.value}>{option.content}</option>
+			{/each}
+		</select>
+	</fieldset>
+	<details>
+		<summary>Sample</summary>
+		<div class="question">
+			<BooleanQuestionInput bind:data />
+		</div>
+	</details>
+</BaseEditor>

src/lib/components/questions/color/color_question_input.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type { ColorQuestion } from '$lib/form';
 
-	const data = $$props as ColorQuestion;
+	export let data = $$props as ColorQuestion;
 </script>
 
 <fieldset>
 	<legend>{data.content}</legend>
-	<input name={data.name} type="color" required={data.required} value={data.value} />
+	<input name={data.name} type="color" required={data.required} bind:value={data.value} />
 </fieldset>

src/lib/components/questions/color/color_question_input_editor.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { QuestionType, ColorQuestion, SelectQuestion } from '$lib/form';
+	import ColorQuestionInput from './color_question_input.svelte';
+	import input from '../text/text_question_input.svelte';
+	import TextQuestionInput from '../text/text_question_input.svelte';
+	import { drafts } from '$lib/stores/drafts/drafts';
+	import BaseEditor from '../base/base_editor.svelte';
+	import TextareaQuestionInput from '../textarea/textarea_question_input.svelte';
+	export let data = $$props as ColorQuestion;
+</script>
+
+<BaseEditor bind:data>
+	<!-- Copied From BaseEditor -->
+	<fieldset>
+		<legend>Default Color</legend>
+		<input type="color" name="color-" bind:value={data.value} />
+	</fieldset>
+	<details>
+		<summary>Sample</summary>
+		<div class="question">
+			<ColorQuestionInput bind:data />
+		</div>
+	</details>
+</BaseEditor>

src/lib/components/questions/date/date_question_input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { DateQuestion } from '$lib/form';
 
-	const data = $$props as DateQuestion;
+	export let data = $$props as DateQuestion;
 </script>
 
 <fieldset>
@@ -12,6 +12,6 @@
 		required={data.required}
 		min={data.min}
 		max={data.max}
-		value={data.value}
+		bind:value={data.value}
 	/>
 </fieldset>

src/lib/components/questions/date/date_question_input_editor.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { DateQuestion } from '$lib/form';
+	import BaseEditor from '../base/base_editor.svelte';
+	import DateQuestionInput from './date_question_input.svelte';
+	export let data = $$props as DateQuestion;
+
+	/* type: QuestionType.DATE,
+				name: 'justDate',
+				content: 'Pick a date (jk you can only pick today)',
+				required: false,
+				value: new Date().toISOString(),
+				min: new Date().toISOString(),
+				max: new Date().toISOString() */
+</script>
+
+<BaseEditor bind:data>
+	<fieldset>
+		<legend>Min Date</legend>
+		<input type="date" bind:value={data.min} />
+	</fieldset>
+	<fieldset>
+		<legend>Max Date</legend>
+		<input type="date" bind:value={data.max} />
+	</fieldset>
+	<fieldset>
+		<legend>Default Date</legend>
+		<input type="date" bind:value={data.value} />
+	</fieldset>
+	<details>
+		<summary>Sample</summary>
+		<div class="question">
+			<DateQuestionInput bind:data />
+		</div>
+	</details>
+</BaseEditor>

src/lib/components/questions/datetime/datetime_question_input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { DatetimeQuestion } from '$lib/form';
 
-	const data = $$props as DatetimeQuestion;
+	export let data = $$props as DatetimeQuestion;
 </script>
 
 <fieldset>
@@ -10,7 +10,7 @@
 		name={data.name}
 		type="datetime-local"
 		required={data.required}
-		value={data.value}
+		bind:value={data.value}
 		min={data.min}
 		max={data.max}
 	/>