Add search to current task widget

app/assets/javascripts/dashboard/current_tasks.js

@@ -6,7 +6,7 @@ var DasboardCurrentTasksWidget = (function() {
   var viewFilter = '.curent-tasks-filters .view-filter';
   var projectFilter = '.curent-tasks-filters .project-filter';
   var experimentFilter = '.curent-tasks-filters .experiment-filter';
-  var emptyState = `<div class="no-tasks">
+  var emptyState = `<div class="no-tasks ">
                       <p class="text-1">${ I18n.t('dashboard.current_tasks.no_tasks.text_1') }</p>
                       <p class="text-2">${ I18n.t('dashboard.current_tasks.no_tasks.text_2') }</p>
                       <i class="fas fa-angle-double-down"></i>
@@ -19,18 +19,16 @@ var DasboardCurrentTasksWidget = (function() {
       experiment_id: dropdownSelector.getValues(experimentFilter),
       sort: dropdownSelector.getValues(sortFilter),
       view: dropdownSelector.getValues(viewFilter),
+      query: $('.current-tasks-widget .task-search-field').val(),
       mode: $('.current-tasks-navbar .active').data('mode')
     };
     animateSpinner($currentTasksList, true);
     $.get($currentTasksList.data('tasksListUrl'), params, function(data) {
+      $currentTasksList.find('.current-task-item, .no-tasks').remove();
       // Toggle empty state
       if (data.tasks_list.length === 0) {
         $currentTasksList.append(emptyState);
-      } else {
-        $currentTasksList.find('.no-tasks').remove();
       }
-      // Clear the list
-      $currentTasksList.find('.current-task-item').remove();
       $.each(data.tasks_list, (i, task) => {
         var currentTaskItem;
         var stepsPercentage = task.steps_state.percentage + '%';
@@ -152,11 +150,24 @@ var DasboardCurrentTasksWidget = (function() {
     });
   }
 
+  function initSearch() {
+    $('.current-tasks-widget').on('change', '.task-search-field', () => {
+      loadCurrentTasksList();
+    }).on('keydown', '.task-search-field', function(e) {
+      if (e.keyCode === 13) {
+        loadCurrentTasksList();
+        $(this).blur();
+      }
+    });
+  }
+
+
   return {
     init: () => {
       if ($('.current-tasks-widget').length) {
         initNavbar();
         initFilters();
+        initSearch();
         loadCurrentTasksList();
       }
     }

app/assets/stylesheets/dashboard/current_tasks.scss

@@ -15,6 +15,52 @@
     padding-left: 10px;
   }
 
+  .search-container {
+    flex-basis: 36px;
+
+    .fa-search {
+      animation-timing-function: $timing-function-sharp;
+      color: $color-alto;
+      transition: .3s;
+      width: 26px;
+    }
+
+    .task-search-field {
+      background: transparent;
+      border: $border-default;
+      padding-left: 36px;
+      position: relative;
+      width: 200px;
+      z-index: 2;
+
+      &:placeholder-shown {
+        border: $border-transparent;
+        cursor: pointer;
+        width: 36px;
+
+        + .fa-search {
+          color: $color-volcano;
+        }
+      }
+
+      &:hover {
+        border: $border-default;
+      }
+
+      &:focus {
+        border: $border-focus;
+        cursor: auto;
+        width: 200px;
+
+        + .fa-search {
+          color: $color-alto;
+        }
+      }
+
+
+    }
+  }
+
   .filter-container {
     height: 36px;
     margin-right: 4px;
@@ -67,6 +113,7 @@
     }
   }
 
+
   .no-tasks {
     color: $color-alto;
     margin-left: 8px;
@@ -109,7 +156,7 @@
         line-height: 14px;
       }
 
-      .item-row{
+      .item-row {
         display: flex;
 
         .task-name {

app/assets/stylesheets/shared_styles/elements/input_fields.scss

@@ -30,6 +30,10 @@
     &:disabled {
       background: transparent;
     }
+
+    &::placeholder {
+      color: $color-alto;
+    }
   }
 
   .fas {

app/controllers/dashboard/current_tasks_controller.rb

@@ -20,6 +20,7 @@ module Dashboard
         tasks = tasks.left_outer_joins(:user_my_modules).where('user_my_modules.user_id': current_user.id)
       end
       tasks = tasks.where('my_modules.state': task_filters[:view])
+                   .search_by_name(current_user, current_team, task_filters[:query])
 
       case task_filters[:sort]
       when 'date_desc'
@@ -83,7 +84,7 @@ module Dashboard
     private
 
     def task_filters
-      params.permit(:project_id, :experiment_id, :mode, :view, :sort)
+      params.permit(:project_id, :experiment_id, :mode, :view, :sort, :query)
     end
 
     def load_project

app/views/dashboards/_current_tasks.html.erb

@@ -45,7 +45,10 @@
         </div>
       </div>
       <div class="search-container">
-        <div class="btn btn-light icon-btn search-button"><i class="fas fa-search"></i></div>
+        <div class="sci-input-container left-icon ">
+          <input type="text" class="sci-input-field task-search-field" placeholder="<%= t("dashboard.current_tasks.search") %>"></input>
+          <i class="fas fa-search"></i>
+        </div>
       </div>
     </div>
 

config/locales/dashboard/en.yml

@@ -2,6 +2,7 @@ en:
   dashboard:
     current_tasks:
       title: "Current tasks"
+      search: "Search tasks"
       navbar:
         assigned: "Assigned to me"
         all: "All"