Merge pull request #2412 from aignatov-bio/ai-sci-4357-dashboard-general-layout

General dashboard layout [SCI-4357][SCI-4359]

app/assets/stylesheets/application.scss

@@ -31,6 +31,7 @@
 @import "my_modules/results/*";
 @import "my_modules/*";
 @import "protocols/*";
+@import "dashboard/*";
 @import "repository/*";
 @import "repository_columns/*";
 @import "settings/*";

app/assets/stylesheets/dashboard/calendar.scss

@@ -0,0 +1,11 @@
+.dashboard-container .calendar-widget {
+  grid-column: 10 / span 3;
+  grid-row: 1 / span 6;
+}
+
+@media (max-width: 1000px) {
+  .dashboard-container .calendar-widget {
+    grid-column: 1 / span 6;
+    grid-row: 5 / span 4;
+  }
+}

app/assets/stylesheets/dashboard/current_tasks.scss

@@ -0,0 +1,11 @@
+.dashboard-container .current-tasks-widget {
+  grid-column: 1 / span 9;
+  grid-row: 1 / span 6;
+}
+
+@media (max-width: 1000px) {
+  .dashboard-container .current-tasks-widget {
+    grid-column: 1 / span 12;
+    grid-row: 1 / span 4;
+  }
+}

app/assets/stylesheets/dashboard/quick_start.scss

@@ -0,0 +1,11 @@
+.dashboard-container .quick-start-widget {
+  grid-column: 1 / span 3;
+  grid-row: 7 / span 6;
+}
+
+@media (max-width: 1000px) {
+  .dashboard-container .quick-start-widget {
+    grid-column: 7 / span 6;
+    grid-row: 5 / span 4;
+  }
+}

app/assets/stylesheets/dashboard/recent_work.scss

@@ -0,0 +1,17 @@
+.dashboard-container .recent-work-widget {
+  grid-column: 4 / span 6;
+  grid-row: 7 / span 6;
+}
+
+@media (max-width: 1300px) {
+  .dashboard-container .recent-work-widget {
+    grid-column: 4 / span 9;
+  }
+}
+
+@media (max-width: 1000px) {
+  .dashboard-container .recent-work-widget {
+    grid-column: 1 / span 12;
+    grid-row: 9 / span 4;
+  }
+}

app/assets/stylesheets/dashboard/show.scss

@@ -0,0 +1,24 @@
+
+.dashboard-container {
+  --dashboard-widgets-gap: 30px;
+  display: grid;
+  grid-column-gap: var(--dashboard-widgets-gap);
+  grid-row-gap: var(--dashboard-widgets-gap);
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: repeat(12, 1fr);
+  min-height: calc(100vh - 51px);
+  padding: var(--dashboard-widgets-gap) calc(var(--dashboard-widgets-gap) - 15px);
+  width: 100%;
+
+  .basic-widget {
+    border-radius: $border-radius-modal;
+    box-shadow: $flyout-shadow;
+    position: relative;
+  }
+}
+
+@media (max-width: 1300px) {
+  .dashboard-container {
+    --dashboard-widgets-gap: 16px;
+  }
+}

app/controllers/dashboards_controller.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class DashboardsController < ApplicationController
+  def show; end
+end

app/helpers/left_menu_bar_helper.rb

@@ -1,4 +1,9 @@
 module LeftMenuBarHelper
+
+  def dashboard_are_selected?
+    controller_name == 'dashboards'
+  end
+
   def projects_are_selected?
     controller_name.in? %w(projects experiments my_modules)
   end

app/views/dashboards/_calendar.html.erb

@@ -0,0 +1,2 @@
+<div class="calendar-widget basic-widget">
+</div>

app/views/dashboards/_current_tasks.html.erb

@@ -0,0 +1,2 @@
+<div class="current-tasks-widget basic-widget">
+</div>

app/views/dashboards/_quick_start.html.erb

@@ -0,0 +1,2 @@
+<div class="quick-start-widget basic-widget">
+</div>

app/views/dashboards/_recent_work.html.erb

@@ -0,0 +1,2 @@
+<div class="recent-work-widget basic-widget">
+</div>

app/views/dashboards/show.html.erb

@@ -0,0 +1,8 @@
+<% provide :head_title, t('nav.label.dashboard') %>
+
+<div class="dashboard-container">
+  <%= render "calendar" %>
+  <%= render "current_tasks" %>
+  <%= render "recent_work" %>
+  <%= render "quick_start" %>
+</div>

app/views/shared/_left_menu_bar.html.erb

@@ -2,6 +2,12 @@
   <div class="scroll-wrapper">
     <ul class="nav">
       <% if current_user.teams.empty? %>
+      <li class="disabled">
+          <span>
+            <span class="fas fa-thumbtack"></span>
+            <span><%= t('left_menu_bar.dashboard') %></span>
+          </span>
+        </li>
         <li class="disabled">
           <span>
             <span class="fas fa-folder"></span>
@@ -27,6 +33,12 @@
           </span>
         </li>
       <% else %>
+        <li class="<%= "active" if dashboard_are_selected? %>">
+          <%= link_to dashboard_path, id: "dashboard-link", title: t('left_menu_bar.dashboard') do %>
+            <span class="fas fa-thumbtack"></span>
+            <span><%= t('left_menu_bar.dashboard') %></span>
+          <% end %>
+        </li>
         <li class="<%= "active" if projects_are_selected? %>">
           <%= link_to projects_path, id: "projects-link", title: t('left_menu_bar.projects') do %>
             <span class="fas fa-folder"></span>

config/locales/en.yml

@@ -135,7 +135,8 @@ en:
       none: "No activities!"
     label:
       scinote: "SciNote"
-      projects: "Home"
+      dashboard: "Overview"
+      projects: "Projects"
       protocols: "Protocols"
       calendar: "Calendar"
       activities: "Activities"
@@ -152,6 +153,7 @@ en:
     addon_versions: "Addon versions"
 
   left_menu_bar:
+    dashboard: "Overview"
     projects: "Projects"
     repositories: "Inventories"
     templates: "Protocols"
@@ -257,7 +259,7 @@ en:
 
   projects:
     index:
-      head_title: "Home"
+      head_title: "Projects"
       archive: "Archive"
       archived: "Archived"
       active: "Active"

config/routes.rb

@@ -16,7 +16,7 @@ Rails.application.routes.draw do
                                       confirmations: 'users/confirmations',
                                       omniauth_callbacks: 'users/omniauth_callbacks' }
 
-    root 'projects#index'
+    root 'dashboards#show'
 
     # # Client APP endpoints
     # get '/settings', to: 'client_api/settings#index'
@@ -240,6 +240,9 @@ Rails.application.routes.draw do
           defaults: { format: 'json' }
     post 'reports/destroy', to: 'reports#destroy'
 
+    resource :dashboard, only: :show do
+    end
+
     resources :projects, except: [:new, :destroy] do
       resources :user_projects, path: '/users',
                 only: [:create, :index, :update, :destroy]