From d9bfd8c28e493982f84d1c76cbca94d5d5ac24c4 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Tue, 3 Mar 2020 09:50:44 +0100 Subject: [PATCH] Add search to current task widget --- .../javascripts/dashboard/current_tasks.js | 21 ++++++-- .../stylesheets/dashboard/current_tasks.scss | 49 ++++++++++++++++++- .../shared_styles/elements/input_fields.scss | 4 ++ .../dashboard/current_tasks_controller.rb | 3 +- app/views/dashboards/_current_tasks.html.erb | 5 +- config/locales/dashboard/en.yml | 1 + 6 files changed, 75 insertions(+), 8 deletions(-) diff --git a/app/assets/javascripts/dashboard/current_tasks.js b/app/assets/javascripts/dashboard/current_tasks.js index 1ad0380b9..aef452e7b 100644 --- a/app/assets/javascripts/dashboard/current_tasks.js +++ b/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 = `
+ var emptyState = `

${ I18n.t('dashboard.current_tasks.no_tasks.text_1') }

${ I18n.t('dashboard.current_tasks.no_tasks.text_2') }

@@ -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(); } } diff --git a/app/assets/stylesheets/dashboard/current_tasks.scss b/app/assets/stylesheets/dashboard/current_tasks.scss index c309649fc..bb932979b 100644 --- a/app/assets/stylesheets/dashboard/current_tasks.scss +++ b/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 { diff --git a/app/assets/stylesheets/shared_styles/elements/input_fields.scss b/app/assets/stylesheets/shared_styles/elements/input_fields.scss index 2114c9a32..368883d14 100644 --- a/app/assets/stylesheets/shared_styles/elements/input_fields.scss +++ b/app/assets/stylesheets/shared_styles/elements/input_fields.scss @@ -30,6 +30,10 @@ &:disabled { background: transparent; } + + &::placeholder { + color: $color-alto; + } } .fas { diff --git a/app/controllers/dashboard/current_tasks_controller.rb b/app/controllers/dashboard/current_tasks_controller.rb index 340b732c4..885921576 100644 --- a/app/controllers/dashboard/current_tasks_controller.rb +++ b/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 diff --git a/app/views/dashboards/_current_tasks.html.erb b/app/views/dashboards/_current_tasks.html.erb index 08796cdc1..f3a6165b2 100644 --- a/app/views/dashboards/_current_tasks.html.erb +++ b/app/views/dashboards/_current_tasks.html.erb @@ -45,7 +45,10 @@
-
+
+ "> + +
diff --git a/config/locales/dashboard/en.yml b/config/locales/dashboard/en.yml index cbe445fee..60f4f0a04 100644 --- a/config/locales/dashboard/en.yml +++ b/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"