Single select form without action buttons

app/assets/stylesheets/application.css

@@ -563,6 +563,9 @@ form table.items td:first-child {
 .hflex.centered {
   justify-content: center;
 }
+.vexpand {
+  width: 100%;
+}
 .vflex {
   display: flex;
   gap: 0.8em;

app/helpers/quantities_helper.rb

@@ -1,17 +1,2 @@
 module QuantitiesHelper
-  def quantity_option_text(quantity, checked = nil)
-    prefix = case checked
-             when true
-               # Use color and gray unicode emoji to assure same width.
-               # Avoid shapes similar to inputs (chackboxes, radio buttons etc.)
-               # (U+27A1 U+FE0F)/U+1F7E6/U+2705/U+1F499 U+2004
-               '💙 '
-             when false
-               # U+2B1C/U+1F90D U+2004
-               '🤍 '
-             else
-               ''
-             end
-    sanitize(' ' * quantity.depth + prefix + quantity.name)
-  end
 end

app/models/quantity.rb

@@ -100,6 +100,11 @@ class Quantity < ApplicationRecord
     name
   end
 
+  def to_s_with_depth
+    # em space, U+2003
+    ' ' * depth + name
+  end
+
   def destroyable?
     subquantities.empty?
   end

app/views/measurements/_form.html.erb

@@ -1,32 +1,16 @@
 <%= tabular_form_with model: Measurement.new do |form| %>
   <fieldset>
-    <legend>
+    <table class="items centered">
-      <%= tag.span t('.no_items'), id: :measurement_form_legend %>
-      <%= image_link_to '', "pencil-outline", measurements_path,
-        data: {turbo_stream: true} %>
-    </legend>
-    <table class="items">
       <tbody id="readouts">
         <tr id="readouts_form">
-          <td>
+          <td colspan="4">
-            <%= select_tag :id,
+            <%= collection_select :quantity, :id, @quantities, :id, :to_s_with_depth,
-              options_from_collection_for_select(
+              {prompt: t('.select_quantity'), disabled: '', selected: ''},
-                @quantities, :id, ->(q){ quantity_option_text(q, false) }
+              {name: :id, class: 'quantity vexpand',
-              ), class: 'quantity' %>
+               onchange: "this.form.requestSubmit(new_readout_submit);"} %>
-          </td>
+            <%= form.submit id: :new_readout_submit, name: nil, value: nil,
-          <td colspan="3">
+              formaction: new_readout_path, formmethod: :get, formnovalidate: true,
-            <div class="actions">
+              hidden: true, data: {turbo_stream: true} %>
-              <% opts = {formaction: new_readout_path, formmethod: :get,
-                         formnovalidate: true, data: {turbo_stream: true}} %>
-              <%= image_button_tag t('.new_readout'), 'plus-outline', id: :new_readout,
-                value: nil, **opts -%>
-              <%= image_button_tag t('.new_children'), 'plus-multiple-outline',
-                value: :children, **opts -%>
-              <%#= image_button_tag t('.new_subtree'), 'plus-multiple-outline',
-                value: :subtree, **opts -%>
-              <%= image_button_tag t('.new_leaves'), 'plus-multiple-outline',
-                value: :leaves, **opts -%>
-            </div>
           </td>
         </tr>
       </tbody>

app/views/readouts/discard.turbo_stream.erb

@@ -1,5 +1,4 @@
 <%= turbo_stream.remove dom_id(@quantity, :new, :readout) %>
 <%= turbo_stream.disable_all 'button[name="discard"]' if @prev_quantities.one? %>
-<%= turbo_stream.update_all "#id option[value=\"#{@quantity.id}\"]",
+<%= turbo_stream.enable_all "select.quantity option[value='#{@quantity.id}']" %>
-  quantity_option_text(@quantity, false) %>
 <%= render partial: 'form_repath' %>

app/views/readouts/new.turbo_stream.erb

@@ -1,10 +1,8 @@
 <%= render partial: 'form_repath' %>
+<%# is .one? proper condition? can @readouts be empty? %>
 <%= turbo_stream.enable_all 'button[name="discard"]' if @prev_quantities.one? %>
-<%# TODO: disable Add actions accordingly (e.g. disable Children if childless or all
-  children already added), then disable option once all actions unavailable %>
 <% @readouts.each do |r| %>
-  <%= turbo_stream.update_all "#id option[value=\"#{r.quantity_id}\"]",
+  <%= turbo_stream.disable_all "select.quantity option[value='#{r.quantity_id}']" %>
-     quantity_option_text(r.quantity, true) %>
 <% end %>
 <%= turbo_stream.before :readouts_form do %>
   <%= render partial: 'form', collection: @readouts, as: :readout %>

config/locales/en.yml

@@ -66,16 +66,12 @@ en:
     navigation: Measurements
     no_items: There are no measurements taken. You can Add some now.
     form:
-      new_readout: Add
+      select_quantity: select the measured quantity...
-      new_children: Children
-      new_subtree: Subtree
-      new_leaves: Leaves
-      no_items: Select and add desired quantities...
-      select_quantity: select quantity...
     index:
       new_measurement: Add measurement
   readouts:
     form:
+      new_children: Children
   quantities:
     navigation: Quantities
     no_items: There are no configured quantities. You can Add some or Import from defaults.