From 207699584beafdbec6a0d58f0cb17599df1c6b8d Mon Sep 17 00:00:00 2001 From: cryptogopher Date: Sun, 17 Aug 2025 01:03:08 +0200 Subject: [PATCH] Back to single-select form w/ multiple select actions --- .../images/pictograms/pencil-outline.svg | 1 + app/assets/stylesheets/application.css | 9 ++-- app/controllers/measurements_controller.rb | 2 + app/controllers/readouts_controller.rb | 11 +++-- app/helpers/quantities_helper.rb | 18 ++++++-- app/views/measurements/_form.html.erb | 41 ++++++++++++------- app/views/measurements/index.html.erb | 8 +++- app/views/readouts/_form.html.erb | 16 ++------ app/views/readouts/_form_discard.html.erb | 2 - app/views/readouts/_form_repath.html.erb | 4 +- app/views/readouts/discard.turbo_stream.erb | 5 +++ app/views/readouts/new.turbo_stream.erb | 9 ++-- config/locales/en.yml | 8 +++- config/routes.rb | 4 +- 14 files changed, 85 insertions(+), 53 deletions(-) create mode 100644 app/assets/images/pictograms/pencil-outline.svg delete mode 100644 app/views/readouts/_form_discard.html.erb create mode 100644 app/views/readouts/discard.turbo_stream.erb diff --git a/app/assets/images/pictograms/pencil-outline.svg b/app/assets/images/pictograms/pencil-outline.svg new file mode 100644 index 0000000..eb103c8 --- /dev/null +++ b/app/assets/images/pictograms/pencil-outline.svg @@ -0,0 +1 @@ + diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 7220e07..32dae52 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -56,7 +56,7 @@ body { grid-template-areas: "header header header" "nav nav nav" - "leftempty topside rightempty" + "leftside topside rightside" "leftside main rightside"; grid-template-columns: 1fr auto 1fr; grid-template-rows: repeat(4, auto); @@ -418,10 +418,10 @@ table.items td.link a::after { table.items td:first-child { padding-inline-start: calc(1em + var(--depth) * 0.8em); } -table.items td:has(input, textarea) { +table.items td:has(input, select, textarea) { padding-inline-start: calc(0.6em - 0.9px); } -table.items td:first-child:has(input, textarea) { +table.items td:first-child:has(input, select, textarea) { padding-inline-start: calc(0.6em + var(--depth) * 0.8em - 0.9px); } table.items th:last-child { @@ -560,6 +560,9 @@ form table.items td:first-child { display: flex; gap: 0.8em; } +.hflex.centered { + justify-content: center; +} .vflex { display: flex; gap: 0.8em; diff --git a/app/controllers/measurements_controller.rb b/app/controllers/measurements_controller.rb index 6d6dbf5..ebe6622 100644 --- a/app/controllers/measurements_controller.rb +++ b/app/controllers/measurements_controller.rb @@ -1,5 +1,7 @@ class MeasurementsController < ApplicationController def index + @measurements = [] + #@measurements = current_user.units.ordered.includes(:base, :subunits) end def new diff --git a/app/controllers/readouts_controller.rb b/app/controllers/readouts_controller.rb index a009260..d7b3870 100644 --- a/app/controllers/readouts_controller.rb +++ b/app/controllers/readouts_controller.rb @@ -4,7 +4,7 @@ class ReadoutsController < ApplicationController def new new_quantities = - case params[:scope] + case params[:button] when 'children' @quantity.subquantities when 'subtree' @@ -15,18 +15,17 @@ class ReadoutsController < ApplicationController 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 + quantities = @prev_quantities + new_quantities + @superquantity = current_user.quantities + .common_ancestors(quantities.map(&:parent_id)).first end def discard @prev_quantities -= [@quantity] - @common_ancestor = current_user.quantities + @superquantity = current_user.quantities .common_ancestors(@prev_quantities.map(&:parent_id)).first end diff --git a/app/helpers/quantities_helper.rb b/app/helpers/quantities_helper.rb index e6e42cf..cf1f741 100644 --- a/app/helpers/quantities_helper.rb +++ b/app/helpers/quantities_helper.rb @@ -1,7 +1,17 @@ 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) + 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 diff --git a/app/views/measurements/_form.html.erb b/app/views/measurements/_form.html.erb index 10ff507..6e1f675 100644 --- a/app/views/measurements/_form.html.erb +++ b/app/views/measurements/_form.html.erb @@ -1,29 +1,40 @@ <%= tabular_form_with model: Measurement.new do |form| %>
- <%= tag.span id: :measurement_form_legend %> - <%= image_link_to '', "close-outline", measurements_path, name: :cancel, - class: 'dangerous', onclick: render_turbo_stream('form_close') %> + <%= tag.span t('.no_items'), id: :measurement_form_legend %> + <%= image_link_to '', "pencil-outline", measurements_path, + data: {turbo_stream: true} %> + - - - - - -
- <%= 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} %> + <%= select_tag :id, + options_from_collection_for_select( + @quantities, :id, ->(q){ quantity_option_text(q, false) } + ), class: 'quantity' %> + +
+ <% 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 -%> +
<%= form.button %>
+
+ <%= form.button -%> + <%= image_link_to t(:cancel), "close-outline", measurements_path, name: :cancel, + class: 'dangerous', onclick: render_turbo_stream('form_close') %> +
<% end %> diff --git a/app/views/measurements/index.html.erb b/app/views/measurements/index.html.erb index ad0c275..5cc12e9 100644 --- a/app/views/measurements/index.html.erb +++ b/app/views/measurements/index.html.erb @@ -7,4 +7,10 @@ <% end %> -<%= tag.div class: 'main', id: :measurement_form %> +<%= tag.div class: 'topside', id: :measurement_form %> + + + + <%= render(@measurements) || render_no_items %> + +
diff --git a/app/views/readouts/_form.html.erb b/app/views/readouts/_form.html.erb index 62c7871..a9f0d37 100644 --- a/app/views/readouts/_form.html.erb +++ b/app/views/readouts/_form.html.erb @@ -1,28 +1,20 @@ +<%# TODO: add readout reordering by dragging %> <%= tabular_fields_for 'readouts[]', readout do |form| %> <%- tag.tr id: dom_id(readout.quantity, :new, :readout), onkeydown: 'processKey(event)' do %> - <%#= readout.quantity.relative_pathname(@common_ancestor) %> - <%= form.collection_select :quantity_id, @user_quantities, - :id, ->(q){ sanitize(' ' * q.depth + q.name) }, - {disabled: @quantities.map(&:id).delete!(form.object.quantity.id)}, - {class: 'quantity'} %> + <%= readout.quantity.relative_pathname(@superquantity) %> <%= form.number_field :value, required: true, autofocus: true, size: 10 %> + <%= form.hidden_field :quantity_id %> <%= form.collection_select :unit_id, @user_units, :id, ->(u){ sanitize(' ' * (u.base_id ? 1 : 0) + u.symbol) } %> - - <%= 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', + <%= image_button_tag '', 'delete-outline', class: 'dangerous', name: :discard, formaction: discard_readouts_path(readout.quantity), formmethod: :get, formnovalidate: true, data: {turbo_stream: true} %> diff --git a/app/views/readouts/_form_discard.html.erb b/app/views/readouts/_form_discard.html.erb deleted file mode 100644 index 192a732..0000000 --- a/app/views/readouts/_form_discard.html.erb +++ /dev/null @@ -1,2 +0,0 @@ -<%= turbo_stream.remove dom_id(@quantity, :new, :readout) %> -<%= render partial: 'form_repath' %> diff --git a/app/views/readouts/_form_repath.html.erb b/app/views/readouts/_form_repath.html.erb index 9167c85..5743dec 100644 --- a/app/views/readouts/_form_repath.html.erb +++ b/app/views/readouts/_form_repath.html.erb @@ -1,7 +1,7 @@ -<%= turbo_stream.update(:measurement_form_legend) { @common_ancestor&.pathname } %> +<%= turbo_stream.update(:measurement_form_legend) { @superquantity&.pathname } %> <% @prev_quantities.each do |pq| %> <%= turbo_stream.update dom_id(pq, nil, :pathname) do %> - <%= pq.relative_pathname(@common_ancestor) %> + <%= pq.relative_pathname(@superquantity) %> <% end %> <% end %> diff --git a/app/views/readouts/discard.turbo_stream.erb b/app/views/readouts/discard.turbo_stream.erb new file mode 100644 index 0000000..8f14d3e --- /dev/null +++ b/app/views/readouts/discard.turbo_stream.erb @@ -0,0 +1,5 @@ +<%= 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}\"]", + quantity_option_text(@quantity, false) %> +<%= render partial: 'form_repath' %> diff --git a/app/views/readouts/new.turbo_stream.erb b/app/views/readouts/new.turbo_stream.erb index c321479..bd559a6 100644 --- a/app/views/readouts/new.turbo_stream.erb +++ b/app/views/readouts/new.turbo_stream.erb @@ -1,7 +1,10 @@ -<%#= render partial: 'form_repath' %> - +<%= render partial: 'form_repath' %> +<%= 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.disable_all "select.quantity option[value='#{r.quantity_id}']" %> + <%= turbo_stream.update_all "#id 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 %> diff --git a/config/locales/en.yml b/config/locales/en.yml index ef6adae..d5264db 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -64,14 +64,18 @@ en: source_code: Get code measurements: navigation: Measurements + no_items: There are no measurements taken. You can Add some now. form: + new_readout: Add + 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 - new_subtree: Subtree quantities: navigation: Quantities no_items: There are no configured quantities. You can Add some or Import from defaults. diff --git a/config/routes.rb b/config/routes.rb index cc3e952..7d3035d 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -1,9 +1,7 @@ Rails.application.routes.draw do resources :measurements - resources :readouts, only: [:new], path_names: {new: '/new(/:id/:scope)'}, - constraints: {scope: /children|subtree|leaves/} do - + resources :readouts, only: [:new] do collection {get 'new/:id/discard', action: :discard, as: :discard} end