Merge pull request #2841 from mlorb/ml-sci-4984

Add saving state for filters on dashboard [SCI-4984]

app/assets/javascripts/dashboard/current_tasks.js

@@ -2,10 +2,10 @@
 /* eslint-disable no-param-reassign */
 
 var DasboardCurrentTasksWidget = (function() {
-  var sortFilter = '.curent-tasks-filters .sort-filter';
-  var statusFilter = '.curent-tasks-filters .view-filter';
-  var projectFilter = '.curent-tasks-filters .project-filter';
-  var experimentFilter = '.curent-tasks-filters .experiment-filter';
+  var sortFilter = '.current-tasks-filters .sort-filter';
+  var statusFilter = '.current-tasks-filters .view-filter';
+  var projectFilter = '.current-tasks-filters .project-filter';
+  var experimentFilter = '.current-tasks-filters .experiment-filter';
 
   function generateTasksListHtml(json, container) {
     $.each(json.data, (i, task) => {
@@ -25,6 +25,19 @@ var DasboardCurrentTasksWidget = (function() {
     });
   }
 
+  function getDefaultStatusValues() {
+    // Select uncompleted status values
+    var values = [];
+    $(statusFilter).find('option').each(function(_, option) {
+      if ($(option).data('completionConsequence')) {
+        return false;
+      }
+      values.push(option.value);
+      return this;
+    });
+    return values;
+  }
+
   function initInfiniteScroll() {
     InfiniteScroll.init('.current-tasks-list', {
       url: $('.current-tasks-list').data('tasksListUrl'),
@@ -46,7 +59,53 @@ var DasboardCurrentTasksWidget = (function() {
   function filtersEnabled() {
     return dropdownSelector.getValues(experimentFilter)
            || dropdownSelector.getValues(projectFilter)
-           || $('.current-tasks-widget .task-search-field').val().length > 0
+           || $('.current-tasks-widget .task-search-field').val().length > 0;
+  }
+
+  function filterStateSave() {
+    var teamId = $('.current-tasks-filters').data('team-id');
+    var filterState = {
+      sort: dropdownSelector.getValues(sortFilter),
+      statuses: dropdownSelector.getValues(statusFilter),
+      project_id: dropdownSelector.getData(projectFilter),
+      experiment_id: dropdownSelector.getData(experimentFilter),
+      mode: $('.current-tasks-navbar .active').data('mode')
+    };
+
+    if (filterState) {
+      localStorage.setItem('current_tasks_filters_per_team/' + teamId, JSON.stringify(filterState));
+    }
+  }
+
+  function filterStateLoad() {
+    var teamId = $('.current-tasks-filters').data('team-id');
+    var filterState = localStorage.getItem('current_tasks_filters_per_team/' + teamId);
+    var parsedFilterState;
+    var allStatusValues = $.map($(statusFilter).find('option'), function(option) {
+      return option.value;
+    });
+
+    if (filterState) {
+      try {
+        parsedFilterState = JSON.parse(filterState);
+        dropdownSelector.selectValues(sortFilter, parsedFilterState.sort);
+        // Check if saved statuses are valid
+        if (parsedFilterState.statuses.every(status => allStatusValues.includes(status))) {
+          dropdownSelector.selectValues(statusFilter, parsedFilterState.statuses);
+        } else {
+          dropdownSelector.selectValues(statusFilter, getDefaultStatusValues());
+        }
+        dropdownSelector.setData(projectFilter, parsedFilterState.project_id);
+        dropdownSelector.setData(experimentFilter, parsedFilterState.experiment_id);
+        // Select saved navbar state
+        $('.current-tasks-navbar .navbar-link').removeClass('active');
+        $('.current-tasks-navbar').find(`[data-mode='${parsedFilterState.mode}']`).addClass('active');
+      } catch (e) {
+        dropdownSelector.selectValues(statusFilter, getDefaultStatusValues());
+      }
+    } else {
+      dropdownSelector.selectValues(statusFilter, getDefaultStatusValues());
+    }
   }
 
   function loadCurrentTasksList(newList) {
@@ -79,11 +138,12 @@ var DasboardCurrentTasksWidget = (function() {
   }
 
   function initFilters() {
-    $('.curent-tasks-filters .clear-button').click((e) => {
+    $('.current-tasks-filters .clear-button').click((e) => {
       e.stopPropagation();
       e.preventDefault();
-      dropdownSelector.selectValue(sortFilter, 'date_asc');
-      dropdownSelector.selectValue(viewFilter, 'uncompleted');
+
+      dropdownSelector.selectValues(sortFilter, 'due_date');
+      dropdownSelector.selectValues(statusFilter, getDefaultStatusValues());
       dropdownSelector.clearData(projectFilter);
       dropdownSelector.clearData(experimentFilter);
     });
@@ -133,7 +193,7 @@ var DasboardCurrentTasksWidget = (function() {
       }
     });
 
-    $('.curent-tasks-filters').click((e) => {
+    $('.current-tasks-filters').click((e) => {
       // Prevent filter window close
       e.stopPropagation();
       e.preventDefault();
@@ -143,15 +203,17 @@ var DasboardCurrentTasksWidget = (function() {
       dropdownSelector.closeDropdown(experimentFilter);
     });
 
-    $('.curent-tasks-filters .apply-filters').click((e) => {
-      $('.curent-tasks-filters').dropdown('toggle');
+    $('.current-tasks-filters .apply-filters').click((e) => {
+      $('.current-tasks-filters').dropdown('toggle');
       e.stopPropagation();
       e.preventDefault();
       loadCurrentTasksList(true);
+      filterStateSave();
     });
 
     $('.filter-container').on('hide.bs.dropdown', () => {
       loadCurrentTasksList(true);
+      filterStateSave();
       $('.current-tasks-list').removeClass('disabled');
     });
 
@@ -165,6 +227,7 @@ var DasboardCurrentTasksWidget = (function() {
       $(this).parent().find('.navbar-link').removeClass('active');
       $(this).addClass('active');
       loadCurrentTasksList(true);
+      filterStateSave();
     });
   }
 
@@ -174,13 +237,13 @@ var DasboardCurrentTasksWidget = (function() {
     });
   }
 
-
   return {
     init: () => {
       if ($('.current-tasks-widget').length) {
         initNavbar();
         initFilters();
         initSearch();
+        filterStateLoad();
         loadCurrentTasksList();
         initInfiniteScroll();
       }

app/assets/javascripts/sitewide/dropdown_selector.js

@@ -91,6 +91,9 @@ var dropdownSelector = (function() {
 
   // Get data in JSON from field
   function getCurrentData(container) {
+    if (!container.find('.data-field').val()) {
+      return '';
+    }
     return JSON.parse(container.find('.data-field').val());
   }
 
@@ -860,17 +863,20 @@ var dropdownSelector = (function() {
       return this;
     },
 
-    // Select value
-    selectValue: function(selector, value) {
-      var $selector;
+    // Select values
+    selectValues: function(selector, values) {
+      var $selector = $(selector);
       var option;
+      var valuesArray = [].concat(values);
+      var options = [];
 
-      if ($(selector).length === 0) return false;
-
-      $selector = $(selector);
-      option = $selector.find(`option[value="${value}"]`)[0];
-      setData($selector, [convertOptionToJson(option)]);
+      if ($selector.length === 0) return false;
 
+      valuesArray.forEach(function(value) {
+        option = $selector.find(`option[value="${value}"]`)[0];
+        options.push(convertOptionToJson(option));
+      });
+      setData($selector, options);
       return this;
     },
 

app/assets/stylesheets/dashboard/current_tasks.scss

@@ -66,7 +66,7 @@
     margin-right: 4px;
     width: 36px;
 
-    .curent-tasks-filters {
+    .current-tasks-filters {
       padding: 0;
       width: 230px;
 

app/views/dashboards/_current_tasks.html.erb

@@ -4,7 +4,7 @@
     <div class="actions-container">
       <div class="filter-container dropdown">
         <div class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></div>
-        <div class="dropdown-menu curent-tasks-filters" role="menu">
+        <div class="dropdown-menu current-tasks-filters" role="menu" data-team-id="<%= current_team.id %>">
           <div class="header">
             <div class="title"><%= t("dashboard.current_tasks.filter.title") %></div>
             <div class="btn btn-light clear-button"><i class="fas fa-times-circle"></i><%= t("dashboard.current_tasks.filter.clear") %></div>
@@ -29,7 +29,10 @@
             >
               <% MyModuleStatusFlow.find_each do |status_flow| %>
                 <% status_flow.my_module_statuses.each do |status| %>
-                  <option value="<%= status.id %>" <%= 'data-selected=true' unless status.final_status? %> ><%= status.name %></option>
+                  <option value="<%= status.id %>"
+                          data-completion-consequence="<%= status.my_module_status_consequences.where(type: "MyModuleStatusConsequences::Completion").any? %>">
+                    <%= status.name %>
+                  </option>
                 <% end %>
               <% end %>
             </select>