Add front-end part

app/assets/javascripts/application.js.erb

@@ -45,6 +45,7 @@
 //= require marvinjslauncher
 //= require_tree ./repositories/renderers
 //= require_directory ./repositories/validators
+//= require_directory ./dashboard
 //= require_directory ./sitewide
 //= require turbolinks
 

app/assets/javascripts/dashboard/current_tasks.js

@@ -0,0 +1,43 @@
+/* global dropdownSelector */
+
+var DasboardCurrentTasksWidget = (function() {
+  function initFilters() {
+    dropdownSelector.init('.curent-tasks-filters .sort-filter', {
+      noEmptyOption: true,
+      singleSelect: true,
+      closeOnSelect: true,
+      selectAppearance: 'simple'
+    });
+
+    dropdownSelector.init('.curent-tasks-filters .view-filter', {
+      noEmptyOption: true,
+      singleSelect: true,
+      closeOnSelect: true,
+      selectAppearance: 'simple'
+    });
+
+    dropdownSelector.init('.curent-tasks-filters .project-filter');
+    dropdownSelector.init('.curent-tasks-filters .experiment-filter');
+
+    $('.curent-tasks-filters').click((e) => {
+      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');
+    });
+  }
+
+  return {
+    init: () => {
+      if ($('.current-tasks-widget').length) {
+        initFilters();
+      }
+    }
+  };
+}());
+
+$(document).on('turbolinks:load', function() {
+  DasboardCurrentTasksWidget.init();
+});

app/assets/stylesheets/dashboard/current_tasks.scss

@@ -1,6 +1,65 @@
 .dashboard-container .current-tasks-widget {
   grid-column: 1 / span 9;
   grid-row: 1 / span 6;
+
+  .filter-container {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    height: 30px;
+    width: 30px;
+
+    .fa-filter {
+      cursor: pointer;
+      font-size: $font-size-h2;
+    }
+
+    .curent-tasks-filters {
+      padding: 0;
+      width: 230px;
+
+      .header {
+        align-items: center;
+        border-bottom: $border-default;
+        display: flex;
+        height: 44px;
+        margin-bottom: 16px;
+        padding: 0  5px 0 16px;
+
+        .title {
+          @include font-h2;
+          flex-grow: 1;
+          user-select: none;
+
+        }
+      }
+
+      .select-block {
+        display: inline-block;
+        padding: 0 16px 16px;
+        position: relative;
+        width: 100%;
+
+        label {
+          @include font-small;
+          display: inline-block;
+          font-weight: bold;
+          margin-bottom: 5px;
+          user-select: none;
+        }
+      }
+
+      .footer {
+        align-items: center;
+        border-top: $border-default;
+        display: flex;
+        justify-content: center;
+        height: 68px;
+        position: relative;
+        width: 100%;
+      }
+    }
+  }
 }
 
 @media (max-width: 1000px) {

app/assets/stylesheets/shared/dropdown_selector.scss

@@ -40,6 +40,7 @@
     }
 
     .search-field {
+      @include font-button;
       border: 0;
       flex-basis: 0;
       flex-grow: 2000;
@@ -108,6 +109,7 @@
   }
 
   .dropdown-container {
+    @include font-button;
     background: $color-white;
     border: 1px solid $color-alto;
     border-radius: 0 0 4px 4px;

app/controllers/dashboard/current_tasks_controller.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Dashboard
+  class CurrentTasksController < ApplicationController
+    def show
+    end
+  end
+end

app/views/dashboards/_current_tasks.html.erb

@@ -1,2 +1,38 @@
 <div class="current-tasks-widget basic-widget">
+  <div class="filter-container dropdown">
+    <span data-toggle="dropdown" class="fas fa-filter"></span>
+    <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>
+      <div class="select-block">
+        <label>Sort by</label>
+        <select class="sort-filter">
+          <option value="date_asc" >Due Date Ascending</option>
+          <option value="date_desc" >Due Date Descending</option>
+          <option value="atoz" >From A to Z</option>
+          <option value="ztoa" >From Z to A</option>
+        </select>
+      </div>
+      <div class="select-block">
+        <label>Display</label>
+        <select class="view-filter">
+          <option value="active" >Only active tasks</option>
+          <option value="completed" >Only completed and locked tasks</option>
+        </select>
+      </div>
+      <div class="select-block">
+        <label>Project</label>
+        <select class="project-filter"></select>
+      </div>
+      <div class="select-block">
+        <label>Experiment</label>
+        <select class="experiment-filter"></select>
+      </div>
+      <div class="footer">
+        <div class="btn btn-primary">Apply</div>
+      </div>
+    </div>
+  </div>
 </div>

config/routes.rb

@@ -241,6 +241,8 @@ Rails.application.routes.draw do
     post 'reports/destroy', to: 'reports#destroy'
 
     resource :dashboard, only: :show do
+      resource :current_tasks, module: 'dashboard', only: :show do
+      end
     end
 
     resources :projects, except: [:new, :destroy] do