Merge pull request #20 from acmcsufoss/sortable-moment

Form Editor Improvements

Author: AlexthePear

.github/workflows/check.yaml

@@ -9,6 +9,7 @@ on:
 
 jobs:
   check:
+    name: Check
     runs-on: ubuntu-latest
 
     strategy:
@@ -48,5 +49,21 @@ jobs:
       - name: Format
         run: npm run format && git diff --exit-code
 
-      - name: Lint
+  lint:
+    name: lint
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 21.x
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Run Lint
         run: npm run lint && git diff --exit-code

db.kv

@@ -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,8 @@
 		"@deno/kv": "^0.7.0",
 		"discord-api-types": "^0.37.67",
 		"export-to-csv": "^1.2.2",
+		"nanoid": "^5.1.0",
+		"sortablejs": "^1.15.2",
 		"ulid": "^2.3.0"
 	}
 }

db.kv-shm

@@ -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);

db.kv-wal

@@ -1,14 +1,24 @@
 <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';
 
 	export let action: string;
 	export let method: string;
 	export let value: Form;
 
+	var questions: QuestionList = value.questions;
 	// TODO: Add discord data: channels, threads, guilds, roles.
+
+	// Uncalled function so commented out for now.
+	// function addItem() {
+	// 	questions.append();
+	// }
+	function handleSumbit(event: MouseEvent) {
+		event.preventDefault();
+		console.log(questions);
+	}
 </script>
 
 <form {action} {method}>
@@ -65,9 +75,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 +88,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>

package-lock.json

@@ -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 type { Question } from '$lib/form';
+	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';
 
-	// export let value: Question;
+	export var data: Question;
 </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>

package.json

@@ -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 {
@@ -31,4 +32,4 @@
 	<option value={QuestionType.AVAILABILITY}>Availability</option>
 </select>
 
-<button on:click={add}>Add</button>
+<button type="button" on:click={add}>Add</button>