Merge pull request #2767 from aignatov-bio/ai-sci-4899-add-new-statuses-filters-on-dashboard

Add statuses to dashboard current task filters [SCI-4899]

app/assets/javascripts/dashboard/current_tasks.js

@@ -3,7 +3,7 @@
 
 var DasboardCurrentTasksWidget = (function() {
   var sortFilter = '.curent-tasks-filters .sort-filter';
-  var viewFilter = '.curent-tasks-filters .view-filter';
+  var statusFilter = '.curent-tasks-filters .view-filter';
   var projectFilter = '.curent-tasks-filters .project-filter';
   var experimentFilter = '.curent-tasks-filters .experiment-filter';
 
@@ -36,7 +36,7 @@ var DasboardCurrentTasksWidget = (function() {
         params.project_id = dropdownSelector.getValues(projectFilter);
         params.experiment_id = dropdownSelector.getValues(experimentFilter);
         params.sort = dropdownSelector.getValues(sortFilter);
-        params.view = dropdownSelector.getValues(viewFilter);
+        params.statuses = dropdownSelector.getValues(statusFilter);
         params.query = $('.current-tasks-widget .task-search-field').val();
         params.mode = $('.current-tasks-navbar .active').data('mode');
         return params;
@@ -48,7 +48,7 @@ var DasboardCurrentTasksWidget = (function() {
     return dropdownSelector.getValues(experimentFilter)
            || dropdownSelector.getValues(projectFilter)
            || $('.current-tasks-widget .task-search-field').val().length > 0
-           || dropdownSelector.getValues(viewFilter) !== 'uncompleted';
+           || dropdownSelector.getValues(statusFilter) !== 'uncompleted';
   }
 
   function loadCurrentTasksList(newList) {
@@ -57,7 +57,7 @@ var DasboardCurrentTasksWidget = (function() {
       project_id: dropdownSelector.getValues(projectFilter),
       experiment_id: dropdownSelector.getValues(experimentFilter),
       sort: dropdownSelector.getValues(sortFilter),
-      view: dropdownSelector.getValues(viewFilter),
+      statuses: dropdownSelector.getValues(statusFilter),
       query: $('.current-tasks-widget .task-search-field').val(),
       mode: $('.current-tasks-navbar .active').data('mode')
     };
@@ -85,7 +85,6 @@ var DasboardCurrentTasksWidget = (function() {
       e.stopPropagation();
       e.preventDefault();
       dropdownSelector.selectValue(sortFilter, 'date_asc');
-      dropdownSelector.selectValue(viewFilter, 'uncompleted');
       dropdownSelector.clearData(projectFilter);
       dropdownSelector.clearData(experimentFilter);
     });
@@ -98,12 +97,9 @@ var DasboardCurrentTasksWidget = (function() {
       disableSearch: true
     });
 
-    dropdownSelector.init(viewFilter, {
+    dropdownSelector.init(statusFilter, {
-      noEmptyOption: true,
-      singleSelect: true,
-      closeOnSelect: true,
       selectAppearance: 'simple',
-      disableSearch: true
+      optionClass: 'checkbox-icon'
     });
 
     dropdownSelector.init(projectFilter, {
@@ -143,7 +139,7 @@ var DasboardCurrentTasksWidget = (function() {
       e.stopPropagation();
       e.preventDefault();
       dropdownSelector.closeDropdown(sortFilter);
-      dropdownSelector.closeDropdown(viewFilter);
+      dropdownSelector.closeDropdown(statusFilter);
       dropdownSelector.closeDropdown(projectFilter);
       dropdownSelector.closeDropdown(experimentFilter);
     });

app/assets/javascripts/sitewide/dropdown_selector.js

@@ -179,9 +179,20 @@ var dropdownSelector = (function() {
   }
 
   // Add selected option to value
-  function addSelectedOption(selector, container) {
+  function addSelectedOptions(selector, container) {
-    setData(selector, [convertOptionToJson($(selector).find('option:selected')[0])], true);
+    var selectedOptions = [];
+    $.each($(selector).find('option:selected'), function(i, option) {
+      selectedOptions.push(convertOptionToJson(option));
+      if (selector.data('config').singleSelect) return false;
+      return true;
+    });
+
+    if (!selectedOptions.length) return false;
+
+    setData(selector, selectedOptions, true);
+    return true;
   }
+  //
 
   // Prepare custom dropdown icon
   function prepareCustomDropdownIcon(config) {
@@ -422,8 +433,8 @@ var dropdownSelector = (function() {
     }
 
     // Select default value
-    if (config.noEmptyOption && config.singleSelect) {
+    if (!selectElement.data('ajax-url')) {
-      addSelectedOption(selectElement, dropdownContainer);
+      addSelectedOptions(selectElement, dropdownContainer);
     }
 
     // Enable simple mode for dropdown selector

app/controllers/dashboard/current_tasks_controller.rb

@@ -25,7 +25,7 @@ module Dashboard
         tasks = tasks.left_outer_joins(:user_my_modules).where(user_my_modules: { user_id: current_user.id })
       end
 
-      tasks = filter_by_state(tasks)
+      #tasks = filter_by_state(tasks)
 
       case task_filters[:sort]
       when 'date_desc'

app/views/dashboards/_current_tasks.html.erb

@@ -19,9 +19,18 @@
           </div>
           <div class="select-block">
             <label><%= t("dashboard.current_tasks.filter.display") %></label>
-            <select class="view-filter">
+            <select class="view-filter"
-              <option value="uncompleted" ><%= t("dashboard.current_tasks.filter.uncompleted_tasks") %></option>
+                    data-combine-tags="true"
-              <option value="completed" ><%= t("dashboard.current_tasks.filter.completed_tasks") %></option>
+                    data-placeholder="<%= t("dashboard.current_tasks.filter.statuses.placeholder") %>"
+                    data-select-multiple-all-selected="<%= t("dashboard.current_tasks.filter.statuses.all_selected") %>"
+                    data-select-multiple-name="<%= t("dashboard.current_tasks.filter.statuses.selected") %>"
+                    multiple
+            >
+              <% MyModuleStatusFlow.find_each do |status_flow| %>
+                <% status_flow.my_module_statuses.each do |status| %>
+                  <option value="<%= status.id %>" selected><%= status.name %></option>
+                <% end %>
+              <% end %>
             </select>
           </div>
           <div class="select-block">

config/locales/dashboard/en.yml

@@ -13,7 +13,11 @@ en:
         date_asc: "Due Date"
         atoz: "From A to Z"
         ztoa: "From Z to A"
-        display: "Display"
+        display: "Display statuses"
+        statuses:
+          placeholder: "Select statuses"
+          all_selected: "All selected"
+          selected: "selected"
         uncompleted_tasks: "Tasks in progress"
         completed_tasks: "Tasks completed"
         project: "Project"