Finished filters

app/assets/javascripts/dashboard/current_tasks.js

@@ -1,31 +1,71 @@
 /* global dropdownSelector */
+/* eslint-disable no-param-reassign */
 
 var DasboardCurrentTasksWidget = (function() {
   function initFilters() {
-    dropdownSelector.init('.curent-tasks-filters .sort-filter', {
+    var sortFilter = '.curent-tasks-filters .sort-filter';
+    var viewFilter = '.curent-tasks-filters .view-filter';
+    var projectFilter = '.curent-tasks-filters .project-filter';
+    var experimentFilter = '.curent-tasks-filters .experiment-filter';
+
+    $('.curent-tasks-filters .clear-button').click(() => {
+      dropdownSelector.clearData(projectFilter);
+      dropdownSelector.clearData(experimentFilter);
+    });
+
+    dropdownSelector.init(sortFilter, {
       noEmptyOption: true,
       singleSelect: true,
       closeOnSelect: true,
       selectAppearance: 'simple'
     });
 
-    dropdownSelector.init('.curent-tasks-filters .view-filter', {
+    dropdownSelector.init(viewFilter, {
       noEmptyOption: true,
       singleSelect: true,
       closeOnSelect: true,
       selectAppearance: 'simple'
     });
 
-    dropdownSelector.init('.curent-tasks-filters .project-filter');
-    dropdownSelector.init('.curent-tasks-filters .experiment-filter');
+    dropdownSelector.init(projectFilter, {
+      singleSelect: true,
+      closeOnSelect: true,
+      emptyOptionAjax: true,
+      selectAppearance: 'simple',
+      ajaxParams: (params) => {
+        params.mode = 'team';
+        return params;
+      },
+      onChange: () => {
+        var selectedValue = dropdownSelector.getValues(projectFilter);
+        if (selectedValue > 0) {
+          dropdownSelector.enableSelector(experimentFilter);
+        } else {
+          dropdownSelector.disableSelector(experimentFilter);
+        }
+        dropdownSelector.clearData(experimentFilter);
+      }
+    });
+    dropdownSelector.init(experimentFilter, {
+      singleSelect: true,
+      closeOnSelect: true,
+      emptyOptionAjax: true,
+      selectAppearance: 'simple',
+      ajaxParams: (params) => {
+        params.mode = 'team';
+        params.project_id = dropdownSelector.getValues(projectFilter);
+        return params;
+      }
+    });
 
     $('.curent-tasks-filters').click((e) => {
+      // Prevent filter window close
       e.stopPropagation();
       e.preventDefault();
-      dropdownSelector.closeDropdown('.curent-tasks-filters .sort-filter');
-      dropdownSelector.closeDropdown('.curent-tasks-filters .view-filter');
-      dropdownSelector.closeDropdown('.curent-tasks-filters .project-filter');
-      dropdownSelector.closeDropdown('.curent-tasks-filters .experiment-filter');
+      dropdownSelector.closeDropdown(sortFilter);
+      dropdownSelector.closeDropdown(viewFilter);
+      dropdownSelector.closeDropdown(projectFilter);
+      dropdownSelector.closeDropdown(experimentFilter);
     });
   }
 

app/assets/javascripts/sitewide/dropdown_selector.js

@@ -506,7 +506,7 @@ var dropdownSelector = (function() {
     container.find('.dropdown-group, .dropdown-option, .empty-dropdown, .delimiter').remove();
     if (!data) return;
 
-    if (data.length > 0) {
+    if (data.length > 0 && !(data.length === 1 && data[0].value === '')) {
       // If we use select-by-group option we need first draw groups
       if (selector.data('select-by-group')) {
         $.each(data, function(gi, group) {
@@ -681,7 +681,7 @@ var dropdownSelector = (function() {
     // If we have alteast one tag, we need to remove placeholder from search field
     if (selector.data('config').selectAppearance === 'simple') {
       let selectedLabel = container.find('.tag-label');
-      container.find('.search-field').attr('placeholder',
+      container.find('.search-field').prop('placeholder',
         selectedLabel.length && selectedLabel.text().trim() !== '' ? selectedLabel.text().trim() : selector.data('placeholder'));
     } else {
       searchFieldValue.attr('placeholder',
@@ -741,14 +741,14 @@ var dropdownSelector = (function() {
       ajaxParams = customParams ? customParams(defaultParams) : defaultParams;
 
       $.get(selector.data('ajax-url'), ajaxParams, (data) => {
-        var optionsAjax = data;
+        var optionsAjax = data.constructor === Array ? data : [];
         if (selector.data('config').emptyOptionAjax) {
           optionsAjax = [{
-            label: '',
+            label: selector.data('placeholder') || '',
             value: '',
             group: null,
             params: {}
-          }].concat(data);
+          }].concat(optionsAjax);
         }
         loadData(selector, container, optionsAjax);
         PerfectSb().update_all();

app/assets/stylesheets/dashboard/current_tasks.scss

@@ -1,3 +1,6 @@
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
+
 .dashboard-container .current-tasks-widget {
   grid-column: 1 / span 9;
   grid-row: 1 / span 6;
@@ -5,8 +8,8 @@
   .filter-container {
     align-items: center;
     display: flex;
-    justify-content: center;
     height: 30px;
+    justify-content: center;
     width: 30px;
 
     .fa-filter {
@@ -53,8 +56,8 @@
         align-items: center;
         border-top: $border-default;
         display: flex;
-        justify-content: center;
         height: 68px;
+        justify-content: center;
         position: relative;
         width: 100%;
       }

app/assets/stylesheets/shared/dropdown_selector.scss

@@ -96,6 +96,10 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         width: auto;
+
+        &[data-ds-tag-id=""] {
+          opacity: .7;
+        }
       }
 
       .fas {
@@ -165,11 +169,18 @@
         background: $color-concrete;
       }
 
+      &[data-value=""] {
+        opacity: .7;
+      }
+
       &.select {
         background: $brand-primary;
         color: $color-white;
+        opacity: 1;
       }
 
+
+
     }
 
     .checkbox-icon {
@@ -269,6 +280,10 @@
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+
+          &[data-ds-tag-id=""] {
+            opacity: .7;
+          }
         }
 
         .fa-times {

app/controllers/dashboard/current_tasks_controller.rb

@@ -2,7 +2,31 @@
 
 module Dashboard
   class CurrentTasksController < ApplicationController
-    def show
+    include InputSanitizeHelper
+
+    def show; end
+
+    def project_filter
+      result = current_team.projects.search(current_user, false, params[:query], 1, current_team).select(:id, :name)
+      unless params[:mode] == 'team'
+        result = result.where(id: current_user.my_modules.joins(:experiment)
+          .group(:project_id).select(:project_id).pluck(:project_id))
+      end
+      render json: result.map { |i| { value: i.id, label: escape_input(i.name) } }, status: :ok
+    end
+
+    def experiment_filter
+      project = current_team.projects.find_by(id: params[:project_id])
+      unless project
+        render json: []
+        return false
+      end
+      result = project.experiments.search(current_user, false, params[:query], 1, current_team).select(:id, :name)
+      unless params[:mode] == 'team'
+        result = result.where(id: current_user.my_modules
+          .group(:experiment_id).select(:experiment_id).pluck(:experiment_id))
+      end
+      render json: result.map { |i| { value: i.id, label: escape_input(i.name) } }, status: :ok
     end
   end
 end

app/views/dashboards/_current_tasks.html.erb

@@ -4,7 +4,7 @@
     <div class="dropdown-menu curent-tasks-filters" role="menu">
       <div class="header">
         <div class="title">Filters</div>
-        <div class="btn btn-light"><i class="fas fa-times-circle"></i>Clear</div>
+        <div class="btn btn-light clear-button"><i class="fas fa-times-circle"></i>Clear</div>
       </div>
       <div class="select-block">
         <label>Sort by</label>
@@ -24,11 +24,16 @@
       </div>
       <div class="select-block">
         <label>Project</label>
-        <select class="project-filter"></select>
+        <select class="project-filter"
+                data-ajax-url="<%= project_filter_dashboard_current_tasks_path %>"
+                data-placeholder="Select Project"></select>
       </div>
       <div class="select-block">
         <label>Experiment</label>
-        <select class="experiment-filter"></select>
+        <select class="experiment-filter"
+                data-ajax-url="<%= experiment_filter_dashboard_current_tasks_path %>"
+                data-disable-on-load="true"
+                data-placeholder="Select Experiment"></select>
       </div>
       <div class="footer">
         <div class="btn btn-primary">Apply</div>

config/routes.rb

@@ -242,6 +242,8 @@ Rails.application.routes.draw do
 
     resource :dashboard, only: :show do
       resource :current_tasks, module: 'dashboard', only: :show do
+        get :project_filter
+        get :experiment_filter
       end
     end