Allow opening multiple new/edit forms

Closes #30

app/controllers/units_controller.rb

@@ -48,6 +48,8 @@ class UnitsController < ApplicationController
       flash.now[:notice] = t(".multiplier_reset", unit: @unit)
     end
   ensure
+    # TODO: Avoid double table width change by first un-hiding table header,
+    # then displaying index, e.g. by re-displaying header in index
     run_and_render :index
   end
 

app/javascript/application.js

@@ -15,20 +15,6 @@ Turbo.StreamElement.prototype.enableElement = function(element) {
     element.removeAttribute("tabindex")
 }
 
-Turbo.StreamElement.prototype.removePreviousForm = function(form) {
-  const id = form.id
-  const row = document.getElementById(id + "_cached")
-  form.remove()
-  if (row) {
-    row.id = id
-    row.removeAttribute("style")
-  }
-  if (form.hasAttribute("data-link-id")) {
-    const link = document.getElementById(form.getAttribute("data-link-id"))
-    this.enableElement(link)
-  }
-}
-
 
 Turbo.StreamActions.disable = function() {
   this.targetElements.forEach((e) => {
@@ -42,48 +28,19 @@ Turbo.StreamActions.enable = function() {
   this.targetElements.forEach((e) => { this.enableElement(e) })
 }
 
-Turbo.StreamActions.blur = function() {
-  blur()
-}
-
-Turbo.StreamActions.focus = function() {
-  // NOTE: call blur() before setting focus?
-  this.targetElements[0].focus({focusVisible: true})
-}
-
-Turbo.StreamActions.prepend_form = function() {
-  this.targetElements.forEach((e) => {
-    [...e.getElementsByClassName("form")].forEach((f) => {
-      this.removePreviousForm(f)
-    })
-    e.prepend(this.templateContent)
-  })
-}
-
-Turbo.StreamActions.after_form = function() {
-  this.targetElements.forEach((e) => {
-    [...e.parentElement?.getElementsByClassName("form")].forEach((f) => {
-      this.removePreviousForm(f)
-    })
-    e.parentElement?.insertBefore(this.templateContent, e.nextSibling)
-  })
-}
-
-Turbo.StreamActions.replace_form = function() {
-  this.targetElements.forEach((e) => {
-    const id = e.id;
-    [...e.parentElement?.getElementsByClassName("form")].forEach((f) => {
-      this.removePreviousForm(f)
-    })
-    e = document.getElementById(id)
-    e.style.display = "none"
-    e.id = e.id + "_cached"
-    e.parentElement?.insertBefore(this.templateContent, e.nextSibling)
-  })
+Turbo.StreamActions.hide = function() {
+  this.targetElements.forEach((e) => { e.style.display = "none" })
 }
 
 Turbo.StreamActions.close_form = function() {
   this.targetElements.forEach((e) => {
-    this.removePreviousForm(e.closest(".form"))
+    document.getElementById(e.getAttribute("data-form")).remove()
+    if (e.hasAttribute("data-link")) {
+      this.enableElement(document.getElementById(e.getAttribute("data-link")))
+    }
+    if (e.hasAttribute("data-hidden-row")) {
+      document.getElementById(e.getAttribute("data-hidden-row")).removeAttribute("style")
+    }
+    e.remove()
   })
 }

app/views/units/_form.html.erb

@@ -1,28 +1,28 @@
 <%= tabular_fields_for @unit do |form| %>
-  <%= tag.tr id: dom_id(@unit), class: "form", onkeydown: "processKey(event)",
-    data: {link_id: link_id} do %>
+  <%- tag.tr id: row, class: "form", onkeydown: "processKey(event)",
+    data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
 
     <td class="<%= class_names({subunit: @unit.base}) %>">
-      <%= form.text_field :symbol, form: :unit_form, required: true, autofocus: true, size: 12,
+      <%= form.text_field :symbol, form: form_tag, required: true, autofocus: true, size: 12,
         maxlength: @unit.class.type_for_attribute(:symbol).limit, autocomplete: "off" %>
     </td>
     <td>
-      <%= form.text_area :description, form: :unit_form, cols: 30, rows: 1, escape: false,
+      <%= form.text_area :description, form: form_tag, cols: 30, rows: 1, escape: false,
         maxlength: @unit.class.type_for_attribute(:description).limit, autocomplete: "off" %>
     </td>
     <td>
       <% unless @unit.base.nil? %>
-        <%= form.hidden_field :base_id, form: :unit_form %>
-        <%= form.number_field :multiplier, form: :unit_form, required: true,
+        <%= form.hidden_field :base_id, form: form_tag %>
+        <%= form.number_field :multiplier, form: form_tag, required: true,
           size: 10, autocomplete: "off",
           **number_attributes(@unit.class.type_for_attribute(:multiplier)) %>
       <% end %>
     </td>
 
     <td class="actions">
-      <%= form.submit form: :unit_form %>
+      <%= form.submit form: form_tag %>
       <%= image_link_to t(:cancel), "close-outline", units_path, class: 'dangerous',
-        name: :cancel, onclick: render_turbo_stream('form_close') %>
+        name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>
     </td>
     <td></td>
   <% end %>

app/views/units/_form_close.html.erb

@@ -1,2 +1,2 @@
-<%= turbo_stream.close_form @unit %>
+<%= turbo_stream.close_form row %>
 <%= turbo_stream.update :flashes %>

app/views/units/_unit.html.erb

@@ -5,8 +5,7 @@
            data: {drag_path: rebase_unit_path(unit), drop_id: dom_id(unit.base || unit)} do %>
 
   <td class="<%= class_names('link', {subunit: unit.base}) %>">
-    <%= link_to unit, edit_unit_path(unit), id: dom_id(unit, :edit),
-      onclick: 'this.blur();', data: {turbo_stream: true} %>
+    <%= link_to unit, edit_unit_path(unit), onclick: 'this.blur();', data: {turbo_stream: true} %>
   </td>
   <td><%= unit.description %></td>
   <td class="number"><%= unit.multiplier.to_html %></td>
@@ -14,9 +13,8 @@
   <% if current_user.at_least(:active) %>
     <td class="actions">
       <% if unit.base.nil? %>
-        <%= image_link_to t('.add_subunit'), 'plus-outline', new_unit_path(unit),
-          id: dom_id(unit, :add), onclick: 'this.blur();',
-          data: {turbo_stream: true} %>
+        <%= image_link_to t('.new_subunit'), 'plus-outline', new_unit_path(unit),
+          id: dom_id(unit, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
       <% end %>
 
       <%= image_button_to t('.delete_unit'), 'delete-outline', unit_path(unit),

app/views/units/create.turbo_stream.erb

@@ -1,4 +1,4 @@
-<%= turbo_stream.close_form dom_id(Unit.new) %>
+<%= turbo_stream.close_form dom_id(@unit.base || Unit, :new) %>
 <%= turbo_stream.remove :no_items %>
 <%= turbo_stream.replace @unit.base unless @unit.base.nil? %>
 <%= @before.nil? ? turbo_stream.append(:units, @unit) : turbo_stream.before(@before, @unit) %>

app/views/units/edit.turbo_stream.erb

@@ -1,6 +1,13 @@
-<%= turbo_stream.replace :unit_form do %>
-  <%= form_with model: @unit, html: {id: :unit_form} do %>
+<% ids = {row: dom_id(@unit, :edit),
+          hidden_row: dom_id(@unit),
+          link: nil,
+          form_tag: dom_id(@unit, :edit, :form)} %>
+
+<%= turbo_stream.append :unit_form do %>
+  <%- form_with model: @unit, html: {id: ids[:form_tag]} do %>
   <% end %>
 <% end %>
 
-<%= turbo_stream.replace_form @unit, partial: 'form', locals: {link_id: dom_id(@unit, :edit)} %>
+<%= turbo_stream.hide ids[:hidden_row] %>
+<%= turbo_stream.remove ids[:row] %>
+<%= turbo_stream.after @unit, partial: 'form', locals: ids -%>

app/views/units/index.html.erb

@@ -1,7 +1,7 @@
 <div class="rightside buttongrid">
   <% if current_user.at_least(:active) %>
-    <%= image_link_to t('.add_unit'), 'plus-outline', new_unit_path, id: :add_unit,
-      onclick: 'this.blur();', data: {turbo_stream: true} %>
+    <%= image_link_to t('.new_unit'), 'plus-outline', new_unit_path,
+      id: dom_id(Unit, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
   <% end %>
   <%= image_link_to t('.import_units'), 'download-outline', default_units_path, class: 'tools' %>
 </div>

app/views/units/new.turbo_stream.erb

@@ -1,9 +1,19 @@
-<% link_id = dom_id(@unit.base || @unit, :add) %>
+<% dom_obj = @unit.base || @unit %>
+<% ids = {row: dom_id(dom_obj, :new),
+          hidden_row: nil,
+          link: dom_id(dom_obj, :new, :link),
+          form_tag: dom_id(dom_obj, :new, :form)} %>
 
-<%= turbo_stream.replace :unit_form do %>
-  <%= form_with model: @unit, html: {id: :unit_form} do %>
+<%= turbo_stream.disable ids[:link] -%>
+
+<%= turbo_stream.append :unit_form do %>
+  <%- form_with model: @unit, html: {id: ids[:form_tag]} do %>
   <% end %>
 <% end %>
 
-<%= turbo_stream.insert_form (@unit.base || :units), partial: 'form', locals: {link_id: link_id} %>
-<%= turbo_stream.disable link_id -%>
+<% if @unit.base %>
+  <%= turbo_stream.remove ids[:row] %>
+  <%= turbo_stream.after @unit.base, partial: 'form', locals: ids %>
+<% else %>
+  <%= turbo_stream.prepend :units, partial: 'form', locals: ids %>
+<% end %>