[FIX] survey: corrects progress number for random questions

Purpose
=======

Ease the edition of sections.
Make sure we display a correct progress number.

Specs
=====

There is now more space when editing the number of random
questions.
We added an icon on hover to indicate that a section is editable.

When configuring a survey as one page per question, the numbers
near the progress bar where not correct.
With this commit they now are.

Inside this commit we are overriding a function `focusCell`.
This is necessary to enable te user to edit the right column in the view
if those were moved with studio.

Now the method identifies the requested column via its name and not the
actual object.
This is necessary for section rows in which the title column is modified
with an additional parameter `colspan`, rendering the column different from
the original one.

task-2988062

X-original-commit: 737e080bd25fe9136c5606c1f77f94d6cfb0ddf4
Part-of: odoo/odoo#113564

addons/survey/static/src/question_page/question_page_list_renderer.js

@@ -59,28 +59,28 @@ export class QuestionPageListRenderer extends ListRenderer {
     }
 
     getSectionColumns(columns) {
-        const sectionColumns = [];
-
         let titleColumnIndex = 0;
-        for (const col of columns) {
-            if (col.type !== "field") {
+        let found = false;
+        let colspan = 1
+        for (let index = 0; index < columns.length; index++) {
+            const col = columns[index];
+            if (!found && col.name !== this.titleField) {
                 continue;
             }
-            if (col.widget === "handle") {
-                titleColumnIndex = 1;
-                sectionColumns.push(col);
+            if (!found) {
+                found = true;
+                titleColumnIndex = index;
                 continue;
             }
-            if (this.fieldsToShow.includes(col.name) && col.name !== this.titleField) {
-                sectionColumns.push(col);
+            if (col.type !== "field" || this.fieldsToShow.includes(col.name)) {
+                break;
             }
+            colspan += 1;
         }
 
-        const colspan = columns.length - sectionColumns.length;
-        const titleCol = columns.find(
-            (col) => col.type === "field" && col.name === this.titleField
-        );
-        sectionColumns.splice(titleColumnIndex, 0, { ...titleCol, colspan });
+        const sectionColumns = columns.slice(0, titleColumnIndex + 1).concat(columns.slice(titleColumnIndex + colspan));
+
+        sectionColumns[titleColumnIndex] = {...sectionColumns[titleColumnIndex], colspan};
 
         return sectionColumns;
     }
@@ -93,6 +93,22 @@ export class QuestionPageListRenderer extends ListRenderer {
         return record.data[this.discriminant];
     }
 
+    /**
+     *
+     * Overriding the method in order to identify the requested column based on its `name`
+     * instead of the exact object passed. This is necessary for section rows because the
+     * column object could have been replaced in `getSectionColumns` to add a `colspan`
+     * attribute.
+     *
+     * @override
+     */
+    focusCell(column, forward = true) {
+        const actualColumn = column.name ? this.state.columns.find(
+            (col) => col.name === column.name
+        ) : column;
+        super.focusCell(actualColumn, forward);
+    }
+
     onCellKeydownEditMode(hotkey) {
         switch (hotkey) {
             case "enter":