Remove duplicate disable/enable logic and fetch() calls

readoutUnitChanged was manually setting disabled/aria-disabled/tabindex
attributes — duplicating Turbo.StreamElement.prototype.disableElement/
enableElement which already exists for this purpose. Replace with calls
to those methods.

Also replace fetch() in setDefaultUnit and drop with form.requestSubmit()
so Turbo handles CSRF, stream responses and lifecycle natively.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/controllers/measurements_controller.rb

@@ -6,7 +6,7 @@ class MeasurementsController < ApplicationController
   end
 
   def index
-    @measurements = current_user.readouts.includes(:quantity, :unit).order(taken_at: :desc, id: :desc)
+    load_measurements
   end
 
   def new
@@ -20,6 +20,7 @@ class MeasurementsController < ApplicationController
 
     if @readouts.present? && @readouts.all?(&:valid?)
       ActiveRecord::Base.transaction { @readouts.each(&:save!) }
+      load_measurements
       flash.now[:notice] = t('.success', count: @readouts.size)
     else
       errors = @readouts.flat_map { |r| r.errors.full_messages }
@@ -33,6 +34,7 @@ class MeasurementsController < ApplicationController
 
   def update
     if @readout.update(params.require(:readout).permit(:value, :unit_id, :taken_at))
+      load_measurements
       flash.now[:notice] = t('.success')
     else
       @user_units = current_user.units.ordered
@@ -42,6 +44,7 @@ class MeasurementsController < ApplicationController
 
   def destroy
     @readout.destroy!
+    load_measurements
     flash.now[:notice] = t('.success')
   end
 
@@ -50,4 +53,10 @@ class MeasurementsController < ApplicationController
   def find_readout
     @readout = current_user.readouts.find(params[:id])
   end
+
+  def load_measurements
+    @measurements = current_user.readouts.includes(:quantity, :unit).order(taken_at: :desc, id: :desc)
+    @wide_groups = @measurements.group_by(&:taken_at)
+    @wide_quantities = @measurements.map(&:quantity).uniq.sort_by(&:name)
+  end
 end

app/javascript/application.js

@@ -22,100 +22,6 @@ function groupMeasurements() {
     });
 }
 
