Merge branch 'features/dashboard' into ml-sci-4354

app/assets/javascripts/dashboard/current_tasks.js

@@ -70,18 +70,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.data.length === 0) {
         $currentTasksList.append(emptyState);
-      } else {
-        $currentTasksList.find('.no-tasks').remove();
       }
-      // Clear the list
-      $currentTasksList.find('.current-task-item').remove();
       generateTasksListHtml(data, $currentTasksList);
       PerfectSb().update_all();
       if (newList) InfiniteScroll.resetScroll('.current-tasks-list');
@@ -175,11 +173,19 @@ var DasboardCurrentTasksWidget = (function() {
     });
   }
 
+  function initSearch() {
+    $('.current-tasks-widget').on('change', '.task-search-field', () => {
+      loadCurrentTasksList();
+    });
+  }
+
+
   return {
     init: () => {
       if ($('.current-tasks-widget').length) {
         initNavbar();
         initFilters();
+        initSearch();
         loadCurrentTasksList();
         initInfiniteScroll();
       }

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;
@@ -109,7 +155,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'
@@ -80,7 +81,7 @@ module Dashboard
     private
 
     def task_filters
-      params.permit(:project_id, :experiment_id, :mode, :view, :sort, :page)
+      params.permit(:project_id, :experiment_id, :mode, :view, :sort, :query, :page)
     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"