Adding the projects panel and project details (#1060)

* WIP adding projects panel

* Added project details helper methods

* Added user roles information

* Updating to put helpers into a presenter to make them easier to test and maintain
Also changed the controller to get the correct data based on the user's role
Also fixed rubocop violations

---------

Co-authored-by: Carolyn Cole <[email protected]>

app/assets/stylesheets/_dashboard.scss

@@ -0,0 +1,128 @@
+
+@import "variables";
+@import "typography";
+@import "bootstrap";
+
+#projects-listing {
+    border: 1px solid $gray-20;
+    border-radius: 3px;
+
+    a {
+        text-decoration: none !important;
+    }
+
+    .project {
+        font-family: $libre-franklin;
+        border-bottom: 1px solid $gray-20;
+        background: $white;
+        padding: 12px;
+        align-items: center;
+        gap: 8px;
+        align-self: stretch;
+        h2 {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          text-wrap: nowrap;
+          color: $black;
+          font-family: $libre-franklin;
+          font-size: 16px !important;
+          font-style: normal;
+          font-weight: 600;
+          line-height: 24px;
+          text-decoration: none;
+        }
+        .details {
+            display: flex;
+            padding: 5px 0px;
+            align-items: center;
+            gap: 16px;
+            color: $gray-60;
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 18px;
+            li {
+                float: left;
+                list-style: none;
+                padding: 0em .2em 0em 2em;
+            }
+        }
+    }
+
+    .last {
+        border-bottom: none;
+    }
+
+    .status {
+        text-transform: capitalize;
+    }
+
+    .status::before {
+        content: "";
+        display: inline-flex;
+        width: 20px;
+        height: 20px;
+        vertical-align: top;
+    }
+
+    .active { 
+        background: url("status_active.svg") no-repeat;
+    }
+
+    .pending { 
+        background: url("status_active.svg") no-repeat;
+    }
+
+    .approved {
+        background: url("status_approved.svg") no-repeat;
+    }
+
+    .rejected {
+        background: url("status_rejected.svg") no-repeat;
+    }
+
+    .project-type {
+        text-transform: capitalize;
+    }
+
+    .project-type::before {
+        content: "";
+        display: inline-flex;
+        background: url("project_type.svg") no-repeat;
+        width: 20px;
+        height: 20px;
+        vertical-align: top;
+    }
+
+    .user-role {
+        text-transform: capitalize;
+    }
+
+    .user-role::before {
+        content: "";
+        display: inline-flex;
+        background: url("user_role.svg") no-repeat;
+        width: 20px;
+        height: 20px;
+        vertical-align: top;
+    }
+
+    .last-download::before {
+        content: "";
+        display: inline-flex;
+        background: url("last_download.svg") no-repeat;
+        width: 20px;
+        height: 20px;
+        vertical-align: top;
+    }
+
+    .last-activity::before {
+        content: "";
+        display: inline-flex;
+        background: url("last_activity.svg") no-repeat;
+        width: 20px;
+        height: 20px;
+        vertical-align: top;
+    }
+
+}

app/assets/stylesheets/_settings.scss

@@ -7,60 +7,6 @@
   flex-direction: column;
 }
 
-@mixin dashboard-component {
-  background-color: rgb(168, 167, 167);
-  border-radius: 0.1em;
-  padding: 1em;
-  max-width: 70%;
-  max-height: fit-content;
-  border-style: solid;
-  border-color: rgb(0, 0, 0);
-  border-radius: 50px;
-  margin-right: 2em;
-  max-height: fit-content;
-  border-style: solid;
-  border-color: rgb(0, 0, 0);
-  border-radius: 50px;
-
-  h2 {
-    margin-left: 0.2em;
-    text-decoration: underline;
-    text-decoration-thickness: 3px;
-  }
-
-  h4 {
-    margin-left: 0.2em;
-    text-decoration: underline;
-    text-decoration-thickness: 3px;
-  }
-
-  .project-list {
-    list-style-type: none;
-    a {
-      color: black;
-    }
-  }
-  .sysadmin-list {
-    list-style-type: none;
-    margin-left: 1.5em;
-    a {
-      color: black;
-    }
-  }
-
-  .visible-row {
-    visibility: unset;
-  }
-
-  .invisible-row {
-    visibility: collapse;
-  }
-
-  #show-more-sysadmin {
-    margin-top: 0.5em;
-  }
-}
-
 @mixin tab-nav {
   .tab-nav {
     border: none;
@@ -118,30 +64,6 @@
     margin-left: 5px;
   }
 
-  #dashboard-projects {
-    @include dashboard-component;
-    min-width: 40em;
-    position: relative;
-
-    .btn-dark {
-      margin-left: 0.5em;
-      margin-bottom: 0.5em;
-      position: absolute;
-      bottom: 0px;
-    }
-  }
-
-  #dashboard-activity {
-    @include dashboard-component;
-    min-height: 15em;
-  }
-
-  #dashboard-pending {
-    @include dashboard-component;
-    margin-top: 1em;
-    min-width: 30em;
-  }
-
 
 #show {
   .pending-project {

app/assets/stylesheets/application.scss

@@ -17,6 +17,7 @@
 @import "banner";
 @import "components/breadcrumbs";
 @import "components/mediaflux_status";
+@import "dashboard";
 @import "emulator";
 @import "footer";
 @import "forms";

app/controllers/welcome_controller.rb

@@ -5,16 +5,14 @@ class WelcomeController < ApplicationController
 
   def index
     return if current_user.nil?
-    @sponsored_projects = Project.sponsored_projects(@current_user.uid)
-    @managed_projects = Project.managed_projects(@current_user.uid)
-    @data_user_projects = Project.data_user_projects(@current_user.uid)
-    @my_projects_count = @sponsored_projects.count + @managed_projects.count + @data_user_projects.count
     @pending_projects = Project.pending_projects
     @approved_projects = Project.approved_projects
     @eligible_data_user = true if !current_user.eligible_sponsor? && !current_user.eligible_manager?
 
+    @dashboard_projects = Project.users_projects(@current_user).map { |project| ProjectDashboardPresenter.new(project) }
+
     @my_inventory_requests = current_user.user_requests.where(type: "FileInventoryRequest")
-    @dashtab = "classic"
+    @dashtab = "project"
     session[:dashtab] ||= @dashtab
     @dashtab = session[:dashtab]
   end