Merge pull request #176 from portagenetwork/issue166

Update accordion.js to fix create template collapsable case

CHANGELOG.md

@@ -5,6 +5,12 @@
 ### Fixed
 
 - Fixed password reset link
+- Adjusted accordion javascript for a different user case [#166](https://github.com/portagenetwork/roadmap/issues/166)
+
+### Changed
+
+- Nokogiri upgrade to 1.13.4
+- Moment upgrade to 2.29.2
 
 ## [3.0.4+portage-3.0.10] - 2022-04-12
 
@@ -27,6 +33,7 @@
 ### Fixed
 
 - Fixed invalid org selection when new user accept invitation [#177](https://github.com/portagenetwork/roadmap/issues/177)
+
 ## [3.0.4+portage-3.0.7] - 2022-04-05
 
 ### Added

app/controllers/org_admin/phases_controller.rb

@@ -195,4 +195,4 @@ def phase_params
 
   end
 
-end
+end

app/controllers/org_admin/sections_controller.rb

@@ -146,4 +146,4 @@ def section_params
 
   end
 
-end
+end

app/javascript/src/utils/accordion.js

@@ -31,21 +31,23 @@
  *    </div>
  */
 $(() => {
-  $('body').on('click', '.accordion-controls', (e) => {
+  $('body').on('click', '.accordion-controls a', (e) => {
     e.preventDefault();
     const currentTarget = $(e.currentTarget);
     const target = $(e.target);
     const direction = target.attr('data-toggle-direction');
+    const parentTargetName = currentTarget.parent().attr('data-parent');
     if (direction) {
       // Selects all .panel elements where the parent is currentTarget.attr('data-parent') and
       // after gets the immediately children whose class selector is panel-collapse
-      $(`#${currentTarget.attr('data-parent')} > .panel`).children('.panel-collapse').each((i, el) => {
+      const parentTarget = $(`#${parentTargetName}`).length ? $(`#${parentTargetName}`) : $(`.${parentTargetName}`);
+      $(parentTarget).find('.panel').find('.panel-collapse').each((i, el) => {
         const panelCollapse = $(el);
         // Expands or collapses the panel according to the
         // direction passed (e.g. show --> expands, hide --> collapses)
         if (direction === 'show') {
-          if (!panelCollapse.hasClass('in')) {
-            panelCollapse.prev().trigger('click');
+          if (!panelCollapse.find('.panel-body').attr('data-loaded') || !panelCollapse.hasClass('in')) {
+            panelCollapse.prev()[0].click();
           }
         } else {
           panelCollapse.collapse(direction);

app/views/org_admin/sections/_section.html.erb

@@ -46,4 +46,4 @@
       <% end %>
     </div>
   </div>
-</div>
+</div>

app/views/org_admin/sections/_section_group.html.erb

@@ -1,5 +1,5 @@
 <!-- TODO: Move this away from using ID attr -->
-<div class="panel-group section-group"
+<div class="panel-group section-group sections_accordion"
      data-modifiable="<%= modifiable %>"
      id="<%= panel_id %>"
      role="tablist">
@@ -12,4 +12,4 @@
                          data_parent: panel_id,
                          draggable: draggable_for_section?(section) } %>
   <% end%>
-</div>
+</div>