Merge pull request #19 from acmcsufoss/kj

created editors (text,textarea,date,datetime,time), fixed editors (number,color)
acmcsufoss · Apr 11, 2024 · 686e133 · 686e133
2 parents e46e8f4 + f44ffcd
commit 686e133
Show file tree

Hide file tree

Showing 9 changed files with 224 additions and 8 deletions.
diff --git a/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte b/src/lib/components/form_editor/question_input_editor/question_input_editor.svelte
@@ -29,20 +29,24 @@ https://github.com/acmcsufoss/form/pull/new/question-input-editor -->
 		<ColorQuestionInputEditor bind:data />
 	{:else if $$props.type === QuestionType.NUMBER}
 		<NumberQuestionInputEditor {...$$props} />
-		<!-- {:else if $$props.type === QuestionType.TEXT}
+	{:else if $$props.type === QuestionType.TEXT}
 		<TextQuestionInputEditor {...$$props} />
-	{:else if $$props.type === QuestionType.RADIO_GROUP}
-		<RadioGroupQuestionInputEditor {...$$props} />
 	{:else if $$props.type === QuestionType.TEXTAREA}
 		<TextareaQuestionInputEditor {...$$props} />
 	{:else if $$props.type === QuestionType.DATE}
 		<DateQuestionInputEditor {...$$props} />
-	{:else if $$props.type === QuestionType.AVAILABILITY}
-		<AvailabilityQuestionInputEditor {...$$props} />
 	{:else if $$props.type === QuestionType.DATETIME}
 		<DatetimeQuestionInputEditor {...$$props} />
 	{:else if $$props.type === QuestionType.TIME}
-		<TimeQuestionInputEditor {...$$props} /> -->
+		<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}

diff --git a/src/lib/components/questions/color/color_question_input_editor.svelte b/src/lib/components/questions/color/color_question_input_editor.svelte
@@ -10,7 +10,11 @@
 </script>
 
 <BaseEditor bind:data>
-	<input type="color" name="color-" bind:value={data.value} />
+	<!-- 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">

