beginn with implementation of edit skillset

app/assets/stylesheets/styles.scss

@@ -2,4 +2,8 @@
 
 .modal-dialog {
   max-width: 60%;
+}
+
+.pointer {
+  cursor: pointer;
 }

app/javascript/application.js

@@ -1,4 +1,35 @@
 import "@hotwired/turbo-rails"
 import "./controllers"
 import "@puzzleitc/puzzle-shell";
-import "@puzzleitc/puzzle-shell/style.css";
+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;
+}

app/views/skills/index.html.haml

@@ -12,13 +12,15 @@
       %th.table-secondary{scope: "col"}= t "skills.table.radar"
       %th{scope: "col"}= t "skills.table.modify"
   %tbody
-    - @skills.each_with_index do |skill|
-      %tr
+    - @skills.each_with_index do |skill, index|
+      %tr{:contenteditable => "false", :id => "table-row-#{index}"}
         %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
-          %img{:src=> "/assets/pencil-square.svg",:height=>"16"}
+        %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}"}