Refactor backend, add empty state and fix some small scc changes

app/assets/javascripts/dashboard/current_tasks.js

@@ -1,4 +1,4 @@
-/* global dropdownSelector I18n animateSpinner */
+/* global dropdownSelector I18n animateSpinner PerfectSb */
 /* eslint-disable no-param-reassign */
 
 var DasboardCurrentTasksWidget = (function() {
@@ -6,6 +6,11 @@ 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">
+                      <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>
+                    </div>`;
 
   function loadCurrentTasksList() {
     var $currentTasksList = $('.current-tasks-list');
@@ -18,6 +23,12 @@ var DasboardCurrentTasksWidget = (function() {
     };
     animateSpinner($currentTasksList, true);
     $.get($currentTasksList.attr('data-tasks-list-url'), params, function(data) {
+      // 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) => {
@@ -50,6 +61,7 @@ var DasboardCurrentTasksWidget = (function() {
                            </a>`;
         $currentTasksList.append(currentTaskItem);
       });
+      PerfectSb().update_all();
       animateSpinner($currentTasksList, false);
     });
   }

app/assets/stylesheets/dashboard/current_tasks.scss

@@ -66,12 +66,35 @@
     }
   }
 
+  .no-tasks {
+    color: $color-alto;
+    margin-left: 8px;
+    margin-top: 16px;
+
+    .text-1 {
+      font-size: 24px;
+      font-weight: bold;
+    }
+
+    .text-2 {
+      color: $color-silver-chalice;
+      font-size: 16px;
+    }
+
+    .fas {
+      font-size: 32px;
+      margin-left: 100px;
+      margin-top: 50px;
+    }
+  }
+
   .current-tasks-list {
     display: flex;
     flex-direction: column;
-    height: 293px;
+    height: 100%;
     overflow-y: auto;
     padding: 0 16px;
+    position: relative;
 
     .current-task-item {
       border-bottom: $border-tertiary;
@@ -96,6 +119,7 @@
 
         .task-due-date {
           flex-basis: 260px;
+          flex-shrink: 0;
           font-size: 14px;
 
           .fas {
@@ -212,3 +236,11 @@
     grid-row: 1 / span 4;
   }
 }
+
+@media (max-width: 1200px) {
+  .dashboard-container .current-tasks-widget {
+    .task-progress-container {
+      max-width: 180px;
+    }
+  }
+}

app/assets/stylesheets/dashboard/show.scss

@@ -27,6 +27,12 @@
         padding: 4px 0;
       }
     }
+
+    .widget-body {
+      height: calc(100% - 44px);
+      position: absolute;
+      width: 100%;
+    }
   }
 }
 

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

@@ -2,7 +2,7 @@
   display: flex;
   height: 100%;
 
-  a {
+  .navbar-link {
     @include font-small;
     align-items: center;
     color: $color-silver-chalice;

app/controllers/dashboard/current_tasks_controller.rb

@@ -4,22 +4,25 @@ module Dashboard
   class CurrentTasksController < ApplicationController
     include InputSanitizeHelper
 
+    before_action :check_view_permissions, only: :show
+
     def show
-      if params[:project_id]
-        if params[:experiment_id]
-          tasks = MyModule.active.joins(:experiment).where('experiments.id': params[:experiment_id])
-        else
-          tasks = MyModule.active.joins(:experiment).where('experiments.project_id': params[:project_id])
-        end
-      else
-        tasks = MyModule.active.joins(experiment: :project).where('projects.team_id': current_team)
-      end
-      if params[:mode] == 'assigned'
+      project = current_team.projects.find_by(id: task_filters[:project_id]) if task_filters[:project_id]
+      experiment = project.experiments.find_by(id: task_filters[:experiment_id]) if task_filters[:experiment_id]
+
+      tasks = if experiment
+                experiment.my_modules.active
+              elsif project
+                MyModule.active.joins(:experiment).where('experiments.project_id': project.id)
+              else
+                MyModule.active.viewable_by_user(current_user, current_team)
+              end
+      if task_filters[:mode] == 'assigned'
         tasks = tasks.left_outer_joins(:user_my_modules).where('user_my_modules.user_id': current_user.id)
       end
-      tasks = tasks.where('my_modules.state': params[:view])
+      tasks = tasks.where('my_modules.state': task_filters[:view])
 
-      case params[:sort]
+      case task_filters[:sort]
       when 'date_desc'
         tasks = tasks.order('my_modules.due_date': :desc)
       when 'date_asc'
@@ -75,5 +78,21 @@ module Dashboard
       end
       render json: experiments.map { |i| { value: i.id, label: escape_input(i.name) } }, status: :ok
     end
+
+    private
+
+    def task_filters
+      params.permit(
+        :project_id, :experiment_id, :mode, :view, :sort
+      )
+    end
+
+    def check_view_permissions
+      experiment = Experiment.find_by_id(params[:experiment_id])
+      project = Project.find_by_id(params[:project_id])
+
+      render_403 if project && !can_read_project?(project)
+      render_403 if experiment && !can_read_experiment?(experiment)
+    end
   end
 end

app/views/dashboards/_current_tasks.html.erb

@@ -50,13 +50,13 @@
     </div>
 
     <div class="sci-secondary-navbar current-tasks-navbar">
-      <a class="navbar-assigned active" href="" data-remote="true" data-mode="assigned"><%= t("dashboard.current_tasks.navbar.assigned") %></a>
-      <a class="navbar-all" href="" data-remote="true" data-mode="team"><%= t("dashboard.current_tasks.navbar.all") %></a>
+      <a class="navbar-link navbar-assigned active" href="" data-remote="true" data-mode="assigned"><%= t("dashboard.current_tasks.navbar.assigned") %></a>
+      <a class="navbar-link navbar-all" href="" data-remote="true" data-mode="team"><%= t("dashboard.current_tasks.navbar.all") %></a>
     </div>
   </div>
 
-  <div class="widger-body">
-    <div class="current-tasks-list"
+  <div class="widget-body">
+    <div class="current-tasks-list perfect-scrollbar"
          data-tasks-list-url="<%= dashboard_current_tasks_path %>">
     </div>
   </div>

config/locales/dashboard/en.yml

@@ -21,6 +21,9 @@ en:
         experiment: "Experiment"
         select_experiment: "Select Experiment"
         apply: "Apply"
+      no_tasks:
+        text_1: "Looks like you completed all of your tasks. Good job!"
+        text_2: "Why not use use the Quick start section to create your next task"
       due_date: "Due date: %{date}"
       progress_bar:
         in_progress: "In progress"