From c664234568da03d485d5bfef7a9e6468a1fa4a4f Mon Sep 17 00:00:00 2001
From: Kat <katrina@madetech.com>
Date: Tue, 5 Oct 2021 13:46:23 +0100
Subject: [PATCH] extract js into tasklist-controller

---
 app/javascript/controllers/tasklist_controller.js | 8 ++++++++
 app/views/case_logs/edit.html.erb                 | 5 ++++-
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/controllers/tasklist_controller.js

diff --git a/app/javascript/controllers/tasklist_controller.js b/app/javascript/controllers/tasklist_controller.js
new file mode 100644
index 000000000..be94797f8
--- /dev/null
+++ b/app/javascript/controllers/tasklist_controller.js
@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  addHighlight() {
+    let section_to_highlight = this.element.dataset.info;
+    document.getElementById(section_to_highlight).classList.add('tasklist_item_highlight');
+  }
+}
diff --git a/app/views/case_logs/edit.html.erb b/app/views/case_logs/edit.html.erb
index 4a77253f6..f4e2d346d 100644
--- a/app/views/case_logs/edit.html.erb
+++ b/app/views/case_logs/edit.html.erb
@@ -9,7 +9,10 @@
       <p class="govuk-body govuk-!-margin-bottom-7">You've completed <%= get_sections_count(@form, @case_log, :completed) %> of <%= get_sections_count(@form, @case_log, :all) %> sections.</p>
       <p class="govuk-body govuk-!-margin-bottom-7">
         <% next_incomplete_section=get_next_incomplete_section(@form, @case_log) %>
-        <a href="#<%= next_incomplete_section %>" onclick="addHighlight('<%= next_incomplete_section %>')">
+        <a href="#<%= next_incomplete_section %>"
+           data-controller="tasklist"
+           data-action="tasklist#addHighlight"
+           data-info=<%= next_incomplete_section %>>
           Skip to next incomplete section
         </a>
       </p>