From 8a4dbce8a6ac4c7263a640c2d5b79c0cd1f6bab6 Mon Sep 17 00:00:00 2001
From: Ricardo Garcia Silva <ricardo.garcia.silva@gmail.com>
Date: Mon, 6 Jul 2026 18:43:46 +0100
Subject: [PATCH 1/2] added UI selection mechanism for survey-related records

---
 .../webapp/templates/macros.html              | 21 ++++-
 .../survey-missions/detail-component.html     |  6 +-
 .../list-component.html                       | 41 +++++++++
 .../survey-related-records/list-item.html     | 11 ++-
 .../survey-related-records/list.html          | 12 ++-
 tests/e2e/test_e2e_survey_related_records.py  | 92 +++++++++++++++++++
 6 files changed, 172 insertions(+), 11 deletions(-)

diff --git a/src/seis_lab_data/webapp/templates/macros.html b/src/seis_lab_data/webapp/templates/macros.html
index 125acceb..21ff847c 100644
--- a/src/seis_lab_data/webapp/templates/macros.html
+++ b/src/seis_lab_data/webapp/templates/macros.html
@@ -109,6 +109,16 @@ <h4 class="mb-0">{{ _("link") | capitalize }} {{ loop.index0 + 1 }}</h4>
 {% endmacro %}
 
 
+{% macro reset_selection_js() -%}
+Object.keys($selectedIds).forEach((k) => { $selectedIds[k] = false }); Object.keys($excludedIds).forEach((k) => { $excludedIds[k] = false }); $selectAllMatching = false;
+{%- endmacro %}
+
+
+{% macro reset_excluded_ids_js() -%}
+Object.keys($excludedIds).forEach((k) => { $excludedIds[k] = false });
+{%- endmacro %}
+
+
 {% macro render_pagination(pagination) %}
     {% if pagination.total_filtered_pages > 1 %}
         <nav aria-label="project-pagination">
@@ -161,7 +171,8 @@ <h4 class="mb-0">{{ _("link") | capitalize }} {{ loop.index0 + 1 }}</h4>
     begin_label_text,
     end_label_text,
     begin_initial_value="",
-    end_initial_value=""
+    end_initial_value="",
+    extra_on_input_js=""
 ) %}
     <div class="mb-3">
         <label for="search-temporal-extent-begin">{{ begin_label_text }}</label>
@@ -169,7 +180,7 @@ <h4 class="mb-0">{{ _("link") | capitalize }} {{ loop.index0 + 1 }}</h4>
                 id="search-temporal-extent-begin"
                 class="form-control" type="date"
                 data-bind="temporalExtentBegin"
-                data-on:input__debounce.200ms="@get('{{ search_url }}')"
+                data-on:input__debounce.200ms="{{ extra_on_input_js }}@get('{{ search_url }}')"
                 value="{{ begin_initial_value }}"
         >
     </div>
@@ -180,13 +191,13 @@ <h4 class="mb-0">{{ _("link") | capitalize }} {{ loop.index0 + 1 }}</h4>
                 class="form-control"
                 type="date"
                 data-bind="temporalExtentEnd"
-                data-on:input__debounce.200ms="@get('{{ search_url }}')"
+                data-on:input__debounce.200ms="{{ extra_on_input_js }}@get('{{ search_url }}')"
                 value="{{ end_initial_value }}"
         >
     </div>
 {% endmacro %}
 
-{% macro render_search_component(search_url, label_text, initial_value="", set_autofocus=False) %}
+{% macro render_search_component(search_url, label_text, initial_value="", set_autofocus=False, extra_on_input_js="") %}
     <div class="row m-lg-5 justify-content-center" data-signals:search="'{{ initial_value }}'">
         <div class="col-6">
             <search
@@ -199,7 +210,7 @@ <h4 class="mb-0">{{ _("link") | capitalize }} {{ loop.index0 + 1 }}</h4>
                         id="search"
                         placeholder="search"
                         data-bind:search
-                        data-on:input__debounce.200ms="@get('{{ search_url }}')"
+                        data-on:input__debounce.200ms="{{ extra_on_input_js }}@get('{{ search_url }}')"
                         data-indicator:searching
                         {% if set_autofocus %}autofocus{% endif %}
                 />