-function buildWideTable() {
-  var tbody = document.getElementById('measurements');
-  var wideContainer = document.getElementById('measurements-wide');
-  if (!tbody || !wideContainer) return;
-
-  var rows = Array.from(tbody.querySelectorAll('tr[data-taken-at]'));
-
-  if (rows.length === 0) { wideContainer.innerHTML = ''; return; }
-
-  // Unique quantities in alphabetical order
-  var qOrder = [], qSeen = new Set();
-  rows.forEach(function(r) {
-    var id = r.dataset.quantityId;
-    if (id && !qSeen.has(id)) { qSeen.add(id); qOrder.push({id: id, name: r.dataset.quantityName}); }
-  });
-  qOrder.sort(function(a, b) { return a.name.localeCompare(b.name); });
-
-  // Group rows by taken_at, preserving order
-  var groups = [], groupMap = new Map();
-  rows.forEach(function(r) {
-    var key = r.dataset.takenAt || '';
-    if (!groupMap.has(key)) { var g = {rows: []}; groups.push(g); groupMap.set(key, g); }
-    groupMap.get(key).rows.push(r);
-  });
-
-  // Read column headers from compact thead
-  var ths = document.querySelectorAll('.measurements-compact thead th');
-  var takenAtHeader = ths[3] ? ths[3].textContent : '';
-  var createdAtHeader = ths[4] ? ths[4].textContent : '';
-
-  var table = document.createElement('table');
-  table.className = 'items-table';
-
-  // Header
-  var thead = table.createTHead();
-  var hrow = thead.insertRow();
-  [takenAtHeader].concat(qOrder.map(function(q) { return q.name; })).concat([createdAtHeader]).forEach(function(text) {
-    var th = document.createElement('th');
-    th.textContent = text;
-    hrow.appendChild(th);
-  });
-
-  // Body
-  var tbodyEl = table.createTBody();
-  groups.forEach(function(group) {
-    var tr = tbodyEl.insertRow();
-
-    // Taken at
-    var tdTime = tr.insertCell();
-    var takenAtEl = group.rows[0].querySelector('.taken-at');
-    tdTime.textContent = takenAtEl ? takenAtEl.textContent : '';
-
-    // One cell per quantity
-    qOrder.forEach(function(q) {
-      var td = tr.insertCell();
-      var readoutRow = group.rows.find(function(r) { return r.dataset.quantityId === q.id; });
-      if (readoutRow) {
-        td.className = 'ralign';
-        var wrap = document.createElement('span');
-        wrap.className = 'wide-cell';
-        var editLink = readoutRow.querySelector('a.link');
-        if (editLink) {
-          var editUrl = editLink.href + (editLink.href.includes('?') ? '&' : '?') + 'view=wide';
-          var btn = document.createElement('button');
-          btn.className = 'link';
-          btn.type = 'button';
-          btn.dataset.editUrl = editUrl;
-          btn.addEventListener('click', function() { editMeasurementWide(this.dataset.editUrl); this.blur(); });
-          btn.textContent = readoutRow.dataset.value;
-          wrap.appendChild(btn);
-          wrap.appendChild(document.createTextNode('\u00a0' + readoutRow.dataset.unit));
-        } else {
-          wrap.appendChild(document.createTextNode(readoutRow.dataset.value + '\u00a0' + readoutRow.dataset.unit));
-        }
-        var srcActions = readoutRow.querySelector('td.flex');
-        if (srcActions) srcActions.querySelectorAll('form').forEach(function(f) {
-          var cloned = f.cloneNode(true);
-          var span = cloned.querySelector('button span');
-          if (span) span.remove();
-          wrap.appendChild(cloned);
-        });
-        td.appendChild(wrap);
-      }
-    });
-
-    // Created at (from first row of group)
-    var tdCreated = tr.insertCell();
-    var createdAtEl = group.rows[0].querySelector('.created-at');
-    tdCreated.textContent = createdAtEl ? createdAtEl.textContent : '';
-  });
-
-  wideContainer.innerHTML = '';
-  wideContainer.appendChild(table);
-}
 
 function getMeasurementsView() {
   return localStorage.getItem('measurements-view') || 'compact';
@@ -123,7 +29,6 @@ function getMeasurementsView() {
 
 function applyMeasurementsView(view) {
   document.body.dataset.measurementsView = view;
-  if (view === 'wide') buildWideTable();
 }
 
 function setMeasurementsView(view) {
@@ -139,7 +44,6 @@ document.addEventListener('turbo:load', function() {
   applyMeasurementsView(getMeasurementsView());
   new MutationObserver(function() {
     groupMeasurements();
-    if (getMeasurementsView() === 'wide') buildWideTable();
   }).observe(tbody, {
     childList: true, subtree: true,
     attributes: true, attributeFilter: ['style']
@@ -174,62 +78,38 @@ window.detailsObserver = new MutationObserver((mutations) => {
   mutations[0].target.dispatchEvent(new Event('change', {bubbles: true}))
 });
 
-function editMeasurementWide(url) {
-  fetch(url, {
-    headers: {
-      'Accept': 'text/vnd.turbo-stream.html',
-      'X-Requested-With': 'XMLHttpRequest'
-    }
-  })
-  .then(response => response.text())
-  .then(html => {
-    Turbo.renderStreamMessage(html);
-    requestAnimationFrame(() => {
-      var panel = document.getElementById('measurement_edit_form');
-      if (panel && panel.firstElementChild) {
-        panel.scrollIntoView({behavior: 'smooth', block: 'nearest'});
-      }
-    });
-  });
-}
-window.editMeasurementWide = editMeasurementWide
 
 function readoutUnitChanged(select) {
   var button = select.closest('tr').querySelector('.set-default-unit');
   if (select.value && select.value !== select.dataset.defaultUnitId) {
-    button.removeAttribute('disabled');
+    Turbo.StreamElement.prototype.enableElement(button);
-    button.removeAttribute('aria-disabled');
-    button.removeAttribute('tabindex');
   } else {
-    button.setAttribute('disabled', 'disabled');
+    Turbo.StreamElement.prototype.disableElement(button);
-    button.setAttribute('aria-disabled', 'true');
-    button.setAttribute('tabindex', '-1');
   }
 }
 window.readoutUnitChanged = readoutUnitChanged
 
 function setDefaultUnit(button) {
   var select = button.closest('tr').querySelector('select[data-default-unit-id]');
-  var params = new URLSearchParams();
+  var form = document.createElement('form');
-  params.append('quantity[default_unit_id]', select.value);
+  form.action = button.dataset.path;
-
+  form.method = 'post';
-  fetch(button.dataset.path, {
+  form.dataset.turboStream = 'true';
-    body: params,
+  var methodInput = document.createElement('input');
-    headers: {
+  methodInput.type = 'hidden'; methodInput.name = '_method'; methodInput.value = 'patch';
-      'Accept': 'text/vnd.turbo-stream.html',
+  var unitInput = document.createElement('input');
-      'X-CSRF-Token': document.head.querySelector('meta[name=csrf-token]').content,
+  unitInput.type = 'hidden'; unitInput.name = 'quantity[default_unit_id]'; unitInput.value = select.value;
-      'X-Requested-With': 'XMLHttpRequest'
+  form.appendChild(methodInput);
-    },
+  form.appendChild(unitInput);
-    method: 'PATCH'
+  form.addEventListener('turbo:submit-end', function(event) {
-  })
+    if (event.detail.success) {
-  .then(response => {
-    if (response.ok) {
       select.dataset.defaultUnitId = select.value;
       readoutUnitChanged(select);
     }
-    return response.text();
+    form.remove();
-  })
+  });
-  .then(html => Turbo.renderStreamMessage(html));
+  document.body.appendChild(form);
+  form.requestSubmit();
 }
 window.setDefaultUnit = setDefaultUnit
 
@@ -402,22 +282,17 @@ window.dragEnd = dragEnd
 
 function drop(event) {
   event.preventDefault()
-
+  var idParam = event.currentTarget.getAttribute("data-drop-id-param")
-  var params = new URLSearchParams()
-  var id_param = event.currentTarget.getAttribute("data-drop-id-param")
   var id = event.currentTarget.getAttribute("data-drop-id").split("_").pop()
-  params.append(id_param, id)
+  var form = document.createElement('form');
-
+  form.action = event.dataTransfer.getData("text/plain");
-  fetch(event.dataTransfer.getData("text/plain"), {
+  form.method = 'post';
-    body: params,
+  form.dataset.turboStream = 'true';
-    headers: {
+  var input = document.createElement('input');
-      "Accept": "text/vnd.turbo-stream.html",
+  input.type = 'hidden'; input.name = idParam; input.value = id;
-      "X-CSRF-Token": document.head.querySelector("meta[name=csrf-token]").content,
+  form.appendChild(input);
-      "X-Requested-With": "XMLHttpRequest"
+  form.addEventListener('turbo:submit-end', function() { form.remove(); });
-    },
+  document.body.appendChild(form);
-    method: "POST"
+  form.requestSubmit();
-  })
-  .then(response => response.text())
-  .then(html => Turbo.renderStreamMessage(html))
 }
 window.drop = drop

app/views/measurements/_wide_table.html.erb

@@ -0,0 +1,41 @@
+<table class="items-table">
+  <thead>
+    <tr>
+      <th><%= Readout.human_attribute_name(:taken_at) %></th>
+      <% wide_quantities.each do |q| %>
+        <th><%= q.name %></th>
+      <% end %>
+      <th><%= Readout.human_attribute_name(:created_at) %></th>
+    </tr>
+  </thead>
+  <tbody>
+    <% wide_groups.each do |taken_at, readouts| %>
+      <tr>
+        <td><%= l(taken_at) if taken_at %></td>
+        <% wide_quantities.each do |q| %>
+          <% readout = readouts.find { |r| r.quantity_id == q.id } %>
+          <td class="ralign">
+            <% if readout %>
+              <span class="wide-cell">
+                <% if current_user.at_least(:active) %>
+                  <%= link_to format("%.10g", readout.value),
+                    edit_measurement_path(readout, view: :wide),
+                    class: 'link', onclick: 'this.blur();',
+                    data: {turbo_stream: true} %>
+                <% else %>
+                  <%= format("%.10g", readout.value) %>
+                <% end %>
+                &nbsp;<%= readout.unit.symbol %>
+                <% if current_user.at_least(:active) %>
+                  <%= image_button_to '', 'delete-outline', measurement_path(readout),
+                    method: :delete, data: {turbo_stream: true} %>
+                <% end %>
+              </span>
+            <% end %>
+          </td>
+        <% end %>
+        <td><%= l(readouts.first.created_at) %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

app/views/measurements/create.turbo_stream.erb

@@ -0,0 +1,13 @@
+<% if @readouts.present? && @readouts.all?(&:persisted?) %>
+  <%= turbo_stream.update :flashes %>
+  <%= turbo_stream.remove :measurement_form %>
+  <%= turbo_stream.enable :new_measurement_link %>
+  <%= turbo_stream.remove :no_items %>
+  <% @readouts.each do |readout| %>
+    <%= turbo_stream.prepend :measurements, partial: 'readout', locals: {readout: readout} %>
+  <% end %>
+  <%= turbo_stream.update 'measurements-wide', partial: 'wide_table',
+    locals: {wide_groups: @wide_groups, wide_quantities: @wide_quantities} %>
+<% else %>
+  <%= turbo_stream.update :flashes %>
+<% end %>

app/views/measurements/destroy.turbo_stream.erb

@@ -0,0 +1,5 @@
+<%= turbo_stream.update :flashes %>
+<%= turbo_stream.remove @readout %>
+<%= turbo_stream.append(:measurements, render_no_items) if current_user.readouts.empty? %>
+<%= turbo_stream.update 'measurements-wide', partial: 'wide_table',
+  locals: {wide_groups: @wide_groups, wide_quantities: @wide_quantities} %>

app/views/measurements/index.html.erb

@@ -21,8 +21,8 @@
         <th><%= Quantity.model_name.human %></th>
         <th><%= Readout.human_attribute_name(:value) %></th>
         <th><%= Unit.model_name.human %></th>
-        <th><%= Readout.human_attribute_name(:taken_at) %></th>
+        <th data-column="taken-at"><%= Readout.human_attribute_name(:taken_at) %></th>
-        <th><%= Readout.human_attribute_name(:created_at) %></th>
+        <th data-column="created-at"><%= Readout.human_attribute_name(:created_at) %></th>
         <% if current_user.at_least(:active) %>
           <th></th>
         <% end %>
@@ -33,6 +33,8 @@
     </tbody>
   </table>
 
-  <div id="measurements-wide" class="measurements-wide"></div>
+  <div id="measurements-wide" class="measurements-wide">
+    <%= render 'wide_table', wide_groups: @wide_groups, wide_quantities: @wide_quantities %>
+  </div>
 </div>
 

app/views/measurements/update.turbo_stream.erb

@@ -1,2 +1,4 @@
 <%= turbo_stream.close_form dom_id(@readout, :edit) %>
 <%= turbo_stream.replace @readout, partial: 'measurements/readout', locals: {readout: @readout} %>
+<%= turbo_stream.update 'measurements-wide', partial: 'wide_table',
+  locals: {wide_groups: @wide_groups, wide_quantities: @wide_quantities} %>

test/controllers/measurements_controller_test.rb

@@ -1,7 +1,65 @@
 require "test_helper"
 
 class MeasurementsControllerTest < ActionDispatch::IntegrationTest
-  # test "the truth" do
+  setup do
-  #   assert true
+    host! '127.0.0.1'
-  # end
+    @user = users(:alice)
+    post new_user_session_path, params: { user: { email: @user.email, password: 'alice' } }
+    @quantity = @user.quantities.create!(name: 'Weight')
+    @unit = @user.units.create!(symbol: 'kg')
+  end
+
+  test "index returns ok" do
+    get measurements_path
+    assert_response :success
+  end
+
+  test "index requires authentication" do
+    delete destroy_user_session_path
+    get measurements_path
+    assert_response :redirect
+  end
+
+  test "create records readout with taken_at" do
+    taken_at = 1.day.ago.change(usec: 0)
+    assert_difference -> { @user.readouts.count } do
+      post measurements_path, params: {
+        taken_at: taken_at.iso8601,
+        readouts: [{ quantity_id: @quantity.id, value: '82.5', unit_id: @unit.id }]
+      }, as: :turbo_stream
+    end
+    assert_response :success
+    assert_equal taken_at, @user.readouts.last.taken_at
+  end
+
+  test "create with no readouts selected shows alert" do
+    post measurements_path, params: { taken_at: Time.now.iso8601 }, as: :turbo_stream
+    assert_response :success
+  end
+
+  test "destroy removes readout" do
+    readout = @user.readouts.create!(quantity: @quantity, unit: @unit, value: 82.5, taken_at: 1.day.ago)
+    assert_difference -> { @user.readouts.count }, -1 do
+      delete measurement_path(readout), as: :turbo_stream
+    end
+    assert_response :success
+  end
+
+  test "destroy cannot remove another user's readout" do
+    other_quantity = users(:bob).quantities.create!(name: 'Weight')
+    other_unit = users(:bob).units.create!(symbol: 'kg')
+    readout = users(:bob).readouts.create!(quantity: other_quantity, unit: other_unit, value: 70.0, taken_at: 1.day.ago)
+    assert_no_difference -> { users(:bob).readouts.count } do
+      delete measurement_path(readout), as: :turbo_stream
+    end
+  end
+
+  test "update changes readout value" do
+    readout = @user.readouts.create!(quantity: @quantity, unit: @unit, value: 82.5, taken_at: 1.day.ago)
+    patch measurement_path(readout), params: {
+      readout: { value: '83.0', unit_id: @unit.id, taken_at: readout.taken_at.iso8601 }
+    }, as: :turbo_stream
+    assert_response :success
+    assert_in_delta 83.0, readout.reload.value
+  end
 end