diff --git a/src/lib/components/questions/date/date_question_input_editor.svelte b/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>
diff --git a/src/lib/components/questions/datetime/datetime_question_input_editor.svelte b/src/lib/components/questions/datetime/datetime_question_input_editor.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { DateQuestion, DatetimeQuestion } from '$lib/form';
+	import BaseEditor from '../base/base_editor.svelte';
+	import DatetimeQuestionInput from './datetime_question_input.svelte';
+	export let data = $$props as DatetimeQuestion;
+
+	/* 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/Time</legend>
+		<input type="datetime-local" bind:value={data.min} />
+	</fieldset>
+	<fieldset>
+		<legend>Max Date/Time</legend>
+		<input type="datetime-local" bind:value={data.max} />
+	</fieldset>
+	<fieldset>
+		<legend>Default Date/Time</legend>
+		<input type="datetime-local" bind:value={data.value} />
+	</fieldset>
+	<details>
+		<summary>Sample</summary>
+		<div class="question">
+			<DatetimeQuestionInput bind:data />
+		</div>
+	</details>
+</BaseEditor>
diff --git a/src/lib/components/questions/number/number_question_input_editor.svelte b/src/lib/components/questions/number/number_question_input_editor.svelte
@@ -29,7 +29,6 @@
 		<legend>placeholder</legend>
 		<input type="text" bind:value={data.placeholder} />
 	</fieldset>
-
 	<details>
 		<summary>Sample</summary>
 		<NumberQuestionInput bind:data />

diff --git a/src/lib/components/questions/text/text_question_input_editor.svelte b/src/lib/components/questions/text/text_question_input_editor.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import BaseEditor from '../base/base_editor.svelte';
+	import type { QuestionType, TextQuestion } from '$lib/form';
+	import TextQuestionInput from './text_question_input.svelte';
+
+	export var data = $$props as TextQuestion;
+	/*var data: TextQuestion = {
+		type: QuestionType.TEXT, //NA
+		required: false, //base
+		name: '', //base
+		content: '', // base
+		minLength: 0,
+		maxLength: 100,
+		value: '', //
+		placeholder: '',
+		pattern: '',
+		choices: ['sample', 'default', 'should appear']
+	};*/
+</script>
+
+<BaseEditor bind:data>
+	<!-- Copied from BaseEditor -->
+	<fieldset>
+		<legend>Min Length</legend>
+		<input type="number" bind:value={data.minLength} />
+	</fieldset>
+	<fieldset>
+		<legend>Max Length</legend>
+		<input type="number" bind:value={data.maxLength} />
+	</fieldset>
+	<fieldset>
+		<legend>Default Value</legend>
+		<input type="text" bind:value={data.value} />
+	</fieldset>
+	<fieldset>
+		<legend>Placeholder</legend>
+		<input type="text" bind:value={data.placeholder} />
+	</fieldset>
+	<fieldset>
+		<legend>Regex Pattern</legend>
+		<input type="text" bind:value={data.pattern} />
+	</fieldset>
+	<fieldset>
+		<legend>Choices (COMMING SOON)</legend>
+	</fieldset>
+	<details>
+		<summary>Sample</summary>
+		<div class="question">
+			<TextQuestionInput bind:data />
+		</div>
+	</details>
+</BaseEditor>
diff --git a/src/lib/components/questions/textarea/textarea_question_input_editor.svelte b/src/lib/components/questions/textarea/textarea_question_input_editor.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { TextareaQuestion } from '$lib/form';
+	import BaseEditor from '../base/base_editor.svelte';
+	import TextareaQuestionInput from './textarea_question_input.svelte';
+
+	export var data = $$props as TextareaQuestion;
+</script>
+
+<BaseEditor bind:data>
+	<fieldset>
+		<legend>Min Length</legend>
+		<input type="number" bind:value={data.minLength} />
+	</fieldset>
+	<fieldset>
+		<legend>Max Length</legend>
+		<input type="number" bind:value={data.maxLength} />
+	</fieldset>
+	<fieldset>
+		<legend>Default Value</legend>
+		<input type="text" bind:value={data.value} />
+	</fieldset>
+	<fieldset>
+		<legend>Placeholder</legend>
+		<input type="text" bind:value={data.placeholder} />
+	</fieldset>
+	<details>
+		<summary>Sample</summary>
+		<div class="question">
+			<TextareaQuestionInput bind:data />
+		</div>
+	</details>
+</BaseEditor>
diff --git a/src/lib/components/questions/time/time_question_input_editor.svelte b/src/lib/components/questions/time/time_question_input_editor.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { TimeQuestion } from '$lib/form';
+	import BaseEditor from '../base/base_editor.svelte';
+	import TimeQuestionInput from './time_question_input.svelte';
+
+	export let data = $$props as TimeQuestion;
+</script>
+
+<BaseEditor bind:data>
+	<fieldset>
+		<legend>Min Time</legend>
+		<input type="time" bind:value={data.min} />
+	</fieldset>
+	<fieldset>
+		<legend>Max Time</legend>
+		<input type="time" bind:value={data.max} />
+	</fieldset>
+	<fieldset>
+		<legend>Default Time</legend>
+		<input type="time" bind:value={data.value} />
+	</fieldset>
+	<details>
+		<summary>Sample</summary>
+		<div class="question">
+			<TimeQuestionInput bind:data />
+		</div>
+	</details>
+</BaseEditor>
diff --git a/src/routes/forms/demoformeditor/demo_form_editor.ts b/src/routes/forms/demoformeditor/demo_form_editor.ts
@@ -63,6 +63,33 @@ export const demoForm: Form = {
 				name: 'Select Question',
 				content: 'Pick an option',
 				options: [{ value: 'text', content: 'test' }]
+			},
+			{
+				type: QuestionType.DATE,
+				name: 'justDate',
+				content: 'Pick a date (jk you can only pick today)',
+				required: false,
+				value: '2024-04-10',
+				min: '2024-04-10',
+				max: '2024-04-10'
+			},
+			{
+				type: QuestionType.DATETIME,
+				name: 'justDate',
+				content: 'Pick a date (jk you can only pick today)',
+				required: false,
+				value: '2024-04-10T11:11:11',
+				min: '2024-04-10T11:11:11',
+				max: '2024-04-10T11:11:11'
+			},
+			{
+				type: QuestionType.TIME,
+				name: 'just time',
+				content: 'just time',
+				required: false,
+				value: '11:11:11',
+				min: '11:11:11',
+				max: '11:11:11'
 			}
 		]
 	}