Merge branch 'dev' into ui/icons-consistent

RSE-Sheffield · Feb 12, 2025 · 6a4635e · 6a4635e
2 parents 42c81bf + 9f73a8e
commit 6a4635e
Show file tree

Hide file tree

Showing 28 changed files with 341 additions and 271 deletions.
diff --git a/assets/sort-survey-configurator/src/SurveyConfigConsentDemographyApp.svelte b/assets/sort-survey-configurator/src/SurveyConfigConsentDemographyApp.svelte
@@ -57,7 +57,7 @@
     <input type="hidden" name="csrfmiddlewaretoken" value="{csrf}"/>
     <input type="hidden" name="consent_config" value="{consentConfigStr}"/>
     <input type="hidden" name="demography_config" value="{demographyConfigStr}"/>
-    <input type="submit" class="btn btn-primary" value="Submit"/>
+    <input type="submit" class="btn btn-primary" value="Save"/>
 </form>
 
 

diff --git a/assets/sort-survey-configurator/src/lib/components/SurveyConfigurator.svelte b/assets/sort-survey-configurator/src/lib/components/SurveyConfigurator.svelte
@@ -1,15 +1,19 @@
 <script lang="ts">
 
+    import * as _ from "lodash"
     import SectionComponent, {getDefaultSectionConfig} from "./input/SectionComponent.svelte";
 
     let {
-        config = $bindable({sections: []}),
+        config = $bindable(),
         editable = true,
         sectionTypeEditable = true,
         sectionEditable = true,
-
     } = $props();
 
+    if(config == null || config === undefined){
+        config = {}
+    }
+
     if(!("sections" in config)){
         config.sections = [];
     }
@@ -19,28 +23,32 @@
     let _sectionComponents = $state([]);
     let sectionComponents = $derived(_sectionComponents.filter(Boolean));
 
-    function checkCurrentEditor(sectionIndex: number, fieldIndex: number, doEdit: boolean) {
-        for (let i = 0; i < sectionComponents.length; i++) {
-            if(doEdit){
-                if(i == sectionIndex){
-                sectionComponents[i].startEditAtIndex(fieldIndex);
-                }else{
-                    sectionComponents[i].stopEditingAll();
-                }
-            }
-            else{
-                sectionComponents[i].stopEditingAll();
-            }
-
-
-        }
-    }
-
     function addSection() {
         config.sections.push(getDefaultSectionConfig());
     }
 
+    function deleteSection(index){
+        config.sections.splice(index, 1);
+    }
+
+    function handleMoveRequest(srcSectionIndex, srcFieldIndex, destSectionIndex, destFieldIndex){
+        if(!editable || srcSectionIndex < 0 || destSectionIndex < 0 || srcFieldIndex < 0)
+            return;
+
+        if(destFieldIndex >= 0){
+            // Move within or between sections with existing elements
+            let fieldItem = _.cloneDeep(config.sections[srcSectionIndex].fields[srcFieldIndex]);
+            config.sections[srcSectionIndex].fields.splice(srcFieldIndex, 1);
+            config.sections[destSectionIndex].fields.splice(destFieldIndex, 0, fieldItem)
 
+        }
+        else {
+            // Move to an empty section
+            let fieldItem = _.cloneDeep(config.sections[srcSectionIndex].fields[srcFieldIndex]);
+            config.sections[srcSectionIndex].fields.splice(srcFieldIndex, 1);
+            config.sections[destSectionIndex].fields = [...config.sections[destSectionIndex].fields, fieldItem];
+        }
+    }
 
 
 </script>
@@ -50,9 +58,11 @@
 {#each config.sections as section, index (index)}
     <SectionComponent bind:config={config.sections[index]}
                       editable={editable}
-                      onEditRequest={(fieldIndex, doEdit)=>{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
@@ -85,19 +85,16 @@
 </div>
 {/if}
 
-<div class="row">
-    <div class="col-1">
-        <button class="btn btn-primary" disabled={currentPage < 1} onclick={previousPage}>Previous</button>
-    </div>
-    <div class="col-1">
+<div class="d-flex">
+        <button class="btn btn-primary me-3"  disabled={currentPage < 1} onclick={previousPage}>&lt; Previous</button>
+
         {#if currentPage < config.sections.length - 1}
-            <button class="btn btn-primary" onclick={nextPage}>Next</button>
+            <button class="btn btn-primary" onclick={nextPage}>Next &gt;</button>
         {:else}
             <form method="post" onsubmit={onSubmitHandler}>
                 <input type="hidden" name="csrfmiddlewaretoken" value="{csrf}"/>
                 <input type="hidden" name="value" value="{valueStr}"/>
-                <input type="submit" class="btn btn-primary" value="Submit"/>
+                <button type="submit" class="btn btn-primary">Submit <i class="bx bxs-send" ></i></button>
             </form>
         {/if}
-    </div>
 </div>
diff --git 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 @@
   }
 </script>
 <div class={{"form-label":true }}>
-    {config.label}
-    {#if config.required}<span style="color: red">*</span>{/if}
+    {config.label}{#if config.required}<span style="color: red">*</span>{/if}
+    {#if config.description || config.description.length > 0}<p class="form-text">{config.description}</p>{/if}
     {#each config.options as option, index}
         <div class="form-check">
             <input class={{"form-check-input": true, "is-valid": isValid, "is-invalid": isInvalid}}