1984 Verbesserung Workflow bei der Erfassung der Kandidaten-Stimmen der verschiedenen Wahlvorschläge

[ThoGro]

Beschreibung:

Öffnet die nächste Card, die noch zu bearbeiten ist und scrollt zu der Stelle, falls die Liste der Wahlvorschläge länger ist. Wenn alle Wahlvorschläge bearbeitet sind wird ans Ende gesprungen (Im Moment zum Footer, da es noch keine Buttons zur weiteren Navigation gibt)

Definition of Done (DoD):

Frontend

• Naming Conventions beachtet
• Doku aktualisiert
  • Fachliche Beschreibung
  • UI/UX-Adrs
• Unit-Tests gepflegt
• Texte auf Rechtschreibung und Grammatik geprüft

Referenzen¹:

Closes #1984

Footnotes

1. Nicht zutreffende Referenzen vor dem Speichern entfernen ↩

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

This change adds automatic navigation functionality to the candidate votes recording workflow in a Vue component. After saving votes for a proposal, the component now automatically collapses the current card, identifies the next row requiring edits (marked as dirty), expands that card, and scrolls to it. UI anchors are introduced via id attributes to enable programmatic scrolling targets. The save flow is extended to trigger this navigation, and Vue's nextTick is leveraged to ensure DOM readiness before scrolling operations.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: improving the workflow for capturing candidate votes across different electoral proposals by automatically opening the next card to process.
Description check	✅ Passed	The description covers the main functionality and includes a reference to issue #1984, but the DoD checklists remain unchecked, suggesting incomplete preparation.
Linked Issues check	✅ Passed	The implementation satisfies both acceptance criteria: it opens the next unprocessed card after saving [#1984] and scrolls to the footer when no cards remain unprocessed [#1984].
Out of Scope Changes check	✅ Passed	All changes are directly related to the workflow improvement objective; navigation logic, UI anchors, save flow extension, and helper methods all support the specified acceptance criteria.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch 1984-verbesserung-des-workflows-bei-der-erfassung-der-kandidaten-stimmen-der-verschiedenen-wahlvorschläge

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In
`@wls-gui-wahllokalsystem/src/components/ergebnismeldung/MBW/stapelBC/TheWahlvorschlaegeKandidatenStimmenCard.vue`:
- Around line 86-87: The template renders
<base-card-wahlvorschlag-kandidaten-stimmen-erfassen> inside a v-for with a
static id "kandidatenStimmenErfassen", causing duplicate IDs; update the
template to generate a unique id per item (e.g.,
`kandidatenStimmenErfassen-${index}`) or add a Vue ref keyed by index, then
change the logic in _openNextCard to target that specific element/component
instead of document.querySelector("#kandidatenStimmenErfassen"); reference the
component tag base-card-wahlvorschlag-kandidaten-stimmen-erfassen, the static id
kandidatenStimmenErfassen, and the method _openNextCard when making the updates
so the selector or $refs use the index to pick the correct card.

🧹 Nitpick comments (3)

wls-gui-wahllokalsystem/src/components/ergebnismeldung/MBW/stapelBC/TheWahlvorschlaegeKandidatenStimmenCard.vue (3)

99-99: Consider a more specific id for the footer scroll anchor.

id="footer" is very generic and could collide with other elements in the page (e.g. a layout footer). A scoped name like id="wahlvorschlaege-table-footer" would be safer and more self-documenting.

Also applies to: 243-248

---

251-260: _findNextIndex relies on caller having already cleared dirtyRows[index].

The loop starts at i = 0, which checks the current index first. This works only because dirtyRows.value[rowIndex] is set to false before calling _openNextCard. Starting at i = 1 would make the "skip current" intent explicit and avoid a subtle coupling with the call site.

Suggested tweak

 function _findNextIndex(index: number) {
   const length = wahlvorschlaegeWithKandidatenErgebnissen.value.length;
-  for (let i = 0; i < length; i++) {
-    const currentIndex = (index + i) % length;
+  for (let i = 1; i <= length; i++) {
+    const currentIndex = (index + i) % length;
     if (dirtyRows.value[currentIndex]) {
       return currentIndex;
     }
   }
   return -1;
 }

---

237-248: Use scrollIntoView({ behavior: "smooth" }) for a less jarring transition.

Both scrollIntoView() calls (Lines 240 and 246) default to an instant jump. Since this PR is specifically about improving the editing workflow UX, a smooth scroll would feel more polished and help users maintain context.

Suggested tweak

-        nextElement.scrollIntoView();
+        nextElement.scrollIntoView({ behavior: "smooth" });

-      footer.scrollIntoView();
+      footer.scrollIntoView({ behavior: "smooth" });