Set current selection values on header/footer selection screens (#328)

rossjones · web-flow · commit 4e04c93a575b · 2025-09-25T14:26:43.000+01:00
When selecting header and footer rows, they are stored in the current session for when the user gets to the mapping screen. Unfortunately, if the user goes back to the header or footer selection screen, their previous selections are not shown even if they are still held in the backend state.

This PR includes the current header/footer selection in the appropriate hidden form elements that denote the previous selection. Because when showing footers the row index in the range is for the entire sheet, not just the n rows being shown, this was failing to highlight the footer rows (when present). To resolve this, we added data-row-index to the rows in the table, allowing us to access the row directly. Perhaps it might be worth adding data-cell-position to TDs or data-column-index to columns to avoid these kind of errors in future?
diff --git a/lib/importer/assets/js/selectable_table.js b/lib/importer/assets/js/selectable_table.js
@@ -40,6 +40,30 @@ window.addEventListener("load", function() {
     const brRowTarget = document.getElementById("importer:selection:BRRow");
     const brColTarget = document.getElementById("importer:selection:BRCol");
 
+    // If we have a value for the row target, then we want to select the cells in row tlr, column tlc
+    // all the way to row brr, column brc by adding the selected class to each td in the range.
+    if (tlRowTarget && tlRowTarget.value != "-1") {
+      const [tlr, tlc, brr, brc] = [parseInt(tlRowTarget.value), parseInt(tlColTarget.value), parseInt(brRowTarget.value), parseInt(brColTarget.value)];
+      const tables = document.querySelectorAll("table.selectable");
+      for(const table of tables) {
+        const tbody = table.querySelector("tbody");
+        if (tbody) {
+
+          for (let rowIndex = tlr; rowIndex <= brr; rowIndex++) {
+            const row = tbody.querySelector(`tr[data-row-index="${rowIndex + 1}"]`);
+            if (row) {
+              const cells = row.querySelectorAll("td");
+              for (let colIndex = tlc; colIndex <= brc; colIndex++) {
+                if (colIndex >= 0 && colIndex < cells.length) {
+                  cells[colIndex].classList.add(CellSelectedClassName);
+                }
+              }
+            }
+          }
+        }
+      }
+    };
+
     const fromCoordsCache = new Map(); // table -> "row,col" -> CellRef
     const fromNodeCache = new Map(); // td node -> CellRef
 
diff --git a/lib/importer/nunjucks/importer/macros/footer_selector.njk b/lib/importer/nunjucks/importer/macros/footer_selector.njk
@@ -4,11 +4,14 @@
     {% set rows = importerGetTrailingRows(params.data, params.count) %}
     {% set caption = importerGetTableCaption(params.data, "Last", params.count) %}
 
+    {% set currentSelection = params.current %}
+    {% set setSelectionValue = currentSelection.start.row > -1 %}
+
     <div>
-        <input type="hidden" name="importer:selection:TLRow" id="importer:selection:TLRow"/>
-        <input type="hidden" name="importer:selection:TLCol" id="importer:selection:TLCol"/>
-        <input type="hidden" name="importer:selection:BRRow" id="importer:selection:BRRow"/>
-        <input type="hidden" name="importer:selection:BRCol" id="importer:selection:BRCol"/>
+        <input type="hidden" name="importer:selection:TLRow" id="importer:selection:TLRow" {% if setSelectionValue %} value="{{ currentSelection.start.row }}" {% endif %}/>
+        <input type="hidden" name="importer:selection:TLCol" id="importer:selection:TLCol" {% if setSelectionValue %} value="{{ currentSelection.start.column }}" {% endif %}/>
+        <input type="hidden" name="importer:selection:BRRow" id="importer:selection:BRRow" {% if setSelectionValue %} value="{{ currentSelection.end.row }}" {% endif %}/>
+        <input type="hidden" name="importer:selection:BRCol" id="importer:selection:BRCol" {% if setSelectionValue %} value="{{ currentSelection.end.column }}" {% endif %}/>
     </div>
 
     <div class="rd-range-selector">
diff --git a/lib/importer/nunjucks/importer/macros/header_selector.njk b/lib/importer/nunjucks/importer/macros/header_selector.njk
@@ -5,11 +5,14 @@
     {% set rows = importerGetRows(params.data, params.start, params.count) %}
     {% set caption = importerGetTableCaption(params.data, "First", params.count) %}
 
+    {% set currentSelection = params.current %}
+    {% set setSelectionValue = currentSelection.start.row > -1 %}
+
     <div>
-        <input type="hidden" name="importer:selection:TLRow" id="importer:selection:TLRow"/>
-        <input type="hidden" name="importer:selection:TLCol" id="importer:selection:TLCol"/>
-        <input type="hidden" name="importer:selection:BRRow" id="importer:selection:BRRow"/>
-        <input type="hidden" name="importer:selection:BRCol" id="importer:selection:BRCol"/>
+        <input type="hidden" name="importer:selection:TLRow" id="importer:selection:TLRow" {% if setSelectionValue %} value="{{ currentSelection.start.row }}" {% endif %}/>
+        <input type="hidden" name="importer:selection:TLCol" id="importer:selection:TLCol" {% if setSelectionValue %} value="{{ currentSelection.start.column }}" {% endif %}/>
+        <input type="hidden" name="importer:selection:BRRow" id="importer:selection:BRRow" {% if setSelectionValue %} value="{{ currentSelection.end.row }}" {% endif %}/>
+        <input type="hidden" name="importer:selection:BRCol" id="importer:selection:BRCol" {% if setSelectionValue %} value="{{ currentSelection.end.column }}" {% endif %}/>
     </div>
 
     <div class="rd-range-selector">
diff --git a/lib/importer/nunjucks/importer/macros/table_view.njk b/lib/importer/nunjucks/importer/macros/table_view.njk
@@ -28,9 +28,7 @@ Renders a table view using the provided parameters to determine what is being sh
         <tbody>
             {% for rowObj in params.rows %}
             <tr class="govuk-table__row {% if rowObj.error %}
-            validation-error{%endif%}">
-
-
+            validation-error{%endif%}" data-row-index="{{rowObj.index}}">
                 {% if params.showRowNumbers %}
                   <th scope="row" class="rowIndex">{{ rowObj.index }}</th>
                 {% endif %}
diff --git a/lib/importer/src/functions.js b/lib/importer/src/functions.js
@@ -178,6 +178,20 @@ const importerHeaderRowDisplay = (data, mode) => {
     return session_lib.HeaderRowDisplay(session, mode)
 }
 
+const importerCurrentHeaderSelection = (data) => {
+    const session_data = data[IMPORTER_SESSION_KEY];
+    const session = new session_lib.Session(session_data)
+
+    return session.headerRange
+}
+
+const importerCurrentFooterSelection = (data) => {
+    const session_data = data[IMPORTER_SESSION_KEY];
+    const session = new session_lib.Session(session_data)
+
+    return session.footerRange
+}
+
 //--------------------------------------------------------------------
 // Helper functions that can be used on the review page to show
 // information about the data that has been mapped.
@@ -254,6 +268,8 @@ module.exports = {
     importerGetTableCaption,
     importerMappedData,
     importerHeaderRowDisplay,
+    importerCurrentHeaderSelection,
+    importerCurrentFooterSelection,
     data_sum,
     data_avg
 }
diff --git a/lib/importer/templates/select_footer_row.html b/lib/importer/templates/select_footer_row.html
@@ -31,7 +31,7 @@ <h1 class="govuk-fieldset__heading">
 
         <form action="{{ importerSelectFooterPath('/mapping') }}" method="post">
             <div class="govuk-form-group">
-                {{ dudkFooterSelector({data: data}) }}
+                {{ dudkFooterSelector({data: data, current: importerCurrentFooterSelection(data)})}) }}
             </div>
 
             <div class="govuk-button-group">
diff --git a/lib/importer/templates/select_header_row.html b/lib/importer/templates/select_header_row.html
@@ -31,7 +31,7 @@ <h1 class="govuk-fieldset__heading">
 
         <form action="{{ importerSelectHeaderPath('/select_footer_row') }}" method="post">
             <div class="govuk-form-group">
-                {{ dudkHeaderSelector({data: data, start: 0, count: 10}) }}
+                {{ dudkHeaderSelector({data: data, start: 0, count: 10, current: importerCurrentHeaderSelection(data)}) }}
             </div>
 
             <div class="govuk-button-group">
diff --git a/prototypes/basic/app/views/select_footer_row.html b/prototypes/basic/app/views/select_footer_row.html
@@ -56,7 +56,7 @@ <h1 class="govuk-heading-l">
 
         <form action="{{ importerSelectFooterPath('/mapping') }}" method="post">
             <div class="govuk-form-group">
-                {{ dudkFooterSelector({data: data}) }}
+                {{ dudkFooterSelector({data: data, current: importerCurrentFooterSelection(data)}) }}
             </div>
 
             <div class="govuk-button-group">
diff --git a/prototypes/basic/app/views/select_header_row.html b/prototypes/basic/app/views/select_header_row.html
@@ -53,7 +53,7 @@ <h1 class="govuk-heading-l">
 
         <form action="{{ importerSelectHeaderPath('/select_footer_row') }}" method="post">
             <div class="govuk-form-group">
-                {{ dudkHeaderSelector({data: data, start: 0, count: 10}) }}
+                {{ dudkHeaderSelector({data: data, start: 0, count: 10, current: importerCurrentHeaderSelection(data) }) }}
             </div>
 
             <div class="govuk-button-group">