diff --git a/src/seis_lab_data/webapp/templates/survey-missions/detail-component.html b/src/seis_lab_data/webapp/templates/survey-missions/detail-component.html
index 2740a5b9..6134310f 100644
--- a/src/seis_lab_data/webapp/templates/survey-missions/detail-component.html
+++ b/src/seis_lab_data/webapp/templates/survey-missions/detail-component.html
@@ -73,6 +73,9 @@ <h6>
         <div
             class="row mt-4"
             data-signals:listing-version="0"
+            data-signals:selected-ids="{}"
+            data-signals:excluded-ids="{}"
+            data-signals:select-all-matching="false"
             data-effect="$listingVersion > 0 && @get('{{ url_for('survey_missions:get_mission_records_list_component', survey_mission_id=survey_mission.id) }}')"
         >
             <div class="col">
@@ -80,7 +83,8 @@ <h2>{{ _("survey-related-records") | capitalize }}</h2>
                 {{ macros.render_search_component(
                    url_for("survey_missions:get_mission_records_list_component", survey_mission_id=survey_mission.id),
                    _("search survey-related records"),
-                   initial_value=search_initial_value | default("", true)
+                   initial_value=search_initial_value | default("", true),
+                   extra_on_input_js=macros.reset_selection_js()
                 ) }}
                 <div id="survey-mission-records">
                     {% with items = survey_related_records %}
diff --git a/src/seis_lab_data/webapp/templates/survey-related-records/list-component.html b/src/seis_lab_data/webapp/templates/survey-related-records/list-component.html
index 176a26b8..1bf05d2d 100644
--- a/src/seis_lab_data/webapp/templates/survey-related-records/list-component.html
+++ b/src/seis_lab_data/webapp/templates/survey-related-records/list-component.html
@@ -8,6 +8,47 @@
     >
         <div class="col">
             {% if items | length > 0 %}
+                <div
+                        class="row align-items-center mb-3"
+                        aria-label="selection-toolbar"
+                        data-signals:page-item-ids="[{% for item in items %}'{{ item.id }}'{% if not loop.last %},{% endif %}{% endfor %}]"
+                        data-computed:all-page-items-selected="$pageItemIds.length > 0 && $pageItemIds.every(id => $selectAllMatching ? !$excludedIds[id] : !!$selectedIds[id])"
+                        data-computed:selected-count="$selectAllMatching ? ({{ pagination.total_filtered_items }} - Object.values($excludedIds).filter(Boolean).length) : Object.values($selectedIds).filter(Boolean).length"
+                >
+                    <div class="col-auto form-check">
+                        <input
+                                type="checkbox"
+                                class="form-check-input"
+                                id="select-all-on-page"
+                                aria-label="select-all-on-page"
+                                data-effect="el.checked = $allPageItemsSelected"
+                                data-on:change="evt.target.checked ? ($selectAllMatching ? $pageItemIds.forEach(id => $excludedIds[id] = false) : $pageItemIds.forEach(id => $selectedIds[id] = true)) : ($selectAllMatching ? $pageItemIds.forEach(id => $excludedIds[id] = true) : $pageItemIds.forEach(id => $selectedIds[id] = false))"
+                        >
+                        <label class="form-check-label" for="select-all-on-page">{{ _("select all on this page") | capitalize }}</label>
+                    </div>
+                    <div class="col-auto" aria-label="selected-count" data-attr:hidden="$selectedCount === 0">
+                        <small class="text-body-secondary"><span data-text="$selectedCount"></span> {{ _("selected") }}</small>
+                    </div>
+                    <div
+                            class="col-auto"
+                            data-attr:hidden="!($allPageItemsSelected && !$selectAllMatching && {{ pagination.total_filtered_items }} > $pageItemIds.length)"
+                    >
+                        <button
+                                type="button"
+                                class="btn btn-link btn-sm p-0"
+                                aria-label="select-all-matching"
+                                data-on:click="$selectAllMatching=true; {{ macros.reset_excluded_ids_js() }}"
+                        >{{ _("Select all %(total)d records that match your search") | format(total=pagination.total_filtered_items) }}</button>
+                    </div>
+                    <div class="col-auto" data-attr:hidden="$selectedCount === 0">
+                        <button
+                                type="button"
+                                class="btn btn-link btn-sm p-0"
+                                aria-label="clear-selection"
+                                data-on:click="{{ macros.reset_selection_js() }}"
+                        >{{ _("clear selection") | capitalize }}</button>
+                    </div>
+                </div>
                 <ul class="list-inline text-center">
                     <li class="list-inline-item">
                         <small>{{ _("Total pages: %(total_pages)d") | format(total_pages=pagination.total_filtered_pages) }}</small>
