Merge pull request #2565 from mlorb/ml-sci-4511

Add New Task layout Collapsed/Expanded States saving [SCI-4511]

app/assets/javascripts/my_modules.js

@@ -1,6 +1,39 @@
 /* global I18n dropdownSelector */
 /* eslint-disable no-use-before-define */
 
+function initTaskCollapseState() {
+  let taskView = '.my-modules-protocols-index';
+  let taskSection = '.task-section-caret';
+  let taskId = $(taskView).data('task-id');
+
+  function collapseStateSave() {
+    $(taskView).on('click', taskSection, function() {
+      let collapsed = $(this).attr('aria-expanded');
+      let taskSectionType = $(this).attr('aria-controls');
+
+      if (collapsed === 'true') {
+        localStorage.setItem('task_section_collapsed/' + taskId + '/' + taskSectionType, collapsed);
+      } else {
+        localStorage.removeItem('task_section_collapsed/' + taskId + '/' + taskSectionType);
+      }
+    });
+  }
+
+  function collapseStateLoad() {
+    $(taskSection).each(function() {
+      let taskSectionType = $(this).attr('aria-controls');
+      var collapsed = localStorage.getItem('task_section_collapsed/' + taskId + '/' + taskSectionType);
+
+      if (JSON.parse(collapsed)) {
+        $('#' + taskSectionType).collapse('hide');
+      }
+    });
+  }
+
+  collapseStateSave();
+  collapseStateLoad();
+}
+
 function updateStartDate() {
   let updateUrl = $('#startDateContainer').data('update-url');
   let val = $('#calendarStartDate').val();
@@ -345,6 +378,7 @@ function initAssignedUsersSelector() {
   initUsersEditLink();
 }
 
+initTaskCollapseState();
 applyTaskCompletedCallBack();
 initTagsSelector();
 bindEditTagsAjax();

app/views/my_modules/protocols.html.erb

@@ -4,7 +4,7 @@
 <%= render partial: "shared/sidebar", locals: { current_task: @my_module, page: 'task' } %>
 <%= render partial: "shared/secondary_navigation" %>
 
-<div class="content-pane my-modules-protocols-index">
+<div class="content-pane my-modules-protocols-index" data-task-id="<%= @my_module.id %>">
   <!-- Details -->
   <div class="task-section">
     <div class="task-section-header">
@@ -45,7 +45,7 @@
   <!-- Assigned items -->
   <div class="task-section">
     <div class="task-section-header">
-      <a class="task-section-caret collapsed" role="button" data-toggle="collapse" href="#assigned-items-container" aria-expanded="false" aria-controls="assigned-items-container">
+      <a class="task-section-caret" role="button" data-toggle="collapse" href="#assigned-items-container" aria-expanded="true" aria-controls="assigned-items-container">
         <i class="fas fa-caret-right"></i>
         <span class="task-section-title ">
           <h2 class="assigned-items-title" data-assigned-items-count="<%= @assigned_repositories.map{|i| i.assigned_rows_count}.sum %>"><%= t('my_modules.assigned_items.title') %></h2>
@@ -63,7 +63,7 @@
         </div>
       </div>
     </div>
-    <div class="collapse panel-group" id="assigned-items-container"
+    <div class="collapse in panel-group" id="assigned-items-container" aria-expanded="true"
          data-repositories-list-url="<%= my_module_repositories_list_html_path(@my_module) %>">
       <%= render partial: "my_modules/repositories/repositories_list" %>
     </div>
@@ -73,7 +73,7 @@
   <!-- Protocol -->
   <div class="task-section">
     <div class="task-section-header">
-      <a class="task-section-caret collapsed" role="button" data-toggle="collapse" href="#protocol-container" aria-expanded="false" aria-controls="protocol-container">
+      <a class="task-section-caret" role="button" data-toggle="collapse" href="#protocol-container" aria-expanded="true" aria-controls="protocol-container">
         <i class="fas fa-caret-right"></i>
         <div class="task-section-title">
           <h2><%= t('my_modules.protocol.title') %></h2>
@@ -91,7 +91,7 @@
         </a>
       </div>
     </div>
-    <div class="collapse" id="protocol-container">
+    <div class="collapse in" id="protocol-container" aria-expanded="true">
       <%= render partial: "my_module_protocol" %>
     </div>
   </div>

features/protocol_step.feature

@@ -43,7 +43,7 @@ Scenario: Successful add new step to a task
 Scenario: Successful add new step to a task
   Given I'm on the Protocols page of a "qPCR" task
   And I click "Protocol" link
-  And I click first "New Step" link
+  And I click first "New step" link
   Then I fill in "PES" in "#step_name" field
   Then I fill in "zivali pa so se odpravile dalje po svetu." in "#step_description_textarea" rich text editor field
   And I click "Files" link