From 5c0a769f87651666239377f736230299a50fe959 Mon Sep 17 00:00:00 2001
From: aignatov-bio <aignatov@biosistemika.com>
Date: Thu, 13 Feb 2020 13:50:29 +0100
Subject: [PATCH] General dashboard layout

---
 app/assets/stylesheets/application.scss       |  1 +
 .../stylesheets/dashboard/calendar.scss       | 11 +++++++++
 .../stylesheets/dashboard/current_tasks.scss  | 11 +++++++++
 .../stylesheets/dashboard/quick_start.scss    | 11 +++++++++
 .../stylesheets/dashboard/recent_work.scss    | 17 +++++++++++++
 app/assets/stylesheets/dashboard/show.scss    | 24 +++++++++++++++++++
 app/controllers/dashboards_controller.rb      |  5 ++++
 app/helpers/left_menu_bar_helper.rb           |  5 ++++
 app/views/dashboards/_calendar.html.erb       |  2 ++
 app/views/dashboards/_current_tasks.html.erb  |  2 ++
 app/views/dashboards/_quick_start.html.erb    |  2 ++
 app/views/dashboards/_recent_work.html.erb    |  2 ++
 app/views/dashboards/show.html.erb            |  6 +++++
 app/views/shared/_left_menu_bar.html.erb      | 12 ++++++++++
 config/locales/en.yml                         |  1 +
 config/routes.rb                              |  3 +++
 16 files changed, 115 insertions(+)
 create mode 100644 app/assets/stylesheets/dashboard/calendar.scss
 create mode 100644 app/assets/stylesheets/dashboard/current_tasks.scss
 create mode 100644 app/assets/stylesheets/dashboard/quick_start.scss
 create mode 100644 app/assets/stylesheets/dashboard/recent_work.scss
 create mode 100644 app/assets/stylesheets/dashboard/show.scss
 create mode 100644 app/controllers/dashboards_controller.rb
 create mode 100644 app/views/dashboards/_calendar.html.erb
 create mode 100644 app/views/dashboards/_current_tasks.html.erb
 create mode 100644 app/views/dashboards/_quick_start.html.erb
 create mode 100644 app/views/dashboards/_recent_work.html.erb
 create mode 100644 app/views/dashboards/show.html.erb

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 152f59810..c840a574d 100644
--- a/app/assets/stylesheets/application.scss
+++ b/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/*";
diff --git a/app/assets/stylesheets/dashboard/calendar.scss b/app/assets/stylesheets/dashboard/calendar.scss
new file mode 100644
index 000000000..f31894e5f
--- /dev/null
+++ b/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: 900px) {
+  .dashboard-container .calendar-widget {
+    grid-column: 1 / span 6;
+    grid-row: 5 / span 4;
+  }
+}
diff --git a/app/assets/stylesheets/dashboard/current_tasks.scss b/app/assets/stylesheets/dashboard/current_tasks.scss
new file mode 100644
index 000000000..0c92c5733
--- /dev/null
+++ b/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: 900px) {
+  .dashboard-container .current-tasks-widget {
+    grid-column: 1 / span 12;
+    grid-row: 1 / span 4;
+  }
+}
diff --git a/app/assets/stylesheets/dashboard/quick_start.scss b/app/assets/stylesheets/dashboard/quick_start.scss
new file mode 100644
index 000000000..7deaa5e1b
--- /dev/null
+++ b/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: 900px) {
+  .dashboard-container .quick-start-widget {
+    grid-column: 7 / span 6;
+    grid-row: 5 / span 4;
+  }
+}
diff --git a/app/assets/stylesheets/dashboard/recent_work.scss b/app/assets/stylesheets/dashboard/recent_work.scss
new file mode 100644
index 000000000..e10b83623
--- /dev/null
+++ b/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: 900px) {
+  .dashboard-container .recent-work-widget {
+    grid-column: 1 / span 12;
+    grid-row: 9 / span 4;
+  }
+}
diff --git a/app/assets/stylesheets/dashboard/show.scss b/app/assets/stylesheets/dashboard/show.scss
new file mode 100644
index 000000000..a8b04836d
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/app/controllers/dashboards_controller.rb b/app/controllers/dashboards_controller.rb
new file mode 100644
index 000000000..2e4880fad
--- /dev/null
+++ b/app/controllers/dashboards_controller.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class DashboardsController < ApplicationController
+  def show; end
+end
diff --git a/app/helpers/left_menu_bar_helper.rb b/app/helpers/left_menu_bar_helper.rb
index 536ef7391..afcdd7bee 100644
--- a/app/helpers/left_menu_bar_helper.rb
+++ b/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
diff --git a/app/views/dashboards/_calendar.html.erb b/app/views/dashboards/_calendar.html.erb
new file mode 100644
index 000000000..297c5bef8
--- /dev/null
+++ b/app/views/dashboards/_calendar.html.erb
@@ -0,0 +1,2 @@
+<div class="calendar-widget basic-widget">
+</div>
\ No newline at end of file
diff --git a/app/views/dashboards/_current_tasks.html.erb b/app/views/dashboards/_current_tasks.html.erb
new file mode 100644
index 000000000..2899da347
--- /dev/null
+++ b/app/views/dashboards/_current_tasks.html.erb
@@ -0,0 +1,2 @@
+<div class="current-tasks-widget basic-widget">
+</div>
\ No newline at end of file
diff --git a/app/views/dashboards/_quick_start.html.erb b/app/views/dashboards/_quick_start.html.erb
new file mode 100644
index 000000000..f758a81a0
--- /dev/null
+++ b/app/views/dashboards/_quick_start.html.erb
@@ -0,0 +1,2 @@
+<div class="quick-start-widget basic-widget">
+</div>
\ No newline at end of file
diff --git a/app/views/dashboards/_recent_work.html.erb b/app/views/dashboards/_recent_work.html.erb
new file mode 100644
index 000000000..7a024ae6b
--- /dev/null
+++ b/app/views/dashboards/_recent_work.html.erb
@@ -0,0 +1,2 @@
+<div class="recent-work-widget basic-widget">
+</div>
\ No newline at end of file
diff --git a/app/views/dashboards/show.html.erb b/app/views/dashboards/show.html.erb
new file mode 100644
index 000000000..e1e4ce808
--- /dev/null
+++ b/app/views/dashboards/show.html.erb
@@ -0,0 +1,6 @@
+<div class="dashboard-container">
+  <%= render "calendar" %>
+  <%= render "current_tasks" %>
+  <%= render "recent_work" %>
+  <%= render "quick_start" %>
+</div>
\ No newline at end of file
diff --git a/app/views/shared/_left_menu_bar.html.erb b/app/views/shared/_left_menu_bar.html.erb
index 40131aaed..be3920ee4 100644
--- a/app/views/shared/_left_menu_bar.html.erb
+++ b/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>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 1ca27c84b..4884d0f57 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -152,6 +152,7 @@ en:
     addon_versions: "Addon versions"
 
   left_menu_bar:
+    dashboard: "Overview"
     projects: "Projects"
     repositories: "Inventories"
     templates: "Protocols"
diff --git a/config/routes.rb b/config/routes.rb
index 94a8503c1..6a2d2fcce 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -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]