table cells are always inputs

renuo · Jan 15, 2025 · 219e76f · 219e76f
1 parent 46ba198
commit 219e76f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 39 deletions.
diff --git a/app/assets/javascripts/hotsheet/controllers/editable_attribute_controller.js b/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

diff --git a/app/assets/stylesheets/hotsheet/application.css b/app/assets/stylesheets/hotsheet/application.css
@@ -8,12 +8,14 @@
  */
 
 :root {
+  --body-font: 400 16px system-ui, Roboto, Helvetica, Arial, sans-serif;
   --bg-color: lightgray;
   --sidebar-width: 12rem;
+  --td-padding: 0.5rem;
 }
 
 body {
-  font: 400 16px system-ui, Roboto, Helvetica, Arial, sans-serif;
+  font: var(--body-font);
   margin: 0;
 }
 
@@ -65,12 +67,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 {
@@ -81,6 +83,8 @@ 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);
   }
 }
diff --git a/app/views/hotsheet/pages/_editable_attribute.html.erb b/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 %>