Display new form with turbo frame

app/assets/images/pictograms/close-circle-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z" /></svg>

app/helpers/application_helper.rb

@@ -88,7 +88,6 @@ module ApplicationHelper
     image_element_to(:link, name, image, options, html_options)
   end
 
-
   private
 
   def image_element_to(type, name, image = nil, options = nil, html_options = {})
@@ -126,7 +125,7 @@ module ApplicationHelper
       end
     end
     if exponent != 1
-      result += "10<sup>#{exponent-1}</sup>"
+      result += "10<sup>% d</sup>" % [exponent-1]
     end
     result.html_safe
   end

app/views/units/_form.html.erb

@@ -1,26 +1,24 @@
-<div id="add-unit" <%= 'style=display:none;' if @unit.errors.empty? %>>
-  <h2><%= t ".heading_new_unit" %></h2>
+<%= fields_for unit do |form| %>
+  <td>
+    <%= form.text_field :symbol, form: :unit_form, required: true, autofocus: true, size: 10,
+      autocomplete: "off" %>
+  </td>
+  <td>
+    <%= form.text_field :name, form: :unit_form, size: 25, autocomplete: "off" %>
+  </td>
+  <td>
+    <% unless unit.base.nil? %>
+      <%= form.number_field :multiplier, form: :unit_form, step: "any", size: 10,
+        autocomplete: "off" %>
+    <% end %>
+  </td>
 
-  <%= labelled_form_for @unit,
-    url: project_units_path(@project),
-    html: {id: 'unit-add-form', name: 'unit-add-form'} do |f| %>
-
-    <%= render partial: 'units/form', locals: {f: f} %>
-    <%= submit_tag l(:button_create) %>
-    <%= link_to l(:button_cancel), "#", onclick: '$("#add-unit").hide(); return false;' %>
-  <% end %>
-  <hr>
-  </div>
-
-<%= error_messages_for @unit %>
-
-<div class="box tabular">
-  <div class="splitcontent">
-    <div class="splitcontentleft">
-      <p><%= f.text_field :shortname, required: true, size: 20 %></p>
-    </div>
-    <div class="splitcontentright">
-      <p><%= f.text_field :name, size: 60 %></p>
-    </div>
-  </div>
-</div>
+  <td class="actions">
+    <%= form.submit unit.persisted? ? t(:update) : t(:add), form: :unit_form %>
+    <%= image_link_to t(:cancel), "close-circle-outline", units_path, class: 'dangerous',
+      onclick: 'this.closest("tr").replaceChildren();
+                document.querySelector("a#add_unit").style.visibility = "visible";
+                return false;' %>
+  </td>
+  <!-- TODO: display error_messages_for unit -->
+<% end %>

app/views/units/index.html.erb

@@ -1,10 +1,13 @@
 <div class="rightside">
   <% if current_user.at_least(:active) %>
-    <%= image_link_to t(".add_unit"), "plus-outline", new_unit_path %>
+    <%= turbo_frame_tag target: dom_id(Unit.new) do %>
+      <%= image_link_to t('.add_unit'), 'plus-outline', new_unit_path, id: :add_unit,
+        onclick: 'this.style.visibility = "hidden";' %>
+    <% end %>
   <% end %>
 </div>
 
-<%#= turbo_frame_tag 'unit_form' %>
+<%= turbo_frame_tag 'unit_form_frame' %>
 
 <table class="main items" id="units">
   <thead>
@@ -18,6 +21,8 @@
     </tr>
   </thead>
   <tbody>
+    <tr id="<%= dom_id(Unit.new) %>" is="turbo-frame"></tr>
+
     <% Unit.each_with_level(@units) do |unit, level| %>
       <tr>
         <td class="link">

app/views/units/new.html.erb

@@ -1,22 +1,12 @@
-<% content_for :navigation, flush: true do %>
-  <div class="left">
-    <%= image_link_to t(:back), "arrow-left-bold-outline",
-      request.referer.present? ? :back : units_url %>
-  </div>
-<% end %>
-
-<%= tabular_form_for @unit do |f| %>
-  <%= f.text_field :symbol, required: true, size: 10, autofocus: true, autocomplete: "off" %>
-  <%= f.text_field :name, size: 25, autocomplete: "off" %>
-
-  <% if current_user.units.roots.count %>
-    <%= f.select :base_id,
-      current_user.units.roots.collect { |u| ["#{u.symbol}#{' - ' + u.name if u.name}", u.id] },
-      {include_blank: t(".none")},
-      onchange: 'this.form.unit_multiplier.disabled = (this.value == "");' %>
-    <%= f.number_field :multiplier, step: "any", disabled: @unit.base.nil?, size: 10,
-      autocomplete: "off" %>
+<!-- NOTE: as of turbo-rails 2.0.0.pre.beta.1/turbo 8.0.0-beta.1
+  loading <form> through *.turbo_stream.erb does not autofocus -->
+<%= turbo_frame_tag @unit do %>
+  <%= turbo_stream.update @unit do %>
+    <%= render partial: 'form', locals: {unit: @unit} %>
   <% end %>
 
-  <%= f.submit @unit.persisted? ? t(:update) : t(:add) %>
+  <%= turbo_stream.update :unit_form_frame do %>
+    <%= form_with model: @unit, html: {id: :unit_form} do %>
+    <% end %>
+  <% end %>
 <% end %>