edit table row with stimulus instead of raw javascript

app/javascript/application.js

@@ -1,35 +1,4 @@
 import "@hotwired/turbo-rails"
 import "./controllers"
 import "@puzzleitc/puzzle-shell";
-import "@puzzleitc/puzzle-shell/style.css";
-
-let toggleEditModeButton = document.querySelectorAll('.edit-button');
-let saveButton = document.querySelectorAll('.save-button');
-let cancelButton = document.querySelectorAll('.cancel-button');
-
-document.addEventListener('turbo:load', () => {
-    toggleEditModeButton.forEach((img, index) => {
-        img.addEventListener("click", () => {
-           let row = document.getElementById('table-row-' + index);
-           row.contentEditable = "true";
-           row.focus();
-           toggleActionButtonDisplay(index, "block");
-           img.style.display = "none";
-        });
-    });
-
-    cancelButton.forEach((cancel, index) => {
-        cancel.addEventListener("click", () => {
-            let row = document.getElementById("table-row-" + index);
-            row.contentEditable = "false";
-            toggleActionButtonDisplay(index, "none");
-            document.getElementById("edit-button-" + index).style.display = "block";
-        });
-        toggleActionButtonDisplay(index, "none");
-    });
-});
-
-function toggleActionButtonDisplay(id, display) {
-    document.getElementById("cancel-button-" + id).style.display = display;
-    document.getElementById("save-button-" + id).style.display = display;
-}
+import "@puzzleitc/puzzle-shell/style.css";

app/javascript/controllers/index.js

@@ -4,5 +4,8 @@
 
 import { application } from "./application"
 
-import Remote_modal_controller from "./remote_modal_controller"
-application.register("remote-modal", Remote_modal_controller)
+import RemoteModalController from "./remote_modal_controller"
+application.register("remote-modal", RemoteModalController)
+
+import TableController from "./table_controller"
+application.register("table", TableController)

app/javascript/controllers/table_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="table"
+export default class extends Controller {
+  static targets = ["row", "editButton" ,"saveButton", "cancelButton"]
+  connect() {
+
+  }
+
+  editRow() {
+    this.triggerButtonDisplay("none", "block");
+    this.rowTarget.contentEditable = "true";
+    this.rowTarget.focus();
+  }
+
+  cancelRow() {
+    this.triggerButtonDisplay("block", "none");
+    this.rowTarget.contentEditable = "false";
+  }
+
+  triggerButtonDisplay(editButtonDisplay, actionButtonDisplay) {
+    this.cancelButtonTarget.style.display = actionButtonDisplay;
+    this.saveButtonTarget.style.display = actionButtonDisplay;
+    this.editButtonTarget.style.display = editButtonDisplay;
+  }
+}

app/views/skills/index.html.haml

@@ -13,14 +13,14 @@
       %th{scope: "col"}= t "skills.table.modify"
   %tbody
     - @skills.each_with_index do |skill, index|
-      %tr{:contenteditable => "false", :id => "table-row-#{index}"}
+      %tr{:contenteditable => "false", :id => "table-row-#{index}", "data-controller" => "table", "data-table-target" => "row"}
         %td= skill.title
         %td.table-light= skill.people.count
         %td= skill.category.title
         %td.table-light= skill.category.parent.title
         %td= skill.default_set.nil? ? "Neu" : (skill.default_set? ? "Ja" : "Nein")
         %td.table-light= skill.radar
         %td{:contenteditable => "false"}
-          %img.pointer.edit-button{:src=> "/assets/pencil-square.svg",:height=>"16", :id=>"edit-button-#{index}"}
-          =link_to image_tag("/assets/floppy2-fill.svg", class: "text-primary", id: "save-button-#{index}"), "#{skill_path(skill)}", class: "btn text-primary", method: :put
-          %img.pointer.cancel-button{:src=> "/assets/x.svg",:height=>"16", :id=>"cancel-button-#{index}"}
+          %img.pointer.edit-button{:src=> "/assets/pencil-square.svg",:height=>"16", "data-action" => "click->table#editRow", "data-table-target" => "editButton"}
+          %img.pointer.save-button{:src=> "/assets/floppy2-fill.svg",:height=>"16", "data-table-target" => "saveButton", "style" => "display: none;"}
+          %img.pointer.cancel-button.d-none{:src=> "/assets/x.svg",:height=>"16", "data-action" => "click->table#cancelRow", "data-table-target" => "cancelButton", "style" => "display: none;"}