Table cells are always inputs (#39)

* bump version

* try to add nokogiri 1.18.1 for rails 7.1

* revert try to add nokogiri 1.18.1 for rails 7.1

* table cells are always inputs

* update test

* bump version

* version and changelog

Author: ignaciosy

CHANGELOG.md

@@ -1,7 +1,11 @@
-## [Unreleased](https://github.com/renuo/hotsheet/compare/v0.1.0..HEAD)
+<!-- ## [Unreleased](https://github.com/renuo/hotsheet/compare/v0.1.0..HEAD) -->
 
-- Configure compatible Ruby/Rails versions for testing
-- Improve flash messages layout
+## [0.1.1](https://github.com/renuo/hotsheet/releases/tag/v0.1.1) (2025-02-03)
+
+- Improve configuration file usage and logic ([@simon-isler])
+- Configure compatible Ruby/Rails versions for testing ([@ignaciosy])
+- Improve flash messages layout ([@ignaciosy])
+- Form inputs are now always visible for usage simplicity ([@ignaciosy])
 
 ## [0.1.0](https://github.com/renuo/hotsheet/releases/tag/v0.1.0) (2024-11-05)
 

app/assets/javascripts/hotsheet/controllers/editable_attribute_controller.js

@@ -5,18 +5,12 @@ export default class extends Controller {
     broadcastUrl: String,
     resourceName: String,
     resourceId: Number,
+    resourceInitialValue: String
   }
 
-  static targets = ["readonlyAttribute", "attributeForm", "attributeFormInput"]
+  static targets = ["attributeFormInput"]
 
-  displayInputField() {
-    // this.broadcastEditIntent()
-    this.readonlyAttributeTarget.style.display = "none"
-    this.attributeFormTarget.style.display = "block"
-    this.attributeFormInputTarget.focus()
-  }
-
-  broadcastEditIntent() {
+  broadcastEditIntent() { // TODO: trigger on input focus
     const headers = {
       "Content-Type": "application/json",
       "X-CSRF-Token": document.querySelector("meta[name=csrf-token]").content,
@@ -35,14 +29,8 @@ export default class extends Controller {
     // Prevent standard submission triggered by Enter press
     event.preventDefault()
 
-    const previousValue = this.readonlyAttributeTarget.innerText.trim()
     const newValue = this.attributeFormInputTarget.value
-
-    if (previousValue && previousValue === newValue) {
-      this.readonlyAttributeTarget.style.display = "block"
-      this.attributeFormTarget.style.display = "none"
-      return
-    }
+    if (this.resourceInitialValueValue === newValue) return;
 
     // It's important to use requestSubmit() instead of simply submit() as the latter will circumvent the
     // Turbo mechanism, causing the PATCH request to be submitted as HTML instead of TURBO_STREAM

app/assets/stylesheets/hotsheet/application.css

@@ -12,15 +12,18 @@
   --main-padding-x: 2rem;
   --main-padding-y: 2rem;
 
+  --body-font: 400 16px system-ui, Roboto, Helvetica, Arial, sans-serif;
   --bg-color: lightgray;
   --success-color: green;
   --alert-color: yellow;
   --notice-color: blue;
   --error-color: red;
+  
+  --td-padding: 0.5rem;
 }
 
 body {
-  font: 400 16px system-ui, Roboto, Helvetica, Arial, sans-serif;
+  font: var(--body-font);
   margin: 0;
 }
 
@@ -72,12 +75,12 @@ table {
   th,
   td {
     border: 1px solid var(--bg-color);
-    padding: 0.5rem;
     text-align: left;
   }
 
   th {
     background-color: var(--bg-color);
+    padding: var(--td-padding);
   }
 
   .readonly-attribute {
@@ -88,7 +91,9 @@ table {
   .editable-input {
     background-color: transparent;
     border: none;
-    width: 100%;
+    font: var(--body-font);
+    padding: var(--td-padding);
+    width: calc(100% - var(--td-padding) * 2);
   }
 }
 

app/views/hotsheet/pages/_editable_attribute.html.erb

@@ -1,24 +1,15 @@
 <%# locals: (attribute:, model:, record:) %>
 
 <%= turbo_frame_tag "#{dom_id record}-#{attribute}" do %>
-  <div data-controller="editable-attribute"
-      data-editable-attribute-broadcast-url-value="<%= broadcast_edit_intent_path %>"
-      data-editable-attribute-resource-name-value="<%= model.table_name %>"
-      data-editable-attribute-resource-id-value="<%= record.id %>">
-    <div class="readonly-attribute"
-        data-editable-attribute-target="readonlyAttribute"
-        data-action="click->editable-attribute#displayInputField"
-        role="button">
-      <%= record.public_send attribute %>
-    </div>
-
-    <div data-editable-attribute-target="attributeForm" style="display:none">
-      <%= form_for record, url: "#{root_path}#{model.table_name}/#{record.id}" do |f| %>
-        <%= f.text_field attribute, class: "editable-input", data: {
-          editable_attribute_target: "attributeFormInput",
-          action: "keydown.enter->editable-attribute#submitForm blur->editable-attribute#submitForm"
-        } %>
-      <% end %>
-    </div>
-  </div>
+  <%= form_for record, url: "#{root_path}#{model.table_name}/#{record.id}",
+      html: { 'data-controller': "editable-attribute",
+              'data-editable-attribute-broadcast-url-value': broadcast_edit_intent_path,
+              'data-editable-attribute-resource-name-value': model.table_name,
+              'data-editable-attribute-resource-id-value': record.id,
+              'data-editable-attribute-resource-initial-value-value': record.public_send(attribute) } do |f| %>
+    <%= f.text_field attribute, class: "editable-input", data: {
+      editable_attribute_target: "attributeFormInput",
+      action: "keydown.enter->editable-attribute#submitForm blur->editable-attribute#submitForm"
+    } %>
+  <% end %>
 <% end %>

lib/hotsheet/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Hotsheet
-  VERSION = "0.1.0"
+  VERSION = "0.1.1"
 end

spec/system/editable_attributes_spec.rb

@@ -17,21 +17,20 @@
       visit "/hotsheet"
       click_link "Author"
 
-      find(".readonly-attribute", text: "Stephen").click
       fill_in "author_name", with: "King"
     end
 
     it "updates attribute when pressing enter" do
       find_by_id("author_name").native.send_keys :return
 
-      expect(page).to have_content("King")
+      expect(page).to have_field("author_name", with: "King")
       expect(author.reload.name).to eq("King")
     end
 
     it "updates attribute when clicking outside the input" do
       find("th", text: "name").click
 
-      expect(page).to have_content("King")
+      expect(page).to have_field("author_name", with: "King")
       expect(author.reload.name).to eq("King")
     end
   end