bs4 fix mh edit buttons (#4234)

* add cancel/save buttons to row, display them when edit and hide edit * add cancel/save buttons to row and update edit/personal js to handle hiding edit and showing these, add handling for new save, remove unneeded member id edit in favor of finding the edit in the given container * translation cleanup * fix add new buttons * reset edit buttons on destroy
ideacrew · Aug 20, 2024 · a724847 · a724847
1 parent ed8ca41
commit a724847
Show file tree

Hide file tree

Showing 12 changed files with 85 additions and 48 deletions.
diff --git a/app/views/insured/families/_family_member_row.html.erb b/app/views/insured/families/_family_member_row.html.erb
@@ -8,10 +8,19 @@
     <td class="p-2">
       <% edit_url = member.is_primary_applicant ? personal_insured_families_path({bs4: @bs4}) : main_app.edit_insured_family_member_path({id: member.id, bs4: @bs4}) %>
       <span class="d-flex">
-        <%= h(link_to l10n("edit_member"), edit_url, remote: true, id: "edit-member-#{person_id}", class: 'btn button outline close-2') %>
+        <%= h(link_to l10n("edit_member"), edit_url, remote: true, class: 'edit-member btn button outline close-2') %>
+        <span class="d-flex hidden edit-buttons">
+            <%= link_to('#', class: 'btn outline mr-2 text-nowrap') do %>
+              <%= l10n("cancel_edit") %>
+            <% end %>
+            <% confirm_id = "member-#{person_id}-confirm" %>
+            <span tabindex="0", onkeydown="handleButtonKeyDown(event, '<%= confirm_id %>')", id=<%= confirm_id %> class="confirm-member btn btn-primary text-nowrap">
+              <%= l10n("save_changes") %>
+            </span>
+        </span>
       </span>
     </td>
   </tr>
-  <tr id="person-<%= person_id %>" class="hidden">
-    <td colspan="6" class="append_consumer_info"></td>
-  </tr>
+<tr id="person-<%= person_id %>" class="hidden">
+  <td colspan="6" class="append_consumer_info"></td>
+</tr>
diff --git a/app/views/insured/families/manage_family.html.erb b/app/views/insured/families/manage_family.html.erb
@@ -13,21 +13,23 @@
 
     <h1><%= l10n("my_household") %></h1>
     <p><%= l10n("my_household_desc")%></p>
-    <table>
-      <thead>
-        <tr>
-          <th scope="col" class="w-256px"><%= l10n("name") %></th>
-          <th scope="col"><%= l10n("hbx_id") %></th>
-          <th scope="col"><%= l10n("age") %></th>
-          <th scope="col"><%= l10n("sex") %></th>
-          <th scope="col"><%= l10n("relationship") %></th>
-          <th scope="col" class="w-256px" aria-label="actions"></th>
-        </tr>
-      </thead>
-      <tbody id="manage_family_content">
-        <%= render partial: 'insured/families/manage_family_table', locals: {members: @family.active_family_members} %>
-      </tbody>
-    </table>
+    <div class="table-responsive">
+      <table>
+        <thead>
+          <tr>
+            <th scope="col" class="w-256px"><%= l10n("name") %></th>
+            <th scope="col"><%= l10n("hbx_id") %></th>
+            <th scope="col"><%= l10n("age") %></th>
+            <th scope="col"><%= l10n("sex") %></th>
+            <th scope="col"><%= l10n("relationship") %></th>
+            <th scope="col" class="w-256px" aria-label="actions"></th>
+          </tr>
+        </thead>
+        <tbody id="manage_family_content">
+          <%= render partial: 'insured/families/manage_family_table', locals: {members: @family.active_family_members} %>
+        </tbody>
+      </table>
+    </div>
 
     <div id="append_consumer_info"></div>
     <%= h(link_to l10n("add_new_member"), new_insured_family_member_path({family_id: @family.id, bs4: @bs4}), remote: true, id: 'add-new-member', class: 'btn button close-2') %>

diff --git a/app/views/insured/families/personal.js.erb b/app/views/insured/families/personal.js.erb
@@ -11,11 +11,16 @@
 
   } else {
     // manage family/ my household page
-    var personContainer = $("#person-<%= @person.id %>")
-    $("#person-<%= @person.id %> .append_consumer_info").html("<%= escape_javascript(render partial: "personal")%>");
+    var id = "<%= @person.id %>";
+    var personContainer = $("#person-" + id);
+    $("#person-" + id + " .append_consumer_info").html("<%= escape_javascript(render partial: "personal")%>");
     personContainer.removeClass('hidden');
     if ($("#family_information").length == 0) {
-      $("a[id^=edit-member]").addClass('disabled').attr('tabindex', -1).blur();
+      var memberContainer = $(".member-" + id + "-row");
+      console.log(".member-" + id + "-row")
+      $(".edit-member").addClass('disabled').attr('tabindex', -1);
+      memberContainer.find(".edit-member").addClass('hidden');
+      memberContainer.find(".edit-buttons").removeClass('hidden');
     }
   }
   applyListeners();

