feat: Enhance inline editing functionality with cancel support and or…

…iginal value handling

- Added `original` value support in `inline_edit_controller.js` to store the initial input value.
- Implemented `cancel` method to revert changes on Escape key press, improving user experience.
- Updated `_edit_field_form.html.erb` and `_edit_field_form.html.erb` to pass original value to the inline edit controller.
- Modified input field actions to include cancel functionality, allowing users to easily discard edits.

app/javascript/controllers/inline_edit_controller.js

@@ -2,13 +2,23 @@ import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
   static targets = ["input"];
+  static values = {
+    original: String,
+  };
 
   connect() {
     this.inputTarget.focus();
     this.inputTarget.select();
   }
 
-  submit() {
+  submit(event) {
     this.element.requestSubmit();
   }
+
+  cancel(event) {
+    if (event.key === "Escape") {
+      this.inputTarget.value = this.originalValue;
+      this.inputTarget.blur();
+    }
+  }
 }

app/views/groups/samples/_edit_field_form.html.erb

@@ -1,5 +1,6 @@
 <td id="<%= dom_id(@sample, @field) %>">
-  <%= form_with(url: update_field_group_samples_path(@group), method: :patch, data: { controller: "inline-edit" }) do |f| %>
+  <%= form_with(url: update_field_group_samples_path(@group), method: :patch,
+  data: { controller: "inline-edit", "inline-edit-original-value": @value  }) do |f| %>
     <%= f.hidden_field :id, value: @sample.id %>
     <%= f.hidden_field :project_id, value: @sample.project.id %>
     <%= f.hidden_field :field, value: @field %>
@@ -11,7 +12,7 @@
                    "w-full m-0 border-slate-300 text-slate-900 text-sm focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-slate-700 dark:border-slate-600 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
                  data: {
                    "inline-edit-target": "input",
-                   action: "blur->inline-edit#submit",
+                   action: "blur->inline-edit#submit keydown->inline-edit#cancel",
                  } %>
   <% end %>
 </td>

app/views/projects/samples/_edit_field_form.html.erb

@@ -1,6 +1,6 @@
 <td id="<%= dom_id(@sample, @field) %>">
   <%= form_with(url: update_field_namespace_project_samples_path(@project.namespace.parent,
-      @project), method: :patch, data: { controller: "inline-edit" }) do |f| %>
+      @project), method: :patch, data: { controller: "inline-edit", "inline-edit-original-value": @value }) do |f| %>
     <%= f.hidden_field :id, value: @sample.id %>
     <%= f.hidden_field :field, value: @field %>
     <%= f.hidden_field :original_value, value: @value %>
@@ -11,7 +11,7 @@
                    "w-full m-0 border-slate-300 text-slate-900 text-sm focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-slate-700 dark:border-slate-600 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
                  data: {
                    "inline-edit-target": "input",
-                   action: "blur->inline-edit#submit",
+                   action: "blur->inline-edit#submit keydown->inline-edit#cancel",
                  } %>
   <% end %>
 </td>