diff --git a/assets/sort-survey-configurator/src/SurveyConfigConsentDemographyApp.svelte b/assets/sort-survey-configurator/src/SurveyConfigConsentDemographyApp.svelte index c016e98..6bc3e5f 100644 --- a/assets/sort-survey-configurator/src/SurveyConfigConsentDemographyApp.svelte +++ b/assets/sort-survey-configurator/src/SurveyConfigConsentDemographyApp.svelte @@ -57,7 +57,7 @@ - + diff --git a/assets/sort-survey-configurator/src/lib/components/SurveyConfigurator.svelte b/assets/sort-survey-configurator/src/lib/components/SurveyConfigurator.svelte index c34c87d..7e7c835 100644 --- a/assets/sort-survey-configurator/src/lib/components/SurveyConfigurator.svelte +++ b/assets/sort-survey-configurator/src/lib/components/SurveyConfigurator.svelte @@ -1,15 +1,19 @@ @@ -50,9 +58,11 @@ {#each config.sections as section, index (index)} {checkCurrentEditor(index, fieldIndex, doEdit)}} sectionTypeEditable={sectionTypeEditable} bind:this={_sectionComponents[index]} + sectionIndex={index} + onMoveRequest={handleMoveRequest} + onDeleteSectionRequest={()=>{deleteSection(index)}} /> {/each} diff --git a/assets/sort-survey-configurator/src/lib/components/SurveyResponse.svelte b/assets/sort-survey-configurator/src/lib/components/SurveyResponse.svelte index 4b7d2eb..8137d43 100644 --- a/assets/sort-survey-configurator/src/lib/components/SurveyResponse.svelte +++ b/assets/sort-survey-configurator/src/lib/components/SurveyResponse.svelte @@ -85,19 +85,16 @@ {/if} -
-
- -
-
+
+ + {#if currentPage < config.sections.length - 1} - + {:else}
- +
{/if} -
diff --git a/assets/sort-survey-configurator/src/lib/components/input/Checkbox.svelte b/assets/sort-survey-configurator/src/lib/components/input/Checkbox.svelte index bd10220..5386cb6 100644 --- a/assets/sort-survey-configurator/src/lib/components/input/Checkbox.svelte +++ b/assets/sort-survey-configurator/src/lib/components/input/Checkbox.svelte @@ -24,8 +24,8 @@ }
- {config.label} - {#if config.required}*{/if} + {config.label}{#if config.required}*{/if} + {#if config.description || config.description.length > 0}

{config.description}

{/if} {#each config.options as option, index}
{ - }, + editable = false, + fieldIndex = -1, + sectionIndex = -1, onDuplicateRequest = () => { }, onDeleteRequest = () => { }, + onMoveRequest = (srcSectionIndex, srcFieldIndex, destSectionIndex, destFieldIndex) => { + } } = $props(); + if (config === null || config === undefined) { + config = {}; + } + //Insert missing keys let defaultConfig = getDefaultFieldConfig() for (let key in defaultConfig) { @@ -84,7 +91,7 @@ export function validate() { console.log("Validating field" + config.label); - if(renderedComponent){ + if (renderedComponent) { return renderedComponent.validate(); } @@ -96,13 +103,35 @@ } export function beginEdit() { - inEditMode = true; + if (editable) + inEditMode = true; } export function endEdit() { inEditMode = false; } + function onDragStartHandler(e) { + e.dataTransfer.effectAllowed = "move" + e.dataTransfer.setData("application/json", JSON.stringify({section: sectionIndex, field: fieldIndex})) + } + + function onDropHandler(e) { + e.preventDefault(); + e.stopPropagation(); // Stop drop event propagating to the parent SectionComponent + const moveSource = JSON.parse(e.dataTransfer.getData("application/json")); + onMoveRequest(moveSource.section, moveSource.field, sectionIndex, fieldIndex) + } + + function onDragOverHandler(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = "move"; + } + + function onDragEndHandler(e){ + endEdit(); + } + @@ -121,153 +150,166 @@
{/snippet} -
- {#if editable && inEditMode} -
-
- -
-
+{#if editable && inEditMode} + +
{endEdit()}} + > +
+ +
+
-
-
- -
-
- -
+
+
+
- -
+
+
+
+ +
- {#if componentTypeWithSublabels.has(config.type)} -
-
Sublabels
- -
- {/if} - {#if componentTypeWithOptions.has(config.type)} -
-
Options
- + {#if componentTypeWithSublabels.has(config.type)} +
+
Sublabels
+ +
+ {/if} + + {#if componentTypeWithOptions.has(config.type)} +
+
Options
+ +
+ {/if} + + {#if config.type === "text"} +
+
+
- {/if} - - {#if config.type === "text"} -
-
-
- {/if} - - -
-
-
- - + {/if} + {#if config.type === "textarea"} +
+
+ {@render enforceMaxChar()} +
+ {/if} +
+ +
+
+ +
+
+ +{:else if editable && !inEditMode} + {event.preventDefault(); beginEdit()}} + > +
+ +
+
+{:else} + +{/if} - {:else if editable && !inEditMode} - {event.preventDefault(); onEditRequest(true)}}> -
- -
-
- {:else} - - {/if} -