Merge pull request #2430 from aignatov-bio/ai-sci-4378-quick-start-main-layout

Add quick start layout and create task modal [SCI-4378][SCI-4374]

app/assets/javascripts/dashboard/quick_start.js

@@ -0,0 +1,37 @@
+/* global dropdownSelector */
+/* eslint-disable no-param-reassign */
+
+var DasboardQuickStartWidget = (function() {
+  var projectFilter = '#create-task-modal .project-filter';
+  var experimentFilter = '#create-task-modal .experiment-filter';
+
+  function initNewTaskModal() {
+    $('.quick-start-widget .new-task').click(() => {
+      $('#create-task-modal').modal('show');
+    });
+
+    dropdownSelector.init(projectFilter, {
+      singleSelect: true,
+      closeOnSelect: true,
+      selectAppearance: 'simple'
+    });
+
+    dropdownSelector.init(experimentFilter, {
+      singleSelect: true,
+      closeOnSelect: true,
+      selectAppearance: 'simple'
+    });
+  }
+
+  return {
+    init: () => {
+      if ($('.quick-start-widget').length) {
+        initNewTaskModal();
+      }
+    }
+  };
+}());
+
+$(document).on('turbolinks:load', function() {
+  DasboardQuickStartWidget.init();
+});

app/assets/javascripts/protocols/index.js

@@ -329,6 +329,8 @@ function initCreateNewModal() {
     });
   });
 
+  if ($('#protocols-index').data('new-protocol')) link.click();
+
   submitBtn.on("click", function() {
     // Submit the form inside modal
     $(this).closest(".modal").find(".modal-body form").submit();

app/assets/javascripts/reports/reports_datatable.js.erb

@@ -186,6 +186,8 @@
       initSelectPicker();
       initRedirectToNewReportPage();
     });
+
+    if ($('#content-reports-index').data('new-report')) $('#new-report-btn').click();
   }
 
   initDatatable();

app/assets/stylesheets/dashboard/create_task_modal.scss

@@ -0,0 +1,28 @@
+#create-task-modal {
+  .modal-dialog {
+    width: 360px;
+
+    .description {
+      margin-bottom: 20px;
+    }
+
+    .select-block {
+      display: inline-block;
+      padding-bottom: 16px;
+      position: relative;
+      width: 100%;
+
+      label {
+        @include font-small;
+        display: inline-block;
+        font-weight: bold;
+        margin-bottom: 5px;
+        user-select: none;
+      }
+    }
+
+    .modal-footer {
+      text-align: center;
+    }
+  }
+}

app/assets/stylesheets/dashboard/current_tasks.scss