diff --git a/app/views/insured/family_members/_dependent_form.html.erb b/app/views/insured/family_members/_dependent_form.html.erb
@@ -139,25 +139,22 @@
           <%= f.hidden_field :family_id %>
           <div id="remove_confirm" class="hidden"></div>
           <div id="add_info_buttons_<%= dependent.id %>" style="padding-top: 20px;">
-
-          <% if !dependent.persisted? %>
-            <a href="#" class="btn btn-error remove-new-employee-dependent" onclick="$('#btn-continue').removeClass('disabled')" data-target="#new_employee_dependent_form">
-            <%= l10n("cancel") %>
-            </a>
-          <% else %>
-            <%= link_to('#', class: 'btn outline mr-2') do %>
-              <%= l10n("cancel") %>
+            <% if !dependent.persisted? %>
+              <a href="#" class="btn outline remove-new-employee-dependent mr-2" data-target="#new_employee_dependent_form">
+                <%= l10n("cancel") %>
+              </a>
+            <% else %>
+              <%= h(link_to l10n('remove_member_from_household'), insured_family_member_path(dependent, {bs4: @bs4}), class: 'btn button-error outline mr-2', :method => :delete, :remote => true, data: {confirm: l10n("confirm_remove_dependent"), ok: l10n("yes"), cancel: l10n("no")}) %>
+              <%= link_to('#', class: 'btn outline mr-2') do %>
+                <%= l10n("discard_changes") %>
+              <% end %>
             <% end %>
-            <%= h(link_to l10n('remove_member'), insured_family_member_path(dependent, {bs4: @bs4}), class: 'btn button-error outline mr-2', :method => :delete, :remote => true, data: {confirm: l10n("confirm_remove_dependent"), ok: l10n("yes"), cancel: l10n("no")}) %>
-          <% end %>
-          <%= f.button(id: 'confirm-member', class: "btn btn-primary hidden", onclick: "$('#btn-continue').removeClass('disabled');") do %>
-            <%= l10n("confirm_member") %>
-          <% end %>
-
-          <span tabindex="0", onkeydown="handleButtonKeyDown(event, 'confirm-dependent')", id='confirm-dependent' class="btn btn-primary">
-            <%= l10n("confirm_member") %>
-          </span>
-        </div>
+
+            <%= f.button(id: 'confirm-member', class: "btn btn-primary hidden", onclick: "$('#btn-continue').removeClass('disabled');") %>
+            <span tabindex="0", onkeydown="handleButtonKeyDown(event, 'confirm-dependent')", id='confirm-dependent' class="btn btn-primary">
+              <%= l10n("save_changes") %>
+            </span>
+          </div>
         </div>
 
 
@@ -199,6 +196,11 @@
       });
     <% end %>
 
