✨ Closes #321

frontend/.eslintrc.cjs

@@ -8,7 +8,15 @@ module.exports = {
 	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
 	plugins: ['svelte3', '@typescript-eslint'],
 	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	overrides: [
+		{ files: ['*.svelte'], processor: 'svelte3/svelte3' },
+		{
+			files: ['*.*'],
+			rules: {
+				'a11y-click-events-have-key-events': 'off'
+			}
+		}
+	],
 	rules: {
 		'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
 		'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }]

frontend/src/lib/editor/sidebar.svelte

@@ -12,12 +12,16 @@ SPDX-License-Identifier: MPL-2.0
 	import { createTippy } from 'svelte-tippy';
 	import { getLocalization } from '$lib/i18n';
 	import AddNewQuestionPopup from '$lib/editor/AddNewQuestionPopup.svelte';
+	import BrownButton from '$lib/components/buttons/brown.svelte';
+	import { fade } from 'svelte/transition';
 
 	const { t } = getLocalization();
 
 	export let data: EditorData;
 	export let selected_question = -1;
 
+	let reorder_mode = false;
+
 	const tippy = createTippy({
 		arrow: true,
 		animation: 'perspective-subtle',
@@ -35,7 +39,18 @@ SPDX-License-Identifier: MPL-2.0
 		answers: ''
 	};
 
+	const swapArrayElements = (arr, a: number, b: number) => {
+		let _arr = [...arr];
+		let temp = _arr[a];
+		_arr[a] = _arr[b];
+		_arr[b] = temp;
+		return _arr;
+	};
+
 	const setSelectedQuestion = (index: number): void => {
+		if (reorder_mode) {
+			return;
+		}
 		selected_question = index;
 		if (index === -1) {
 			propertyCard.scrollIntoView({
@@ -54,10 +69,20 @@ SPDX-License-Identifier: MPL-2.0
         });*/
 </script>
 
-<div class="h-screen border-r-2 pt-6 px-6 overflow-scroll">
+<div class="h-screen relative">
+	<div class="h-10 flex justify-center w-full p-1 absolute z-20">
+		<div>
+			<BrownButton on:click={() => (reorder_mode = !reorder_mode)}
+				>{#if reorder_mode}{$t('editor.disable_reorder')}{:else}{$t(
+						'editor.enable_reorder'
+					)}{/if}</BrownButton
+			>
+		</div>
+	</div>
+	<div class="border-r-2 pt-6 px-6 overflow-scroll h-full">
 		<div
-		class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 transition"
 			bind:this={propertyCard}
+			class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 transition"
 			class:bg-green-300={selected_question === -1}
 			class:dark:bg-green-500={selected_question === -1}
 			on:click={() => setSelectedQuestion(-1)}
@@ -84,7 +109,9 @@ SPDX-License-Identifier: MPL-2.0
 			<div
 				use:tippy={{ content: data.description === '' ? "It's empty!" : data.description }}
 				class="m-1 border border-gray-500 rounded-lg p-0.5 transition"
-			class:border-red-600={!reach(dataSchema, 'description').isValidSync(data.description)}
+				class:border-red-600={!reach(dataSchema, 'description').isValidSync(
+					data.description
+				)}
 				class:border-solid={!reach(dataSchema, 'description').isValidSync(data.description)}
 				class:border-2={!reach(dataSchema, 'description').isValidSync(data.description)}
 			>
@@ -143,7 +170,7 @@ SPDX-License-Identifier: MPL-2.0
 		</div>
 		{#each data.questions as question, index}
 			<div
-			class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 transition"
+				class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 transition relative"
 				class:bg-green-300={index === selected_question}
 				class:dark:bg-green-500={index === selected_question}
 				on:click={() => {
@@ -151,6 +178,73 @@ SPDX-License-Identifier: MPL-2.0
 				}}
 				bind:this={arr_of_cards[index]}
 			>
+				{#if reorder_mode}
+					<div
+						transition:fade={{ duration: 90 }}
+						class="absolute z-10 grid grid-cols-2 bg-transparent w-full rounded h-full"
+					>
+						<!-- Div is used, since it just put me on the dashboard when using button elements... Idk why and I hate it-->
+						<div
+							class="h-full"
+							role="button"
+							aria-label="Move card up"
+							class:opacity-50={index === 0}
+							class:pointer-events-none={index === 0}
+							on:click={() =>
+								(data.questions = swapArrayElements(
+									data.questions,
+									index,
+									index - 1
+								))}
+						>
+							<!-- heroicons/new/ChevronUp --><svg
+								data-slot="icon"
+								aria-hidden="true"
+								fill="none"
+								stroke-width="1.5"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="m4.5 15.75 7.5-7.5 7.5 7.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								></path>
+							</svg>
+						</div>
+						<div
+							class="h-full"
+							role="button"
+							aria-label="Move card down"
+							class:opacity-50={index + 1 === data.questions.length}
+							class:pointer-events-none={index + 1 === data.questions.length}
+							on:click={() =>
+								(data.questions = swapArrayElements(
+									data.questions,
+									index,
+									index + 1
+								))}
+						>
+							<!-- heroicons/new/ChevronDown -->
+							<svg
+								data-slot="icon"
+								aria-hidden="true"
+								fill="none"
+								stroke-width="1.5"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="m19.5 8.25-7.5 7.5-7.5-7.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								></path>
+							</svg>
+						</div>
+					</div>
+				{/if}
 				<button
 					class="rounded-full absolute -top-3 -right-3 opacity-70 hover:opacity-100 transition"
 					type="button"
@@ -178,7 +272,9 @@ SPDX-License-Identifier: MPL-2.0
 					</svg>
 				</button>
 				<div
-				use:tippy={{ content: question.question === '' ? 'No title' : question.question }}
+					use:tippy={{
+						content: question.question === '' ? 'No title' : question.question
+					}}
 					class="m-1 border border-gray-500 rounded-lg p-0.5"
 				>
 					<h1
@@ -208,6 +304,7 @@ SPDX-License-Identifier: MPL-2.0
 						/>
 					</div>
 				{/if}
+
 				{#if question.type === QuizQuestionType.ABCD || question.type === QuizQuestionType.CHECK}
 					<div class="grid grid-cols-2 gap-2">
 						{#if Array.isArray(question.answers)}
@@ -222,7 +319,9 @@ SPDX-License-Identifier: MPL-2.0
 									).isValidSync(answer.answer)}
 									use:tippy={{
 										content:
-										answer.answer === '' ? $t('editor.empty') : answer.answer
+											answer.answer === ''
+												? $t('editor.empty')
+												: answer.answer
 									}}
 									>{#if answer.answer === ''}
 										<i>{$t('editor.empty')}</i>
@@ -253,7 +352,9 @@ SPDX-License-Identifier: MPL-2.0
 									).isValidSync(answer.answer)}
 									use:tippy={{
 										content:
-										answer.answer === '' ? $t('editor.empty') : answer.answer
+											answer.answer === ''
+												? $t('editor.empty')
+												: answer.answer
 									}}
 									>{#if answer.answer === ''}
 										<i>{$t('editor.empty')}</i>
@@ -322,6 +423,7 @@ SPDX-License-Identifier: MPL-2.0
 			</button>
 		</div>
 	</div>
+</div>
 {#if add_new_question_popup_open}
 	<AddNewQuestionPopup
 		bind:questions={data.questions}

frontend/src/lib/i18n/locales/en.json

@@ -224,7 +224,9 @@
         "range_description": "A number-range can be selected with a slider",
         "need_more_help": "Need more help?",
         "visit_docs": "Visit the docs.",
-        "enter_answer": "Enter an answer"
+        "enter_answer": "Enter an answer",
+        "enable_reorder": "Enable reorder mode",
+        "disable_reorder": "Disable reorder mode"
     },
     "import_page": {
         "need_help": "Need help?",