@@ -12,6 +12,7 @@
   .actions-container {
     display: flex;
     flex-grow: 1;
+    padding-left: 10px;
   }
 
   .filter-container {

app/assets/stylesheets/dashboard/quick_start.scss

@@ -1,6 +1,32 @@
 .dashboard-container .quick-start-widget {
-  grid-column: 1 / span 3;
+  grid-column: 1 / span 2;
   grid-row: 7 / span 6;
+
+  .widget-body {
+    padding: 16px;
+
+    .quick-start-description {
+      margin-bottom: 24px;
+    }
+
+    .btn-secondary {
+      margin-bottom: 8px;
+      text-align: left;
+    }
+  }
+}
+
+@media (max-width: 1700px) {
+  .dashboard-container .quick-start-widget {
+    grid-column: 1 / span 3;
+  }
+}
+
+
+@media (max-width: 1250px) {
+  .dashboard-container .quick-start-widget {
+    grid-column: 1 / span 4;
+  }
 }
 
 @media (max-width: 1000px) {

app/assets/stylesheets/dashboard/recent_work.scss

@@ -1,11 +1,18 @@
 .dashboard-container .recent-work-widget {
-  grid-column: 4 / span 6;
+  grid-column: 3 / span 7;
   grid-row: 7 / span 6;
 }
 
-@media (max-width: 1300px) {
+@media (max-width: 1700px) {
   .dashboard-container .recent-work-widget {
-    grid-column: 4 / span 9;
+    grid-column: 4 / span 6;
+  }
+}
+
+
+@media (max-width: 1250px) {
+  .dashboard-container .recent-work-widget {
+    grid-column: 5 / span 8;
   }
 }
 

app/assets/stylesheets/dashboard/show.scss

@@ -1,5 +1,5 @@
-
 .dashboard-container {
+  --widget-header-size: 44px;
   --dashboard-widgets-gap: 30px;
   display: grid;
   grid-column-gap: var(--dashboard-widgets-gap);
@@ -19,17 +19,17 @@
       align-items: center;
       border-bottom: $border-tertiary;
       display: flex;
-      height: 44px;
 
-      h2 {
+      height: var(--widget-header-size);
-        line-height: 18px;
+      padding-left: 16px;
-        margin: 10px 16px;
+
-        padding: 4px 0;
+      .widget-title {
+        @include font-h2;
       }
     }
 
     .widget-body {
-      height: calc(100% - 44px);
+      height: calc(100% - var(--widget-header-size));
       position: absolute;
       width: 100%;
     }

app/assets/stylesheets/shared/dropdown_selector.scss

@@ -269,6 +269,7 @@
 
         &[data-options-selected="0"] {
           display: block;
+          width: 100%;
         }
       }
 

app/views/dashboards/_create_task_modal.html.erb

@@ -0,0 +1,37 @@
+<div class="modal" id="create-task-modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
+          <h2 class="modal-title">
+            <%= t("dashboard.create_task_modal.title") %>
+          </h2>
+        </div>
+        <div class="modal-body">
+          <div class="description">
+            <%= t("dashboard.create_task_modal.description") %>
+          </div>
+          <div class="select-block">
+            <label><%= t("dashboard.create_task_modal.project") %></label>
+            <select class="project-filter"
+                    data-ajax-url=""
+                    data-placeholder="<%= t("dashboard.create_task_modal.project_placeholder") %>"></select>
+          </div>
+          <div class="select-block">
+            <label><%= t("dashboard.create_task_modal.experiment") %></label>
+            <select class="experiment-filter"
+                    data-ajax-url=""
+                    data-disable-on-load="true"
+                    data-disable-placeholder="<%= t("dashboard.create_task_modal.experiment_disabled_placeholder") %>"
+                    data-placeholder="<%= t("dashboard.create_task_modal.experiment_placeholder") %>"></select>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary" data-dismiss="modal" disabled>
+            <%= t("dashboard.create_task_modal.create_task") %>
+          </button>
+        </div>
+      </div>
+    </div>
+
+</div>

app/views/dashboards/_current_tasks.html.erb

@@ -1,6 +1,6 @@
 <div class="current-tasks-widget basic-widget">
   <div class="widget-header">
-    <h2 class="title"><%= t("dashboard.current_tasks.title") %></h2>
+    <div class="widget-title"><%= t("dashboard.current_tasks.title") %></div>
     <div class="actions-container">
       <div class="filter-container dropdown">
         <div class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></div>

app/views/dashboards/_quick_start.html.erb

@@ -1,2 +1,20 @@
 <div class="quick-start-widget basic-widget">
+  <div class="widget-header">
+    <div class="widget-title">
+      <%= t("dashboard.quick_start.title") %>
+    </div>
+  </div>
+  <div class="widget-body">
+    <div class="quick-start-description">
+      <%= t("dashboard.quick_start.description") %>
+    </div>
+    <div class="new-task btn btn-secondary btn-block"><i class="fas fa-plus"></i><%= t("dashboard.quick_start.new_task") %></div>
+    <%= link_to protocols_path(new_protocol: true), {class: "new-protocol btn btn-secondary btn-block"} do %>
+      <i class="fas fa-edit"></i><%= t("dashboard.quick_start.new_protocol") %>
+    <% end %>
+    <%= link_to reports_path(new_report: true), {class: "new-report btn btn-secondary btn-block"} do %>
+      <i class="fas fa-clipboard-check"></i><%= t("dashboard.quick_start.new_report") %>
+    <% end %>
+  </div>
 </div>
+<%= render "create_task_modal" %>

app/views/protocols/index.html.erb

@@ -5,7 +5,7 @@
 <% provide(:head_title, t("protocols.index.head_title")) %>
 
 <% if current_team %>
-  <div class="content-pane" id="protocols-index">
+  <div class="content-pane" id="protocols-index" <%= "data-new-protocol=true" if params[:new_protocol] %>>
     <ul class="nav nav-tabs nav-settings">
       <li role="presentation" class="<%= "active" if @type == :public %>">
         <%= link_to t("protocols.index.navigation.public"), protocols_path(team: @current_team, type: :public) %>

app/views/reports/index.html.erb

@@ -6,7 +6,7 @@
 <%= stylesheet_link_tag 'datatables' %>
 
 <div class="content-pane">
-  <div id="content-reports-index">
+  <div id="content-reports-index" <%= "data-new-report=true" if params[:new_report] %>>
     <div class="row">
       <div class="col-md-12">
         <% if can_manage_reports?(current_team) %>

config/locales/dashboard/en.yml

@@ -41,3 +41,18 @@ en:
         th: 'Th'
         fr: 'Fr'
         sa: 'Sa'
+    quick_start:
+      title: "Quick start"
+      description: "Quickly start a new task, create a new project or a new report."
+      new_task: "New task"
+      new_protocol: "New protocol"
+      new_report: "New report"
+    create_task_modal:
+      title: "Create a new Task"
+      description: "Simply type in the fields bellow to find or create space for your new task to live in"
+      project: "Project"
+      experiment: "Experiment"
+      project_placeholder: "Enter project name (New or Existing)"
+      experiment_placeholder: "Enter experiment name (New or Existing)"
+      experiment_disabled_placeholder: "Select Project to enable Experiments"
+      create_task: "Create Task"