diff --git a/src/seis_lab_data/webapp/templates/survey-related-records/list-item.html b/src/seis_lab_data/webapp/templates/survey-related-records/list-item.html
index 3e510e92..d8afcabe 100644
--- a/src/seis_lab_data/webapp/templates/survey-related-records/list-item.html
+++ b/src/seis_lab_data/webapp/templates/survey-related-records/list-item.html
@@ -4,7 +4,16 @@
         class="col"
         data-signals:is-valid-id{{ id_ }}="{{ 'true' if item.validation_result.is_valid else 'false' }}"
 >
-    <div class="card mb-3">
+    <div class="card mb-3 position-relative">
+        <div class="form-check position-absolute top-0 start-0 m-2">
+            <input
+                    type="checkbox"
+                    class="form-check-input"
+                    aria-label="select-item"
+                    data-effect="el.checked = ($selectAllMatching ? !$excludedIds['{{ item.id }}'] : !!$selectedIds['{{ item.id }}'])"
+                    data-on:change="$selectAllMatching ? ($excludedIds['{{ item.id }}'] = !evt.target.checked) : ($selectedIds['{{ item.id }}'] = evt.target.checked)"
+            >
+        </div>
         <div class="row g-0">
             <div class="col-md-4">
                 <div class="placeholder-rectangle bg-secondary"></div>
diff --git a/src/seis_lab_data/webapp/templates/survey-related-records/list.html b/src/seis_lab_data/webapp/templates/survey-related-records/list.html
index 5a386830..0b14835b 100644
--- a/src/seis_lab_data/webapp/templates/survey-related-records/list.html
+++ b/src/seis_lab_data/webapp/templates/survey-related-records/list.html
@@ -32,6 +32,9 @@
                 data-signals:advanced-search-panel-open="false"
                 data-signals:searching="false"
                 data-signals:listing-version="0"
+                data-signals:selected-ids="{}"
+                data-signals:excluded-ids="{}"
+                data-signals:select-all-matching="false"
                 data-effect="$listingVersion > 0 && @get('{{ url_for('survey_related_records:get_list_component') }}')"
         >
             <div class="col-8">
@@ -42,7 +45,7 @@
                             id="search"
                             placeholder="Search"
                             data-bind:search
-                            data-on:input__debounce.200ms="@get('{{ url_for("survey_related_records:get_list_component") }}')"
+                            data-on:input__debounce.200ms="{{ macros.reset_selection_js() }}@get('{{ url_for("survey_related_records:get_list_component") }}')"
                             data-indicator:searching
                     />
                     <label class="form-label" for="search">
@@ -86,7 +89,8 @@
                                         _("Temporal extent begin"),
                                         _("Temporal extent end"),
                                         "{{ current_temporal_extent.begin }}",
-                                        "{{ current_temporal_extent.end }}"
+                                        "{{ current_temporal_extent.end }}",
+                                        extra_on_input_js=macros.reset_selection_js()
                                     ) }}
                         <div class="mb-3">
                             <label for="path-fragment">{{ _("Path") }}</label>
@@ -94,7 +98,7 @@
                                     id="path-fragment"
                                     class="form-control"
                                     data-bind="assetPathFragment"
-                                    data-on:input__debounce.200ms="@get('{{ url_for("survey_related_records:get_list_component") }}')"
+                                    data-on:input__debounce.200ms="{{ macros.reset_selection_js() }}@get('{{ url_for("survey_related_records:get_list_component") }}')"
                                     value=""
                             >
                         </div>
@@ -121,7 +125,7 @@
                                 data-initial-max-lon="{{ map_bounds.max_lon }}"
                                 data-initial-max-lat="{{ map_bounds.max_lat }}"
                                 style="display: block; width: 100%; height: 30vh"
-                                data-on:map-moveend="document.querySelector('base-map').checkVisibility() ? $currentBbox=evt.detail.map.getBounds().toArray() : $currentBbox=[[-180, -90],[180, 90]]; @get('{{ url_for('survey_related_records:get_list_component') }}')"
+                                data-on:map-moveend="document.querySelector('base-map').checkVisibility() ? $currentBbox=evt.detail.map.getBounds().toArray() : $currentBbox=[[-180, -90],[180, 90]]; {{ macros.reset_selection_js() }}@get('{{ url_for('survey_related_records:get_list_component') }}')"
                         ></base-map>
                     </div>
                 </div>
