forked from fixin.me/fixin.me
Measurement form based on select-styled <details>
This commit is contained in:
@@ -1,25 +1,37 @@
|
||||
<% @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(' '*(u.base_id ? 1 : 0) + u.symbol) }
|
||||
) %>
|
||||
</td>
|
||||
<%= tabular_form_with model: Measurement.new, id: :measurement_form,
|
||||
class: 'topside vflex', html: {onkeydown: 'formProcessKey(event)'} do |form| %>
|
||||
<fieldset>
|
||||
<table class="items centered">
|
||||
<tbody id="readouts"></tbody>
|
||||
</table>
|
||||
</fieldset>
|
||||
|
||||
<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 %>
|
||||
<div class="hflex">
|
||||
<details id="quantity_select" class="hexpand" open
|
||||
onkeydown="detailsProcessKey(event)">
|
||||
<summary autofocus>
|
||||
<!-- TODO: Set content with CSS when span empty to avoid duplication -->
|
||||
<span data-prompt="<%= t('.select_quantity') %>">
|
||||
<%= t('.select_quantity') %>
|
||||
</span>
|
||||
<%= image_button_tag t(:apply), "update", name: nil, disabled: true,
|
||||
formaction: new_readout_path, formmethod: :get, formnovalidate: true,
|
||||
data: {turbo_stream: true} %>
|
||||
</summary>
|
||||
<ul><%= quantities_check_boxes %></ul>
|
||||
</details>
|
||||
<%= form.button id: :create_measurement_button, disabled: true -%>
|
||||
</div>
|
||||
|
||||
<div class="hflex reverse">
|
||||
<%= image_link_to t(:cancel), "close-outline", measurements_path, name: :cancel,
|
||||
class: 'dangerous', onclick: render_turbo_stream('form_close') %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<script>
|
||||
quantity_select.addEventListener('focusout', detailsClose)
|
||||
quantity_select.addEventListener('change', detailsChange)
|
||||
detailsObserver.observe(quantity_select.querySelector('ul'),
|
||||
{subtree: true, attributeFilter: ['disabled']})
|
||||
</script>
|
||||
|
||||
@@ -1,2 +1,4 @@
|
||||
<%= turbo_stream.update :new_readouts_form %>
|
||||
<%= turbo_stream.update :flashes %>
|
||||
<%= turbo_stream.remove :measurement_form %>
|
||||
<%= turbo_stream.show :no_items -%>
|
||||
<%= turbo_stream.enable :new_measurement_link -%>
|
||||
|
||||
@@ -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 %>
|
||||
@@ -1,7 +0,0 @@
|
||||
<%= turbo_stream.update(:new_readouts_form_legend) { @common_ancestor&.pathname } %>
|
||||
|
||||
<% @prev_quantities.each do |pq| %>
|
||||
<%= turbo_stream.update dom_id(pq, nil, :pathname) do %>
|
||||
<%= pq.relative_pathname(@common_ancestor) %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
@@ -1,2 +0,0 @@
|
||||
<%= turbo_stream.remove dom_id(@quantity, :new, :readout) %>
|
||||
<%= render partial: 'form_repath' %>
|
||||
@@ -1,20 +1,14 @@
|
||||
<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(' ' * 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>
|
||||
|
||||
<table class="main">
|
||||
<tbody id="measurements">
|
||||
<%= render(@measurements) || render_no_items %>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
<%= 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.hide :no_items -%>
|
||||
<%= turbo_stream.append_all 'body' do %>
|
||||
<%= render partial: 'form' %>
|
||||
<% end %>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<%= tabular_fields_for @quantity, form: form_tag do |form| %>
|
||||
<%- tag.tr id: row, class: "form", onkeydown: "processKey(event)",
|
||||
<%- tag.tr id: row, class: "form", onkeydown: "formProcessKey(event)",
|
||||
data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
|
||||
|
||||
<td style="--depth:<%= @quantity.depth %>">
|
||||
|
||||
@@ -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' %>
|
||||
|
||||
25
app/views/readouts/_form.html.erb
Normal file
25
app/views/readouts/_form.html.erb
Normal file
@@ -0,0 +1,25 @@
|
||||
<%# TODO: add readout reordering by dragging %>
|
||||
<%= tabular_fields_for 'readouts[]', readout do |form| %>
|
||||
<%- tag.tr id: dom_id(readout.quantity, :new, :readout) do %>
|
||||
<td class="actions">
|
||||
<%# TODO: change to _link_ after giving up displaying relative paths %>
|
||||
<%= image_button_tag '', 'delete-outline', class: 'dangerous', name: nil,
|
||||
formaction: discard_readouts_path(readout.quantity),
|
||||
formmethod: :get, formnovalidate: true, data: {turbo_stream: true} %>
|
||||
</td>
|
||||
<td>
|
||||
<%= readout.quantity.relative_pathname(@superquantity) %>
|
||||
</td>
|
||||
<td>
|
||||
<%= form.number_field :value, required: true,
|
||||
size: readout.type_for_attribute(:value).precision / 2,
|
||||
autofocus: readout_counter == 0 %>
|
||||
</td>
|
||||
<td>
|
||||
<%= form.hidden_field :quantity_id %>
|
||||
<%= form.collection_select :unit_id, @user_units, :id,
|
||||
->(u){ sanitize(' ' * (u.base_id ? 1 : 0) + u.symbol) },
|
||||
{prompt: t('.select_unit'), disabled: '', selected: ''}, required: true %>
|
||||
</td>
|
||||
<% end %>
|
||||
<% end %>
|
||||
7
app/views/readouts/_form_repath.html.erb
Normal file
7
app/views/readouts/_form_repath.html.erb
Normal file
@@ -0,0 +1,7 @@
|
||||
<%= 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(@superquantity) %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
4
app/views/readouts/discard.turbo_stream.erb
Normal file
4
app/views/readouts/discard.turbo_stream.erb
Normal file
@@ -0,0 +1,4 @@
|
||||
<%= turbo_stream.disable :create_measurement_button if @prev_quantities.one? %>
|
||||
<%= turbo_stream.remove dom_id(@quantity, :new, :readout) %>
|
||||
<%= render partial: 'form_repath' %>
|
||||
<%= turbo_stream.unselect dom_id(@quantity) %>
|
||||
8
app/views/readouts/new.turbo_stream.erb
Normal file
8
app/views/readouts/new.turbo_stream.erb
Normal file
@@ -0,0 +1,8 @@
|
||||
<% @readouts.each do |r| %>
|
||||
<%= turbo_stream.disable dom_id(r.quantity) %>
|
||||
<% end %>
|
||||
<%= render partial: 'form_repath' %>
|
||||
<%= turbo_stream.append :readouts do %>
|
||||
<%= render partial: 'form', collection: @readouts, as: :readout %>
|
||||
<% end %>
|
||||
<%= turbo_stream.enable :create_measurement_button if @prev_quantities.empty? %>
|
||||
@@ -1,5 +1,5 @@
|
||||
<%= tabular_fields_for @unit, form: form_tag do |form| %>
|
||||
<%- tag.tr id: row, class: "form", onkeydown: "processKey(event)",
|
||||
<%- tag.tr id: row, class: "form", onkeydown: "formProcessKey(event)",
|
||||
data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
|
||||
|
||||
<td style="--depth:<%= @unit.base_id? ? 1 : 0 %>">
|
||||
|
||||
Reference in New Issue
Block a user