"Recent Downloads" in the projects dashboard (#1119)

* Changed the layout to make room for the right side panel for downloads * Starting to prototype the layout * Rubocop nitpicking * Applying styles from figma * Moved item details to their own partial. Fixed style in the sidebar. Co-authored-by: Carolyn Cole <carolyncole@users.noreply.github.com> * Update to show actual expiration dates also removed size since we have no way of calculating it now. * Made download link clickable. Minor styling changes. Co-authored-by: Carolyn Cole <carolyncole@users.noreply.github.com> * Remove the Activity tab now that the sidebar displays the downloads * Remove tests for Activity since we removed it * Added test for the Latest Downloads sidebar * Clean up --------- Co-authored-by: Carolyn Cole <cac9@princeton.edu> Co-authored-by: Carolyn Cole <carolyncole@users.noreply.github.com>
pulibrary · Dec 12, 2024 · c43e16b · c43e16b
1 parent 9bec5c9
commit c43e16b
Show file tree

Hide file tree

Showing 13 changed files with 267 additions and 101 deletions.
diff --git a/app/assets/stylesheets/_dashboard.scss b/app/assets/stylesheets/_dashboard.scss
@@ -56,10 +56,10 @@
     thead .project th, tbody .project td {
         border: none;
     }
-    
+
     .project {
         display: flex;
-        flex-wrap: wrap;       
+        flex-wrap: wrap;
         font-family: $libre-franklin;
         border-bottom: 1px solid $gray-20;
         background: $white;
@@ -70,7 +70,7 @@
 
         td:first-child {
             width: 100%;
-        } 
+        }
 
         td: {
             border: none;
@@ -122,11 +122,11 @@
         vertical-align: top;
     }
 
-    .active { 
+    .active {
         background: url("status_active.svg") no-repeat;
     }
 
-    .pending { 
+    .pending {
         background: url("status_pending.svg") no-repeat;
     }
 
@@ -188,4 +188,171 @@
     .section {
         margin-top: 2em;
     }
-}
+}
+
+.welcome-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 3.75rem;
+    align-self: stretch;
+
+    .welcome-pane {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        align-self: stretch;
+    }
+
+    .detail-pane {
+        display: flex;
+        align-items: center;
+        gap: 1.25rem;
+        align-self: stretch;
+
+        .main {
+            display: flex;
+            width: 55.9375rem;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 1.25rem;
+        }
+
+        .sidebar {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1.25rem;
+            align-self: stretch;
+
+            .downloads {
+                display: flex;
+                width: 17.8125rem;
+                flex-direction: column;
+                align-items: center;
+
+                border-radius: 0.75rem;
+                background: $gray-10;
+
+                .header {
+                    display: flex;
+                    padding: 0.75rem 0.75rem 0rem 0.75rem;
+                    justify-content: space-between;
+                    align-items: center;
+                    align-self: stretch;
+                }
+                .details {
+                    display: flex;
+                    align-items: center;
+                    align-self: stretch;
+
+                    .content {
+                        display: flex;
+                        padding: 0.5rem 0rem 0.5rem 0.5rem;
+                        flex-direction: column;
+                        align-items: flex-start;
+                        flex: 1 0 0;
+                        overflow: hidden;
+
+                        .container1 {
+                            display: flex;
+                            padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+                            flex-direction: column;
+                            align-self: stretch;
+                            align-items: flex-start;
+                            flex: 1 0 0;
+
+                            .container2 {
+                                display: flex;
+                                flex-direction: column;
+                                align-items: flex-start;
+                                align-self: stretch;
+                                border-radius: 0.5rem;
+
+                                .container3 {
+                                    display: flex;
+                                    flex-direction: column;
+                                    align-items: flex-start;
+                                    align-self: stretch;
+
+                                    .download-item {
+                                        display: flex;
+                                        padding: 0.75rem;
+                                        flex-direction: column;
+                                        align-items: flex-start;
+                                        gap: 0.125rem;
+                                        align-self: stretch;
+                                        border-bottom: 1px solid $gray-10;
+                                        background: $white;
+
+                                        .title {
+                                            height: 1.3125rem;
+                                            align-self: stretch;
+                                            overflow: hidden;
+                                            color: $black;
+                                            text-overflow: ellipsis;
+                                            white-space: nowrap;
+                                            /* Body XXS Bold */
+                                            font-family: "Libre Franklin";
+                                            font-size: 0.75rem;
+                                            font-style: normal;
+                                            font-weight: 600;
+                                            line-height: 1.125rem; /* 150% */
+
+                                            a {
+                                                text-decoration: none;
+                                                color: $black;
+                                            }
+                                        }
+
+                                        .details {
+                                            display: flex;
+                                            justify-content: space-between;
+                                            align-items: center;
+                                            align-self: stretch;
+
+                                            .expiration {
+                                                color: $gray-60;
+                                                /* Body XXS */
+                                                font-family: "Libre Franklin";
+                                                font-size: 0.75rem;
+                                                font-style: normal;
+                                                font-weight: 400;
+                                                line-height: 1.125rem; /* 150% */
+                                            }
+
+                                            .size {
+                                                color: $gray-60;
+                                                /* Body XXS */
+                                                font-family: "Libre Franklin";
+                                                font-size: 0.75rem;
+                                                font-style: normal;
+                                                font-weight: 400;
+                                                line-height: 1.125rem; /* 150% */
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    .scrollbar {
+                        display: flex;
+                        padding: 1rem 0.125rem 0.25rem 0.125rem;
+                        flex-direction: column;
+                        align-items: center;
+                        align-self: stretch;
+
+                        .indicator {
+                            width: 0.25rem;
+                            height: 3.125rem;
+                            border-radius: 0.5rem;
+                            background: $gray-10;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss
@@ -62,12 +62,10 @@
 
   #dashboard-nav{
     @include tab-nav;
-    margin-top: 3em;
-    margin-left: 1em;
-    margin-bottom: 1em;
-
-    border-bottom: solid;
-    border-color: #D0D0D0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
   }
 
   }

diff --git a/app/controllers/welcome_controller.rb b/app/controllers/welcome_controller.rb
@@ -44,13 +44,6 @@ def dash_project
     end
   end
 
-  def dash_activity
-    return if current_user.nil? || current_user.id.nil?
-    if params.key?("dashtab")
-      session[:dashtab] = params[:dashtab]
-    end
-  end
-
   def dash_admin
     return if current_user.nil? || current_user.id.nil?
     if params.key?("dashtab")

diff --git a/app/javascript/entrypoints/dashboardTabs.js b/app/javascript/entrypoints/dashboardTabs.js
@@ -1,6 +1,5 @@
 export function dashStyle(railsSession) {
   const project = document.getElementById('dash-projects');
-  const activity = document.getElementById('dash-activity');
   const admin = document.getElementById('dash-admin');
   const session = railsSession;
   const home = document.getElementById('welcome');
@@ -13,11 +12,6 @@ export function dashStyle(railsSession) {
         project.style.borderColor = '#E77500';
         project.classList.add('active');
         break;
-      case 'activity':
-        activity.style.borderBottom = 'solid';
-        activity.style.borderColor = '#E77500';
-        activity.classList.add('active');
-        break;
       case 'admin':
         admin.style.borderBottom = 'solid';
         admin.style.borderColor = '#E77500';
@@ -62,37 +56,6 @@ export function dashStyle(railsSession) {
     project.classList.add('active');
   });
 
-  $('#dash-activity').on('mouseenter', (el) => {
-    const element = el;
-    element.preventDefault();
-    // const tab = document.getElementById('tab-nav');
-
-    if (!activity.classList.contains('active')) {
-      activity.style.borderBottom = 'solid';
-      activity.style.borderColor = '#121212';
-    }
-  });
-
-  $('#dash-activity').on('mouseleave', (el) => {
-    const element = el;
-    element.preventDefault();
-    // const tab = document.getElementById('tab-nav');
-
-    if (!activity.classList.contains('active')) {
-      activity.style.border = 'none';
-    }
-  });
-
-  $('#dash-activity').on('click', (el) => {
-    const element = el;
-    element.preventDefault();
-    // const tab = document.getElementById('tab-nav');
-    // change background color to red
-    activity.style.borderBottom = 'solid';
-    activity.style.borderColor = '#E77500';
-    activity.classList.add('active');
-  });
-
   $('#dash-admin').on('mouseenter', (el) => {
     const element = el;
     element.preventDefault();
@@ -152,20 +115,6 @@ export function dashTab() {
     });
   });
 
-  $('#dash-activity').on('click', (inv) => {
-    const element = inv;
-    element.preventDefault();
-    $.ajax({
-      type: 'POST',
-
-      url: '/dash_activity',
-      data: { dashtab: 'activity' },
-      success() { // on success..
-        window.location.reload(); // update the DIV
-      },
-    });
-  });
-
   $('#dash-admin').on('click', (inv) => {
     const element = inv;
     element.preventDefault();

diff --git a/app/jobs/file_inventory_job.rb b/app/jobs/file_inventory_job.rb
@@ -7,8 +7,8 @@ class FileInventoryJob < ApplicationJob
                                 request_details: { project_title: project.title })
   end
 
-  # This is required becuase the before_enqueue does not get called when perform_now is run on a job
-  #  We include both before_perform and before_enqueue so perfrom_now and perform_later will work as desired
+  # This is required because the before_enqueue does not get called when perform_now is run on a job
+  # We include both before_perform and before_enqueue so perform_now and perform_later will work as desired
   before_perform do |job|
     project = Project.find(job.arguments.first[:project_id])
     inventory_request = FileInventoryRequest.find_by(user_id: job.arguments.first[:user_id], project_id: job.arguments.first[:project_id], job_id: @job_id)

diff --git a/app/models/file_inventory_request.rb b/app/models/file_inventory_request.rb
@@ -3,4 +3,8 @@ class FileInventoryRequest < UserRequest
   def output_file
     request_details["output_file"]
   end
+
+  def expiration_date
+    completion_time + 7.days
+  end
 end
diff --git a/app/models/user.rb b/app/models/user.rb
@@ -155,4 +155,9 @@ def self.serialize_into_session(record)
   def self.serialize_from_session(key, _salt, _opts = {})
     User.where(uid: key)&.first
   end
+
+  # Fetches the most recent download jobs for the user
+  def latest_downloads(limit: 10)
+    @latest_downloads ||= UserRequest.where(user_id: id).where(["completion_time > ?", 7.days.ago]).order(created_at: "DESC").limit(limit)
+  end
 end
diff --git a/app/views/welcome/_download_item.html.erb b/app/views/welcome/_download_item.html.erb
@@ -0,0 +1,13 @@
+<div class="download-item" >
+  <div class="title">
+    <%= link_to(download.request_details["project_title"], project_file_list_download_path(job_id: download.job_id, target: "_blank")) %>
+  </div>
+  <div class="details">
+    <div class="expiration">Expires in <%= time_ago_in_words(download.completion_time + 7.days)%></div>
+    <div class="size">
+      <!--
+        TODO: Need size later, see https://github.com/pulibrary/tigerdata-app/issues/1124
+      -->
+    </div>
+  </div>
+</div>