diff --git a/tests/e2e/test_e2e_survey_related_records.py b/tests/e2e/test_e2e_survey_related_records.py
index 43750dc8..cf6cdfec 100644
--- a/tests/e2e/test_e2e_survey_related_records.py
+++ b/tests/e2e/test_e2e_survey_related_records.py
@@ -203,6 +203,98 @@ def test_survey_related_record_lifecycle(authenticated_page: Page):
     expect(authenticated_page).to_have_url(re.compile(r"/projects/?$"))
 
 
+@pytest.mark.e2e
+def test_survey_related_record_bulk_selection(authenticated_page: Page):
+    # NOTE: this only exercises the selection primitives (checkboxes, count,
+    # clear, auto-clear-on-filter-change) on the mission-scoped listing, where
+    # the record count is fully controlled by the test. The top-level listing
+    # pools records system-wide, so a deterministic "select all N matching"
+    # assertion there would depend on how much other data exists in the DB.
+
+    authenticated_page.goto("/")
+    authenticated_page.get_by_role("link", name="list-projects").click()
+    authenticated_page.get_by_role("link", name="new-project").click()
+
+    project_name = f"e2e test project {uuid.uuid4().hex[:8]}"
+    _fill_project_form_minimal(authenticated_page, project_name)
+    authenticated_page.get_by_role("button", name="submit-create-form").click()
+    expect(authenticated_page).to_have_url(
+        re.compile(r"/projects/[0-9a-f-]{36}$"), timeout=10_000
+    )
+
+    authenticated_page.get_by_role("link", name="new-item").click()
+    mission_name = f"e2e test survey mission {uuid.uuid4().hex[:8]}"
+    _fill_survey_mission_form_minimal(authenticated_page, mission_name)
+    authenticated_page.get_by_role("button", name="submit-create-form").click()
+    expect(authenticated_page).to_have_url(
+        re.compile(r"/survey-missions/[0-9a-f-]{36}$"), timeout=10_000
+    )
+    mission_detail_url = authenticated_page.url
+
+    record_urls = []
+    for i in range(2):
+        authenticated_page.get_by_role("link", name="new-item").click()
+        record_name = f"e2e bulk selection record {i} {uuid.uuid4().hex[:8]}"
+        _fill_survey_related_record_form(authenticated_page, record_name)
+        authenticated_page.get_by_role("button", name="submit-create-form").click()
+        expect(authenticated_page).to_have_url(
+            re.compile(r"/survey-related-records/[0-9a-f-]{36}$"), timeout=10_000
+        )
+        record_urls.append(authenticated_page.url)
+        authenticated_page.goto(mission_detail_url)
+
+    checkboxes = authenticated_page.get_by_role("checkbox", name="select-item")
+    expect(checkboxes).to_have_count(2)
+    selected_count = authenticated_page.locator("[aria-label='selected-count']")
+    clear_selection_button = authenticated_page.get_by_role(
+        "button", name="clear-selection"
+    )
+
+    checkboxes.nth(0).check()
+    expect(selected_count).to_contain_text("1 selected")
+    expect(clear_selection_button).to_be_visible()
+
+    checkboxes.nth(1).check()
+    expect(selected_count).to_contain_text("2 selected")
+
+    clear_selection_button.click()
+    expect(selected_count).to_be_hidden()
+    expect(clear_selection_button).to_be_hidden()
+
+    # selecting again, then changing the search filter should clear it back out
+    checkboxes.nth(0).check()
+    expect(selected_count).to_contain_text("1 selected")
+    authenticated_page.get_by_placeholder("search").fill("something not matching")
+    expect(
+        authenticated_page.get_by_text("No survey-related records found")
+    ).to_be_visible()
+    authenticated_page.get_by_placeholder("search").fill("")
+    expect(selected_count).to_be_hidden()
+
+    # clean up: delete both records, then mission, then project
+    for record_url in record_urls:
+        authenticated_page.goto(record_url)
+        authenticated_page.get_by_role(
+            "button", name="show-delete-confirmation-modal"
+        ).click()
+        authenticated_page.get_by_role("button", name="delete-item").click()
+        expect(authenticated_page.get_by_role("link", name="new-item")).to_be_visible()
+
+    authenticated_page.get_by_role(
+        "button", name="show-delete-confirmation-modal"
+    ).click()
+    authenticated_page.get_by_role("button", name="delete-item").click()
+    expect(authenticated_page).to_have_url(
+        re.compile(r"/projects/[0-9a-f-]{36}$"), timeout=15_000
+    )
+
+    authenticated_page.get_by_role(
+        "button", name="show-delete-confirmation-modal"
+    ).click()
+    authenticated_page.get_by_role("button", name="delete-item").click()
+    expect(authenticated_page).to_have_url(re.compile(r"/projects/?$"))
+
+
 @pytest.mark.e2e
 def test_survey_related_record_creation_rejects_duplicate_english_name(
     authenticated_page: Page,

From 65c2de22586397558c1e06ee1da33775102cbcd8 Mon Sep 17 00:00:00 2001
From: Ricardo Garcia Silva <ricardo.garcia.silva@gmail.com>
Date: Mon, 6 Jul 2026 23:25:21 +0100
Subject: [PATCH 2/2] fixed failing e2e tests

---
 tests/e2e/test_e2e_projects.py               | 23 ++++++++++++--------
 tests/e2e/test_e2e_survey_related_records.py | 10 +++++----
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/tests/e2e/test_e2e_projects.py b/tests/e2e/test_e2e_projects.py
index 2338200e..28d6d4e2 100644
--- a/tests/e2e/test_e2e_projects.py
+++ b/tests/e2e/test_e2e_projects.py
@@ -81,23 +81,28 @@ def test_project_lifecycle(authenticated_page: Page):
         re.compile(r"/projects/[0-9a-f-]{36}$"), timeout=10_000
     )
 
