Merge pull request #284 from RSE-Sheffield/fix/add-drag-handle

Use drag handle instead of entire div for drag event

Author: Joe-Heffer-Shef

eslint.config.js

@@ -47,6 +47,7 @@ export default ts.config(
       'svelte/require-each-key': 'warn',
       '@typescript-eslint/no-unused-vars' : 'warn',
       'svelte/no-at-html-tags': 'warn',
+      "no-import-assign": "off",
     }
   }
 );

survey/templates/survey/report.html

@@ -10,10 +10,28 @@ <h1><i class='bx bxs-report'></i> Report: {{ survey.name }}</h1>
 
 
         <div class="mb-3">
+
+            <h2>Summary Ranking Matrix</h2>
+            <div class="sort-response-summary-matrix"
+                 data-json-config-id="configData"
+                 data-json-responses-id="responsesData"></div>
+
+            <h3>Report sections</h3>
+            <ul>
+                {% for section in sections %}
+                    {% if section.section_config.type != "consent" %}
+                        <li><a href="#page-section-{{ forloop.counter0 }}">{{ section.section_config.title }}</a></li>
+                    {% endif %}
+                {% endfor %}
+
+            </ul>
+
+
             {% for section in sections %}
                 {% if section.section_config.type != "consent" %}
+                    <div class="page-break"></div>
                     <div>
-                        <h2>{{ section.section_config.title }}</h2>
+                        <h2 id="page-section-{{ forloop.counter0 }}">{{ section.section_config.title }}</h2>
                     </div>
                     <div>
                         <div
@@ -47,10 +65,7 @@ <h3>Improvement plan</h3>
                 {% endif %}
             {% endfor %}
 
-            <h2>Summary Ranking Matrix</h2>
-            <div class="sort-response-summary-matrix"
-                 data-json-config-id="configData"
-                 data-json-responses-id="responsesData"></div>
+
         </div>
 
 
@@ -110,10 +125,6 @@ <h2>Summary Ranking Matrix</h2>
                 page-break-after: avoid;
             }
 
-            h2 {
-                break-before: always;
-            }
-
             @page {
                 size: a3;
             }
@@ -123,6 +134,10 @@ <h2>Summary Ranking Matrix</h2>
                 background: #fff;
             }
 
+            .page-break {
+                break-before: always;
+            }
+
             .container {
                 min-width: 992px !important;
             }

ui_components/src/assets/grab_dots.svg

@@ -1,37 +1,55 @@
+<script lang="ts" module>
+    import type {SurveyConfig} from "../interfaces.ts";
+
+    export function getDefaultSurveyConfig(){
+        return {
+            sections: [],
+        } as SurveyConfig;
+
+    }
+</script>
 <script lang="ts">
 
     import * as _ from "lodash-es"
     import SectionComponent, {getDefaultSectionConfig} from "./input/SectionComponent.svelte";
 
+    interface Props {
+        config: SurveyConfig;
+        editable?: boolean;
+        sectionTypeEditable?: boolean;
+        sectionEditable?: boolean;
+    }
+
     let {
         config = $bindable(),
         editable = true,
         sectionTypeEditable = true,
         sectionEditable = true,
-    } = $props();
-
-    if(config == null || config === undefined){
-        config = {}
-    }
-
-    if(!("sections" in config)){
-        config.sections = [];
+    }: Props = $props();
+
+    if(config === null || config === undefined){
+        config = getDefaultSurveyConfig();
+    } else if(!("sections" in config)){
+        config = {
+            ...getDefaultSurveyConfig(),
+            ...config
+        };
     }
 
     // Keeps track of all section components
     // when components are deleted the derived property filters this out
-    let _sectionComponents = $state([]);
+    let _sectionComponents: SectionComponent[] = $state([]);
     let sectionComponents = $derived(_sectionComponents.filter(Boolean));
 
     function addSection() {
         config.sections.push(getDefaultSectionConfig());
     }
 
-    function deleteSection(index){
+    function deleteSection(index: number){
         config.sections.splice(index, 1);
     }
 
-    function handleMoveRequest(srcSectionIndex, srcFieldIndex, destSectionIndex, destFieldIndex){
+    function handleMoveRequest(srcSectionIndex: number, srcFieldIndex: number, destSectionIndex: number, destFieldIndex: number){
         if(!editable || srcSectionIndex < 0 || destSectionIndex < 0 || srcFieldIndex < 0)
             return;
 

ui_components/src/lib/components/SurveyConfigurator.svelte

@@ -25,7 +25,7 @@
         return generateStatsFromSurveyResponses(config, filteredResponses);
     })
 
-    function handleFilterChange(changedFilteredResponses) {
+    function handleFilterChange(changedFilteredResponses: SurveyResponseBatch) {
         filteredResponses = changedFilteredResponses;
     }
 

ui_components/src/lib/components/SurveyDataView.svelte

@@ -11,7 +11,7 @@
     let isValid = $state();
     let isInvalid = $state();
 
-    function setIsValid(valid) {
+    function setIsValid(valid: boolean) {
         isValid = valid;
         isInvalid = !valid;
     }
@@ -23,7 +23,7 @@
 
     // Keeps track of all section components
     // when components are deleted the derived property filters this out
-    let currentSectionComponent = $state();
+    let currentSectionComponent: SectionComponent | undefined = $state();
 
     // Value in plaintext for submitting to the backend
     let valueStr = $derived(JSON.stringify(value))
@@ -37,7 +37,7 @@
     let currentPage = $state(0);
 
     function validate() {
-        const currentPageValidates = currentSectionComponent.validate();
+        const currentPageValidates = currentSectionComponent?.validate() ?? false;
         setIsValid(currentPageValidates)
         return currentPageValidates;
     }
@@ -58,7 +58,7 @@
         }
     }
 
-    function onSubmitHandler(e) {
+    function onSubmitHandler(e: Event) {
         if (!validate()) {
             // Don't submit if there's still an error on the page
             e.preventDefault();

ui_components/src/lib/components/SurveyResponseComponent.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import {getUniqueIDArray} from "../../misc.svelte.ts";
   import DOMPurify  from "dompurify";
 
@@ -9,7 +9,7 @@
   let isValid = $state(false);
   let isInvalid = $state(false);
 
-  function setIsValid(valid) {
+  function setIsValid(valid: boolean) {
     isValid = valid;
     isInvalid = !valid;
   }