Alternative new Measurement form, WIP

app/assets/stylesheets/application.css

@@ -86,9 +86,10 @@ input[type=submit] {
   text-decoration: none;
   white-space: nowrap;
 }
+/* [hidden] submit controls cannot have `display` set as it makes them visible */
 .button,
-button,
-input[type=submit],
+button:not([hidden]),
+input[type=submit]:not([hidden]),
 .tab {
   align-items: center;
   color: var(--color-gray);

app/controllers/measurements_controller.rb

@@ -1,36 +1,9 @@
 class MeasurementsController < ApplicationController
-  before_action :find_quantity, only: [:new, :discard]
-  before_action :find_prev_quantities, only: [:new, :discard]
-
   def index
-    @quantities = current_user.quantities.ordered
   end
 
   def new
-    quantities =
-      case params[:scope]
-      when 'children'
-        @quantity.subquantities
-      when 'subtree'
-        @quantity.progenies
-      else
-        [@quantity]
-      end
-    quantities -= @prev_quantities
-    @readouts = current_user.readouts.build(quantities.map { |q| {quantity: q} })
-
-    @units = current_user.units.ordered
-
-    all_quantities = @prev_quantities + quantities
-    @common_ancestor = current_user.quantities
-      .common_ancestors(all_quantities.map(&:parent_id)).first
-  end
-
-  def discard
-    @prev_quantities -= [@quantity]
-
-    @common_ancestor = current_user.quantities
-      .common_ancestors(@prev_quantities.map(&:parent_id)).first
+    @quantities = current_user.quantities.ordered
   end
 
   def create
@@ -38,15 +11,4 @@ class MeasurementsController < ApplicationController
 
   def destroy
   end
-
-  private
-
-  def find_quantity
-    @quantity = current_user.quantities.find_by!(id: params[:id])
-  end
-
-  def find_prev_quantities
-    prev_quantity_ids = params[:readouts]&.map { |r| r[:quantity_id] } || []
-    @prev_quantities = current_user.quantities.find(prev_quantity_ids)
-  end
 end

app/controllers/readouts_controller.rb

@@ -0,0 +1,43 @@
+class ReadoutsController < ApplicationController
+  before_action :find_quantity, only: [:new, :discard]
+  before_action :find_prev_quantities, only: [:new, :discard]
+
+  def new
+    new_quantities =
+      case params[:scope]
+      when 'children'
+        @quantity.subquantities
+      when 'subtree'
+        @quantity.progenies
+      else
+        [@quantity]
+      end
+    new_quantities -= @prev_quantities
+    @readouts = current_user.readouts.build(new_quantities.map { |q| {quantity: q} })
+
+    @user_quantities = current_user.quantities.ordered
+    @user_units = current_user.units.ordered
+
+    @quantities = @prev_quantities + new_quantities
+#    @common_ancestor = current_user.quantities
+#      .common_ancestors(all_quantities.map(&:parent_id)).first
+  end
+
+  def discard
+    @prev_quantities -= [@quantity]
+
+    @common_ancestor = current_user.quantities
+      .common_ancestors(@prev_quantities.map(&:parent_id)).first
+  end
+
+  private
+
+  def find_quantity
+    @quantity = current_user.quantities.find_by!(id: params[:id])
+  end
+
+  def find_prev_quantities
+    prev_quantity_ids = params[:readouts]&.map { |r| r[:quantity_id] } || []
+    @prev_quantities = current_user.quantities.find(prev_quantity_ids)
+  end
+end

app/helpers/quantities_helper.rb

@@ -1,2 +1,7 @@
 module QuantitiesHelper
+  def quantity_options(quantities, selected: nil)
+    values = quantities.map { |q| [sanitize(' ' * q.depth + q.name), q.id] }
+    values.unshift([t('.select_quantity'), nil, {hidden: true}])
+    options_for_select(values, selected: selected)
+  end
 end

app/models/measurement.rb

@@ -0,0 +1,3 @@
+class Measurement
+  include ActiveModel::Model
+end

app/views/measurements/_form.html.erb

@@ -1,25 +1,29 @@
-<% @readouts.each do |readout| %>
-  <%= tabular_fields_for 'readouts[]', readout do |form| %>
-    <%- tag.tr id: dom_id(readout.quantity, :new, :readout),
-               onkeydown: 'processKey(event)' do %>
-      <%= tag.td id: dom_id(readout.quantity, nil, :pathname) do %>
-        <%= readout.quantity.relative_pathname(@common_ancestor) %>
-      <%end%>
-      <td>
-        <%= form.number_field :value, required: true, autofocus: true, size: 10 %>
-      </td>
-      <td>
-        <%= form.select :unit_id, options_from_collection_for_select(
-          @units, :id, ->(u){ sanitize('&emsp;'*(u.base_id ? 1 : 0) + u.symbol) }
-        ) %>
-      </td>
-
-      <td class="actions">
-        <%= image_button_tag '', 'delete-outline', class: 'dangerous',
-          formaction: discard_new_measurement_path(readout.quantity),
-          formmethod: :get, formnovalidate: true, data: {turbo_stream: true} %>
-        <%= form.hidden_field :quantity_id %>
-      </td>
-    <% end %>
-  <% end %>
+<%= tabular_form_with model: Measurement.new do |form| %>
+  <fieldset>
+    <legend>
+      <%= tag.span id: :measurement_form_legend %>
+      <%= image_link_to '', "close-outline", measurements_path, name: :cancel,
+        class: 'dangerous', onclick: render_turbo_stream('form_close') %>
+    </legend>
+    <table class="items">
+      <tbody id="readouts">
+        <tr id="readouts_form">
+          <td>
+            <%= select_tag :id, quantity_options(@quantities), onchange:
+              "this.form.requestSubmit(document.getElementById('readout_submit'));",
+              class: 'quantity' %>
+            <%= form.submit id: :readout_submit, name: nil, value: nil,
+              formaction: new_readout_path, formmethod: :get, formnovalidate: true,
+              hidden: true, data: {turbo_stream: true} %>
+          </td>
+          <td></td>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr id="measurement_form_actions">
+          <td colspan="4"><div class="actions centered"><%= form.button %></div></td>
+        </tr>
+      </tbody>
+    </table>
+  </fieldset>
 <% end %>

app/views/measurements/_form_close.html.erb

@@ -1,2 +1,2 @@
-<%= turbo_stream.update :new_readouts_form %>
+<%= turbo_stream.update :measurement_form %>
 <%= turbo_stream.update :flashes %>

app/views/measurements/_form_frame.html.erb

@@ -1,16 +0,0 @@
-<%= tabular_fields_for Readout.new do |form| %>
-  <fieldset>
-    <legend>
-      <%= tag.span id: :new_readouts_form_legend %>
-      <%= image_link_to '', "close-outline", measurements_path, name: :cancel,
-        class: 'dangerous', onclick: render_turbo_stream('form_close') %>
-    </legend>
-    <table class="items centered">
-      <tbody id="readouts">
-        <tr id="new_readouts_actions">
-          <td colspan="4"><div class="actions centered"><%= form.button %></div></td>
-        </tr>
-      </tbody>
-    </table>
-  </fieldset>
-<% end %>

app/views/measurements/index.html.erb

@@ -1,20 +1,10 @@
-<div class="topside vflex">
+<%# TODO: show hint when no quantities/units defined %>
+<div class="rightside buttongrid">
   <% if current_user.at_least(:active) %>
-    <%# TODO: show hint when no quantities/units defined %>
-    <%= tabular_form_with url: new_measurement_path,
-      html: {id: :new_readouts_form} do |f| %>
-    <% end %>
-    <div class="hflex">
-      <%= select_tag :id, options_from_collection_for_select(
-        @quantities, :id, ->(q){ sanitize('&emsp;' * q.depth + q.name) }
-      ), form: :new_readouts_form %>
-      <% common_options = {form: :new_readouts_form, formmethod: :get,
-                           formnovalidate: true, data: {turbo_stream: true}} %>
-      <%= image_button_tag t('.new_quantity'), 'plus-outline', **common_options -%>
-      <%= image_button_tag t('.new_children'), 'plus-multiple-outline',
-        formaction: new_measurement_path(:children), **common_options -%>
-      <%= image_button_tag t('.new_subtree'), 'plus-multiple-outline',
-        formaction: new_measurement_path(:subtree), **common_options -%>
-    </div>
+    <%= image_link_to t('.new_measurement'), 'plus-outline', new_measurement_path,
+      id: :new_measurement_link, onclick: 'this.blur();',
+      data: {turbo_stream: true} %>
   <% end %>
 </div>
+
+<%= tag.div class: 'main', id: :measurement_form %>

app/views/measurements/new.turbo_stream.erb

@@ -1,9 +1,4 @@
-<%= turbo_stream.update :new_readouts_form do %>
-  <%= render partial: 'form_frame' %>
-<% end if @prev_quantities.empty? %>
-
-<%= render partial: 'form_repath' %>
-
-<%= turbo_stream.before :new_readouts_actions do %>
+<%= turbo_stream.disable :new_measurement_link -%>
+<%= turbo_stream.update :measurement_form do %>
   <%= render partial: 'form' %>
 <% end %>

app/views/quantities/index.html.erb

@@ -1,7 +1,8 @@
 <div class="rightside buttongrid">
   <% if current_user.at_least(:active) %>
     <%= image_link_to t('.new_quantity'), 'plus-outline', new_quantity_path,
-      id: dom_id(Quantity, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
+      id: dom_id(Quantity, :new, :link), onclick: 'this.blur();',
+      data: {turbo_stream: true} %>
   <% end %>
   <%#= image_link_to t('.import_quantities'), 'download-outline', default_quantities_path,
     class: 'tools' %>

app/views/readouts/_form.html.erb

@@ -0,0 +1,30 @@
+<%= tabular_fields_for 'readouts[]', readout do |form| %>
+  <%- tag.tr id: dom_id(readout.quantity, :new, :readout),
+             onkeydown: 'processKey(event)' do %>
+    <td>
+      <%#= readout.quantity.relative_pathname(@common_ancestor) %>
+      <%= form.collection_select :quantity_id, @user_quantities,
+        :id, ->(q){ sanitize('&emsp;' * q.depth + q.name) },
+        {disabled: @quantities.map(&:id).delete!(form.object.quantity.id)},
+        {class: 'quantity'} %>
+    </td>
+    <td>
+      <%= form.number_field :value, required: true, autofocus: true, size: 10 %>
+    </td>
+    <td>
+      <%= form.collection_select :unit_id, @user_units, :id,
+        ->(u){ sanitize('&emsp;' * (u.base_id ? 1 : 0) + u.symbol) } %>
+    </td>
+
+    <td class="actions">
+      <%= image_button_tag t('.new_children'), 'plus-multiple-outline',
+        formaction: new_measurement_path(readout.quantity, :children),
+        formmethod: :get, formnovalidate: true, data: {turbo_stream: true} %>
+      <%#= image_button_tag t('.new_subtree'), 'plus-multiple-outline',
+        formaction: new_measurement_path(:subtree), **common_options -%>
+      <%= image_button_tag '', 'delete-outline', class: 'dangerous',
+        formaction: discard_readouts_path(readout.quantity),
+        formmethod: :get, formnovalidate: true, data: {turbo_stream: true} %>
+    </td>
+  <% end %>
+<% end %>

app/views/readouts/_form_repath.html.erb

@@ -1,4 +1,4 @@
-<%= turbo_stream.update(:new_readouts_form_legend) { @common_ancestor&.pathname } %>
+<%= turbo_stream.update(:measurement_form_legend) { @common_ancestor&.pathname } %>
 
 <% @prev_quantities.each do |pq| %>
   <%= turbo_stream.update dom_id(pq, nil, :pathname) do %>

app/views/readouts/new.turbo_stream.erb

@@ -0,0 +1,8 @@
+<%#= render partial: 'form_repath' %>
+
+<% @readouts.each do |r| %>
+  <%= turbo_stream.disable_all "select.quantity option[value='#{r.quantity_id}']" %>
+<% end %>
+<%= turbo_stream.before :readouts_form do %>
+  <%= render partial: 'form', collection: @readouts, as: :readout %>
+<% end %>

config/initializers/core_ext.rb

@@ -1,3 +1,4 @@
+require 'core_ext/array_delete_bang'
 require 'core_ext/big_decimal_scientific_notation'
 
 ActiveSupport.on_load :action_dispatch_system_test_case do

config/locales/en.yml

@@ -64,8 +64,12 @@ en:
       source_code: Get code
   measurements:
     navigation: Measurements
+    form:
+      select_quantity: select quantity...
     index:
-      new_quantity: Selected
+      new_measurement: Add measurement
+  readouts:
+    form:
       new_children: Children
       new_subtree: Subtree
   quantities:

config/routes.rb

@@ -1,8 +1,10 @@
 Rails.application.routes.draw do
-  resources :measurements, path_names: {new: '/new(/:scope)'},
-    constraints: {scope: /children|subtree/}, defaults: {scope: nil} do
+  resources :measurements
 
-    get 'discard/:id', on: :new, action: :discard, as: :discard
+  resources :readouts, only: [:new], path_names: {new: '/new(/:id/:scope)'},
+    constraints: {scope: /children|subtree|leaves/} do
+
+    collection {get 'new/:id/discard', action: :discard, as: :discard}
   end
 
   resources :quantities, except: [:show], path_names: {new: '(/:id)/new'} do

lib/core_ext/array_delete_bang.rb

@@ -0,0 +1,10 @@
+module CoreExt
+  module ArrayDeleteBang
+    def delete!(obj)
+      self.delete(obj)
+      self
+    end
+  end
+end
+
+Array.prepend CoreExt::ArrayDeleteBang