Merge pull request #2909 from urbanrotnik/ur-sci-5006

Add lock icon to current task section on dashboard [SCI-5006]

app/assets/javascripts/dashboard/current_tasks.js

@@ -7,20 +7,9 @@ var DasboardCurrentTasksWidget = (function() {
   var projectFilter = '.current-tasks-filters .project-filter';
   var experimentFilter = '.current-tasks-filters .experiment-filter';
 
-  function generateTasksListHtml(json, container) {
+  function appendTasksList(json, container) {
     $.each(json.data, (i, task) => {
-      var currentTaskItem = ` <a class="current-task-item" href="${task.link}">
-                                <div class="current-task-breadcrumbs">${task.project}<span class="slash">/</span>${task.experiment}</div>
-                                <div class="task-name row-border">${task.name}</div>
-                                <div class="task-due-date row-border ${task.due_date.state}">
-                                  <span class="${task.due_date.text ? '' : 'hidden'}">
-                                    <i class="fas fa-calendar-day"></i> ${task.due_date.text}
-                                  </span>
-                                </div>
-                                <div class="task-status-container row-border">
-                                  <span class="task-status" style="background:${task.status_color}">${task.status_name}</span>
-                                </div>
-                              </a>`;
+      var currentTaskItem = task;
       $(container).append(currentTaskItem);
     });
   }
@@ -53,7 +42,7 @@ var DasboardCurrentTasksWidget = (function() {
     InfiniteScroll.init('.current-tasks-list', {
       url: $('.current-tasks-list').data('tasksListUrl'),
       customResponse: (json, container) => {
-        generateTasksListHtml(json, container);
+        appendTasksList(json, container);
       },
       customParams: (params) => {
         params.project_id = dropdownSelector.getValues(projectFilter);
@@ -143,7 +132,7 @@ var DasboardCurrentTasksWidget = (function() {
           $currentTasksList.find('.widget-placeholder').addClass($('.current-tasks-navbar .active').data('mode'));
         }
       }
-      generateTasksListHtml(result, $currentTasksList);
+      appendTasksList(result, $currentTasksList);
       PerfectSb().update_all();
       if (newList) InfiniteScroll.resetScroll('.current-tasks-list');
       animateSpinner($currentTasksList, false);

app/controllers/dashboard/current_tasks_controller.rb

@@ -3,6 +3,7 @@
 module Dashboard
   class CurrentTasksController < ApplicationController
     include InputSanitizeHelper
+    helper_method :current_task_date
 
     before_action :load_project, only: %i(show experiment_filter)
     before_action :load_experiment, only: :show
@@ -47,14 +48,7 @@ module Dashboard
                    .preload(experiment: :project).page(page).per(Constants::INFINITE_SCROLL_LIMIT)
 
       tasks_list = tasks.map do |task|
-        { id: task.id,
-          link: protocols_my_module_path(task.id),
-          experiment: escape_input(task.experiment.name),
-          project: escape_input(task.experiment.project.name),
-          name: escape_input(task.name),
-          due_date: prepare_due_date(task),
-          status_color: task.status_color,
-          status_name: task.status_name }
+        render_to_string(partial: 'dashboards/current_tasks/task', locals: { task: task })
       end
 
       render json: { data: tasks_list, next_page: tasks.next_page }
@@ -92,24 +86,27 @@ module Dashboard
 
     private
 
-    def prepare_due_date(task)
-      if task.completed?
-        return { state: '', text: I18n.t('dashboard.current_tasks.completed_on_html',
-                                         date: I18n.l(task.completed_on, format: :full_date)) }
-      end
-      if task.due_date.present?
-        due_date_formatted = I18n.l(task.due_date, format: :full_date)
-        if task.is_overdue?
-          return { state: 'overdue', text: I18n.t('dashboard.current_tasks.due_date_overdue_html',
-                                                  date: due_date_formatted) }
-        elsif task.is_one_day_prior?
-          return { state: 'day-prior', text: I18n.t('dashboard.current_tasks.due_date_html',
-                                                    date: due_date_formatted) }
-        end
+    def current_task_date(task)
+      span_class, translation_key, date = nil
 
-        return { state: '', text: I18n.t('dashboard.current_tasks.due_date_html', date: due_date_formatted) }
+      if task.completed?
+        translation_key = 'completed_on_html'
+        date = task.completed_on
+      elsif task.due_date.present?
+        date = task.due_date
+
+        if task.is_overdue?
+          span_class = 'overdue'
+          translation_key = 'due_date_overdue_html'
+        elsif task.is_one_day_prior?
+          span_class = 'day-prior'
+          translation_key = 'due_date_html'
+        else
+          span_class = ''
+          translation_key = 'due_date_html'
+        end
       end
-      { state: nil, text: nil }
+      { span_class: span_class, translation_key: translation_key, date: date }
     end
 
     def task_filters

app/views/dashboards/current_tasks/_task.html.erb

@@ -0,0 +1,17 @@
+<% task_date = current_task_date(task) %>
+<a class="current-task-item" href="<%= protocols_my_module_path(task.id) %>">
+  <div class="current-task-breadcrumbs"><%= task.experiment.project.name %>
+    <span class="slash">/</span><%= task.experiment.name %></div>
+  <div class="task-name row-border">
+    <%= task.name %>
+  </div>
+  <div class="task-due-date row-border <%= task_date[:span_class]%>">
+    <% if task_date[:date] %>
+      <i class="fas fa-calendar-day"></i>
+      <%= t("dashboard.current_tasks.#{task_date[:translation_key]}", date: l(task_date[:date], format: :full_date)) %>
+    <% end %>
+  </div>
+  <div class="task-status-container row-border">
+    <span class="task-status" style="background:<%= task.status_color %>"><%= task.status_name %></span>
+  </div>
+</a>