-    # now try to modify the project
+    # try to modify the project, but this time hit the cancel button. This is done
+    # before the real modification below because submitting a real update puts the
+    # project into the `under_validation` status for a few seconds, during which the
+    # `update-item` link is disabled - the status signal is only ever set once, when
+    # the detail page is rendered, so clicking `update-item` again right after a real
+    # update is racy (see issue tracking the live status/validation signal updates).
     authenticated_page.get_by_role("link", name="update-item").click()
-    authenticated_page.get_by_role("textbox", name="field-name-en").fill(
-        f"The modified name {project_name_id}"
-    )
-    authenticated_page.get_by_role("button", name="submit-update-form").click()
+    authenticated_page.get_by_role("link", name="cancel-update").click()
 
-    # expect to be redirector the project detail page upon successful modification
+    # expect to be redirector the project detail page upon cancelling the modification
     expect(authenticated_page).to_have_url(
         re.compile(r"/projects/[0-9a-f-]{36}$"), timeout=10_000
     )
 
-    # now try to modify the project again, but this time hit the cancel button
+    # now actually modify the project
     authenticated_page.get_by_role("link", name="update-item").click()
-    authenticated_page.get_by_role("link", name="cancel-update").click()
+    authenticated_page.get_by_role("textbox", name="field-name-en").fill(
+        f"The modified name {project_name_id}"
+    )
+    authenticated_page.get_by_role("button", name="submit-update-form").click()
 
-    # expect to be redirector the project detail page upon cancelling the modification
+    # expect to be redirector the project detail page upon successful modification
     expect(authenticated_page).to_have_url(
         re.compile(r"/projects/[0-9a-f-]{36}$"), timeout=10_000
     )
diff --git a/tests/e2e/test_e2e_survey_related_records.py b/tests/e2e/test_e2e_survey_related_records.py
index cf6cdfec..d1e1bf31 100644
--- a/tests/e2e/test_e2e_survey_related_records.py
+++ b/tests/e2e/test_e2e_survey_related_records.py
@@ -261,13 +261,15 @@ def test_survey_related_record_bulk_selection(authenticated_page: Page):
     expect(selected_count).to_be_hidden()
     expect(clear_selection_button).to_be_hidden()
 
-    # selecting again, then changing the search filter should clear it back out
+    # selecting again, then changing the search filter should clear it back out. NOTE:
+    # we assert on the checkboxes disappearing rather than on the translated
+    # "no records found" message, since the e2e suite runs against whatever the
+    # default locale is (currently portuguese) and that message text is not stable
+    # across locales.
     checkboxes.nth(0).check()
     expect(selected_count).to_contain_text("1 selected")
     authenticated_page.get_by_placeholder("search").fill("something not matching")
-    expect(
-        authenticated_page.get_by_text("No survey-related records found")
-    ).to_be_visible()
+    expect(checkboxes).to_have_count(0)
     authenticated_page.get_by_placeholder("search").fill("")
     expect(selected_count).to_be_hidden()