+    $(document).off('click', '.confirm-member'); 
+    $(document).on('click', '.confirm-member', function(e) {
+      $("#confirm-dependent").click();
+    });
+
     $(document).off('click', '#confirm-dependent');
     $(document).on('click', '#confirm-dependent', function(e) {
       if ($("input#dependent_same_with_primary").is(":checked")){

diff --git a/app/views/insured/family_members/destroyed.js.erb b/app/views/insured/family_members/destroyed.js.erb
@@ -9,7 +9,7 @@ $('#family_error_messages').append("<%= escape_javascript render partial: 'destr
 <% person_id = @dependent.family_member.person.id %>
 $("#person-<%= person_id %>").remove();
 $(".member-<%= person_id %>-row").remove();
-$("a[id^=edit-member]").removeClass('disabled').removeClass('hidden');
+$(".edit-member").removeClass('disabled').attr('tabindex', 0);
 $("#add-new-member").removeClass("hidden");
 
 <% if ::EnrollRegistry.feature_enabled?(:financial_assistance) &&  (['destroy'].include? controller.action_name) && (@person.consumer_role.present?)  %>

diff --git a/app/views/insured/family_members/edit.js.erb b/app/views/insured/family_members/edit.js.erb
@@ -25,12 +25,15 @@ if ($(".my-household-page").length == 0) {
     var id = "<%= @dependent.id %>";
   }
 
-  var personContainer = $("#person-"+id)
-  if (personContainer) {
+  var personContainer = $("#person-" + id)
+  if (personContainer.length) {
     personContainer.find('.append_consumer_info').html("<%= escape_javascript(render 'dependent_form', dependent: @dependent, person: @person) %>");
     personContainer.removeClass('hidden');
+    var memberContainer = $(".member-" + id + "-row");
     if ($("#family_information").length == 0) {
-      $("a[id^=edit-member]").addClass('disabled').attr('tabindex', -1).blur();
+      $(".edit-member").addClass('disabled').attr('tabindex', -1);
+      memberContainer.find(".edit-member").addClass('hidden');
+      memberContainer.find(".edit-buttons").removeClass('hidden');
     }
   } else {
     $(".append_consumer_info").replaceWith("<%= escape_javascript(render 'dependent_form', dependent: @dependent, person: @person) %>");

diff --git a/app/views/insured/family_members/new.js.erb b/app/views/insured/family_members/new.js.erb
@@ -46,7 +46,6 @@ if (bs4 == "true") {
     isApplyingCoverage("dependent");
     $("a[id^=edit-member]").addClass('disabled');
     $("#add-new-member").addClass("hidden");
-    $("#edit-member-" + "<%= @dependent.id %>").addClass("hidden");
   }
 } else {
   $('#dependents_info_wrapper h4:first').text("Please enter the information requested below. When you\'re finished, select \'Confirm Member\' at the bottom of the page.");

diff --git a/app/views/insured/family_members/show.js.erb b/app/views/insured/family_members/show.js.erb
@@ -7,7 +7,7 @@ if (!$(".my-household-page").length) {
 
   $("#dependent_buttons").removeClass('hidden');
 } else {
-  $("a[id^=edit-member]").removeClass('disabled').removeClass('hidden').attr('tabindex', 0);
+  $(".edit-member").removeClass('disabled').attr('tabindex', 0);
   $("#add-new-member").removeClass("hidden");
   $("#new_employee_dependent_form").html($(document.createElement("div")).attr("id", "append_consumer_info"));
   <% member = @dependent.family_member %>

diff --git a/app/views/people/landing_pages/_personal.html.erb b/app/views/people/landing_pages/_personal.html.erb
@@ -107,11 +107,11 @@
     <% end %>
 
     <div class="mb-5 <%= pundit_class Family, :updateable? %>">
-      <%= link_to l10n("cancel"), '#', class: "btn button outline remove-personal-form" %>
+      <%= link_to l10n("discard_changes"), '#', class: "btn button outline remove-personal-form mr-2" %>
 
       <button type="submit" class="btn btn-primary btn-br hidden"><%= l10n("confirm_member") %></button>
       <span tabindex="0" onkeydown="handleButtonKeyDown(event, 'save_personal')" id="save_personal" class='btn btn-primary btn-br' onclick='PersonValidations.manageRequiredValidations($(this));' data-cuke="personal-save">
-        <%= l10n("confirm_member") %>
+        <%= l10n("save_changes") %>
       </span>
     </div>
   <% end %>
@@ -128,6 +128,11 @@
         $('#manage_family_content').html(family_table);
       }
     });
+
+    $(document).off('click', '.confirm-member'); 
+    $(document).on('click', '.confirm-member', function(e) {
+      $("#save_personal").click();
+    });
   </script>
 
 <% else %>

diff --git a/db/seedfiles/translations/en/cca/insured.rb b/db/seedfiles/translations/en/cca/insured.rb
@@ -443,6 +443,10 @@
   :'en.this_person_is_name' => "This Person Is %{name}'s",
   :'en.live_with_primary_subscriber' => "Lives with primary subscriber",
   :'en.confirm_member' => "Confirm Member",
+  :'en.remove_member_from_household' => "Remove Member from Household",
+  :'en.discard_changes' => "Discard Changes",
+  :'en.cancel_edit' => "Cancel Edit",
+  :'en.save_changes' => "Save Changes",
   :'en.household_info' => "Household Info",
   :'en.plan_selection' => "Plan Selection",
   :'en.review' => "Review",

diff --git a/db/seedfiles/translations/en/dc/insured.rb b/db/seedfiles/translations/en/dc/insured.rb
@@ -501,6 +501,10 @@
   :'en.live_with_primary_subscriber' => "Lives with primary subscriber",
   :'en.dependent_lives_with_primary_subscriber' => "This person <strong>lives with primary subscriber</strong>",
   :'en.confirm_member' => "Confirm Member",
+  :'en.remove_member_from_household' => "Remove Member from Household",
+  :'en.discard_changes' => "Discard Changes",
+  :'en.cancel_edit' => "Cancel Edit",
+  :'en.save_changes' => "Save Changes",
   :'en.household_info' => "Household Info",
   :'en.plan_selection' => "Plan Selection",
   :'en.review' => "Review",

diff --git a/db/seedfiles/translations/en/me/insured.rb b/db/seedfiles/translations/en/me/insured.rb
@@ -515,6 +515,10 @@
   :'en.this_person_is_name' => "This Person Is %{name}'s",
   :'en.live_with_primary_subscriber' => "Lives with primary subscriber",
   :'en.confirm_member' => "Confirm Member",
+  :'en.remove_member_from_household' => "Remove Member from Household",
+  :'en.discard_changes' => "Discard Changes",
+  :'en.cancel_edit' => "Cancel Edit",
+  :'en.save_changes' => "Save Changes",
   :'en.household_info' => "Household Info",
   :'en.choose_plan' => "Choose Plan",
   :'en.plan_selection' => "Plan Selection",