Max headings are updated when editing heading

The max headings label is updated automatically
when updating the heading. It is done via AJAX
and a refresh isn't needed.

app/assets/stylesheets/admin.scss

@@ -1165,6 +1165,17 @@ table {
   }
 }
 
+.max-headings-label {
+  color: $text-medium;
+  font-size: $small-font-size;
+  margin-left: $line-height / 2;
+}
+
+.current-of-max-headings {
+  color: #000;
+  font-weight: bold;
+}
+
 // 11. Newsletters
 // -----------------
 

app/views/admin/budget_groups/update.js.erb

@@ -2,5 +2,6 @@
   $("#group-form-<%= @group.id %>").html('<%= j render("admin/budgets/group_form", group: @group, budget: @group.budget, button_title: t("admin.budgets.form.submit"), id: "group-form-#{@group.id}", css_class: "group-toggle-#{@group.id}" ) %>');
 <% else %>
   $("#group-name-<%= @group.id %>").html('<%= @group.name %>')
+  $("#max-heading-label-<%=@group.id%>").html('<%= j render("admin/budgets/max_headings_label", current: @group.max_votable_headings, max: @group.headings.count, group: @group) %>')
   $(".group-toggle-<%= @group.id %>").toggle()
 <% end %>

app/views/admin/budgets/_group.html.erb

@@ -1,13 +1,11 @@
-<% max_headings_label = t('admin.budgets.form.current_of_max_headings', current: group.max_votable_headings, max: group.headings.count ) %>
 <table>
   <thead>
     <tr>
       <th colspan="4" class="with-button">
         <%= content_tag(:span, group.name, class:"group-toggle-#{group.id}", id:"group-name-#{group.id}") %>
-        <span class="max_headings_label" style="margin-left: 10px; font-size: 0.9em; color: gray;">
+
-          <%= t("admin.budgets.form.max_votable_headings")%>
+        <%= content_tag(:span, (render 'admin/budgets/max_headings_label', current: group.max_votable_headings, max: group.headings.count, group: group if group.max_votable_headings), class:"max-headings-label group-toggle-#{group.id}", id:"max-heading-label-#{group.id}") %>
-          <strong style="font-weight: bold; color: black;"><%= max_headings_label %></strong>
+
-        </span>
         <%= render 'admin/budgets/group_form', budget: @budget, group: group, id: "group-form-#{group.id}", button_title: t("admin.budgets.form.submit"), css_class: "group-toggle-#{group.id}" %>
         <%= link_to t("admin.budgets.form.edit_group"), "#", class: "button float-right js-toggle-link hollow", data: { "toggle-selector" => ".group-toggle-#{group.id}" } %>
         <%= link_to t("admin.budgets.form.add_heading"), "#", class: "button float-right js-toggle-link", data: { "toggle-selector" => "#group-#{group.id}-new-heading-form" } %>

app/views/admin/budgets/_max_headings_label.html.erb

@@ -0,0 +1,5 @@
+<%= t("admin.budgets.form.max_votable_headings")%>
+<%= content_tag(:strong,
+                t('admin.budgets.form.current_of_max_headings', current: current, max: max ),
+                class:"current-of-max-headings") %>
+

config/locales/en/admin.yml

@@ -120,7 +120,7 @@ en:
         table_amount: Amount
         table_population: Population
         population_info: "Budget Heading population field is used for Statistic purposes at the end of the Budget to show for each Heading that represents an area with population what percentage voted. The field is optional so you can leave it empty if it doesn't apply."
-        max_votable_headings: "Maxium number of headings in which a user can vote"
+        max_votable_headings: "Maximum number of headings in which a user can vote"
         current_of_max_headings: "%{current} of %{max}"
       winners:
         calculate: Calculate Winner Investments